UIデザインのクオリティが格段にアップする！ 感覚的ではなく、論理的にデザインを改善するポイントを解説

WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。

直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。

14 logic-driven UI design tips to improve any interface
by Adham Dannaway

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 1. スペース要素は関連性に基づいて分類される
• 2. UI要素のコントラスト比が3:1であることを確認する
• 3. もっとも重要なアクションには単一のプライマリボタンを使用する
• 4. ボタンは十分なサイズを確保する
• 5. 重要なコンテンツが視認可能であることを確認する
• 6. サイズが大きいテキストは文字間隔を詰める
• 7. 色だけを指標として頼りにしない
• 8. 複数のアライメントの使用は避ける
• 9. テキストのコントラスト比が4.5:1であることを確認する
• 10. インターフェースを簡素化するためにコンテナの削除を検討する
• 11. 標準フォントと太字フォントのみを使用する
• 12. 一貫性を保つ
• 13. ミニマリズムとシンプルさを混同しない
• 14. アイコンとテキストのペアとしてのバランス
• 15. 完成！
• より実践的なUIデザインのガイドライン

はじめに

ユーザーインターフェイスのデザインは、簡単な作業ではありません。レイアウト、スペース、タイポグラフィ、配色など、無数の選択肢があり、圧倒されてしまうことがあるかもしれません。さらに、ユーザビリティ、アクセシビリティ、心理学といった要素を考慮に入れると、その難しさはさらに増すばかりです。

しかし、朗報があります。
UIデザインは必ずしも複雑である必要はありません。私はプロダクトデザイナーとして20年以上のキャリアを経て、ビジュアルデザインやインタラクションデザインにおける意思決定のほとんどが明確で論理的なガイドラインに導かれていることに気づきました。芸術的な才能や直感ではなく、明確なガイドラインに基づいています。

もちろん、クリエイティブなセンスは役立ちますが、インターフェイスを直感的で、包括的で、かつ視覚的に魅力的にする要素の多くは、学ぶことで確実に習得できます。体系的なアプローチを身につけることで、一貫性のあるデザイン選択が可能になります。体系的なアプローチがなければ、物事を「正しく見えるようにする」ために、試行錯誤に頼ることになります。

それを学ぶためにはどうすればよいと思いますか？
実際にやってみることが一番です。それではさっそくUIデザインのヒントをいくつか実践してみましょう。

下記のスマホアプリのUIデザインは、コミュニティのプロフィールページです。左は元のデザイン、右は論理に基づいて修正したUIデザインです。

左: 元のデザイン、右: 改善したデザイン

UIデザインの経験があまりなくても、左の元のデザインを見て「違和感がある」と感じると思います。その原因はユーザビリティ、使いやすさに悪影響を与えるデザイン上の欠陥がいくつか含まれているからです。もしかしたら、すでにいくつか気づいているかもしれません。

それでは、元のデザインを改善するプロセスを順に解説します。ここで紹介するデザインのコツを用いて、それぞれの問題を段階的に解決していきます。

1. スペース要素は関連性に基づいて分類される

UI要素間のスペースは、要素間の関連性の強さに応じて設定します。関連性の高い要素は、近接性を示すために、より近くに配置します。関連性の低い要素は、スペースを広くして分離させます。

この方法によるスペースの設定は、情報を小さなグループに分割するもっとも効果的な方法です。各グループを長方形として考え、インターフェイスが大きな長方形の中に無数の小さな長方形を内包している構造であることに気がつくでしょう。

まずは、もっとも内側の長方形に小さなスペースを使用し、外側に向かうにつれて長方形のスペースを少しずつ広げていきます。

UI要素間の理想的なスペースを決めるのは、面倒で時間がかかる作業で、選択肢は無限にあります。1ピクセルずつ試行錯誤するよりも、事前にスペースの種類を設定することで、より迅速に判断を下すことができます。

スペースの種類は事前に設定する

まずは、8ポイント刻みのシンプルなスペースで設定します。これは8ポイントグリッドと呼ばれるもので、すべてのUI要素が8ポイント間隔の垂直方向と水平方向のガイドラインに沿って配置されます。また、より詳細なインターフェイスでは、4ポイント刻みを使用することでより細かく配置できます。

