UI 設計原則

参照：Material Design 3、Apple HIG、WCAG 2.1 AA

間隔システム（Spacing）

4px を基本単位とした倍数システムを使用します：

4px   - 極小間隔（アイコンとラベルの間）
8px   - コンパクト間隔（関連要素間）
12px  - デフォルト内部間隔（ボタンパディング）
16px  - 標準間隔（段落間、カード内部間隔）
24px  - ブロック間隔（セクション間）
32px  - 大ブロック間隔
48px  - ページレベル間隔
64px  - 最大間隔（ヒーローエリア）

ルール：

• 関連要素間は小さな間隔、無関係な要素間は大きな間隔（近接性の原則）
• 同じレベルの要素には同じ間隔を使用
• 内部間隔（padding）≥ 外部間隔（gap）の半分

/* カード例 */
.card {
  padding: 24px;           /* 内部間隔 */
  gap: 16px;               /* 子要素間隔 */
  border-radius: 12px;     /* 角丸も4pxの倍数に従う */
}

.card-header {
  margin-bottom: 8px;      /* タイトルとコンテンツのコンパクト間隔 */
}

色彩の階層（Color Hierarchy）

セマンティックカラー

Primary    - 主要操作、ブランドカラー（CTAボタン、リンク）
Secondary  - 二次操作（セカンダリボタン、タグ）
Neutral    - 背景、ボーダー、分割線、テキスト
Success    - 成功状態（グリーン系）
Warning    - 警告状態（オレンジ/イエロー系）
Error      - エラー状態（レッド系）
Info       - 情報提示（ブルー系）

テキストカラー階層

Text Primary     - 主要テキスト（タイトル、本文）    コントラスト比 ≥ 7:1
Text Secondary   - 二次テキスト（説明、タイムスタンプ）  コントラスト比 ≥ 4.5:1
Text Tertiary    - 補助テキスト（プレースホルダー）   コントラスト比 ≥ 3:1
Text Disabled    - 無効状態テキスト
Text Inverse     - 反転テキスト（濃色背景上）

背景レベル

Background       - ページ底層背景
Surface          - カード、パネル背景（背景より明るい/暗い1階調）
Surface Elevated - フローティング要素（モーダル、ドロップダウン）
Overlay          - オーバーレイレイヤー（半透明ブラック）

ルール：

• 各カラーは Light / Dark の2セットを提供
• インタラクション状態：default → hover → pressed → focused → disabled
• 色を情報伝達の唯一の手段にしない（色覚障害対応）

タイポグラフィ階層（Typography）

Display Large    - 48-57px  - 行高 1.1  - ホームページ大タイトル
Display Medium   - 36-45px  - 行高 1.1  - ブロックタイトル
Headline Large   - 28-32px  - 行高 1.25 - ページタイトル（h1）
Headline Medium  - 24px     - 行高 1.3  - ブロックタイトル（h2）
Title Large      - 20-22px  - 行高 1.3  - カードタイトル（h3）
Title Medium     - 16px     - 行高 1.4  - 小タイトル
Body Large       - 16px     - 行高 1.5  - 主要本文
Body Medium      - 14px     - 行高 1.5  - 二次本文
Body Small       - 12px     - 行高 1.5  - 補助テキスト
Label Large      - 14px     - 行高 1.4  - ボタンテキスト
Label Medium     - 12px     - 行高 1.4  - タグ、バッジ
Caption          - 11-12px  - 行高 1.4  - 最小テキスト（タイムスタンプ、注釈）

ルール：

• 1ページで最大3〜4種類の文字サイズを使用
• 本文の最小サイズは14px（モバイルは16px）
• 行高：タイトル 1.1-1.3、本文 1.5-1.75
• フォントウェイト：Regular(400)、Medium(500)、Semibold(600)、Bold(700)
• 日本語フォントフォールバック："Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif

レスポンシブブレークポイント（Responsive Breakpoints）

Mobile S     - 320px   - 最小サポート幅
Mobile       - 375px   - 主要スマートフォンサイズ
Mobile L     - 428px   - 大画面スマートフォン
Tablet       - 768px   - タブレット縦向き
Laptop       - 1024px  - タブレット横向き / 小型ノートパソコン
Desktop      - 1280px  - 標準デスクトップ
Desktop L    - 1440px  - 大画面デスクトップ
Desktop XL   - 1920px  - 超ワイド画面

