ui-design-patterns

UI デザインパターン

出典：https://github.com/dirnbauer/webconsulting-skills

グラフィックデザインの才能に頼らず、洗練されたプロフェッショナルなユーザーインターフェースを作成するための実践的なガイドラインです。TYPO3 のフロントエンド開発を含め、あらゆる Web プロジェクトで活用できます。

謝辞

これらのパターンは、次の優れたリソースをもとに作成されています。

• Refactoring UI 著者：Adam Wathan、Steve Schoger — 開発者向けの実践的な UI デザインの決定版ガイド
• Practical UI（第 2 版）著者：Adham Dannaway — 直感的で、アクセシブルかつ美しいインターフェースを実現するための、簡潔で実践的な UI デザインガイドライン

UI デザインの知識を深めるため、どちらの書籍も強くおすすめします。

---

0. 基本原則（Practical UI より）

具体的なパターンに入る前に、次の基本原則を理解しておきましょう。

ユーザビリティ上のリスクを最小限に抑える

インターフェースの利用に困難が生じる可能性をリスクとして評価し、その評価に基づいてデザインを決定します。

• 薄いグレーのテキストは洗練されて見える一方、読みづらくなるリスクがあります
• ラベルのないアイコンは、意味がわからず混乱を招くリスクがあります
• 色付きの見出しテキストは、リンクだと誤解されるリスクがあります

**常に考慮してください：**視力が弱い人、コンピューターの操作に不慣れな人、手先の動きが制限されている人、認知特性に違いがある人。

デザインの細部すべてに論理的な理由を持たせる

すべての UI 要素には根拠が必要です。「見た目がいい」は建設的なフィードバックではありません。それぞれのデザイン上の判断について、なぜそうしたのかを説明できるようにしましょう。

要素	論理的な理由
左揃えのテキスト	端が揃って読みやすくなります
説明的な見出し	内容をすばやく把握でき、スクリーンリーダーでも利用できます
青色で下線付きのリンク	操作可能であることを示し、色覚に障害のある人にも認識しやすくなります
間隔を空けてグループ化	関連項目を近くに配置することで、認知的負荷を軽減します

操作コストを最小限に抑える

操作コストとは、タスクを完了するために必要な身体的・精神的な労力です。次の方法で軽減しましょう。

1. 関連する操作を近くに配置する（フィッツの法則：対象が近く、大きいほど、クリックが速くなります）
2. 注意をそらすものを減らす（注意を引いて集中を妨げる要素は避けます）
3. 段階的開示を使う（必要なときだけ複雑な情報を表示します）

認知的負荷を最小限に抑える

認知的負荷とは、インターフェースを利用するために必要な精神的な労力です。次の方法で軽減しましょう。

• 情報を小さく、理解しやすいまとまりに分ける
• 人々がすでに理解している、なじみのあるパターンを使う
• 不要な要素や判断を取り除く
• 関連項目を視覚的にグループ化する

まずデザインシステムを作る

デザインを始める前に、再利用可能なガイドラインを体系化しましょう。

• 用途のルールを含むカラーパレット
• タイポグラフィのスケール
• 余白のシステム
• コンポーネントのパターン
• インタラクションの状態

これにより、一貫性が保たれ、意思決定も速くなります。

アクセシビリティは必須です

最低でも WCAG 2.1 レベル AA に準拠してください。

要件	最低比率
小さいテキスト（大きなテキストの基準未満）	コントラスト比 4.5:1
大きなテキスト（24px 以上／18pt の通常ウェイト、または 18.66px 以上／14pt の太字）	コントラスト比 3:1
UI 要素（境界線、アイコン）	コントラスト比 3:1

**色だけに頼ってはいけません。**色覚に障害のある人のため、必ずアイコン、パターン、またはテキストを併用しましょう。

一般的なデザインパターンを使う

ヤコブの法則に従い、人々がすでに知っているパターンを使いましょう。

• 一般的なフォームフィールド（独自でなじみのないスタイルは避けます）
• 標準的なナビゲーションパターン
• 期待されるアイコンの意味
• なじみのあるボタンの動作

基本的な UI の慣例ではなく、製品独自の価値提案に創造性を活かしましょう。

80/20 の法則

ユーザーのおよそ 80% は、機能の 20% を利用します。よく使われる操作経路を優先しましょう。

• 例外的なケースではなく、頻繁に行われるタスクに最適化する
• 最も大きな効果が得られる箇所にデザインの労力を集中する
• あまり使われない機能を過剰に作り込まない

---

1. ゼロから始める

レイアウトではなく、機能から始める

シェル（ナビゲーション、サイドバー、フッター）の設計から始めないでください。実際の機能から始めましょう。

よくない進め方：

• 「上部ナビゲーションとサイドバー、どちらにするべきだろう？」
• 「ロゴはどこに配置しよう？」

よい進め方：

• まず中心となる機能（検索フォーム、製品カード、ユーザープロフィール）を設計する
• 機能を設計するうちに、ナビゲーションの形が見えてきます

細部は後回し

初期段階では、書体、シャドウ、アイコンは気にしないでください。太いマーカーや低精細なワイヤーフレームを使い、すばやくレイアウトを検討しましょう。

色は保留する

まずはグレースケールで設計してください。これにより、余白、コントラスト、サイズを使って階層を作ることになります。色は後から仕上げとして加えます。

