critique

必須の準備

frontend-designを読み、Context Gathering Protocolに従ってください。利用可能なコンテキストを再利用し、重要な不足情報についてのみ質問してください。さらに、このインターフェースで何を実現しようとしているのかを把握してください。

---

インターフェースが実際に機能するかどうかを、技術面だけでなく、デザインされた体験として総合的に批評してください。デザインディレクターの立場でフィードバックするように考えてください。

グレースケールテスト、アクションの優先順位付け、ラベルと値の扱いについては、階層チェックリストを参照してください。 行の長さ、行の高さ、ベースライン、配置、タイトルの抑制については、テキストの階層と読みやすさを参照してください。 作業記憶の限界と8項目のチェックリストについては、認知負荷を参照してください。 慣れ親しんだパターン、ターゲットサイズ、フォーカスの扱い、オーバーレイの動作を評価する際は、インタラクションデザインを参照してください。 インターフェースがサイト内検索、コマンドパレット、オートサジェスト、検索結果の関連性、検索結果がない場合の回復に依存している場合は、検索と見つけやすさを参照してください。 批評の対象にレガシーシステム、旧環境と新環境の継ぎ目、移行候補、運用上の高リスクなワークフローが含まれる場合は、レガシーのモダナイゼーションを参照してください。 統合されたアンチパターンの一覧については、ai slop detectionを参照してください。 主・副・第3のアクションを評価する際は、アクションの階層を参照してください。 色が意味を担っている場合は、セマンティックカラーを参照してください。 境界線、カードの使用、重なり、背景色の切り替えを判断する際は、サーフェスの分離を参照してください。 スクリーンショット、アイコン、メディアが読みやすさや仕上がりに影響する場合は、画像の扱いを参照してください。

共有のfrontend-designリファレンスを、階層、読みやすさ、認知負荷に関する基本原則として扱い、このスキルでは評価、採点、優先順位付けに専念してください。

空の状態が関係する場合は、empty-stateの観点からゼロデータの画面そのものを評価し、より広い範囲の利用開始、価値を実感する瞬間、初回利用時の案内については、onboardの観点から評価してください。

キャプチャ、証拠の限界、再利用可能な指摘記録には、ビジュアル検証を使用してください。既定ではレビューして報告します。明示的な実装許可、または以前の実装許可の範囲内でのみ問題を修正してください。依頼された場合、または既存のワークフローに含まれている場合を除き、保存用レポートは作成しないでください。

フェーズ1：デザイン批評

次の観点からインターフェースを評価してください。

1. プロダクトとブランドの適合性

この構成が対象ユーザーとタスクに適しているかを評価してください。AIスロップ検出は診断のための問いかけとして使い、自動的な禁止事項として扱わないでください。承認済みのフォント、色、慣れ親しんだパターンを維持してください。ページがAIによって生成されたかどうかを推測するのではなく、具体的な階層、読みやすさ、ブランド適合性の問題を報告してください。

2. 視覚的階層

• 最も重要な要素に視線が最初に向かいますか？
• 主アクションは明確ですか？2秒以内に見つけられますか？
• 重要な要素が際立っていますか。それとも強調が均等に分散し、何も印象に残りませんか？（フォン・レストルフ効果）
• サイズ、色、位置は重要度を正しく伝えていますか？
• 異なる強さで示すべき要素同士が、視覚的に競合していませんか？
• 画面をグレースケールで見たと想像しても、階層は明確ですか？
• セクションタイトルは、紹介するコンテンツより控えめですか。それとも注目を奪っていますか？
• アクションの階層が平坦化し、複数のボタンが同じくらい緊急に感じられませんか？

3. 情報アーキテクチャと認知負荷

ワーキングメモリのルールと8項目のチェックリストについては、cognitive-loadを参照してください

