【現場学校02レポ】サービスと顧客を見据えた設計｜UIデザインの現場（松田 直樹さん）

こんにちは！
ライブ配信セミナー『現場学校02』レポート班のSカオリです。

2019年4月5日に開催された、松田 直樹さんのセッション「UIデザインの現場」のセミナーレポートをお届けします。

「UIデザインを確実なものにするための基礎的思考」というテーマで、今回はUIデザインのテクニックよりもマインド寄りのお話をしていただきました。

UI（ユーザーインターフェース）とは

UI（ユーザーインターフェース）とは
機械、特にコンピューターとその利用者（ユーザー）との間での情報をやりとりするための接点

基本的には「ユーザーが操作し、その反応を画面上に提示する、の繰り返し」がUIであり、ページを上から見ていくだけというのはUIとはあまり言いません。操作と提示の繰り返しがあるのがUIの基本的な定義になるでしょうか。

目的：このUIを使ってユーザーがどうしたいのか
対象：ユーザーが「何を」どうしたいのか
操作：「何を」をユーザー操作する（マウスであったり、タップであったり）
制御：操作によって対象を制御する
提示：制御した結果を画面に表示する

これがUIの一連の流れになります。

よいUIとは、「使いやすい」「迷わない」「直感的」「見やすい」「洗練されている」といった言葉で評価されますが、主観的であいまいです。
ではどうやって具体的に評価していくのか、というのが今回のお話の主軸になります。

UIデザインのチェックフロー

ボタンの見た目一つでも、この観点によってチェックしていくことでどんなデザインが適しているかの判断基準の一つになります。

①for human：人のためのデザインであれ

UIの設計をしている側は「このUIでわかってほしい」と思ってデザインしているが、一方ユーザー側は意識的に「わかってあげたい」と思って操作しているわけではありません。誰しも、アプリやサイトを使う際には無意識で操作しているでしょう。

無意識で操作していて、「あれ？」と引っかかったとき、違和感を感じた時に使いにくさを感じたりします。

ユーザーに寄り添ったデザインとして有名なのが
・知覚されたアフォーダンス：ユーザーに対して操作できることを知覚させる手がかりのこと。板にドアノブが付いているだけでも、ドアノブを操作できると無意識で感じさせる。ドアノブの形を見れば回すのか、押すのかわかる。ウェブでもテキストリンクボタンをボタンぽく装飾したら押せると感じさせる…といった感じ。

・メンタルモデル：ユーザーが「こうしたら、こういう結果になるだろう」という経験から予測するモデル。ドアの例でいえば、「ドアを押せば、外に出られるだろう（中に入れるだろう）」という予測。これも無意識だけど、ここで予測と違った結果になったら、ユーザーはすごくびっくりしてしまう。メンタルモデルにズレがあると、デザインした側は思ったように使われてない・ユーザー側は予想外の結果になってしまい＝使いにくいという結果になります。

このふたつがUIをデザインしていく上にとても重要で、ユーザーのメンタルモデルに合わせたデザインをしていくことで（たとえば日本人向けのサイトならボタンのラベルを英語にしないとか）使いやすい・わかりやすいUIになります。

②for user：ユーザーのためのUIデザインのセオリー

上記の知覚されたアフォーダンス、メンタルモデルは、「当たり前のこと」と思われるとおもいますが、つまりスクリーンUIとして普遍的なことであるということです。

そういった普遍的なモデルを体系化したものがiOSの「ヒューマンインターフェースガイドライン」、Googleの「マテリアルデザイン」などのガイドラインです（とても参考になるので見てみましょう！）。
これを真似れば、最低限の普遍的なアフォーダンス・メンタルモデルは担保することができます。

ただしあくまでも普遍的なものであって、私たちが制作する上では、そのサービスや作るUIによってモデルに沿ったデザインであること、そのサービスごとにモデルを育てるデザインをしなくてはなりません。

1. 「主役」を明確にする（ユーザーは何を見たいのか、主役が主役に見えるようにする）
2. 「主役」はひとかたまりにする（商品画像と購入ボタンをひとかたまりにし、説明は脇役）
3. 「主役」は脇役より目立たせる（見出しよりアクションボタンが主役）
4. ラベルは行動を明示する（ボタンの中のテキストは具体的アクションにする。「OK／キャンセル」ではなく、「参加する／参加しない」など。また、否定（戻る）は左、肯定（進む）は右に配置する。）
5. バイアスを与える（お気に入り機能などで中身が空の状態から、メンタルモデルを保管してあげる）
6. モーダルとモードレス（モーダル＝専用モードになっているの意味。モーダルウィンドウを使うときは一本道であるときは有用だが、ユーザーがシステムを制御できずシステムの状態を知ることができないのでなるべくモードレスであるべき）

