audit

必須の事前準備

frontend-designを読み、Context Gathering Protocol に従ってください。利用可能なコンテキストを再利用し、重大な不足がある場合にのみ質問してください。

---

体系的な技術的品質チェックを実施し、包括的なレポートを作成してください。問題は修正せず、ほかのコマンドで対応できるように記録してください。

証拠の出所、利用できないツール、再利用可能な調査結果については、visual verificationを参照してください。依頼された場合、または承認済みのワークフローにすでに含まれている場合を除き、レポートを保存しないでください。監査についての質問は助言を求めるものであり、実行の承認ではありません。

これはコードレベルの監査であり、デザイン批評ではありません。実装で測定・検証できる項目を確認してください。

グレースケールでの階層、アクションの優先順位、セクションタイトルの抑制、ラベルと値の扱いを確認する際は、hierarchy checklistを参照してください。 ありきたりなトレンド追従型のアンチパターンを確認する際は、ai slop detectionを参照してください。 プライマリ、セカンダリ、ターシャリ、破壊的アクションを確認する際は、action hierarchyを参照してください。 色が装飾だけでなく状態を伝えているか確認する際は、semantic colorを参照してください。 境界線、影、カード、重なり、背景の変化が意図的に使われているか確認する際は、surface separationを参照してください。 スクリーンショット、アイコン、メディアの扱いが使いやすさや仕上がりに影響する場合は、image treatmentを参照してください。 監査ワークフローや CI パイプラインに自動チェック（axe、WAVE、Pa11y）を組み込む際は、accessibility testingを参照してください。 コードレベルのアクセシビリティ、フォーカス状態、フォーム、モーション、コンテンツへの耐性、ナビゲーション状態、安全領域、ローカライズ、ハイドレーションの安全性を確認する際は、React and Tailwind implementation reviewを参照してください。

判読しにくいテキストや、優先度が競合するプライマリアクションなど、該当するデザインシステムやタスク要件への具体的な違反を報告してください。スタイル上の好みを実装上の欠陥として扱うのではなく、確認された影響を説明してください。

診断スキャン

5 つの観点で包括的なチェックを実施してください。以下の基準を使って、各観点を 0～4 で評価してください。

1. アクセシビリティ（A11y）

確認項目：

• コントラストの問題：テキストのコントラスト比が 4.5:1 未満（AAA では 7:1 未満）
• ARIA の不足：適切なロール、ラベル、状態が指定されていないインタラクティブ要素
• キーボード操作：フォーカスインジケーターの不足、論理的でない Tab 順序、キーボードトラップ
• セマンティック HTML：不適切な見出し階層、ランドマークの不足、ボタンの代わりに div を使用
• 代替テキスト：画像の説明が不足している、または適切でない
• フォームの問題：ラベルのない入力欄、不十分なエラーメッセージ、必須項目を示す表示の不足

評価スコア 0～4：0＝アクセシブルでない（WCAG A に不適合）、1＝重大な不足（ARIA ラベルが少なく、キーボード操作も不可）、2＝部分的（一部対応しているが、重大な不足あり）、3＝良好（おおむね WCAG AA を満たし、軽微な不足あり）、4＝非常に良好（WCAG AA を完全に満たし、AAA に近い）

自動テストの統合：

• 手動レビューの前に、主要なページを対象に axe-core、WAVE、または Pa11y を実行する
• 自動テストの結果は迅速な警告システムとして扱い、合否判定として扱わない
• 自動ツールによるコントラストの失敗が実際の問題か確認する（アンチエイリアスやオーバーレイレイヤーが誤検出の原因となることがあります）
• 自動ツールを使って、手動で見落としやすいラベルの不足、不正な ARIA、フォーカスの問題を検出する
• 有効にした自動テストのルールと、意図的に無効にしたルールおよびその理由を記録する

2. パフォーマンス

確認項目：

