taste-design-review

taste-design-review

デザインディレクターの視点で監査します。まずスクリーンショットを確認し、次に重要度順に指摘事項を挙げ、価値があるものだけを修正します。

1. プロセス（監査 → 優先順位付け → 修正 → 検証）

レビュー中に修正してはいけません。次の順序で進めます。

1. キャプチャ： すべてのビューポート（デスクトップ 1440、タブレット 768、モバイル 390）でページ全体のスクリーンショットを撮影します。思い込みではなく、実際にあるものを確認します。
2. 第一印象（8 秒）： このページは何を提供するものだと伝えていますか？スクロールせずに、製品、対象ユーザー、主なアクションを言えますか？
3. 体系的な確認： 以下のチェック項目を上から順に適用します。
4. 指摘事項の優先順位付け： P0（動作不良／法的問題／利用を妨げる問題）／P1（品質を著しく損なう問題）／P2（仕上げ）／P3（好み）。
5. 優先順位順に 個別の変更を加えます。修正ごとに再撮影し、デザインの意図が損なわれていないことを確認します。
6. 報告： スクリーンショットの参照先、重要度、各項目に対する一文の修正案を含む指摘事項の表を作成します。

2. テイストの確認（ビジュアル品質）

• 見極めの問い： このページは、デフォルト設定のエージェントが生成したものに見えませんか（粗悪なパターン：紫のグラデーション、中央揃えのヒーロー＋3 枚のカード、絵文字アイコン、Inter のみ、rounded-2xl、ブラウザーの枠ごと写したスクリーンショット）？「はい」はすべて P1 です。
• 階層： 各ビューポートに最も目立つ要素が 1 つありますか？ユーザーの視線はビジネス上の狙いどおりの場所に向かいますか？
• 文字： 10px 未満のテキスト、3 種類を超えるウェイト、ディスプレイ書体とのコントラストがない状態、本文の全幅表示、6 行に及ぶ段落、見出しに取り残された短い最終行はありませんか？
• 色： 意味のある色が約 3 色を超えていませんか？グラデーションを装飾目的で使っていませんか？1 つのビューポートでアクセントカラーを 4 回以上使っていませんか？淡い塗りつぶしの上に白文字を置いていませんか？コントラストが不足していませんか（正確な基準：本文 4.5:1／大きな文字 3:1／UI 3:1）。
• 配置： 同じ辺を共有する要素が揃っていますか（目視で確認）？細い罫線のグリッドになっていますか、それともカードがばらばらに浮いていませんか？スペーシングのスケールは一貫していますか（7px や 13px のパディングはありませんか）？
• 奥行き： 奥行きの表現が影だけに頼っていませんか？あらゆる場所にガラス風の表現を使っていませんか？カードの中にカードを入れ、その中にさらにカードを入れていませんか？

3. ヒューリスティックの確認（ユーザビリティ — Nielsen の 10 原則を適用）

1. システム状態の可視性（2〜3 秒）：すべての操作にフィードバックがありますか？反応しないボタンはありませんか？読み込み状態は用意されていますか？
2. 現実世界との一致： 言葉遣いは会社側ではなく、ユーザーに合わせていますか（一般向けサイトで「インスタンスをデプロイ」するのは不合格です）。
3. ユーザーの主導権と自由： どこからでも抜け出せますか？破壊的な操作には取り消し機能がありますか？
4. 一貫性： 同じ操作はどこでも同じ見た目ですか？ボタンのスタイルは統一されていますか？同じ場所にたどり着く方法は 1 つに絞られていますか？
5. エラーの予防： 破壊的な操作に確認を求めていますか？送信ボタンには誤操作を防ぐ仕組みがありますか？フォームにオートコンプリートがありますか？
6. 想起より再認： 独自の専門用語はありませんか？ナビゲーション名は見ただけで意味が分かりますか？
7. 柔軟性： 初心者向けの導線を複雑にせず、リピーター向けのショートカット（検索、キーボード操作）を用意していますか？
8. 美しさと最小限のデザイン： 主なアクションを隠すものはすべてノイズです。役割のない要素は報告書で削除対象とします。
9. エラーの適切な伝達： すべてのエラーで、何が起きたのか、なぜ起きたのか、どうすればよいのかを伝えていますか。「エラー」とだけ表示してはいけません。
10. ヘルプとドキュメント： ユーザーが行き詰まる場所にヘルプがありますか？誰も訪れないヘルプセンターに置くだけでは不十分です。

4. アクセシビリティの確認（簡易版 — taste-accessibility を参照）

• Tab キーで移動します。すべての停止位置でフォーカスが見えますか？フォーカストラップはありませんか？順序は論理的ですか？
• すべての入力欄にラベルがありますか？すべてのボタン／リンクにテキストがありますか？代替テキストは適切か、空になっていますか？
• 表面ごとにコントラストを抜き取り確認します（見出し／本文／ボタン／プレースホルダー）。
• prefers-reduced-motion に対応していますか？自動再生や自動切り替えを一時停止できますか？

5. コンバージョンの確認（監査だけでなく改善を求められた場合）

• ファーストビューに主な CTA が 1 つありますか？二次アクションは視覚的に目立たなくするか、後回しにしていますか？
• 提供価値は 8 秒以内に伝わりますか（見出しで伝えていますか？小さな補足文に任せていませんか？）。
• 摩擦要因を洗い出します。「興味がある」から「開始する」までの入力欄、手順、クリックを確認し、それぞれに必要性がありますか？
• 意思決定が行われる場所（CTA の近く、料金表示）に信頼を示す情報がありますか（利用者の声、保証、隠れた条件がないこと）。

6. レポート形式（固定）

## Audit — <page> (<viewport set>)

### P0 — Blocking
- [screenshot ref] finding + one-sentence fix

### P1 — Quality
...

### P2 — Polish
...

### P3 — Preference
...

### Verdict (one paragraph)
Is the design argument clear? What single change would improve the page most?

重要度の扱い：P3の項目は記載しますが、P1と同じセッション内では修正しません。評価結果では変更点を1つだけ挙げます。1つに絞れない場合、監査で本当の問題を見つけられていません。

7. チェックリスト（該当した場合は監査不合格）

• スクリーンショットを撮影または確認していない（コードだけで監査してはいけません）。
• 指摘事項に重要度またはスクリーンショットへの参照がない。
• スロップのパターンを「スタイルの好み」として却下している（これらはP1です）。
• 監査全体の完了前にページ上の何かを修正した。
• 評価結果で最も重要な変更点を1つだけ挙げていない。