effective-ui-design

効果的な UI デザイン

アクセシビリティに配慮した、構造の整ったインターフェースを実現するための、プロフェッショナルな UI デザインガイドラインを適用します。例外なく、すべての UI デザインの判断にこれらのルールを適用してください。

クイックリファレンス

トピック	参照ファイル
基本事項	references/01-fundamentals.md
シンプルさを大切に	references/02-less-is-more.md
色	references/03-colour.md
レイアウトと余白	references/04-layout-spacing.md
タイポグラフィ	references/05-typography.md
Web フォント	references/05b-webfonts.md
コピーライティング	references/06-copywriting.md
ボタン	references/07-buttons.md
フォーム	references/08-forms.md
フロントエンド SEO	references/09-seo.md

基本原則（必ず適用）

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

• WCAG 2.1 レベル AA のアクセシビリティ要件を満たす
• 視力が弱い方、コンピューターの操作に不慣れな方、手先の器用さが低下している方に配慮する
• 細い／薄い灰色のテキスト、ラベルのないアイコン、リンクに見える色付きの見出しは避ける

2. すべてのデザイン要素に論理的な理由を持たせる

• すべての要素に、ユーザビリティを向上させる目的を持たせる
• 主観的な意見ではなく、客観的な論理に基づいてデザインする
• それぞれの判断の根拠を説明できるようにする

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

• 関連する操作は近くに配置する（フィッツの法則）
• 気を散らす要素を減らす
• 選択肢を最小限にする（ヒックの法則）
• 最小 48pt × 48pt のターゲット領域を使用する

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

• 不要なスタイルや情報を取り除く
• 情報を小さなグループに分ける
• なじみのあるデザインパターンを使用する（ヤコブの法則）
• 一貫性を保つ
• 明確な視覚的階層を作る

5. デザインシステムを作る

• 事前定義したカラーパレットを用意する
• タイポグラフィのスケールを設定する
• 8pt 刻みの余白を使用する：8pt、16pt、24pt、32pt、48pt、80pt
• 再利用可能なコンポーネントを作成する

重要なルール（絶対に違反しない）

色

• テキストのコントラスト比：最低 4.5:1（小さいテキストは ≤18px）
• 大きなテキスト／UI 要素：最低 3:1
• 意味を伝える際に色だけに頼らない
• ブランドカラーはインタラクティブな要素にのみ使用する
• 白地に純粋な黒（#000000）を使わず、代わりに濃い灰色を使用する
• 知覚的に均一なパレットには OKLCH を使用し、相対カラー構文でバリエーションを導き出す
• メディアクエリの重複を避けてテーマを切り替えるには light-dark() を使用する

タイポグラフィ

• ほとんどのインターフェースでは、サンセリフ体を 1 種類使用する
• UI テキスト（ラベル、ボタン、ナビゲーション）：基本サイズ 14px
• 本文：基本サイズ 16px。長文の読書では clamp() を使って 18〜20px に調整する
• 行の高さ：本文では最低 1.5（150%）
• 1 行の長さ：40〜80 文字
• テキストは左揃えにする（英語の場合）
• フォントのウェイトは通常 2 種類、最大 3 種類に制限する（例：Regular 400、Medium 500、Bold 700）

レイアウト

• 要素同士の関係に基づいて間隔を設定する（近いほど関連性が高い）
• メインレイアウトには 12 カラムグリッドを使用する
• 要素を揃えて整ったエッジを作る
• 余白を十分に取る
• コンポーネント単位のレスポンシブ対応にはコンテナクエリを、ページ単位のレイアウトにはメディアクエリを使用する
• サブグリッドを使って、兄弟要素間で入れ子になったコンテンツを揃える（例：カードグリッド）
• レスポンシブ画像を使用する（レイアウトシフトを防ぐために srcset、loading="lazy"、aspect-ratio を使用する）
• ホバー効果は @media (hover: hover) and (pointer: fine) の場合に限定する。コンテンツをホバー時だけ表示することは避ける
• ノッチのあるデバイスで固定／スティッキー要素を使う場合は、viewport-fit=cover とともに env(safe-area-inset-*) を使用する

アイコン

• SVG アイコンのみを使用する。絵文字やアイコンフォントは使用しない
• 1 つのアイコンセットを一貫して使用する（例：Lucide、Heroicons、Phosphor）
• currentColor を使ってテキストの色を継承し、ストローク幅をフォントのウェイトに合わせる
• アイコンには必ず視認できるテキストラベルを添える。アイコンのみのボタンには aria-label が必要です

ボタン

• ボタンのウェイトを3種類定義します：Primary、Secondary、Tertiary
• 1画面につきPrimaryボタンは1つにします
• ボタンは左揃えにします（重要度の高いものを先に配置）
• ボタンのテキストは「動詞＋名詞」にします（例：「投稿を保存」）
• 最小サイズ：48pt × 48pt
• ボタンを無効にするのは避け、送信時に検証します

フォーム

• 1列のレイアウトにします
• ラベルは入力欄の上に配置します
• 必須（*）と任意の両方を明示します
• 想定される入力内容に合わせてフィールドの幅を調整します
• 一般的なフォームフィールドのスタイルを使用します
• ヒントはフィールドの上に表示します（下には表示しません）
• 操作のタイミングを考慮した検証には :user-valid/:user-invalid を使用します

SEO