③for customer：「顧客」の行動に最適化する

顧客（ユーザー）はUIを触るためにそのサービスを使っているのではなく、サービスを使うためにUIを触っている。
一見当然のことですが、デザインをしているとつい忘れがちになってしまうこととのこと。

「顧客はサービスを使っている」ので、まずはそのサービスのビジネスモデルを理解することが大事です。

ビジネス要件：どうマネタイズするか
システム要件：サーバー環境・フロントエンド実装
ユーザー要件：アフォーダンス・メンタルモデル

この3つの要件のうち、今まで説明されていたようなセオリーが通用するのはシステム要件、ユーザー要件の部分になります。また、デザイナーはユーザー要件ばかりを見がちになります。
しかし、本当はビジネス要件を含めたすべてを理解しておくべきです。それが顧客が求めている要件なので、ガイドラインに沿ったUIのセオリーだけでデザインしていると、顧客が求めている使い勝手とは違ったものになってしまうことがあります。

サービスとユーザーの双方を見据えた設計をすることがUIデザインの考えなくてはならないところですね。

さきほどガイドラインに沿えば「最低限の普遍的なアフォーダンス・メンタルモデルは担保することができる」と言いましたが、それさえあればいいUIになるというわけではなく、普遍的なアフォーダンス・メンタルモデルが欠けていても、顧客の要件が満たせていることが重要です。
ユーザーではない誰が見てもわかるものではなく、そのサービスを使う顧客が何を制御したいのか、ということを見ないといけないんですね。

デザインレビューのすれ違い

クライアントとデザイナーの間で主張が異なって話が噛み合わないことがありますが、何を良くするためのレビューなのかを明確にすることがまず必要です。
往々にして、クライアントからのレビューは顧客視点、デザイナーはUIセオリー視点で、異なる視点で見ていることが多いです。デザイナーから見て、「それでは無駄が多い」と思っていても、顧客にとっては必要だからそういったレビューをされているので、これも顧客のビジネス要件によってセオリーに沿ってなくても必要なデザインである…ということですね。

ユーザーの行動を見る＝行動観察などして初めて気づくこともあり、一見出来上がったデザインがよくできていても、実際に使う人がどんな行動をしたかで改善していく。最初から正解のUIデザインを作ることは難しいので改善が必要です。

ものすごいユーザー数を抱えてるFacebookやYoutubeだとか、大手のサービス、アプリでもUIが細かく変わったり日々改善しているものですよね（ある日突然変わってびっくりしますけど笑）。UIはユーザーの行動観察によってより良くしていくものであるということ。PCの前でデザインしているだけでなく実際の使っている様子などをテストするなどがUIデザインでは欠かせないなぁと思いました。

最後に質問コーナー

まずはわたしの質問から…

A. 「顧客に最適化しているか」という視点で、自分にとっては使いにくいなと思っても、そのサービスの顧客に最適化しているからこういうUIになってるんだなと考える。「このUIがいいな」より「このサービスのUIのここはいいな」という目で見るようにしたい。

これちょっとあ〜！ってなりました。今回の講義のお話そのものですが、自分から見て「ん？」っていうUIでも、そのサービスの利用者にとって最適化されているベストなUIになっているんだ…という視点。すごい大事です…

A. iOSとAndroidでアイコン等のガイドラインが異なるので、完全にガイドラインを合わせると両方作ることに…。プロジェクト単位、ターゲットによって判断するが、どちらかに寄せるとしたら、日本ではiOSシェア率多いので、iOSに寄せる。

UIデザインはデザインといっても見た目の装飾の話だけではなく、情報設計やプランニングにも関わるもの。制作の広域にわたるお仕事なんだなぁと思いました。
わたしはUIと言ってもサイトデザインでのちょっとした部分ぐらいでしか意識することがなくごりごりのUIデザインに関わったことがないのですが、難しそうだけどやって見たいなという気持ちがすごくわきました！

『現場学校02』を体験しましょう！

ライブ配信セミナー『現場学校02』は、生放送のライブ配信を見逃した場合でも、期間中「アーカイブ視聴」ができます！

参加チケットはこちらから
https://gbgk.jp/