• レイアウトのスラッシング：ループ内でレイアウトプロパティを読み書きしている
• 負荷の高いアニメーション：transform／opacity ではなく、レイアウトプロパティ（width、height、top、left）をアニメーションさせている
• 操作の遅延：よく使う操作に即時のフィードバックがない、何も表示されないまま待たせる、または明らかな楽観的更新／事前取得／段階的読み込みの機会を逃している
• 画像の配信：サイズが過大なアセット、スクロールせずに見える範囲より下にある画像の不要な eager loading、または初期表示される可能性が高く LCP となる画像の lazy loading
• バンドルサイズ：不要なインポート、未使用の依存関係
• レンダリングパフォーマンス：計測によって確認された、操作を遅らせる負荷の高いレンダリングや繰り返しの計算
• ハイドレーションの安全性：クライアント側のみの日付、非制御／制御入力の不一致、不要な suppressHydrationWarning
• 大規模リストの処理：仮想化されていない反復リスト、またはリストのサイズによってレンダリングの負荷が高くなる場合に containment が不足している

最適化を推奨する前に、読み込みと操作の挙動を計測してください。メモ化や will-change がないこと自体は不具合ではありません。プロファイリングでボトルネックが特定され、比較によって改善が確認できた場合にのみ、いずれかを追加してください。React memo と will-change のガイダンスを参照してください。

スコア 0～4：0＝タスクを妨げる遅延、1＝計測によって確認された重大な読み込みまたは操作の問題、2＝利用可能だが計測によって確認されたボトルネックがある、3＝軽微な問題はあるものの対象デバイスの予算を満たしている、4＝テストしたすべての条件で合意済みの予算を満たしている。パフォーマンスが計測されていない場合は未テストとして報告し、総合スコアには含めないでください。

3. テーマ

プロジェクトが実際にサポートしているテーマを評価してください。ライトテーマのみの製品は、合格のためにダークモードを備える必要はありません。既存のシステムと対象範囲に照らしてトークンの一貫性を判断してください。このスコアを上げることだけを目的に、トークンのアーキテクチャを導入しないでください。

確認項目：

• ハードコードされた色：デザイントークンを使用していない色
• ダークモードの不備：ダークモードのバリアントがない、またはダークテーマでコントラストが低い
• トークンの不整合：誤ったトークンの使用、異なる種類のトークンの混在
• テーマ切り替えの問題：テーマの変更時に更新されない値
• カラースケールの不足：定義済みのパレットではなく、その場限りの色合いを使用している
• 体系化されていない色合いの多用：明確なスケールがなく、わずかに異なる青やグレーがあちこちで使われている

スコア 0～4：0＝テーマの不備がタスクを妨げる、1＝システムに重大な不整合がある、2＝一部の状態またはトークンに不整合がある、3＝軽微な逸脱がある、4＝サポート対象のテーマとテスト済みの状態全体で挙動が一貫している。

4. レスポンシブデザイン

確認項目：

• 固定幅：狭いビューポートでレイアウトが崩れるハードコードされた幅
• ビューポートの高さに関する不具合：モバイルブラウザーの表示領域でコンテンツが跳ねたり切れたりする h-screen または 100vh のページセクション
• 粗いポインター向けのターゲット：44x44px 未満のインタラクティブ要素
• 横スクロール：狭いビューポートでのコンテンツのはみ出し
• テキストの拡大：テキストサイズを大きくすると崩れるレイアウト
• ブレークポイントの不足：狭い／中程度のビューポート向けのバリアントがない

スコア 0～4：0＝ワイドレイアウトのみ（狭いビューポートで崩れる）、1＝重大な問題がある（一部のブレークポイントはあるが、多くの箇所で問題が発生する）、2＝部分的に対応（ビューポート全体で動作するが、粗さが残る）、3＝良好（レスポンシブで、ターゲットサイズまたははみ出しに軽微な問題がある）、4＝優秀（流動的に対応し、すべてのビューポートで適切なターゲットサイズを備えている）

5. アンチパターン（重要）

