デザイン素人に贈る、UIディレクション10個のポイント
トレタ代表の中村です。
年末ですね。僭越ながら、今年もアドベントカレンダーの大トリを務めさせていただきます。
今年は何を書こうかなあってずっと悩んでいたのですが、毎年「想い」やら「ビジョン」「意義」やら、同じようなことばかり書いていても芸がないので、今年は趣向を変えてみたいと思います。
テーマは実務方向に振りきって「非デザイナーはどうやってデザイナーにUIディレクションをしたらいいのか」をお題に選びました。ビジネスサイドなど、デザイナーではない人たち向けの記事です。
僕はもともとデザイナーとしての専門的な訓練は受けていないのですが、それでもUI/UXにこだわったサービスを作ろうとすると、どうしてもデザイナーの皆さんとの議論や相談、互いの考えをすり合わせることから避けられなくなります。時には対立することもありますから、このコミュニケーションは本当に大事。
とはいえ経験や知識が乏しいと、デザイナーと会話が噛み合いません。デザイナーと同じ言語を持っていない以上、「主観」つまり好き嫌いという観点でデザイナーと議論せざるを得ないわけですが、それを続けている限りは優れたUI/UXは生まれません。
じゃあどうするか。最終的に僕がたどり着いた結論は、デザインとは、9割がロジックで1割が感性や創造性だということ。(もちろんその1割はすごく難易度が高いし、それこそがデザインの付加価値を何倍にも高めるのではありますが)
だから、僕らは感性や想像力のところはプロにお任せして、デザインの9割を占めるロジックの部分をきちんと言語化し相手に伝えることができればいいのです。その方法なら、審美眼のない人でも一定以上のディレクションができるはずです。
ということで、そのロジックの部分について、これまで自分なりに試行錯誤して学んできたことを自分向けに書き記してきましたので、それを今回メモ帳から発掘。一部加筆修正して公開することにしました。
ということで、早速メモの内容に行ってみましょー！
一覧性と可読性の最適なバランスを追求する
紙に対するスマホやタブレットの最大のディスアドバンテージは、画面の小ささに起因する一覧性の限界にある。紙の最大の強みはパッとひと目で全体が見渡せることだが、スマートデバイスではそれができない。そして全体を把握できないことは、人間にとってストレスになる。そこで一覧性を高くすると見晴らしが良くなって安心感が生まれる一方で、今度は細部が見えづらい、操作しづらいという別のストレスが生まれてしまう。よって、デバイスの物理的限界（＝限られた画面サイズ）の中で、一覧性と可読性のバランスをいかに最適化するかがUIのキモ
一覧性と可読性はトレードオフであり、そのバランスは定量化しづらい「秘伝のタレ」になりうる。よってそのバランスのとり方こそがサービスの優位性になる。ユーザーの使いやすさにも直結するし、言語化しづらい＝模倣しづらい強みとなる。文字の大きさ、色、行間など
文字は自分たちの考える「最適」よりも大きめにする。慣れれば慣れるほど、プロになればなるほど文字は小さくしたくなるが、一般的なユーザーからすると、プロにとって気持ち良いサイズは大抵「小さすぎ」であることが多いから、自分たちにとっての当たり前を疑っておく（これも一覧性と可読性に大きく影響する要素になる）
一覧性を極限まで高めるため、UIパーツは一つ一つ徹底的にサイズを吟味し、限られたスペースを有効活用するように努力する。使いやすさを損なわない範囲でどこまでサイズを切り詰められるか。一覧性のために、ボタンサイズをどこまで犠牲にできるか。ボタンを並べたときに押し間違えが発生しない下限はどこか。ボタンとタップ領域を一致させるのか、それとも多少外側まで領域を広げるのか。1ピクセル単位で磨き込む
その画面でできることは全て「明示」する。機能を隠してはいけない
「そのボタンを押すと何が起きるか」を、誰でも明確にわかるように表現することは業務ツールにおいて極めて重要
ユーザーは学習してくれるというのは幻想。ユーザーは基本的に学習しないので、その前提でアプリを作る。学習してくれることを前提にUIを設計するのは作る側の甘えであり、本来開発する側が果たすべき責任をユーザーに転嫁しているだけ。だから学習しなくても使えるものを作る
初心者が安心して使えることは何より優先される。絶対に上級者を優先して設計してはいけない。上級者を優先すると、多くの人は使えるようになる前に離脱する。これまでの業務ツールはごく一部の人たちしか使えないものだったから、ITはいつまでも普及しなかった。さらに、それを使える一握りの人は職人化し、新しい特殊な専門職（たとえばレセプションに張り付く予約職人）を作ることにすらなってしまった。外食産業がITで変わることのできなかった一因はここにある。だから我々はそれを良しとしない。我々が理想に掲げる「これからの業務ツール」は店舗の全スタッフが使えることにこそ意味があるのだから、基準は一番リテラシーの低い人に揃えねばならない
よって初心者に「このボタンを押したら何が起きるの？」と不安にさせたら負け。自信のないユーザーは、何が起きるかわからないボタンは絶対に押さない。結果その機能は使われなくなり、ツールは活用されなくなる
全ての機能を画面内に明示できないとしたら、それは機能を詰め込みすぎているサインかもしれない。その場合は遷移が増えてもいいので画面をわける
ユーザーがアイコンで理解できると思ったら大間違い。基本的に、機能は「文字」で表示するべき。アイコンだと解釈の幅が大きくなり誤操作が生まれるが、テキストであれば絶対に利用者の理解はぶれない。機能の説明も、多少冗長になったとしても誰でも理解できるように丁寧に書く。ただ、熟練してくると文字列ではなく「絵」で判断するようになるので、テキストだけだと上級者の生産性が下がってしまう。よってテキストとアイコンの組み合わせで機能を明示するのが基本
ホワイトスペースを怖がらない
画面にスペースが空くと何かで埋めたくなる誘惑に駆られるが、それに負けていはいけない。その誘惑は複雑性へと続いている
画面サイズが限られている制約と戦いつつ、しかしむしろホワイトスペースを積極的に作るスタンスが重要。これは極めて難易度が高いからこそ、成功したときの価値はとても大きい
ホワイトスペースが多ければ多いほど、重要箇所にアテンションが集まるため、その画面で何ができるか／何をすべきかが明確になり、ユーザーは安心する
効率より冗長を選ぶ
一つの画面に機能を詰め込みすぎない。一つの画面で何でもかんでもできるようにしようという発想は、リテラシーの高い人、そして実装の工数を減らそうとする開発者の都合でしかない
できるだけ画面はシンプルにし、その分画面を複数に分け冗長にすると、結果画面遷移の多いUIになる。しかしリテラシーの低い人が使う可能性の高い業務ツールはそれでいい。その代わり、激しい連打に耐えうる、かつ反応速度の早い実装を目指す。上級者に対しては、操作体系を増やすのではなく、基本的にアプリの安定性や反応速度でニーズを満たすことを基本とする
よってボタン連打とかで落ちるようなバグは徹底的に排除する
大切なのは「求める機能に【最短時間】でたどり着くこと」であって、「【最小操作数】でたどり着くこと」ではない。どんなにタップ数を少なくできたとしても、一つの操作ごとに一瞬の躊躇や思考が入るようなインターフェイスは絶対NG
ユーザーにとっては、タップ数の多寡ではなく、操作のたびにいちいち考えないといけないことが最大のストレスになる
標準ルールからの逸脱を許す
iOSの標準ルールは世の中の常識ではない。当社サービスのユーザーにとっても常識ではない
そしてiOSは完璧ではない
効率を高めたり、学習効果を高めることができる限りは、標準ガイドラインに準拠する。また生産性に寄与しない部分でもガイドラインに沿うべき。しかし、標準ガイドラインに沿うことでユーザーの迷いを生んだり、生産性を損ないかねないと判断したら、躊躇なくガイドラインからの逸脱を許容し、人間の認知に自然な方法論を選ぶ
たとえば入力フォーム。標準ガイドラインには上からスクロールして入力を進め、一番下まで入力を完了したら、画面右上のボタンで「次」に進むというインターフェイスがあるが、これが本当にユーザーの迷いを産まないのかという疑問を持つべき。上から下にユーザーを誘導して、それが終わったらいきなり右上に戻って次の画面に進むボタンを押せというのは、本来の人間の自然な視線誘導ではない（つまりユーザーがボタンを探す手間や、この画面では右上で進むのだという学習が必要になるので、そんなUIにするくらいなら最下部に「次へ」のボタンを配置したほうがいい）
UIの一貫性を死守する
画面ごとにインターフェイスやUIルール、トンマナを変えてはいけない
画面の見た目が変わるだけで、ユーザーは抵抗感を感じる
一つの画面が使えたら、自動的にどの画面でも操作できるようにすることが、結果として学習効率を最大化する
よって、画面ごとにインターフェイスを個別最適化しすぎない。あくまでも一貫したUIを保つ。これはデザインや色だけでなく、フォントサイズや余白などに至るまで徹底する。画面ごとにフォントサイズが異なるだけで、ユーザーは違和感を感じ、混乱する
メリハリを意識する
例えばユーザーは、誰に教わらなくても「大きく書かれていること＝重要」と認識する。逆また真。よって、それをうまく利用する
文字の大きさはアプリ内では一定、一貫性を保ちながら、重要な機能は思い切って大きく、重要度の低いものは小さく表示することで、ユーザーの迷いや学習コストを最小化する
この類のメリハリをうまく利用することが「このアプリは使いやすい」という認識につながる
行間の使い方や色の使い方も同じ。ブランドカラーがなんであれ、人間の本能に忠実に、注意喚起色は注意喚起色として使うべき
ただし、単純に大きくすればいいって話でもなくて、大きくしすぎると逆に見てくれなくなるという問題もある。たとえば本を読んでいるとき、各章のタイトルを読んでいない人って結構いるのでは。つまり、単に大きくするのではなく、前述のホワイトスペースなどとうまく組み合わせて視線誘導することも大事
ロジック構造は絶対に守る
アプリの階層構造は絶対に守る
ユーザーは直感的に使っているようだが、実は無意識に階層構造を意識して使っている
よって、どんなに操作の効率化につながると思っても、階層構造を無視した遷移はNG。階層構造を無視したページのジャンプなどをさせると、ユーザーは必ず迷子になる。この迷う感じがユーザーのストレスになり、使いづらいという印象に繋がる
また、ボタンの並びにも配慮する。学習コストを最小にするには共通性の高い機能同士をできるだけ集めて並べるべきだが、しかし考えなしに近い機能を寄せてしまうと、そのボタン同士の間で誤操作が生まれてしまう。似たボタン同士を集めながら、そのボタン間の押し間違いを防ぐための色や形、サイズ、間隔などを工夫することも大事
画像とテキストの比率を最適化する（特にモバイルオーダー）
デジタルメニューでシズルを訴えたい場合は、デバイスの画面に占める画像とテキストの分量を最適化することが大事
たとえば、画面の半分以上をテキストが占領してしまうと、パッと見のシズルが失われ、「業務ツール感」「カタログ感」の高い、味気ないメニューになる。逆に画面の7割以上が画像になると、メニューとして魅力的な印象を与えることができるようになる
以上を踏まえると、スマホ用のメニュー画面をデザインする際は、料理ジャンルのタブなどのUIツールや、料理名のテキスト領域などをいかに最小限にするかが非常に大事
使いやすくしようとするとどうしてもUIツールを大きくしたり、一等地に置きたくなるが、それはメニューのシズルとのトレードオフになることを理解する
また、料理名をできるだけ短くすることも大事。今まで、レストランのメニュー名はどんどん長くなる傾向が合ったが、写真と組み合わせる前提でできるだけ短くわかりやすい名称に変更することも必要（という前提で、デザインと運用の認識のすり合わせが大事）
丁寧に作る
ユーザーはデザインの素人だ。だから僕らがどれだけ細かいところにこだわったとしても、そのこだわり一つ一つを正しく理解して評価してくれることはない
しかし一方で、ユーザーは「きちんと丁寧に作られたもの」は感覚としてきちんと理解してくれる。「なんかわからないけど使いやすい」「どうしてかわからないけどすごく気持ちいい」「理由はわからないけど、とにかく良いアプリだ」…… きちんと作り込んだものは、ある種の「すごみ」や「迫力」「気持ちよさ」となってユーザーに伝わるのだ。一方で手を抜いて作ったものは一発で見抜くので、絶対に油断できない
だから隅々まで手を抜かず、丁寧に丁寧に作り込む。ボタンの角のR、パーツのサイズや揃え方、余白 (ホワイトスペース)、行間、色使い。一つ一つに必ず意図を持ち、神は細部に宿ると肝に銘じて作る。雑に作ったものは必ず見抜かれると心得る
ちなみにジョブズが、家具の裏までこだわって作った父の影響を受けて、Macの筐体の中の基盤の並び方までこだわって開発したことは有名だが、これは決して無駄ではなくて、そうやってユーザーが見ることのない裏側まで手を抜かず作り込むことは、結果としてユーザーが触れる表の部分の品質を圧倒的に引き上げるんだろうなと思う
ということで、僕のメモはここまで。
プロのデザイナーの皆さんからしたら当たり前すぎることかもしれないし、僕のメモにも偏りや思い込みがあったり、大事なポイントすべてを網羅できているわけではありませんが、でもデザインの素人がデザイナーと会話するにあたって、だいたいこのくらいのことが頭に入っているだけでも相当変わると思います。
ちなみにトレタでは、こういう考え方がすでに僕とデザインチームの間では一定レベルで共通認識になっていて、「ひとしさんはこういうところにこだわるからね」と先回りしてデザインをしてくれるので、ほとんどこういうツッコミを入れなくてもよい状態になっています。ほんとありがたい。そして上がってくる作品も最初から満足度が高い。こだわりポイントがチームの文化みたいになると、お互いにハッピーになるし、いいサービスを作りやすくなると思います。
それにしても、改めてこのメモを読み返してみると、デザイン（特にUIデザイン）というのは、デザインをする対象物そのものではなく、その対象物の向こうにいる、それを使う「人」に視点を向けることが本質なんだなあと再認識します。人は世界をどう捉え、どう感じ、どう行動するのか。人の認知のパターンを理解し、人の気持ちを理解し、ユーザーになりきって考え、そして時にはユーザーとしての自分自身の内面を深く考察していく。
デザインはユーザーへの思いやりであり、おもてなし。サービスを作る側のスタンスが一番現れるのはデザインなのでしょう。そしてそんな姿勢を大切にしながら地道な作業を積み重ねていくことで、少しずつユーザーの気持ちや感覚に寄り添った使いやすいUIが生まれるのだろうなと思います。
デザインの素人が偉そうに言うのも憚られますが、改めてデザインって面白いし奥が深いですね。これからは機能ではなくデザインが価値を生む時代になるというのは、本当にその通りだなと思います。デザイナーと一緒に仕事をすることは、ビジネスサイドの人間にとっても本当に学びしかありません。
ということで、このメモが一人でも多くの非デザイナーの皆さんに届いて、よりよいアプリが増え、よりよい世界になっていきますように！！
最後に。
20年の遅れを取り戻すべく急速にDXが進む外食産業は、デザイナーにとっても非デザイナーにとっても、たくさんの刺激的なチャレンジができるエキサイティングな産業領域だと思っています！テクノロジーが解決できる課題も無限にあります！
仲間も全力で募集していますので、気軽に雑談しに来てくださいね！
この記事が気に入ったらサポートをしてみませんか？