• 構成は直感的ですか？初めて使うユーザーにも、情報の整理方法がわかりますか？
• 関連するコンテンツは論理的にまとめられていますか？
• 一般的なパターンは、ユーザーがすでに期待しているとおりに動作しますか？ナビゲーション、検索、テーブル、フィルター、フォーム、タブ、ドロップダウン、ページネーション、設定について、不必要に目新しい方法になっていないか確認してください。
• 回避できる複雑さは、デフォルト、事前入力、ガイダンスを通じてシステム側に取り込まれていますか？それとも、ユーザーが手動で管理するよう押しつけられていますか？（テスラーの法則）
• 画面に表示される選択肢によって、判断が難しくなっていませんか？選択肢の数に一律の上限を設けるのではなく、グループ分け、なじみやすさ、タスクの複雑さを評価してください。
• ナビゲーションは明確で予測可能ですか？
• 検索機能がある場合、意図、同義語、誤字、よく使われる遷移先を理解できますか？それとも、内部用語を知らないユーザーに不利益を与えますか？
• 古いフローと新しいフローが混在する場合、脆弱なステップが1つあるだけで、プロダクト全体が信頼できない、あるいは一貫性がないと感じられませんか？
• プログレッシブディスクロージャー：複雑さは必要なときだけ明らかになりますか？それとも、最初からユーザーに押しつけられていますか？
• リファレンスにある8項目の認知負荷チェックリストを実施してください。不合格数を報告してください：0～1＝低（良好）、2～3＝中程度、4以上＝重大。

4. 感情の変化

• このインターフェースはどのような感情を引き起こしますか？それは意図したものですか？
• ブランドの個性に合っていますか？
• 信頼感、親しみやすさ、高級感、遊び心など、意図した印象を与えていますか？
• 想定するユーザーは「これは自分のためのものだ」と感じますか？
• 頻繁に行う操作に十分な速さで反応し、ユーザーの作業の流れを保てていますか？それとも、繰り返される待ち時間が集中を妨げていますか？（ドハーティの閾値）
• ピーク・エンドの法則：最も強く印象に残る瞬間はポジティブですか？体験の終わり方は良好ですか（確認、祝福、明確な次のステップなど）？
• 感情の谷：オンボーディング時の不満、エラー時の行き詰まり、機能の発見しにくさ、重要な場面（支払い、削除、コミット）での不安の高まりがないか確認してください。
• ネガティブな瞬間への介入：ユーザーが不満や不安を感じやすい場面に、デザイン上の介入がありますか？（進行状況の表示、安心感を与える文言、取り消しオプション、社会的証明など）

5. 発見しやすさとアフォーダンス

• インタラクティブな要素だと見てすぐにわかりますか？
• 説明がなくても、ユーザーは何をすればよいかわかりますか？
• 主な操作対象や頻繁に使う操作対象は、特に粗いポインターの環境でも、自信を持って操作できるだけの大きさと近さがありますか？
• 強力な機能には、そのリスクに見合った保護策がありますか（権限、プレビュー、取り消し、確認、履歴、明示的な結果の説明など）？
• ホバー時やフォーカス時の状態は、有用なフィードバックを提供していますか？
• もっと目立たせるべき隠れた機能はありませんか？

6. 構成とバランス

• レイアウトのバランスは取れていますか？それとも、偏りが気になりますか？
• 余白は意図的に使われていますか？それとも単に残った空間ですか？
• 余白や繰り返しに視覚的なリズムがありますか？
• 非対称性は意図的なデザインに見えますか？それとも偶然に見えますか？
• グループ間の余白はグループ内より大きくなっていますか？それとも、グループの境界が曖昧ですか？
• ボーダーは必要な構造を示していますか？それとも、余白や背景のコントラスト不足を補っているだけですか？
• カード、シャドウ、重なり、背景の変化は、明確な区分けの方針に沿って使われていますか？それとも、複数の手法が重なって雑然としていませんか？

7. コミュニケーション手段としてのタイポグラフィ

