Design Foundationと標準UIパターン

AIが生成した画面を、再利用可能で検証できるプロダクト体験へ変える方法を学ぶ。

デザイン哲学: 画面は利用者の仕事を支える契約である

デザイン規則は、人とAIが共有する契約である。画面ごとに色、余白、文字、情報の優先順位を決め直すと、機能が同じでも体験は揺らぐ。デザインシステムは建築図面のように材料と寸法を先に決め、再現可能な結果を作る。

最初に利用者の目的、成功状態、失敗状態、確認する証拠を記録する。美しさより、利用者が次の行動を迷わず見つけられるかを確認する。

デザイン原則: 一貫性・明確性・回復性

原則は判断の方向を示し、トークンはその判断を再利用できる名前にする。意味を持つトークンは、コード、文書、ダークモードで同じ意図を保つ。

生の色や任意のピクセルではなく役割に名前を付ける。ブランド変更やアクセシビリティ修正では、画面ごとではなく定義を更新できる。

演習

生の色や任意のピクセルではなく役割に名前を付ける。ブランド変更やアクセシビリティ修正では、画面ごとではなく定義を更新できる。

# design-contract.yaml
screen: report-review
primary_task: approve-or-return-a-report
states: [default, loading, empty, error, forbidden]
components:
  - status-panel
  - review-summary
  - primary-action
acceptance:
  - one-primary-action
  - keyboard-reachable
  - semantic-tokens-only

デザインガイド: 余白・階層・文言・レスポンシブ

デザインガイドは好みを抑えるためではなく、複数の人と画面が同じ仕事を一貫して完了するための作業言語である。余白は関係を示し、見出し・本文・補助文は読む順序を作る。

新しい画面は既存規則を複製し、必要な差だけを記録する。根拠のない余白、固定幅、曖昧なボタン文言を増やさない。

カラーシステムとアクセシビリティ

カラーシステムはパレット集ではなく、意味を伝える契約である。原始パレットは色の段階だけを提供し、画面ではtext、surface、border、action、success、warning、errorのような意味トークンを使う。これによりブランド色やダークモードが変わっても、画面ごとに失敗・警告・完了の意味を作り直さない。

アクセシビリティはカラーシステムの検証条件である。成功、エラー、選択を色だけで伝えず、文章、アイコン、枠線、パターンを組み合わせる。文字、アイコン、フォーカスリング、入力エラー境界をライト・ダーク両方で確認する。

状態色の確認演習

AIには生の色値ではなく意味トークンだけを使うよう依頼する。一画面で通常、hover、focus、disabled、errorを確認し、色を除いても状態と次の行動が分かるかを確認する。

{
  "color": {
    "brand": { "$value": "#0969da", "$type": "color" },
    "action-primary": { "$value": "{color.brand}", "$type": "color" },
    "status-error": { "$value": "#cf222e", "$type": "color" },
    "focus-ring": { "$value": "{color.action-primary}", "$type": "color" }
  }
}

タイポグラフィとフォントシステム

フォントは装飾ではなく、読む速度と情報階層を作るインターフェースである。本文、見出し、補助文、コードの役割を分け、family、weight、size、line-height、letter-spacingをトークンで管理する。

Webフォントが遅延・失敗しても読めなければならない。fallback、コード用等幅書体、長い翻訳の折返し、表とボタンの可読性を確認する。

標準コンポーネントと標準画面

ボタン、入力欄、カード、表、通知は部品である。リスト、詳細、作成、確認、エラー、空状態は部品を組み合わせた画面パターンである。部品だけを標準化すると、読み込み、空、権限なし、保存失敗が不統一になる。

各部品には目的、変形、状態、アクセシブルな名前を記録する。各画面には開始条件、次の行動、成功・失敗・待機状態、証拠を記録する。

アクセシビリティとAI出力の確認

「きれいな画面」という依頼では解釈が毎回変わる。目的、許可する部品、禁止事項、状態一覧、アクセシビリティ、受入証拠を渡す。生成後は長い文字列、キーボード操作、失敗状態、ダークモードで確認する。

レビューでは、誰がどの状態でなぜ止まるかを記録する。修正前後の証拠を残し、次の担当者が同じ判断を使えるようにする。