- UIデザインは、芸術的センスよりも一貫した論理ルールを適用して配置・間隔・書体・色を決めることで、より速く、予測可能な形で改善できる
- 関連する要素を余白でまとめ、同じ機能には同じ形を使い、サイズ・色・コントラスト・位置で明確な視覚的階層を作ることが基本
- 装飾用の色や不要な境界線を減らし、色はリンクやボタンのように操作可能かどうかを伝えるために選択的に使うべき
- WCAG 2.1 AA基準に従い、UI要素は3:1、小さなテキストは4.5:1以上のコントラスト比を確保し、色以外にも下線や形状などの手がかりを提供する必要がある
- 1つのサンセリフ書体とregular/boldの太さを中心に構成し、大きなx-height、sentence case、左揃え、1.5以上の行の高さを適用すると、可読性と一貫性が高まる
論理的なルールでUIを改善する方法
- UIデザインでは、レイアウト・間隔・タイポグラフィ・色だけでなく、ユーザビリティ・アクセシビリティ・心理まで同時に考慮する必要があり、選択が複雑になりやすい
- 直感で要素を動かしながら見栄えのよい状態を探す代わりに、再利用可能なルール体系を適用すれば、より速く根拠のある判断を下せる
- 短期賃貸宿泊施設の詳細画面を例に、複雑で使いにくい初期画面を段階的に修正する
- 目的はブランド装飾を追加することではなく、直感性・アクセシビリティ・基本的な視覚的完成度をまず確保すること
1. 余白で関連要素をまとめる
- 情報を小さな関連グループに分けると、画面構造をより速く理解し、記憶できる
- 要素をグループ化する方法は4つある
- 同じコンテナ内に配置する
- 関連要素間の間隔を狭める
- 似た形で表現する
- 連続した線に沿って整列させる
- コンテナは最も強いグループ化の手がかりだが、画面に不要な装飾を増やす可能性がある
- 余白と整列は、よりさりげなく画面をシンプルに保てる方法
- 例では、コンテンツ間の間隔を広げ、異なる情報グループを明確に区別している
2. 一貫した形と動作を保つ
- 似た要素は、プロダクト内だけでなく、慣れ親しんだ他のプロダクトと比較しても似た見た目と動作であるべき
- 予測可能な動作は、ユーザーが毎回使い方を学び直す必要を減らし、エラーの可能性を下げる
- 例のアイコンは塗りつぶし形状とアウトライン形状が混在しており、塗りつぶしアイコンが選択状態だと誤解される可能性があった
- すべてのアイコンを角丸と2ptのアウトラインに統一し、視覚的な重みをそろえる
- アイコンだけでは意味を理解しにくいユーザーやスクリーンリーダー利用者のために、テキストラベルを追加する
- 同じ形の要素は同じように動作すると予想されるため、機能が異なるなら視覚的な処理も変える必要がある
- 例では、非インタラクティブなアイコンコンテナが
Book nowボタンのように見えたため、青色とボタンスタイルを削除した
3. 明確な視覚的階層を作る
- すべての情報が同じ重要度を持つわけではないため、重要な要素ほど目立つように表現する必要がある
- サイズ・色・コントラスト比・間隔・位置・奥行きを調整すると、ユーザーは画面を素早くざっと見て関心領域を見つけられる
- Squint Testは、目を細めたり画面をぼかして見たりした後でも、重要な要素と画面の用途が分かるかを確認する方法
- 初期画面では複数の要素が似た強さで競合していたが、左下の主要アクションボタンはほとんど目立っていなかった
- 主要ボタンにコントラストの高い背景色と太字を適用し、画面で最も目立つ要素に変更した
- 本文説明は重要度に比べて過度に強調されていたため、その後、色とタイポグラフィを調整して階層を下げた
4. 不要な装飾を取り除く
- 意味を伝えたり要素をグループ化したりしない線・色・背景・アニメーションは注意をそらし、認知負荷を高める可能性がある
- 例の画像周辺の白い余白と境界線は情報伝達に不要だったため削除した
- 装飾要素を減らすと画面がシンプルになり、重要な情報と行動に集中しやすくなる
5. 色に明確な役割を与える
- 色は装飾よりも意味伝達のために限定的に使うほうが安全
- 白黒の状態から始め、必要な場所にだけ色を追加するアプローチが効果的
- ブランドカラーをテキストリンクやボタンなどのインタラクティブ要素に適用すると、何をクリックできるのかを学習させやすい
- カードのように形そのものが操作可能性を示す要素には、必ずしも色を追加する必要はない
- 例の青いタイトルと星評価は非インタラクティブ要素であるにもかかわらず、クリックできるように見えたため色を削除した
- その結果、インタラクティブ要素と通常の情報の区別がより明確になった
6. UI要素に3:1以上のコントラスト比を適用する
- コントラスト比は、2色の知覚される明るさの差を
1:1から21:1までの比率で表す - WCAG 2.1 AA基準では、フォームフィールド・アイコン・ボタンなどのUI要素には最低3:1のコントラスト比が必要
- 例の写真上の矢印は、背景画像によって見えにくくなる可能性があった
- グレーのアイコンと不透明な白背景を適用し、写真に関係なくコントラスト比を確保した
- 背景コンテナを追加したことで、押せる領域もより大きく明確になった
- 初期の主要ボタンも背景とのコントラストが不足しており、ロービジョンのユーザーがボタン形状を区別しにくかった
- ボタンのコントラスト比を3:1以上に高め、アクセシビリティと視覚的階層を同時に改善した
- コントラスト比はWebAIM Contrast CheckerやContrast Figma pluginで測定できる
7. テキストに十分なコントラスト比を適用する
- WCAG 2.1 AA基準は、テキストのサイズと太さに応じて異なるコントラスト比を求めている
- 18px以下の小さなテキストには最低4.5:1が必要
- 18px超の太字テキスト、または24px超のregularテキストには最低3:1が必要
- 写真枚数の表示は背景とのコントラストが不足していたため、グレーのコンテナの不透明度を高め、テキストシャドウを追加した
- 位置テキストは色が明るすぎ、フォントも細かったため、より濃いグレーに変更した
- コントラスト比の基準を満たしていても、細すぎるフォントは読みにくい場合があるため、太さも別途調整する必要がある
8. 色だけで状態を区別しない
- 色覚特性のあるユーザーは、特定の色の組み合わせを区別しにくかったり、色そのものを認識できなかったりする場合がある
- 意味・状態・操作可能かどうかを色だけで伝えてはならない
- 例の
Reviewsリンクは、青色を取り除くと通常のテキストと区別できなかった - 下線を追加して、色が見えなくてもリンクであることを識別できるように変更した
9. 1つのサンセリフ書体を使う
- 書体（typeface）はHelveticaのような共通スタイルのフォント群であり、bold/regularのようなサイズや太さのバリエーションが個別のフォントに相当する
- インターフェースでは一般的に、読みやすく中立的でシンプルなサンセリフ書体を1つ使うのが安全
- 例のタイトルの装飾的なセリフ書体は読みにくく、宿泊施設の写真やサービスの雰囲気に合わない可能性があった
- 本文と同じサンセリフ書体に統一し、ユーザビリティと視覚的一貫性を高めた
10. 小文字の高さが大きい書体を選ぶ
- 小文字の高さを表すx-heightが大きく、文字間隔が十分な書体は、小さいサイズでも比較的読みやすい
- 例のLeague Spartanはx-heightが比較的低かった
- x-heightがより大きいInterに変更し、小さな本文テキストの可読性を高めた
11. 大文字の使用を制限する
- 人は個々の文字よりも単語全体の形を認識して素早く読む傾向がある
- すべて大文字で書かれた単語は、どれも似た長方形の形になり、文字を1つずつ確認する必要があるため読みにくくなる
- 位置情報をすべて大文字からsentence caseに変更し、最初の単語と固有名詞だけを大文字で表示した
- すべて大文字の表記は、強調が必ず必要な短い表現以外では限定的に使うべき
12. regularとboldの太さだけを使う
- 1つの書体が複数の太さを提供していても、すべて使うと画面の視覚的ノイズが増え、一貫して管理しにくくなる
- デザインシステムはregularとboldを中心にシンプルに保つのがよい
- タイトルと強調テキストにはboldを使う
- 小さな通常テキストにはregularを使う
- boldが重すぎる場合はsemi-boldで代替できる
- 非常に細い、または太いウェイトは、小さなテキストではなく大きなタイトルにだけ限定的に使う
- 例の位置テキストはlightウェイトだったため、コントラスト比を高めた後でも読みにくい可能性があった
- regularに変更して可読性を高め、使用するウェイトの種類を減らした
13. 純粋な黒のテキストを避ける
- 純粋な黒は白背景とのコントラストが非常に高く、長時間読むと目の疲れを高める可能性がある
- 白背景では純粋な黒の代わりに濃いグレーを使うのが安全
- 例の複数の黒い要素を濃いグレーに変更し、可読性を調整した
- 重要度に比べて目立ちすぎていた宿泊施設の説明文には、より明るいグレーを適用して視覚的階層を下げた
14. 長いテキストは左揃えにする
- 英語は左から右に読み、画面をF字型にざっと見る傾向があるため、左揃えが最も安定している
- タイトルや短い文は中央揃えでも素早く読める
- 長い本文を中央揃えにすると行ごとに開始位置が変わり、次の行を見つけにくくなる
- 両端揃えと中央揃えは、特に認知障害のあるユーザーにとって長文を読みづらくする可能性がある
- 例の宿泊施設説明文を中央揃えから左揃えに変更し、上部テキストとの一貫性も確保した
15. 本文の行の高さを1.5以上に設定する
- 行の高さは、2行のテキスト間の垂直距離
- 適切な行間は同じ行を読み直すことを減らし、長いテキストをより快適に読めるようにする
- 本文テキストの行の高さは最低**1.5（150%）**が必要で、一般的には1.5〜2の範囲が適切
- 例では行の高さを1（100%）から1.5（150%）に増やし、可読性を高めた
修正結果と適用原則
- 16のルールを順に適用しながら、複雑だった画面をよりシンプルで読みやすく、アクセシブルな形に変更した
- ブランドの性格に合う装飾は後から追加できるが、まず情報構造・インタラクションの区別・コントラスト比・タイポグラフィといった基本を正す必要がある
- 主観的な好みより客観的なルールを使うことで、直感的でアクセシブルなUIをより速く設計できる
- 繰り返し適用したルールは、次第にデザイン作業フローの自然な基盤となり、その上で新しい表現方法や装飾を試せる
まだコメントはありません。