スペースのスケールはタイポグラフィのスケールと同様に、スペースのオプションはサイズが大きくなるほどより大きな値にする必要があります。これにより、おおきなUI要素でもスペースが均等に保たれます。

元のデザイン（左）では、長方形間の関連性に関わらず「極小（8pt）」と「小（16pt）」の定義済みスペースを使用しています。要素間の関連性に関わらずこの方法を採用した結果、雑然とした分かりにくいデザインになっています。

要素間の関連性に基づいてスペースを調整するだけで、コンテンツを明確に分離し、グループ化することができます。

左: 元のデザイン、右: スペースを改善したデザイン

元のデザインと定義したスペースを適用したデザインを比較してみてください。

左: 元のデザイン、右: スペースを改善したデザイン

2. UI要素のコントラスト比が3:1であることを確認する

コントラストとは、2つの色の間で知覚される明るさの差を測る指標です。1:1から21:1の範囲の比率で表されます。たとえば、黒背景に黒文字はもっとも低いコントラスト比の1:1になり、白背景に黒文字はもっとも高い21:1になります。色のコントラストを測定するツールやFigmaプラグインは数多く存在し、私のお気に入りはWeb AIM online contrast check toolとContrast（Figma）です。

視覚障害のあるユーザーがインターフェイスの詳細を明確に確認できるようにするには、少なくともWebコンテンツアクセシビリティガイドライン（WCAG）2.1レベルAAの色彩コントラスト要件を満たすことを目指してください。具体的に言うと、フォームやボタンなどのUI要素は少なくとも3:1のコントラスト比を持つ必要があります。

元のデザイン（左）では、アイコンとボタンのコントラストが低すぎます。コントラストの低いボタンのリスクは、視覚障害のあるユーザーにとってボタンの形が見えないため、ボタンだと認識できない可能性があります。

ボタンに十分なコントラストを持つ境界線を追加することで、アクセシビリティが確保できます。また、ボタンの背景色はライトグレーのため、ボタンが無効または非アクティブであると誤解される可能性も防ぎます。アイコンのコントラスト不足は、より濃いグレーを使用することで簡単に修正できます。

左: 元のデザイン、右: ボタンとアイコンのコントラストを改善したデザイン

3. もっとも重要なアクションには単一のプライマリボタンを使用する

多くのWebサイトやスマホアプリでは、アクションの重要度を示すためにボタンは3段階のウェイト（プライマリ・セカンダリ・ターシャリ）が必要です。また、UIが複雑である場合、より小さいサイズや大きいサイズのボタンが必要になることもあります。

下記の3段階のボタンスタイルは馴染みがあり、アクセシビリティに優れ、色に依存しない明確な視覚的階層構造を備えています。このボタンのスタイル設定が唯一の方法ではありませんが、安全な選択肢と言えます。よくある間違いを避けるために、ボタンデザインのこつをさらに学びましょう。

アクセシビリティに優れ、色に依存しない視覚的階層構造を備えたボタンのデザイン

プライマリボタンの目的は、UIでもっとも重要なアクションを強調することです。これにより、ユーザーはタスクを完了するために次に何をすべきかを理解しやすくなります。

プライマリボタンの使用ガイドライン:

• UI上に単一のもっとも重要なアクションがない場合は、それらのアクションにはセカンダリまたはターシャリボタンを使用します。
• スクリーン上に複数のプライマリボタンが存在することは避けてください。複数あると競合してしまい、次に何をすべきか混乱を招く可能性があります。

たとえば、もっとも重要なアクションがフォローするアクションであると仮定し、これをプライマリボタンに変更します。

左: 元のデザイン、右: プライマリボタンを改善したデザイン

4. ボタンは十分なサイズを確保する

小さなボタンは大きなボタンより、クリックやタップするのが難しくなります。これは特に運動機能に障害のある人や片手でスマホを持ち親指で操作する人にとって顕著です。