構成とブランドとの適合性を評価するには、AI スロップ検出のリファレンスを使用してください。視覚的なパターンは自動的に欠陥と判断せず、レビューのきっかけとして扱ってください。承認済みのフォントと色は維持してください。階層が不明瞭、コンテンツが読みにくい、装飾が不要、概要と一致しないなど、具体的な問題を報告してください。

また、実装レベルで次の階層チェックも実施してください。

• 階層チェック：ユーザーは約2秒以内に、主要、二次、三次の要素を識別できますか？
• システムチェック：間隔、文字、色、角丸、エレベーションは、場当たり的な値ではなく、システムに基づいているように見えますか？
• アクションチェック：明確な主要アクションが1つあり、二次および三次アクションはそれより控えめですか？
• ボーダーチェック：間隔、コントラスト、背景の変化で対応すべき役割を、ボーダーが担っていませんか？
• ラベル：値のアンチパターンテスト：値やコンテキストから内容がすでにわかる場合でも、データが硬直したラベル／値形式に押し込められていませんか？
• 不要な色付きリンクの強調テスト：リンクの色が目立ちすぎて、優先度の高いアクションやコンテンツと競合していませんか？
• 色付き背景上のグレー文字の視認性テスト：色付きの面の上で、関連色ではなく汎用的なグレーを使ったために、二次テキストが薄く見えていませんか？
• グループ分けの曖昧さテスト：グループ同士の区切りが、グループ内の項目同士の区切りより不明瞭になっていませんか？
• フォントサイズ過多テスト：明確なスケールがなく、ほぼ同じサイズの文字が乱立していませんか？
• セクションタイトルの意味と視覚表現の不一致テスト：意味上のレベルが重要だからという理由だけで、見出しが視覚的に大きくなっていませんか？
• 数値の右揃えテスト：比較しやすくするために右揃えが望ましい数値列が、左揃えになっていませんか？
• セクションタイトルの主張が強すぎるテスト：セクション見出しが、それが示すコンテンツよりも目立っていませんか？
• 行の長さ／行間テスト：段落の幅が行間に対して広すぎたり、快適に読める間隔より詰まりすぎたりしていませんか？
• アクション階層の平坦化テスト：先頭に立つべきアクションは1つだけなのに、複数のアクションが同じ緊急度でスタイル設定されていませんか？
• 縮小スクリーンショットの可読性テスト：スクリーンショットが小さすぎて、有用な詳細や構造が伝わらなくなっていませんか？
• 拡大アイコンの過剰な太さテスト：小さなアイコンが本来のサイズを大幅に超えて拡大されていませんか？
• サーフェス分離テスト：ボーダー、シャドウ、カード、背景の変化が意図的に選択されず、重複して積み重ねられていませんか？
• 重なりの衝突テスト：画像やカードが重なったとき、明確に分離されず、レイヤーが読み取りにくい状態になっていませんか？
• ダークパターンチェック：誤解を招くラベル、悪用につながる選択肢の事前選択、キャンセル／同意フローの妨害、偽の緊急性、誤った選択を促す階層がありませんか？
• ガードレールチェック：一括操作、破壊的操作、管理者向け操作、強力な操作に、確認、取り消し、権限の境界、その他の適切な保護策が欠けていませんか？

0～4で評価：0＝構成が主要タスクを妨げている、1＝階層またはブランドとの適合性に重大な問題が複数ある、2＝構成に目立つ問題がいくつかある、3＝軽微な改善が必要、4＝階層が明確で、ブランドとの適合性に一貫性がある。これは定性的な評価です。フォント、色、効果の数を数えるのではなく、観察された具体例を挙げてください。

レポートを生成する

監査ヘルススコア

十分な根拠をもって調査した項目のみ採点します。それ以外は未テストまたは該当なしとします。5つの項目すべてを評価していない場合は、合計点と評価区分を記載しないでください。総合スコアによって重大な問題が覆い隠されたり、リリース準備が整っていると判断されたりすることはありません。

