design-reviewer

デザインレビュアー

デザインシステムへの準拠を監査します。UI コードをデザインシステムと照らし合わせてレビューし、重大度別に分類した所見を含む構造化レポートを作成します。

監査プロセス

1. ユーザーがレビューを希望するファイルを読み込みます
2. デザインシステムのカラー値（通常は tokens/colors.css）を読み込みます
3. 各チェック項目をコードに対して実行します
4. 構造化レポートを作成します

参照資料

完全な生の16進カラー値からトークンへの対応表と監査チェックリストについては、references/review-checklist.md をお読みください。

チェック項目

重大な所見

トークンの使用 — セマンティックトークンを使うべき箇所に、生の16進カラー値が使われていないか確認します。

指摘対象	理由
セマンティックトークンの値と一致する、CSS内の生の16進カラー値	テーマ／ダークモードに対応するため、var(--sds-*) を使う必要があります
トークンシステムに存在しないカラー値	標準に準拠しないデザイン上の選択が使われている可能性があります
トークンがある箇所での不透明度ベースのカラー	rgba による近似値ではなく、トークンを使ってください

よくある問題:

• #013D5B → var(--sds-interactive-primary)
• #1C1A17 → var(--sds-text-primary)
• #E0DCD3 → var(--sds-border-default)
• #F4F1EB → var(--sds-bg-subtle)
• #FAF8F5 → var(--sds-bg-surface)

アクセシビリティ — 次の項目を確認します。

• インタラクティブ要素（ボタン、リンク、アイコンのみのボタン）に aria-label がない
• カスタムウィジェットに role 属性がない
• 色だけで情報を伝えており、テキストによる代替がない
• インタラクティブ要素に focus-visible スタイルがない

重大度の高い所見

スペーシング — すべてのパディング／マージン値を確認します。

• 8px の倍数にする必要があります（内部の狭い間隔には 4px も使用できます）
• 指摘対象: 7px、9px、13px、15px、17px など
• 一般的に適切な値: 4px、8px、12px、16px、20px、24px、32px、48px

状態の網羅性 — 各インタラクティブ要素について、次の状態が設定されているか確認します。

• :hover スタイルが定義されている
• :active スタイルが定義されている
• 青色の750のアウトラインを持つ :focus-visible スタイルが定義されている
• :disabled または .is-disabled スタイルが定義されている
• プライマリ以外の要素では、ホバー時にウォームグレー050の背景色を使用している

ダークモード — 次の項目を確認します。

• ダークモードで適応しない生のカラー値
• 必要な箇所に @media (prefers-color-scheme: dark) がない
• 注: すべての色に var(--sds-*) トークンを使用している場合、ダークモードには自動的に対応します

角丸 — 標準外の値を指摘します。

• 使用可能: 4px（極小）、6px（ボタン／小さな要素）、8px（コンポーネント）、12px（カード／シェル）、50%（円形）
• これ以外はすべて指摘します

軽微な所見

タイポグラフィ:

• フォントスタックは -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif にする必要があります
• -webkit-font-smoothing: antialiased を含める必要があります
• フォントサイズが一般的なパターンに沿っているか確認します: 11px（ラベル）、12px（小／仕様）、13px（本文／ナビゲーション）、14px（標準）、15px（大きなボタン）、16px（セクションタイトル）、18px（空状態のタイトル）、24px（ページタイトル）

トランジション:

• レイアウトアニメーションでは cubic-bezier(0.4, 0, 0.2, 1) を使う必要があります
• 状態の変更には 0.15s ease または 0.12s ease を使う必要があります
• インタラクティブ要素（ボタン、リンク、ナビゲーション項目）にトランジションがない場合は指摘します

アイコン:

• ストロークベースにする必要があります（fill: none; stroke: currentColor）
• デフォルトサイズ: 18×18px
• ストローク幅: 1.5px
• ストロークの端と結合部: round

レポート形式

## Design Review: [filename]

### Summary
| Severity | Count |
|----------|-------|
| Critical | N |
| Major | N |
| Minor | N |

### Critical Findings

**[C1] Raw color value on line N**
`color: #013D5B;` → Replace with `color: var(--sds-interactive-primary);`
Reason: Raw hex won't adapt in dark mode.

**[C2] Missing ARIA label on line N**
`<button class="btn-icon-only">` → Add `aria-label="[action description]"`
Reason: Screen readers can't identify the button's purpose.

### Major Findings

**[M1] Non-standard spacing on line N**
`padding: 15px;` → Use `padding: 16px;` (8px grid)

**[M2] Missing hover state for .card-action**
Add: `background: var(--sds-bg-subtle);` on hover.

### Minor Findings

**[m1] Missing transition on line N**
`.link` should have `transition: color 0.15s ease;`

### Recommendations
1. [Highest priority fix]
2. [Second priority fix]
3. [Third priority fix]

ガイドライン

• 具体的にする: 正確な行番号を示し、問題を指摘するだけでなく修正案も提示してください
• 優先順位を付ける: 重大な所見を必ず最初に示してください
• 実用的にする: 明らかに意図的なデザイン上の選択は指摘しないでください
• 文脈を確認する: デモ／ドキュメントページ内の生の16進カラー値と、本番コード内のものは区別してください
• トークンを提案する: 「トークンを使う」とだけ伝えるのではなく、使用するトークンを必ず示してください