ボタン（およびその他のインタラクティブ要素）にターゲットサイズを十分に確保するよう、以下のガイドラインに従ってください。

• ボタンのサイズは少なくとも48ptx48pxにしてください。これは8ptグリッドに一致し、WCAG推奨の44pt×44ptよりもわずかに大きくなります。
• 頻繁に使用されるボタンはさらに大きいサイズすることで、操作効率が向上し、ボタンを見落としにくくします。
• ボタン同士の間隔は少なくとも8ptは離して配置し、ユーザーが誤って別のボタンを操作してしまうのを防ぎます。

元のデザイン（左）では2つのボタンのターゲットサイズは十分ですが、ボタンの幅を広げるスペースが十分にあります。十分なスペースがあるため、ボタンの幅を広げてターゲットサイズを大きくすることができます。

左: 元のデザイン、右: ボタンのサイズを改善したデザイン

5. 重要なコンテンツが視認可能であることを確認する

目に見えないものは、使用されません。
インタラクティブなメニューで要素を隠すのは、UIをすっきりシンプルに保つ便利な方法ですが、一部の人はそれを見逃してしまうリスクがあります。スペースに余裕があるなら、重要なコンテンツやアクションは隠さず、必要な時に必ず目に見えるように配置してください。

左: 元のデザイン、右: 重要なアクションを見えるように改善したデザイン

元のデザイン（左）ではデザインをすっきりさせるため、アクションがインタラクティブメニューの中に隠されています。見た目はすっきりとシンプルですが、ユーザーがアクションを見落とす可能性があるため注意が必要です。スペースに余裕があるため、「シェア」「ブックマーク」の2つのアクションを目に見えるように配置し、見落とされないようにします。

左: 元のデザイン、右: 重要なアクションを見えるように改善したデザイン

6. サイズが大きいテキストは文字間隔を詰める

サイズが大きい見出しのテキストを見栄えよくするちょっとしたコツは、文字間隔（文字間のスペース）を狭くすることです。文字間隔を狭くする量は書体やサイズによって異なりますが、一般的には文字のサイズが大きくなるにつれて文字間隔を狭くする必要があります。

これは多くの書体が長い本文を小さなサイズで読むことを想定して設計されているからです。これらは「テキスト用書体」と呼ばれ、小さいサイズでも読みやすくするために文字間隔が広く設定されています。一方「ディスプレイ用書体」は大きなサイズでの使用を想定して設計されており、一般的に文字間隔が狭いため、文字間隔を狭くする必要はほとんどありません。

上: 元のデザイン、下: 文字間隔を改善したデザイン

元のデザイン（左）では人物名の文字間隔が広いため、狭くしてより読みやすく改善しました。

上: 元のデザイン、下: 文字間隔を改善したデザイン

7. 色だけを指標として頼りにしない

意味を伝えたり、視覚要素を区別するために、色だけを頼りにしないでください。視覚障害や色覚障害のあるユーザーにとってその指標を認識できない可能性があります。UI要素を区別するためには、追加の視覚的手がかりを用意します。

元のデザイン（左）では混乱を招く可能性が、2つあります。

左: 元のデザイン、右: 改善したデザイン

1つ目は、記事リスト上にあるタブです。「Articles」が選択されている状態ですが元のデザインでは分かりにくいです。これはタブが選択されていることを示すために、わずかな色の違いだけでデザインされているからです。選択されたタブに下線を付けることで、より分かりやすくなります。

上: 元のデザイン、下:選択されたタブのデザインを改善したデザイン

2つ目は、下部ナビゲーションのアイコンです。これも選択されたアイコンと他のアイコンを区別するために、わずかな色の変化でデザインされています。より明確にするために、選択されたアイコンを塗りつぶしに変更します。

上: 元のデザイン、下: 選択されたアイコンのデザインを改善したデザイン

8. 複数のアライメントの使用は避ける

左揃え・右揃え・中央揃えなど、使用する配置の種類は多ければ多いほど、UIは複雑で雑然とした印象を与えます。わたし達の目はそれぞれの配置を目で追おうと動き回るため、より多くの負担がかかります。この問題はUIの小さなコンポーネントやセクション内で複数の異なる配置が使用されている場合に顕著になります。