• ページごとに固有の <title> を設定します（50～60文字、主要キーワードを前方に配置）
• ページごとに固有の <meta name="description"> を設定します（150～160文字）
• すべてのページに自身を参照する <link rel="canonical"> を設定します
• 1ページにつき <h1> は1つにし、見出しの階層を論理的に構成します（レベルを飛ばしません）
• ソーシャル共有用に Open Graph タグ（og:title、og:description、og:image）を設定します
• リッチリザルト用に JSON-LD の構造化データを設定します（Article、Product、BreadcrumbList、FAQPage）
• 説明的なハイフン区切りの画像ファイル名と、自然な alt テキストを使用します
• Core Web Vitals の基準を満たします：LCP < 2.5s、INP < 200ms、CLS < 0.1

ファビコン

• 5種類のアイコンを用意します：favicon.ico（32×32）、icon.svg（ダークモード対応）、apple-touch-icon.png（180×180）、icon-192.png、icon-512.png
• SVG ファビコンでは @media (prefers-color-scheme: dark) をサポートし、ダークモードに自動対応します
• PWA の場合は、icon-192.png、icon-mask.png（512×512、マスカブル）、icon-512.png を含む manifest.webmanifest を追加します
• マスカブルアイコンには余分なパディングが必要です。セーフゾーンは409×409の円形です
• 複数サイズの PNG、複数サイズの Apple タッチアイコン、browserconfig.xml は生成しないでください

デザインチェックリスト

UI デザインを確定する前に、次の項目を確認してください。

1. アクセシビリティ

   • すべてのテキストのコントラスト比が4.5:1以上
   • UI要素のコントラスト比が3:1以上
   • 色だけを唯一の識別手段にしていない
   • ターゲット領域の最小サイズが48pt以上
   • テキストリンクに下線がある
   • セマンティック HTML を使用している（<nav>、<main>、<search>、ランドマーク）
   • アイコンに表示テキストのラベルがある（アイコンのみのボタンには aria-label を設定）
   • 画像に意味のある alt テキストがある（装飾画像には空の alt="" を設定）
   • スキップリンクが最初にフォーカス可能な要素として配置されている
   • ビューポートのメタタグでズームを無効にしていない（user-scalable=no / maximum-scale=1）
   • 複合ウィジェット（タブ、ツールバー、メニュー）では、矢印キーで移動できる単一の Tab 停止位置を使用している

2. 視覚的階層

   • 重要度の順序が明確
   • 主要なアクションが最も目立つ
   • 関連する要素がグループ化されている
   • 一貫した余白が設定されている

3. タイポグラフィ

   • 書体は1～2種類（任意でディスプレイ／見出し用書体を追加）
   • UI テキストは14px以上、本文は16px以上（長文の読書では18～20px）
   • 本文の行の高さは1.5以上
   • テキストは左揃え
   • 1行あたり40～80文字

4. コピーライティング

   • 簡潔なテキスト（不要な語句がない）
   • 文頭のみ大文字の表記を使用
   • 平易な言葉を使用（専門用語を避ける）
   • 重要な情報を先に提示
   • ボタンのテキストが説明的

5. フォーム

   • 1列のレイアウト
   • ラベルを入力欄の上に配置
   • 必須／任意のフィールドを明示
   • 想定される入力内容に合わせたフィールド幅
   • 枠線のコントラストが高い（3:1以上）

6. SEO

   • 主要キーワードを含む固有の <title>（50～60文字）
   • 固有の <meta name="description">（150～160文字）
   • 自身を参照する canonical タグ
   • 1ページにつき <h1> は1つで、見出しレベルを飛ばしていない
   • Open Graph タグ（og:title、og:description、og:image）がある
   • 該当する場合、JSON-LD の構造化データがある
   • 説明的な画像ファイル名と alt テキストがある
   • LCP 画像を遅延読み込みせず、fetchpriority="high" を設定している
   • ファビコン：favicon.ico、icon.svg（ダークモード対応）、apple-touch-icon.png、icon-192.png、icon-512.png
   • PWA：icon-192.png、icon-mask.png（マスカブル）、icon-512.png を含む manifest.webmanifest

実装

UI コードを作成する際は、次の手順に従ってください。

1. 詳細なガイドラインについて、関連するリファレンスファイルを確認してください
2. すべてのルールを例外なく適用してください
3. 上記のチェックリストに照らして確認してください
4. 定義済みのスペーシングスケール（8pt 刻み）を使用してください
5. references/03-colour.md のカラーパレット構成を使用してください
6. ツールチップ、ドロップダウン、メニューには Popover API を使用してください（JavaScript ライブラリは不要です）
7. ダイアログとポップオーバーの CSS のみで実現する入場アニメーションには @starting-style を使用してください
8. ページ遷移と共有要素のアニメーションには View Transition API を使用し、常に prefers-reduced-motion を尊重してください

カラーパレットのテンプレート（OKLCH）

Brand:         oklch(60% 0.15 hue)     - Interactive elements
Text strong:   oklch(25% 0.02 hue)     - Headings, primary text (4.5:1+)
Text weak:     oklch(45% 0.02 hue)     - Secondary text (4.5:1+)
Stroke strong: oklch(58% 0.02 hue)     - Form borders, icons (3:1+)
Stroke weak:   oklch(92% 0.005 hue)    - Decorative borders
Fill:          oklch(97% 0.003 hue)    - Secondary backgrounds
Background:    oklch(100% 0 0)         - White or near-white

タイポグラフィのスケール（1.200 マイナーサード）

Heading 1: 40px / 48px line-height / bold
Heading 2: 32px / 40px line-height / bold
Heading 3: 24px / 32px line-height / bold
Heading 4: 20px / 28px line-height / bold
Body:      16px / 24px line-height / regular
Small:     14px / 20px line-height / regular

スペーシングスケール（8pt グリッド）

XS:  8pt   - Closely related elements
S:   16pt  - Related elements
M:   24pt  - Component padding
L:   32pt  - Grid gutters, section gaps
XL:  48pt  - Large section gaps
XXL: 80pt  - Page section padding