ユーザーインターフェース（UI）をデザインするのは決して簡単な作業ではありません。レイアウト、余白、タイポグラフィ、配色など、選択肢が無数にあるため、圧倒されてしまうのも無理はありません。さらに、ユーザビリティ、アクセシビリティ、人間の心理学などの要素を加えると、その難しさは一層増します。
ですが、良い知らせがあります。UIデザインはそこまで複雑に感じる必要はないのです。20年以上にわたるプロダクトデザイナーとしての経験から、私の視覚的およびインタラクションデザインにおける判断の大半は、明確で論理的なガイドラインに基づいていることがわかりました。芸術的な直感や天才的なひらめきではなく、単純なルールに基づいています。
もちろん、創造的な感性も役立ちますが、インターフェースを直感的・包括的・視覚的に魅力あるものにするための多くの要素は、十分に学ぶことができます。体系立ったアプローチを取ることで、賢明かつ一貫性のあるデザイン判断が可能になります。これがなければ、見た目を“正しく”仕上げるために試行錯誤を繰り返すしかありません。
そして、最も良い学び方は「実践すること」です。では、実際的なUIデザインのヒントを見ていきましょう。
例を使ってUIデザインを改善するヒント
以下のデザインは、コミュニティブログプラットフォームのプロフィールページを想定したものです。最初の画像が元のデザインで、2番目が論理に基づいたUIデザインのヒントを適用した結果です。
UIデザインの経験があまりなくても、元のデザインが「なんとなく違和感がある」と感じるかもしれません。これは、ユーザビリティに悪影響を及ぼすさまざまなデザイン上の欠陥を含んでいるからです。既にいくつかの問題点に気づいた方もいらっしゃるでしょう。
ここからは、各問題に対処しながら、元のデザインを改善するプロセスを順に見ていきます。
1. 要素間のスペースは関係性に基づいて調整するべきである
インターフェースの要素間の間隔は、それらの関係性に応じて決めるべきです。より密接に関連する要素は互いに近く配置し、無関係な要素は間隔を広くとって分離します。
このようなスペーシングの活用は、情報を小さなグループに分けるための非常に強力な手法です。各グループを長方形として捉えると、インターフェースは大きな長方形の中に小さな長方形が多数ある構造であることが見えてきます。最も内側の長方形には狭いスペースを適用し、外側に向かって徐々にスペースを広げていきます。
インターフェース要素間の理想的なスペースを決定する作業は、非常に時間がかかり、ストレスにもなります。無限の組み合わせがあり、1ピクセル単位の試行錯誤になりがちです。これを回避するために、あらかじめ定義されたスペースの選択肢を用意しておくと判断が迅速になります。
たとえば、Tシャツのサイズのように簡単に分類されたスペーシングオプション（8pt刻み）を使用します。これは「8ポイントグリッド」とも呼ばれ、すべてのUI要素が8ポイントごとの縦横ガイドラインに沿って整列することになります。より繊細なインターフェースには4ポイント刻みも検討できます。
タイポグラフィのスケールと同様に、スペースはサイズが大きくなるにつれて間隔も大きくなるよう設計すべきです。これにより、より大きなUI要素にも適切な比率の間隔が確保されます。
今回の例では、エクストラスモール（8pt）およびスモール（16pt）という2種類の間隔しか使われておらず、要素の関係性にかかわらず機械的に配置されてしまっています。そのため、全体が窮屈で分かりにくい印象を与えています。関係性に応じて間隔を調整することで、情報のグルーピングが明確になり、見やすさが大きく向上します。
以下は、あらかじめ定義されたスペーシングオプションを適用する前後の比較です。
2. インターフェース要素は3:1のコントラスト比を確保すべきである
コントラストとは、2つの色の明度の差を示す尺度であり、1:1から21:1までの比率で表されます。たとえば、黒い背景に黒い文字は1:1、白い背景に黒い文字は21:1となります。コントラストを測定できるツールやFigmaプラグインは多数あり、筆者のお気に入りはWeb AIMのオンラインコントラストチェッカーとContrastプラグインです。
視覚障害のある人々にもインターフェースを見やすくするためには、WCAG 2.1のレベルAAに準拠した色のコントラストが必要です。つまり、フォームやボタンといったUI要素には、最低でも3:1のコントラスト比が求められます。
今回の例では、アイコンやボタンのコントラストが低すぎます。特にコントラストの低いボタンは、形状が視認できず、認識されない可能性があります。十分なコントラストの境界線を追加することでアクセシビリティが確保されます。また、ボタンの背景に使われていたライトグレーは削除されています。これは、無効化されたボタンと誤解されるリスクを避けるためです。アイコンのコントラストも、より濃いグレーを使用することで簡単に改善できます。
3. もっとも重要な操作にはプライマリボタンを1つだけ使うべきである
ウェブサイトやアプリの多くでは、操作の重要度に応じて3種類のボタン階層（プライマリ、セカンダリ、ターシャリ）を使い分ける必要があります。さらに、インターフェースの複雑さによっては、サイズの異なるボタンも必要になることがあります。
以下に示すボタンスタイルは一般的でアクセシブルな設計であり、色だけに依存しない明確な視覚的ヒエラルキーを提供します。唯一の正解ではありませんが、信頼性の高い選択肢です。より多くのボタンデザインのヒントも参考にするとよいでしょう。
プライマリボタンの役割は、もっとも重要なアクションを強調することです。これにより、ユーザーが次に何をすべきかを理解しやすくなります。
プライマリボタンに関するガイドラインは次の通りです：
- インターフェース上に最も重要なアクションが存在しない場合は、セカンダリまたはターシャリボタンを使用します。
- 画面上に複数のプライマリボタンを配置するのは避けます。視線が分散し、次に何をすべきか分かりにくくなるためです。
今回の例では、「フォロー」アクションが最も重要だと仮定して、それをプライマリボタンとして設定します。
4. ボタンのターゲットサイズは十分に確保すべきである
ターゲットサイズが小さいと、クリックやタップが困難になります。これは、運動機能が制限されている人や、片手でスマートフォンを操作している人にとって特に問題です。
以下のガイドラインに従って、ボタンやその他のインタラクティブ要素のターゲットサイズを適切に保ちましょう：
- ボタンのサイズは少なくとも48pt × 48ptとします。これは8ポイントグリッドに沿っており、WCAGが推奨する44pt × 44ptよりもやや大きめです。
- 頻繁に使用されるボタンはさらに大きくして、押し間違いを防ぎつつ、操作の効率を高めます。
- ボタン間は8pt以上離して、誤操作のリスクを下げます。
今回の例では、2つのボタンは既に十分なターゲットサイズを持っていますが、スペースがあるためさらに横幅を広げて操作しやすくすることができます。
5. 重要なコンテンツは視認可能な状態にしておくべきである
人は「見えないものは使わない」ものです。インタラクティブなメニューの中に要素を隠すのは、インターフェースをシンプルかつクリーンに保つうえで便利ですが、リスクもあります。一部のユーザーはその存在に気づかず、見落としてしまう可能性があるためです。
スペースに余裕があるのであれば、必要なときに重要なコンテンツや操作が見えるようにしておきましょう。
今回の例では、いくつかの操作がインタラクティブメニューの中に隠されています。確かに、これによりデザインはすっきりしますが、操作を見逃すリスクも生じます。スペースがあるため、「共有」および「ブックマーク」の操作は常に表示しておくことで、見逃しを防ぎます。
6. 大きな文字では文字間隔を狭くすべきである
大きな見出しを美しく見せるための簡単なテクニックの一つが、文字間隔（カーニング）を狭くすることです。どれだけ狭めるかはフォントやサイズによりますが、一般的にテキストが大きくなるほど間隔を詰めたほうがよくなります。
これは、多くのフォントが小さいサイズの本文用に設計されており、広めの文字間隔を持っているためです（こうしたフォントは「テキストタイプ」と呼ばれます）。一方で、大きなサイズでの使用を想定した「ディスプレイタイプ」のフォントは、最初から狭めのカーニングになっているため、調整はあまり必要ありません。
今回の例では、ユーザー名の文字間隔を調整することで、視覚的な美しさが向上しています。
7. 色だけを指標にするべきではない
意味や状態を色のみで表現するのは避けるべきです。視覚障害や色覚異常を持つユーザーにとって、色の違いだけでは判断できない可能性があるためです。インターフェース要素を区別するためには、追加の視覚的な手がかりを組み合わせて使用すべきです。
今回の例では、2箇所に改善すべき箇所があります。
記事リスト上部にある3つのタブのうち、「記事（Articles）」が選択されていることが色の違いだけで示されています。しかし、微妙な色差だけでは、視認性が低く、選択されていることが分かりにくくなります。下線を追加することで、選択中のタブが明確になります。
また、下部ナビゲーションバーにおいても、選択中のアイコンは色が若干濃くなることで示されていますが、これも不十分です。選択されているアイコンを塗りつぶすことで、明確な視認性が得られます。
8. 複数の整列方法を使用するのは避けるべきである
左揃え、右揃え、中央揃えなど、異なる整列方法を多用すると、インターフェースが複雑で散らかった印象を与えることになります。人間の目はそれぞれの揃え方に適応しようとするため、視線移動が煩雑になり、認知負荷が増大します。
1つのコンポーネント、またはインターフェースのセクション内では、整列方法を統一することによって、見た目の秩序が生まれます。
今回の例では、タブが中央揃えで配置されているのに対し、他の多くの要素は左揃えになっており、不必要な視覚的複雑さを生んでいます。タブも左揃えにすることで、デザインが整い、認知負荷が軽減されます。
9. テキストは4.5:1以上のコントラスト比を確保すべきである
視覚障害を持つユーザーがテキストを明確に読めるようにするため、テキストには以下のようなWCAG 2.1レベルAAのコントラスト要件を満たす必要があります：
- 小さいテキスト（18px以下）は最低でも4.5:1のコントラスト比が必要です。
- 大きなテキスト（ボールドで18px超またはレギュラーで24px超）は3:1以上で十分です。
今回の例では、選択されていないタブの小さいテキストのコントラストが不足しています。より濃いグレーを使うことで、必要なコントラストを確保しています。
10. コンテナを削除してインターフェースを簡素化すべきである
関連する要素を小さなグループに分けることは、インターフェースを構造化し、理解しやすくするために非常に有効です。
要素をグループ化する方法としては、以下の4つが挙げられます：
- 関連要素を同一コンテナに入れる
- 関連要素を近接させて配置する
- 関連要素の見た目を揃える
- 関連要素を連続したラインに整列させる
コンテナは最も視覚的に強いグルーピング手法ですが、過剰に使うと視覚的な雑音になります。他の方法でグルーピングできる場合は、なるべくそちらを活用することで、デザインをすっきりさせることができます。
今回の例では、各記事に囲い線（コンテナ）が使われていますが、すでに他の手段（間隔、整列、スタイル）でグルーピングがなされているため、囲いは不要です。これを取り除くことで、コンテンツ領域にも余裕が生まれます。
11. 使用するフォントの太さはレギュラーとボールドのみにするべきである
使用可能なフォントウェイト（太さ）が多数あるからといって、それらすべてをUIデザインに使用する必要はありません。複数のフォントウェイトを混在させると、視覚的ノイズや混乱が生じ、全体の一貫性も損なわれます。
デザインシステムをシンプルかつ明瞭に保つためには、「レギュラー」と「ボールド」の2種類のフォントウェイトに限定することが推奨されます。なお、ボールドが強すぎると感じる場合は、一部のフォントが提供する「セミボールド」を代用として使用することも可能です。
使用上の基本的なルール：
- 見出しにはボールドを使って強調します。
- 小さめのテキストにはレギュラーを使います。
- 極端に細いあるいは太いウェイトは、可読性の観点から大きな文字での使用に限るべきです。
今回の例では、記事の詳細部分で3種類のフォントウェイトが使用されています。「エクストラライト」や「シン」といったウェイトは、コントラスト比が要件を満たしていたとしても、視認性が十分でない可能性があります。レギュラーに統一することで可読性が向上し、デザイン全体も洗練されます。記事タイトルにはセミボールドを使用することで、視覚的なアクセントを加えています。
結果として、以下のような2種類のフォントウェイトに整理されたデザインになります。多くの改善を行ってきましたが、まだいくつかの課題が残っています。
12. 一貫性を持たせるべきである
UIデザインにおける「一貫性」とは、似たような要素が似たような見た目・挙動を持つということです。これは製品内だけでなく、他の一般的な製品と比較しても同様であるべきです。予測可能な挙動はユーザビリティを向上させ、誤操作を減らします。ユーザーがいちいち新しい使い方を学ぶ必要がなくなるからです。
今回の例では、記事のサムネイル画像が角張っているのに対し、ボタンやアイコンは角が丸く処理されています。このような微細な不一致も、全体としては違和感につながります。画像にも同じラウンド処理を施すことで、視覚的な一貫性が確保され、デザインが自然に感じられるようになります。
13. ミニマリズムとシンプルさを混同するべきではない
「ミニマルなデザイン」は必ずしも「シンプルで使いやすいデザイン」ではありません。デザイナーは美しくクリーンな見た目を好む傾向がありますが、要素やスタイルが少ないからといって、分かりやすいとは限らないのです。
むしろ、必要な情報が省略されすぎていることで、曖昧さや混乱を招く場合があります。シンプルさとは単なる要素の削減ではなく、適切な情報を適切に提示することです。
今回の例では、下部ナビゲーションバーのアイコンがシンプルでクリーンに見える一方で、それが何を意味するのかが分かりにくい状態です。すべての人が直感的に意味を理解できるとは限りません。特にスクリーンリーダーを使うユーザーのことを考えると、アイコンにテキストラベルを付加することで可用性が大きく向上します。
14. アイコンとテキストのバランスを取るべきである
アイコンとテキストを組み合わせる場合、それぞれが視覚的に同程度の存在感を持つようにデザインすべきです。そのほうが見た目のバランスが取れ、統一感のある印象を与えることができます。
今回の例では、下部ナビゲーションバーのアイコンとテキストのペアにおいて、両者のバランスが崩れています。色は同じですが、アイコンのほうが線が太く、サイズも大きいため、より強い存在感を放っています。そこで、テキストの色を濃くすることで、視覚的な強度を高め、アイコンとのバランスを取っています。この調整により、コントラスト比も4.5:1を上回り、視覚障害を持つユーザーにも対応できます。
やりました！
わずか数個の論理的なUIデザインのヒントを活用するだけで、今回の例のインターフェースに潜んでいたさまざまな問題点を特定・修正することができました。もちろん、さらにブランドごとの個性に合わせたビジュアルスタイルに調整することも可能ですが、この例ではまず基本的な部分の改善に焦点を当てています。
UIデザインは、圧倒的な才能を持つ人だけがこなせる「芸術」ではありません。多くの優れたインターフェースデザインは、明確で論理的なガイドラインに根ざしています。こうした客観的なルールに従うことで、直感的・アクセシブル・視覚的に洗練されたインターフェースを、より効率的かつ短時間で構築することができます。
このようなUIデザインのヒントを繰り返し実践することで、やがては自然と自分の設計プロセスに取り込まれるようになるでしょう。今回紹介した原則を基盤として、ぜひ創造性を発揮しながら設計に挑んでみてください。