1種類の配置（または可能な限り少ない配置）にすることで、UIを簡素化し、より整然と整理された印象を与えます。

元のデザイン（左）ではタブが中央揃えで、ページ上部の他の要素は左揃えになっています。複数の配置が混在すると、不必要な複雑さが増し、認知不可（インターフェース使用に必要な脳の負荷）を増加させます。タブを左揃えに変更することで、見た目が整理されます。

左: 元のデザイン、右: タブの揃えを改善したデザイン

9. テキストのコントラスト比が4.5:1であることを確認する

視覚障害がある人がテキストを明確に読めるよう支援するには、WCAG 2.1 レベルAAのコントラスト要件を満たす必要があります。

• 小さいテキスト（18ピクセル以下）は、最低4.5:1のコントラストが必要です。
• 大きいテキスト（太字で18ピクセル以上、標準で24ピクセル以上）は、最低3:1のコントラストが必要です。

元のデザイン（左）では選択されていないタブの小さなテキストのコントラストが不十分です。濃いグレーに変更することで、十分なコントラストが得られます。

左: 元のデザイン、右: タブのテキストを改善したデザイン

10. インターフェースを簡素化するためにコンテナの削除を検討する

情報を関連する要素の小さなグループに分割することで、UIの構造化と整理が可能になります。これにより、ユーザーはより早く、より簡単に理解することができ、記憶することができます。

関連する要素をグループ化するには、以下の方法があります。

• 関連する要素を同じコンテナ内に配置する
• 関連する要素を近くに配置する
• 関連する要素を似た見た目にする
• 関連する要素を連続したライン上に揃える

コンテナを使用することは、UI要素をグループ化するもっとも効果的な視覚的ヒントですが、不要な煩雑さを生む可能性があります。他のグループ化方法を使用する機会を探してみてください。より繊細で、デザインをシンプルにするのに役立ちます。

元のデザイン（左）では複数のグループ化手法がすでに使用されているため、各記事を囲むコンテナは不要です。コンテナを削除することで、コンテンツのためのスペースも広がります。

左: 元のデザイン、右: 記事を囲むコンテナを改善したデザイン

11. 標準フォントと太字フォントのみを使用する

通常、書体には多くのフォントウェイトが用意されています。だからといって、UIデザインでそれらのウェイトをすべて使用する必要はありません。多くの異なるウェイトを使用すると、UIにノイズや雑然とした印象を与えかねません。また、フォントの各ウェイトを一貫して使用することも難しくなります。

デザインシステムをシンプルかつ簡潔に保つためには、フォントのウェイトはレギュラーとボールドのみを使用します。書体によってはセミボールドなどのオプションが用意されている場合があり、ボールドが重すぎる場合は代わりにセミボールドを使用できます。

フォントのウェイトはレギュラーとボールドのみを使用する

フォントのウェイトを使いこなすヒント:

• 見出しを強調したい場合は、ボールドの太字フォントを使用します。
• その他の小さなテキストには、レギュラーの通常フォントを使用します。
• 極細あるいは極太のフォントを使用したい場合は、見出しや大きなテキストに限定します。小さいサイズでは読みにくくなる可能性があります。

元のデザインでは記事部分に3種類の異なるウェイトが使用されています。「Extra light」と「Thin」のコントラスト比は規定の4:5:1を上回っていますが、一部のユーザーには読みにくい可能性があります。この2種類のウェイトを「Regular」にすることで可読性が向上し、デザインもシンプルになります。それに合わせて、記事タイトルを「Semi-bold」にすることで、タイトルが際立ちます。

上: 元のデザイン、下: フォントのウェイトを改善したデザイン

使用するウェイトを2種類だけにすると、以下のようなデザインになります。

左: 元のデザイン、右: フォントのウェイトを改善したデザイン

ロジックにおこなうUIデザインの改善は順調に進んでいますが、まだいくつか改善すべき箇所があります。

12. 一貫性を保つ