• 文字の階層によって、最初、次、最後に読むべきものが明確に示されていますか？
• 本文は読みやすいですか？（行の長さ、間隔、サイズ）
• フォントの選択はブランドやトーンを引き立てていますか？
• 見出しの各レベルには十分なコントラストがありますか？
• 実質的な文字スケールとして機能しないほど、よく似たフォントサイズが多すぎませんか？
• 行の高さは行の長さに合っていますか？長い段落が窮屈に感じられませんか？
• セクションタイトルは、その役割に対して視覚的に目立ちすぎていませんか？
• リンクは、文字の太さ、下線、ホバー時の表現を落ち着かせる代わりに、色によって注意を引きすぎていませんか？
• 数値を見比べる必要がある場合、比較しやすいよう数値の列が揃っていますか？

8. 意図を持った色使い

• 色は単なる装飾ではなく、情報を伝えるために使われていますか？
• 配色に統一感がありますか？
• アクセントカラーは適切な要素に注目を集めていますか？
• 色覚に特性のあるユーザーにも使いやすいですか？（技術的に対応しているだけでなく、意味がきちんと伝わりますか？）
• 色付きの面に適切な文字色を使っていますか？それとも、色の上に薄いグレーの文字を重ねた、読みづらい表示になっていませんか？
• 配色に体系性を感じられないほど、その場しのぎの色合いが多すぎませんか？

9. 状態とエッジケース

• 空の状態：ユーザーを次のアクションに導いていますか？それとも、ただ「ここには何もありません」と伝えているだけですか？
• 読み込み中の状態：体感の待ち時間を短くしていますか？
• フォームや検索では、問題のない入力の揺れを適切に受け入れていますか？それとも、正規化できる書式上の細かな違いを理由にユーザーを拒否していませんか？（Postel の法則）
• エラー状態：役に立ち、ユーザーを責めない表現になっていますか？
• 成功状態：完了を伝え、次のステップへ導いていますか？
• スクリーンショットは表示サイズでも読みやすいですか？
• アイコンの拡大・縮小は意図的に見えますか？粗くなったり、ぼやけたりしていませんか？

10. マイクロコピーとトーン

• 文章は明確で簡潔ですか？
• 人間らしい表現になっていますか？（ブランドにふさわしい人間の声になっていますか？）
• ラベルやボタンの意味は明確ですか？
• フローに、同意をわかりにくくする、キャンセルを妨げる、罪悪感をあおる文言、偽りの緊急性を演出する、望ましくない選択を押しつける階層構造など、操作的な要素はありませんか？
• エラーの文言は、ユーザーが問題を解決するのに役立ちますか？

フェーズ 2：調査結果を提示する

デザインディレクターのように、フィードバックを次の構成でまとめてください。

デザイン健全性スコア

heuristics-scoring を参照してください

該当し、調査したヒューリスティックを、参照基準に基づいて 0 から 4 で評価してください。それ以外は、未調査または該当なしと記載してください。各判断の根拠となる情報も併記してください。

#	ヒューリスティック	スコア	主な問題
1	システムの状態を可視化する	?	[具体的な所見、または問題がない場合は「—」]
2	システムと現実世界の一致	?
3	ユーザーの主導権と自由	?
4	一貫性と標準	?
5	エラーの防止	?
6	想起より認識	?
7	柔軟性と効率性	?
8	美的で最小限のデザイン	?
9	エラーからの回復	?
10	ヘルプとドキュメント	?
合計		??/40	[評価区分]

スコアはレビュー対象の範囲を評価するものであり、測定されたユーザーの成果を表すものではありません。10 項目すべてが該当し、調査済みの場合に限り、40 点満点の合計を表示してください。それ以外の場合は、合計と評価区分を省略してください。

構成に関する評価

視覚的な階層構造とデザインシステムが、タスクを支えているかどうかを述べてください。具体的な欠陥を挙げ、明示された制約を尊重してください。フォントや配色だけを理由に、問題があると判断してはいけません。

全体的な印象

率直な印象を簡潔に述べてください。うまくいっていること、うまくいっていないこと、最も大きな改善の機会を一つ挙げてください。