/* Mobile First ブレークポイント */
/* デフォルト：Mobile */
@media (min-width: 768px)  { /* Tablet */ }
@media (min-width: 1024px) { /* Laptop */ }
@media (min-width: 1280px) { /* Desktop */ }
@media (min-width: 1440px) { /* Desktop L */ }

レイアウトルール：

• モバイル：シングルカラム、フルウィド要素
• タブレット：オプション2カラム、サイドバー折り畳み可能
• デスクトップ：マルチカラムレイアウト、固定サイドバー
• コンテンツ最大幅：1200-1440px、中央揃え
• タッチターゲット最小 44x44px（Apple HIG）/ 48x48dp（Material Design）

アクセシビリティ（WCAG 2.1 AA）

コントラスト比

一般テキスト（< 18px）    - コントラスト比 ≥ 4.5:1
大文字（≥ 18px bold） - コントラスト比 ≥ 3:1
UI 要素とグラフィック         - コントラスト比 ≥ 3:1

キーボード操作

Tab        - インタラクティブ要素間でフォーカスを移動
Enter      - ボタン、リンクを有効化
Space      - チェックボックス、ラジオボタン、トグルを切り替え
Escape     - モーダル、ドロップダウン、ポップオーバーを閉じる
Arrow Keys - メニュー、タブ、ラジオグループ内で移動

フォーカススタイル

/* フォーカスインジケーターが表示される必要があります */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* フォーカススタイルを削除しません */
/* 禁止：*:focus { outline: none; } */

必要な ARIA

// 画像
<img src="photo.jpg" alt="ユーザーアバター" />
<img src="decorative.svg" alt="" role="presentation" />

// インタラクティブ要素
<button aria-label="ダイアログを閉じる">✕</button>
<div role="alert">保存に成功しました</div>

// フォーム
<label htmlFor="email">メールアドレス</label>
<input id="email" type="email" aria-required="true" aria-describedby="email-hint" />
<span id="email-hint">メールアドレスは共有されません</span>

// 動的コンテンツ
<div aria-live="polite">5件の検索結果が見つかりました</div>

ビジュアル一貫性

角丸

Small   - 4px   - バッジ、タグ
Medium  - 8px   - ボタン、入力フィールド
Large   - 12px  - カード、パネル
XLarge  - 16px  - モーダル、シート
Full    - 9999px - アバター、ピルボタン

シャドウ

Elevation 1 - 軽い浮き上がり（カード）     box-shadow: 0 1px 3px rgba(0,0,0,0.12)
Elevation 2 - 明確な浮き上がり（ドロップダウン） box-shadow: 0 4px 6px rgba(0,0,0,0.12)
Elevation 3 - 高い浮き上がり（モーダル）      box-shadow: 0 8px 24px rgba(0,0,0,0.16)

アニメーション

時間：
  Micro    - 100ms  - ホバー、トグル
  Short    - 200ms  - フェード、コラプス
  Medium   - 300ms  - スライド、モーダルの開閉
  Long     - 500ms  - ページ遷移

イージング：
  ease-out    - 画面に入る要素
  ease-in     - 画面から出る要素
  ease-in-out - 状態切り替え

ルール：

• 同じタイプの要素には同じ角丸、シャドウ、アニメーションを使用
• アニメーション削減設定：prefers-reduced-motion: reduce の場合は不要なアニメーションを無効化
• シャドウレベルは z-index レベルに対応

ルール要約

• 間隔は4pxの倍数システムを使用；関連要素は近く、無関係な要素は遠ける
• 色をセマンティックロール分けし；各ロールに完全なインタラクション状態 + Light/Dark を提供
• タイポグラフィは最大3〜4種類の文字サイズ；本文最小14px
• Mobile First レスポンシブ；タッチターゲット最小 44x44px
• WCAG 2.1 AA：コントラスト比 4.5:1、キーボード操作可能、フォーカス表示可視
• 角丸、シャドウ、アニメーションをグローバルに統一；prefers-reduced-motion を尊重