UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
Post on:2023年4月13日
sponsors
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。
長い記事なので、時間がある時にゆっくりご覧ください。
16 little UI design rules that make a big impact
by Adham Dannaway
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 1. スペースを利用して関連要素をグループ化する
- 2. 一貫性を保つ
- 3. 見た目が似ている要素は同じように機能するようにする
- 4. 明確なビジュアルヒエラルキーを作成する
- 5. 不要なスタイルを削除する
- 6. カラーは意図的に使用する
- 7. インターフェイス要素のコントラスト比が3:1であることを確認する
- 8. テキストのコントラスト比が4.5:1であることを確認する
- 9. 指標としてカラーだけに頼らない
- 10. サンセリフ書体を使うのは1つにする
- 11. 背の高い小文字の書体を使用する
- 12. 大文字の使用は制限する
- 13. ウェイトはレギュラーとボールドのみを使用する
- 14. テキストにピュアブラックは避ける
- 15. テキストは左揃えにする
- 16. 本文のline-heightは1.5以上にする
- 17. UIデザイン改善の完了
はじめに
ユーザーインターフェイスのデザインは難しいものです。
レイアウト、スペース、タイポグラフィ、カラーなど、多くの選択肢の中からデザインを決定することは非常に困難です。そこに、ユーザビリティやアクセシビリティ、心理学が加わると、さらに難しくなります。
しかし、いくつかのルールを知っていれば、UIデザインはそれほど難しいものではありません。プロダクトデザイナーとして20年近く働いてきた私はビジュアルとインタラクションのデザインのほとんどが、論理的なルールによって支配されていることに気がつきました。芸術的な才能や魔法のような直感ではありません。
このシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。論理的なルールがなければ、見栄えがよくなるまで直感的に物事を動かしているだけになってしまいます。
私はルールやロジックが大好きですが、デザインの決定が白黒はっきりすることはほとんどありません。厳密に従わなければならないルールではなく、ほとんどの場合にうまく機能するガイドラインとして以下のアドバイスをご覧ください。
学ぶためにもっとも簡単な方法は、実践することです。
論理的なルールを使用して、UIデザインを解決してみましょう
下記のUIデザインは、不動産賃貸アプリの物件詳細ページです。1つ目は元のデザイン、2つ目はシンプルで論理的なルールを適用した結果です。
左: 元のUIデザイン、右: 改善したUIデザイン
ビジュアルデザインやインタラクションデザインの経験があまりなくても、元のUIデザインがごちゃごちゃしていてい、複雑で使いにくいと感じるかもしれません。これはユーザビリティにリスクをもたらす問題のあるデザインのディテールが多く含まれているためです。もしかしたら、すでにいくつかお気づきかもしれません。
論理的なルールまたはガイドラインを使用して、元のUIデザインにある問題を1つずつ改善します。
1. スペースを利用して関連要素をグループ化する
関連する情報を小さな要素に分割することで、インターフェイスを構造化し、整理することができます。これにより、ユーザーはより速くより簡単に理解し、記憶できるようになります。
関連する要素は、以下の方法でグループ化することができます。
- 関連する要素を同じコンテナに配置する
- 関連する要素をスペースに近づける
- 関連する要素を似ているように見せる
- 関連する要素をラインに揃える
コンテナを使用することは、インターフェイス要素をグループ化するためのもっとも強力な視覚的合図ですが、不必要な混乱を招く可能性があります。ほかのグループ化の方法を使用できないか検討してください。ほかの方法はより繊細で、デザインを簡素化するのにも役立ちます。
特にスペースを使用するのは、関連する要素をグループ化するために非常に効果的でシンプルな方法です。また、これらの方法は組み合わせることで、グループ化をより明確にすることもできます。
元のUIデザインでは、コンテンツとコンテンツの間にスペースが不足しているため、デザインが乱雑になり、理解しにくくなっています。スペースを増やすことで、コンテンツが明確にグループ化され、より整理されて理解しやすくなります。
左: 元のUIデザイン、右: 改善したUIデザイン
2. 一貫性を保つ
UIデザインの一貫性とは、類似した要素の外観と動作が類似していることを意味します。これはプロダクトでもほかの確率されたプロダクトと比較した場合でも当てはまります。この予測可能な機能により、ユーザーは物事の仕組みを学び続ける必要がなくなるため、使いやすさが向上し、エラーが減少します。
元のUIデザインに使用されているアイコンを見ると、塗りつぶされたものとそうでないものがあるため、アイコンのスタイルに一貫性がありません。一般的に塗りつぶされたアイコンは要素が選択されていることを示すことが多いため、一部のユーザーは混乱する可能性があります。すべてのアイコンを2ptのストロークと丸みを帯びた角でアウトライン化すると、一貫性が向上し、すべてのアイコンに同様の視覚的なウェイトが与えられます。
上: 元のUIデザイン、下: 改善したUIデザイン
またアイコンにはテキストのラベルもあり、特にスクリーンリーダー（音声や点字でインターフェイスを説明するソフト）を使用しているユーザーがアイコンの意味を理解できるようにテキストのラベルも変更します。
左: 元のUIデザイン、右: 改善したUIデザイン
3. 見た目が似ている要素は同じように機能するようにする
要素の見た目が似ていると、ユーザーはその要素が同じように機能することを期待します。そのため、同じ機能を持つ要素には、一貫した視覚的処理をするようにします。逆に、異なる機能を持つ要素には、異なる印象を与えるようにします。
元のUIデザインでは、アイコンのコンテナは「Book now」ボタンと似た視覚的スタイルを持っています。これではインタラクティブではないにもかかわらず、インタラクティブであるかのように見えてしまいます。アイコンからブルーとボタンのスタイルを削除することで、インタラクティブな要素と間違われるのを防ぐことができます。
左: 元のUIデザイン、右: 改善したUIデザイン
4. 明確なビジュアルヒエラルキーを作成する
インターフェイスに含まれる情報のすべてが同じレベルの重要度とは限りません。より重要な要素をより目立たせることで、重要性の順に情報を表示することを目指します。
重要性の順番が明確であること、つまりビジュアルヒエラルキーがあることで、ユーザーは情報を素早く読み取ることができ、興味のある情報に集中することができます。また、秩序を生み出すことで美観も改善されます。サイズ、カラー、コントラスト、スペース、ポジション、奥行きなどのバリエーションを使用して明確なビジュアルヒエラルキーを作成できます。
下記の2つは、ビジュアルヒエラルキーが明確ではないバナーと重要な要素から順に明確に表示されたバナーの例です。
ビジュアルヒエラルキーが明確ではないバナー
重要な要素から順に明確に表示されているバナー
ビジュアルヒエラルキーが明確かどうかをテストする簡単な方法は、「The Squint Test（斜視テスト）」を使用することです。目を細めてデザインを見てみてください。あるいは、スクリーンから離れたり、デザインをぼかしても構いません。そして、もっとも重要な要素は何か、何のためのインターフェイスなのか分かるかテストします。
この例で「The Squint Test（斜視テスト）」を実施してみます。
いくつかの要素が強く目立ち、注目を引くために競合していることが分かります。さらに、左下のプライマリ アクションはまったく目立っていません。
左: 元のUIデザイン、右: 全体的にぼかしたもの
一般的に、プライマリ アクションは、インターフェイス上でもっとも顕著な要素である必要があります。背景色とのコントラストとフォントのウェイトを調整すると、目的を達成するのに役立ちます。こうすることで、コントラストが低いボタンでアクセシビリティの問題も改善されます。
左: 元のUIデザイン、右: 改善したUIデザイン
改善した後は、再び「The Squint Test（斜視テスト）」を実施します。プライマリ アクションがもっとも顕著な要素になりました。
左: 元のUIデザイン、右: 改善したUIデザイン
ビジュアルヒエラルキーは明確になりましたが、改善の余地はまだあります。たとえば。本文のブロックが重要性の割にまだ目立ちすぎています。これはタイポグラフィのガイドラインを学ぶことで、ビジュアルヒエラルキーを修正するのに役立ちます。
5. 不要なスタイルを削除する
不要な情報や不要なビジュアルスタイルは、ユーザーの気を散らし、認知不可（インターフェイスを使用するために必要な脳力の量）を増加させます。不要なライン、カラー、背景、アニメーションは避けて、よりシンプルで集中できるインターフェイスを作成します。
左: 元のUIデザイン、右: 改善したUIデザイン
元のUIデザインでは、画像の周りにあるスペースとボーダーが不必要な視覚的複雑さをもたらしています。情報を伝えたり、要素をまとめたりするのに必要なものではないので、デザインをシンプルにするために削除します。
左: 元のUIデザイン、右: 改善したUIデザイン
6. カラーは意図的に使用する
カラーは控えめに、そして目的を持って使用します。混乱を招いたり、気を散らす可能性があるため、装飾のために純粋にカラーを使用するのはなるべく避けてください。まずは白と黒から始め、意味を伝える部分にカラーを取り入れます。
シンプルで効果的な方法は、テキストリンクやボタンなどのインタラクティブな要素にブランドカラーを適用することです。これにより、インタラクティブなものとそうでないものをユーザーに伝えることができます。インタラクティブではない要素にブランドカラーを使用するのはなるべく使用しないようにしてください。
すでにインタラクティブであることを示す視覚的な手がかりを持っているものもあるので、すべてのインタラクティブな要素にブランドカラーを適用する必要はありません。たとえば、下記のようなカードでは、ブルーのリンクがあってもなくても、インタラクティブであることが分かります。
ブルーのテキストリンクがあってもなくても、インタラクティブであることが分かる
元のUIデザインでは、ブルーの見出しは見た目は良いかもしれませんが、テキストがインタラクティブに見えるようになっています。ユーザーの混乱を避けるために、見出しからブルーを削除します。この見出しはインタラクティブな要素ではありません。
またスターもインタラクティブな要素ではないため、ブルーを削除します。これにより何がインタラクティブなのか、何がインタラクティブではないのかがより分かりやすくなります。
左: 元のUIデザイン、右: 改善したUIデザイン
7. インターフェイス要素のコントラスト比が3:1であることを確認する
コントラストとは、2色の間に知覚される明るさの差を示す尺度です。1:1から21:1までの比率で表されます。たとえば、黒い背景に黒いテキストは1:1のコントラスト比でもっとも低く、白い背景に黒いテキストは21:1のコントラスト比でもっとも高くなります。異なる色間のコントラスト比を測定するのに役立つオンラインツールもたくさんあります。
視覚障害者がインターフェースの詳細をはっきりと見ることができるようにするには、少なくともWCAG 2.1のレベルAAを満たす必要があります。つまり、フォームのフィールドやボタンなどのインターフェイス要素には少なくとも3:1のコントラスト比が必要であることを意味します。
元のUIデザインでは、矢印アイコンのコントラストが低すぎます。アイコンにシャドウを追加し、画像の上1/3にグラデーションをかけることで、アイコンのコントラスト比を3:1にします。
左: 元のUIデザイン、右: 改善したUIデザイン
プライマリ アクションのコントラスト比も低いです。ビジュアルヒエラルキーを改善したときに修正しましたが、ここでも言及する価値があります。
左: 元のUIデザイン、右: 改善したUIデザイン
ボタンのコントラスト比が低いときのリスクは、弱視の人にはボタンの形が見えないので、ボタンと認識しない可能性があることです。ボタンのコントラスト比を3:1以上にすることで、ボタンにアクセスできるようになり、同時にビジュアルヒエラルキーも改善されます。
アイコンとボタンのコントラスト比を3:1以上にすると、下記のようになります。少しずつですが、まだまだ修正すべき問題は残っています。
左: 元のUIデザイン、右: 改善したUIデザイン
8. テキストのコントラスト比が4.5:1であることを確認する
視覚障害者がテキストをはっきりと読めるようにするためには、次のWCAG 2.1のレベルAAを満たす必要があります。
- 小さなテキスト（18px以下）は、4.5:1以上のコントラストが必要です。
- 大きなテキスト (太字で18px以上、通常で24px以上) は、3:1以上のコントラストが必要です。
元のUIデザインでは、写真画像の上のテキストのコントラストが不十分です。グレーのコンテナの不透明度を上げ、テキストシャドウを追加することで、コントラスト比を4.5:1以上に高めます。
左: 元のUIデザイン、右: 改善したUIデザイン
場所のテキストもコントラストが低すぎます。文字も細いので、さらに読みにくくなっています。濃いグレーを使用することで、より分かりやすいテキストになります。
左: 元のUIデザイン、右: 改善したUIデザイン
9. 指標としてカラーだけに頼らない
色覚障害にはさまざまな種類があり、主に男性に発症すると言われています。一般的に、色覚異常の人は赤と緑の区別がつきにくい（赤緑色覚異常）のですが、中には色は判別できない人もいます。
色覚異常の人がインターフェイスにアクセスできるようにするには、色だけに頼って意味を伝えたり、色覚的な要素を区別することができません。インターフェイス要素を区別するために、追加の視覚的な手がかりを追加する必要があります。
元のUIデザインでは、「reviews」のテキストにブルーが使用されており、リンクであることを表しています。しかし、色を削除すると、リンクテキストは他のテキストと同じように見えてしまうため、色覚障害の人はそれがリンクであることを認識できません。リンクテキストに下線を引くことで、色がなくても他のテキストと明確に区別することができます。
左: 元のUIデザイン、右: 改善したUIデザイン
10. サンセリフ書体を使うのは1つにする
書体（Typeface）とは、類似したスタイルまたは美学を持つ関連するフォントのセットです。Helveticaは書体の一例です。フォント（Font）は書体のバリエーションで、ウェイトやサイズなどです。たとえば、Helvetica boldとHelvetica regularは、Helvetica書体の中の2つの異なるフォントです。
インターフェイスのデザインにおいては、一般的にもっとも読みやすく、ニュートラルでシンプルな書体であるため、単一のサンセリフ書体を使用することがもっとも安全です。
元のUIデザインでは、見出しにセリフ書体が使用されていますが、これは少し読みにくく、人によっては気が散ってしまうかもしれません。また、個性的な書体なので、使用している画像には合わないかもしれません。サンセリフ書体に変更してシンプルにすることで、ユーザビリティと美観を向上させることができます。
上: 元のUIデザイン、下: 改善したUIデザイン
左: 元のUIデザイン、右: 改善したUIデザイン
11. 背の高い小文字の書体を使用する
背の高い小文字と文字間隔が広い書体は、一般的に小さいサイズでも読みやすいです。書体の小文字の高さは、「x-height」と呼ばれています。
書体によるx-heightの比較
元のUIデザインでは、Gill Sansという書体を使用していますが、この書体はx-heightが小さいです。Latoのようにx-heightが大きい書体に変更することで、読みやすさを向上させることができます。
左: 元のUIデザイン、右: 改善したUIデザイン
書体をGill SansからLatoに変更すると、下記のようになります。
左: 元のUIデザイン、右: 改善したUIデザイン
12. 大文字の使用は制限する
ユーザーに向かって叫ぶのでなければ、大文字を使用する正当な理由はあまりありません。うるさくて、読みにくいだけです。
文字を読むときは、一文字一文字を見るのではなく、単語の形を見ます。形を見え場、その単語をより速く認識することができます。大文字を使用した単語はすべて長方形の形をしているため、各文字を1つずつ読まなければなりません。
元のUIデザインでは、場所のテキストに大文字を使用しています。これを最初の文字と固有名詞のみ大文字にすることで、読みやすさを向上させることができます。
左: 元のUIデザイン、右: 改善したUIデザイン
左: 元のUIデザイン、右: 改善したUIデザイン
13. ウェイトはレギュラーとボールドのみを使用する
書体にたくさんのウェイトがあるからといって、すべてのウェイトをデザインで使用する必要はありません。多くの異なるウェイトのフォントを使用してしまうと、インターフェイスにノイズや乱雑さを与えることになります。また、フォントのウェイトを一貫して使用することも難しくなります。
レギュラー（標準）とボールド（太字）のウェイトのみを使用し、デザインシステムをシンプルで簡潔に保ちます。
ウェイトはレギュラーとボールドのみを使用する
ウェイトに関するアドバイス。
- 見出しにはボールドを使用し、強調する。
- 他の小さなテキストには、レギュラーを使用する。
- もし非常に細いまたは太いフォントを使用する場合は、小さいサイズでは読みにくくなるため、見出しや大きなテキストに使用する。
元のUIデザインでは、場所のテキストにライトのウェイトを使用しています。コントラスト比は4.5:1を超えていますが、細い文字は人によっては読みにくいかもしれません。ウェイトをレギュラーにすることで、可読性が向上し、デザインもシンプルになります。
上: 元のUIデザイン、下: 改善したUIデザイン
左: 元のUIデザイン、右: 改善したUIデザイン
14. テキストにピュアブラックは避ける
UIデザインでは、白に対して非常に高いコントラストを持つピュアブラックを避けるのが一般的にもっとも安全です。この高いコントラストは、テキストを読むときに目がチカチカし、眼精疲労を起こす可能性があります。
黒は色の明るさが0％で、白は100％です。色の明るさの差が大きいと、目の働きが悪くなります。白に対してピュアブラックは避け、ダークグレーを選ぶのがもっとも安全です。
元のUIデザインでは、複数の要素にピュアブラックが使用されています。これをダークグレーにすることで、読みやすさが向上します。前述のビジュアルヒエラルキーで場所のテキストが目立ちすぎていると指摘しました。インターフェイスの要素が重要な順に表示されるようにするには、場所のテキストを明るいグレーにして目立たなくします。
左: 元のUIデザイン、右: 改善したUIデザイン
15. テキストは左揃えにする
英語は左から右へ、下へ向かってF字型に読みます。そのため、読みやすさを考慮すると、テキストは左揃えにするのがベストです。長い本文テキストの場合、中央揃えや両端揃えのテキストは避けた方が安全です。特に認知障害のある人にとっては、読みにくくなってしまいます。
中央揃えはすばやく読むことができるため、見出しや短いテキストに有効です。ただし、中央揃えは各行の始点が常に異なるため、長い本文テキストだと読みにくくなります。これは各行の始点を見つけるために、目が一生懸命に働くからです。
左: 元のUIデザイン、右: 改善したUIデザイン
元のUIデザインでは、物件説明のテキストが中央揃えになっています。左揃えにすることで読みやすさが向上し、その上の左揃えのテキストとも一貫性が保たれます。
左: 元のUIデザイン、右: 改善したUIデザイン
16. 本文のline-heightは1.5以上にする
line-height（行の高さ）とは、2行のテキスト間の垂直方向の距離です。行間のスペースは、ユーザーが同じ行のテキストを読み間違えることを防ぐのに役立ちます。また、見た目も読みやすくなり、快適です。
アクセシビリティとリーダビリティのために、特に長い本文テキストではline-height（行の高さ）を1.5（150％）にすることをお勧めします。一般的には、line-height（行の高さ）を1.5-2の間にするとうまく機能します。
line-height（行の高さ）とは
元のUIデザインでは、line-height: 1;を使用しているので、line-height: 1.6;に増やすと、読みやすさが向上します。
左: 元のUIデザイン、右: 改善したUIデザイン
17. UIデザイン改善の完了
一つひとつはシンプルでありながら、強力なUIデザインのガイドラインを使用することで、元のUIデザインの多くの問題をすばやく発見し、改善することができました。
左: 元のUIデザイン、右: 改善したUIデザイン
UIデザインはそれほど難しいものではないことが実感できたと思います。それは魔法のような芸術ではなく、多くはここで解説したような論理的なルールとガイドラインから構成されています。主観的な意見ではなく、客観的な論理を用いることで、より直感的でアクセシブルで美しいインターフェイスをデザインすることができます。
より実践的なUIデザインのガイドライン
この記事で解説したのは、私が書いたUI design bookの一部です。UI design bookには100以上のロジック主導のデザインガイドラインを解説しています。もし気になったら、本をチェックしてみてください。
UI design book
※無料版もあり、3つのガイドラインが読めます。
sponsors
