ds-design-audit

画面に表示されている内容をもとに UI を評価し、最も深刻な問題を修正して、修正が機能することを示します。

手順

1. 対象のファイルまたは URL を特定して、表示します。表示できない場合は、その旨を報告して停止します。ソースコードだけを見て監査してはいけません。
2. 幅を約 1440px と 390px にして、最初のビューポートとページ全体のスクリーンショットを撮ります。可能であれば、ホバー、フォーカス、空、読み込み中、エラーの各状態もキャプチャします。
3. 対象のコードを確認します。トークン、フォント、色、フォーカススタイル、メディアクエリ、コピーを読みます。
4. 各領域を 1～5 で評価します。各スコアの根拠を、画面上で確認できる内容またはコードの行から 1 行で示します。
   • 階層：メインメッセージとアクションが 3 秒以内に明確に伝わり、焦点が 1 つに絞られています。
   • タイポグラフィ：フォントが意図的に組み合わされ、文字サイズの段階に一貫性があり、行の長さと行間が適切です。
   • 色：支配的な色が 1 色、アクセントが 1 色あり、色はトークンで管理され、散在する 16 進数の色指定がなく、装飾的なグラデーションもありません。
   • 余白：余白がスケールに沿っており、リズムに一貫性があり、モバイルでの配置が適切です。
   • 状態：ホバー、フォーカス、空、読み込み中、エラー、長いコンテンツの各状態がすべて存在します。
   • アクセシビリティ：コントラスト比が 4.5:1 以上で、フォーカスリングが見え、フィールドにラベルがあり、タッチ対象が 44px 以上で、動きを減らす設定が尊重されています。
   • コピー：製品に即した具体的な内容で、定型文やプレースホルダーデータがありません。
5. 該当するものがあれば、禁止されているデフォルトをそれぞれ記録します。紫と青のグラデーション、ディスプレイ用途にデフォルトのフォントを使用、アイコンとして絵文字を使用、中央揃えのヒーローと同一デザインのカード 3 枚、画面全体でのグラスモーフィズム、グレーの背景にグレーのテキスト、汎用的なコピー。
6. ユーザーへの影響が大きい順に修正を並べます。アクセシビリティの問題とメインアクションが不明確な問題を最優先し、装飾は最後にします。修正ごとに、ファイル、変更内容、改善するスコアを示します。
7. 上位 3～5 件の修正を適用します。個々の箇所ではなく、トークンまたは共有コンポーネントで根本原因を修正します。製品のアイデンティティ、コンテンツ、動作は維持します。
8. 手順 2 と同じ幅、状態で新しいスクリーンショットを撮ります。各領域を再評価し、修正前と修正後のスコアを並べて示します。
9. いずれかの領域のスコアが 2 以下のまま、または禁止されているデフォルトが残っている場合は、手順 6～8 をもう一度実行します。繰り返しは 2 回までとします。

終了条件

• 2 回の修正を完了するか、すべての領域のスコアが 3 以上になり、禁止されているデフォルトが残っていないこと。
• レポートに、修正前後のスコア、根拠、適用した修正、適用しなかった修正とその理由が示されていること。

ルール

• 根拠なしにスコアを付けてはいけません。確認できなかった領域は「未確認」と記載し、その理由を示します。
• 確認を取らずに、事実に関するコピー、価格、主張、機能の動作を変更してはいけません。
• このスキルで問題と判定されるスタイルがブリーフで求められている場合、それは問題ではありません。
• UI の全面的な再構築が必要な場合は、/ds-design を推奨してください。このスキルでは再構築しないでください。