UIデザインにおける一貫性とは、類似した要素の見た目も動作も同じようにすることを意味します。これは自社製品だけでなく、他の確立された製品と比較した場合にも当てはまります。なぜこの一貫性が重要かというと、予測可能な動作はユーザーが操作方法を繰り返し学ぶ必要がなくなり、使いやすさを向上させ、エラーを減らすからです。

元のデザイン（左）では、各記事の写真画像の角が鋭くなっており、これはボタンやアイコンの角丸と一致していません。写真画像も角丸にすることで、より一貫性のあるビジュアル言語を作り出すことができます。このような細やかなディテールは大した違いを生むとは思わないかもしれませんが、それらがすべて積み重なることでデザインに「しっくりくる」印象を与えます。

左: 元のデザイン、右: 画像を角丸に改善したデザイン

13. ミニマリズムとシンプルさを混同しない

ミニマル（Minimal）とは、シンプル（simple）を意味するものではありません。デザイナーは美しくすっきりした印象を与えるために、ミニマルなインターフェイスを好む傾向があります。ミニマルなインターフェイスは要素やスタイルは確かに少ないですが、それが必ずしも理解しやすく、使いやすいとは限りません。

ミニマルなインターフェースは、優れたユーザビリティに必要な重要なディテールが欠けているため、曖昧で混乱を招くことがよくあります。シンプル化（Simplification）とは単に削減することではありません。過剰な削除や非表示はユーザビリティを損なう可能性があります。重要な情報やディテールを削除していないことを確認する必要があります。

上: 元のデザイン、下: 改善したデザイン

元のデザイン（左）では下部ナビゲーションのアイコンはシンプルで洗練されているように見えますが、アイコンの役割は明確でしょうか？ 一部の人には理解できるかもしれませんが、すべての人が理解できるとは限りません。

アイコンにテキストのラベルを付与することで、ユーザーはもちろん、スクリーンリーダーを利用するユーザーにとってもその意味を理解できるようになります。

左: 元のデザイン、右: アイコンにラベルを追加したデザイン

14. アイコンとテキストのペアとしてのバランス

アイコンとテキストを組み合わせる際は、視覚的な目立ち具合を似せることで、より調和のとれた統一感のある外観を実現できます。

上: 元のデザイン、下: 改善したデザイン

元のデザイン（左）ではアイコンとテキストのペアがわずかにアンバランスです。アイコンとテキストは同じ色ですが、アイコンの方がより太く大きなサイズなため、より目立つようになっています。

テキストをすこし暗くすることでテキストを目立たせ、これでアイコンとのバランスが取れます。テキストのコントラスト比を少なくとも4.5:1以上に高めることで、視覚障害のあるユーザーにもアクセスしやくなります。

左: 元のデザイン、右: ラベルのカラーを改善したデザイン

15. 完成！

UIデザインのシンプルなこつを適用するだけで、元のデザイン（左）のさまざまな問題点を特定し、解決できました。もちろん必要に応じて、特定のブランドイメージに合わせたビジュアルスタイルに変更することも可能です。しかし、今回の例では基本をしっかり理解することに重点を置きました。

左: 元のデザイン、右: 改善したデザイン

UIデザインは必ずしも難しいものではない、ということが分かっていただけたでしょうか。生まれ持った才能を持つ人だけが扱える神秘的な芸術作品ではありません。優れたインターフェイスデザインの多くは、ここで解説した明確で論理的なガイドラインに基づいています。

主観的な意見ではなく、客観的なガイドラインに頼ることで、直感的で、アクセシブルで、かつ視覚的に洗練されたインターフェイスをデザインすることが容易になります。これらのUIデザインのこつを実践すればするほど、自然とあなた自身のデザインプロセスの一部になっていくでしょう。ここで紹介したものをベースにし、探求して、実験して、創造性を広げてください。

より実践的なUIデザインのガイドライン

この記事で解説したUIデザインは、私が書いたUI design bookの一部です。UI design bookには100以上のロジック主導のデザインガイドラインを解説しています。もし気になったら、本をチェックしてみてください。

UI design book
※無料版もあり、3つのガイドラインが読めます。