サイクルを回す

1. 次の機能のシンプルなバージョンを設計する
2. 実装する
3. 動作するデザインを改善する
4. 次の機能に進む

悲観的に考える

まず、役に立つ最小限のバージョンを設計しましょう。まだ実装できない機能は設計せず、動くものをリリースしてください。

---

2. 階層がすべて

すべての要素が同じではない

視覚的な階層によって、インターフェースは「デザインされている」と感じられます。すべてが注目を集めようとすると、何も目立たなくなります。

重要な点： 最も重要な情報を際立たせる一方で、二次的・三次的な情報は意図的に目立たなくします。

サイズだけがすべてではない

階層づけをフォントサイズだけに頼らないでください。次の方法を使いましょう。

手法	効果
フォントの太さ	強調には600～700、通常には400～500
色のコントラスト	主要な要素には濃い色、二次的な要素にはグレー、三次的な要素にはライトグレー
余白	重要な要素の周囲により広い余白を設ける

テキストの色に関するガイドライン：

• 主要なコンテンツ：濃い色（例：slate-900）
• 二次的なコンテンツ：中間のグレー（例：slate-600）
• 三次的なコンテンツ：ライトグレー（例：slate-400）

色付きの背景にグレーのテキストを使わない

色付きの背景にグレーのテキストを置くと、色あせて見えます。代わりに、背景と同じ色相で、彩度と明度を調整した色を選びましょう。

/* Bad: Grey on blue background */
background: hsl(220, 80%, 50%);
color: #888888; /* Looks dull */

/* Good: Tinted text matching background hue */
background: hsl(220, 80%, 50%);
color: hsl(220, 60%, 85%); /* Harmonious and readable */

目立たせるには、ほかを目立たなくする

主要な要素が目立たない場合、さらに強調するのではなく、競合する要素を目立たなくしましょう。

/* Instead of making active nav item bolder... */
/* ...make inactive items softer */
.nav-item { color: var(--slate-400); }
.nav-item.active { color: var(--slate-900); }

ラベルは最後の手段

文脈によっては、ラベルが不要になります。

代わりに	使うもの
「メール：[email protected]」	[email protected]（形式から明らかです）
「在庫あり：12」	「在庫残り12点」
「寝室数：3」	「寝室3室」

ラベルが必要な場合は、目立たなくしましょう。重要なのはデータです。

太さとコントラストのバランスを取る

アイコンや太字のテキストなど、重みのある要素は、柔らかい色を使うと目立たなくできます。細い境界線など、軽い要素は、太さを増すと強調できます。

/* Icon feels too heavy? Reduce contrast */
.icon { color: var(--slate-400); } /* Instead of slate-900 */

/* Border too subtle? Increase width */
border: 2px solid hsl(210, 23%, 95%); /* Instead of 1px darker */

ボタンの階層

意味だけでなく、階層に基づいてボタンをデザインしましょう。

種類	スタイル	用途
プライマリー	塗りつぶし、高いコントラスト	ページの主要なアクション
セカンダリー	アウトライン、または低めのコントラスト	重要度の低いアクション
ターシャリー	リンク形式	使用頻度の低いアクション

破壊的なアクションだからといって、自動的に赤く太字にする必要はありません。「削除」が主要なアクションでない場合は、セカンダリーまたはターシャリーとしてスタイルを設定し、確認モーダルで太字の赤を使いましょう。

---

3. レイアウトと余白

まずは余白を多めに取る

最初は余白を大きく取り、満足できるまで減らしていきましょう。これにより、要素が適切にゆったり配置されます。

余白の体系を確立する

値の間に意味のある差（約25％）を設け、制約されたスケールを使いましょう。

4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px

16pxを基準にする（ブラウザーのデフォルトのフォントサイズで、割り切れる数です）。

画面を埋める必要はない

コンテンツに600pxあれば十分なら、1200pxまで広げないでください。端に余分な空間があっても問題ありません。

キャンバスを小さくする

モバイルファーストで設計すると、よりよい解決策が見つかることがよくあります。幅を約400pxにして始め、その後広げましょう。

グリッドを過信しない

すべての要素を可変にする必要はありません。サイドバー、アイコン、アバターは、メインコンテンツを伸縮させつつ、固定サイズにしたほうがうまく機能することがよくあります。

/* Better than percentage-based sidebar */
.sidebar { width: 280px; flex-shrink: 0; }
.main { flex: 1; min-width: 0; }

相対的なサイズ指定ではスケールしません

画面サイズが変わっても、見出しを本文に比例させたままにしないでください。モバイルでは、大きな要素ほど小さな要素よりも速く縮小する必要があります。

/* Desktop: 45px headline, 18px body (2.5x ratio) */
/* Mobile: 24px headline, 14px body (1.7x ratio) */

あいまいな間隔を避ける

目に見える区切りなしで要素をグループ化する場合、グループ間の間隔はグループ内の間隔よりも大きくする必要があります。

/* Form labels should be closer to their inputs than to previous inputs */
.form-group { margin-bottom: 24px; }
.form-label { margin-bottom: 8px; }

---

詳細リファレンス

詳細な例、長いテンプレート、トラブルシューティング用の表、付録、または上記に含まれていないセクションが必要な場合は、ガイド全文をお読みください。範囲の狭いタスクでは、このファイルを読み込まず、スキルが段階的に情報を開示するようにしてください。