うまくいっている点

優れている点を 2～3 個挙げてください。なぜ効果的なのかも具体的に説明してください。

優先度の高い問題

影響の大きい順に、重大なデザイン上の問題を最大5件報告してください。根拠から判断して件数を減らすのは構いません。上限まで埋めるために問題を作り出してはいけません。

各問題にはP0～P3の重大度を付けてください（重大度の定義はheuristics-scoringを参照）：

• [P?] 問題点：問題を明確に示します
• 重要な理由：ユーザーにどのような悪影響があるか、目標をどのように損なうかを説明します
• 修正案：具体的な対処方法を示します
• 推奨コマンド：この問題に対処できるコマンドを次から選びます（/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcase）

表面的な細かい指摘よりも、階層構造の弱さ、恣意的なデザインシステム、アクションの優先順位の不明瞭さ、装飾の過剰さに関する問題を優先してください。

該当する場合は、次の点を明示的に指摘してください：境界線が多すぎる、グループ分けが曖昧、フォントサイズが多すぎる、色合いに一貫した体系がない、セクション見出しが目立ちすぎる、アクションの階層が平坦化している、行の長さと行間が不釣り合い、ラベル：値のアンチパターン、色付きリンクの強調が不要、数値列が右揃えでない、サーフェスの分離方法が弱い、スクリーンショットを縮小すると判読しにくい、アイコンを拡大すると粗く見える、レイヤーが明確に分離されていないために重なりが衝突している。

ペルソナごとの注意点

personasを参照してください

参考資料または確認済みの対象ユーザー情報から、該当する仮想ペルソナを選んでください。ウォークスルーはヒューリスティック評価であり、ユーザー調査ではないことを明記してください。

選んだ各ペルソナについて、主要なユーザー操作を順にたどり、該当する具体的な問題点を列挙してください。

パワーユーザーのウォークスルー： テストした主要操作には8回のクリックが必要で、確認できたショートカットもありません。この操作が頻繁に行われるなら、より短い経路を検討してください。

初回利用者のウォークスルー： サイドバーのアイコンに見えるラベルがありません。機能を見つけにくくなる可能性があります。タスクベースのユーザビリティテストで確認してください。根拠なしに利用をやめると予測してはいけません。

具体的に記述してください。各ペルソナにとって問題となる要素や操作を正確に示します。一般的なペルソナの説明ではなく、その人にとって何が機能しなかったかを書いてください。

軽微な所見

対応を検討する価値がある小さな問題を簡潔に記します。

以下を忘れないでください：

• 率直に伝えます。曖昧なフィードバックは、関係者全員の時間を無駄にします
• 具体的に伝えます。「いくつかの要素」ではなく「送信ボタン」と書きます
• 問題点だけでなく、ユーザーにとって重要な理由も説明します
• 「検討してください」だけで済ませず、具体的な提案を示します
• 厳選して優先順位を付けます。すべてが重要なら、何も重要ではありません
• 批判を和らげすぎないでください。開発者が優れたデザインをリリースするには、率直なフィードバックが必要です

フェーズ3：次のアクションを推奨する

所見と優先順位付きの行動計画を、同じ回答内で提示してください。既知の優先事項、対象範囲、委任済みの選択を引き継ぎます。提案する作業に重大な影響を及ぼす未決事項についてのみ質問してください。質問票への回答を必須の締めくくりにしてはいけません。

重大な所見ごとに、a11y、arrange、clarify、normalize、polishなど、適切なインストール済みスキルを割り当てます。修正を続けられるよう、対象と根拠を十分に詳しく示してください。関連する所見がないコマンドは省略します。仕上げの作業が残っている場合に限り、polishを推奨してください。

修正がすでに許可されている場合は、改めて尋ねず、その範囲内で作業を続けてください。それ以外の場合は、実装を推奨事項として提示します。後続のレビューでは、より高いスコアを約束するのではなく、最新の根拠を使用してください。