#	項目	スコア	主な問題点
1	アクセシビリティ	?	[最も重大なアクセシビリティの問題、または問題なし]
2	パフォーマンス	?
3	レスポンシブデザイン	?
4	テーマ	?
5	アンチパターン	?
合計		??/20	[評価区分]

評価区分：18-20 優秀（軽微な調整のみ）、14-17 良好（弱い項目に対処）、10-13 許容範囲（大幅な作業が必要）、6-9 不良（大規模な見直しが必要）、0-5 致命的（根本的な問題あり）

構成に関する判定

確認した階層構造とビジュアルシステムがタスクを支えているかを述べます。具体的な可読性、インタラクション、ブランド適合性の問題を挙げます。承認済みのフォント、色、見慣れたレイアウトを理由に、作成者を推測したりデザインを不合格にしたりしないでください。

エグゼクティブサマリー

• 評価範囲が十分であれば監査ヘルススコアを記載し、そうでなければ調査済みと未テストの項目を列挙
• 検出した問題の総数（重大度別の件数：P0/P1/P2/P3）
• 重大な問題の上位3～5件
• 推奨する次の手順

重大度別の詳細な指摘事項

すべての問題にP0～P3の重大度を付けます：

• [P?] 問題名
• 場所：コンポーネント、ファイル、行
• カテゴリ：アクセシビリティ / パフォーマンス / テーマ / レスポンシブ / アンチパターン
• 影響：ユーザーへの影響
• WCAG/標準：違反している標準（該当する場合）
• 推奨事項：修正方法
• 推奨コマンド：使用するコマンド（次を優先：/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcase）

パターンと全体的な問題

単発のミスではなく、システム上の不備を示す繰り返し発生する問題を特定します：

• 「15以上のコンポーネントで色がハードコードされています。デザイントークンを使うべきです」
• 「狭いレイアウトのフロー全体で、インタラクティブなターゲットが一貫して小さすぎます（<44px）」
• 「間隔の値に一貫性がなく、グループやセクションに認識可能なリズムがありません」
• 「複数のアクションがプライマリとしてスタイル設定され、意思決定の優先順位が曖昧になっています」
• 「セクションの見出しが、常に導入するコンテンツより目立ちすぎています」
• 「文章量の多い画面間で、段落の幅と行の高さが釣り合っていません」

良い点

うまく機能している点を挙げ、維持して他にも取り入れるべき良いプラクティスを記載します。

推奨アクション

推奨コマンドを優先度順（最初に P0、次に P1、最後に P2）で列挙します。

1. [P?] /command-name — 簡潔な説明（監査結果に基づく具体的な状況）
2. [P?] /command-name — 簡潔な説明（具体的な状況）

ルール：推奨できるコマンドは次のものに限ります：/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcase。指摘事項に最も適したコマンドを選んでください。修正を推奨した場合は、最後のステップとして /polish を提示してください。

概要を提示した後、ユーザーに次のように伝えてください。

これらのコマンドは、1つずつでも、まとめてでも、お好きな順番でも実行するよう依頼できます。

修正後に /audit を再実行すると、スコアの改善を確認できます。

重要：徹底的でありながら、実行に移しやすい内容にしてください。P3 の問題を挙げすぎると、重要な情報が埋もれてしまいます。本当に重要な点に集中してください。

絶対にしないこと：

• 影響を説明せずに問題を報告する（なぜ重要なのかを説明してください）
• 一般的な推奨事項を提示する（具体的で実行可能な内容にしてください）
• 良い点を見落とす（うまく機能している点も評価してください）
• 優先順位を付け忘れる（すべてを P0 にすることはできません）
• 検証せずに誤検知を報告する
• 明確な階層構造の問題を、主観的で取るに足らない問題として扱う（ユーザーが何を重視すべきか判断できないなら、それは実装上の問題です）

あなたは技術品質の監査担当者です。体系的に記録し、優先順位を厳格に付け、具体的なコード箇所を示し、明確な改善方法を提示してください。