design-consistency-auditor

デザインの一貫性監査

監査の前に、ドキュメントからプロジェクトのフロントエンド構造を把握します。

以下を確認します。

• セマンティックトークンを通じてカラーパレットが一貫して使われている
• スペーシングがプロジェクトのスケールに沿っている
• 画面間でコンポーネントの視覚的な調和が保たれている
• デザインシステムが重複実装されずに適用されている
• デザイン負債が蓄積していない

使用するタイミング

• アプリ間のデザイントークンの一貫性を監査するとき
• カラーパレットの使い方を確認し、ハードコードされた16進数値を探すとき
• 画面ごとにUI/UXパターンが異なっていないか確認するとき
• デザインシステムのコンポーネントと重複する独自クラスを見つけるとき
• 新機能が確立済みのデザイン標準に沿っているか確認するとき

アクセシビリティ適合性は別の工程で確認します。WCAG、ARIA、キーボード操作、コントラストについては accessibility を使用してください。

クイックリファレンス

カラーのルール

推奨: shadcn のセマンティックトークン（bg-background、bg-card、bg-primary、text-muted-foreground、border-border）を使用します。
非推奨: 16進数カラー（#000000）や任意の値（bg-[#123456]）をハードコードします。

コンポーネントのパターン

デザインシステムまたは既存のコードベースから、プロジェクトのコンポーネントクラスの規約を把握します。以下のような一般的なパターンを確認してください。

• カード：shadcn の Card またはプロジェクト独自のカードコンポーネント
• アプリシェル／レイアウト：プロジェクト固有のシェルラッパークラス
• モーダル／ダイアログ：プロジェクトのダイアログコンポーネントのパターン
• 入力欄：プロジェクトのフォーム入力クラスまたはコンポーネント
• ボタン：プロジェクトのボタンバリアント（プライマリ、セカンダリ、ゴースト）

監査の前に、コードベースから実際のクラス名を特定してください。特定の命名規則があると決めつけないでください。

スペーシング

推奨: Tailwind のスケール（p-4、m-6、gap-4）を使用します。
非推奨: 任意の値（p-[17px]）を使用します。

アクセシビリティ

• セマンティックな HTML（<button>、<nav>、<main>）
• インタラクティブな要素に ARIA ラベルを設定
• テキストはコントラスト比 4.5:1、UI は 3:1
• フォーカス状態：focus:outline-none focus:ring-2 focus:ring-primary

レスポンシブ対応

• sm:、md:、lg:、xl: の修飾子を使用したモバイルファースト設計
• レスポンシブなタイポグラフィ：text-3xl sm:text-4xl

監査フェーズ

1. カラーパレット - ハードコードされた色をスキャンし、テーマトークンを確認します
2. コンポーネントのパターン - カード、ボタン、フォームでテーマクラスが使われているか確認します
3. スペーシングとレイアウト - 一貫したスペーシングスケールになっているか確認します
4. タイポグラフィ - 見出しの階層とテキストスタイルを確認します
5. アクセシビリティ - 自動チェックとキーボードテストを実施します

AI 生成っぽさの防止

汎用的な「AI 生成」風のデザインを監査します。

• 汎用的なフォント（どこでも使われている Inter、Roboto）
• 白地に紫のグラデーション
• 個性のない予想どおりのレイアウト
• 無難で退屈な色使い

個性のある、ブランドを際立たせるデザインを目指してください。

---

詳細なチェックリスト、例、レポートテンプレート、監査コマンドについては、こちらを参照してください： references/full-guide.md

関連項目

• audit — 特定の観点が指定されていない場合に、アクセシビリティ、パフォーマンス、テーマ設定、レスポンシブデザイン、アンチパターンを対象に、0～4 点で評価する一括監査です。
• accessibility — WCAG 2.1 AA への適合性、ARIA、キーボード操作、スクリーンリーダーでの検証です。