design-critique

デザインレビューのスキル

このスキルでは、確立された UX フレームワークを用いて、体系的で実行可能なデザインフィードバックを提供します。肯定的な所見と、明確で優先順位を付けた改善提案のバランスを取ります。

こちらとは少し違いますか？ Figma ファイルを対象にプロダクトマネージャーの視点からレビューしたい場合は、figma-design-critique-pm を使用してください。

必須入力

与えられた情報に基づいて作業してください。次の項目が不足していても、完全な出力を作成してください。不足箇所には妥当な仮定を (仮定、要確認) と記し、最後にそれらの仮定を列挙してください。まず質問するのは、対象そのものが不明な場合（書く内容が何もない場合）に限ります。

• レビュー対象（画面、フロー、コンポーネント、製品全体）
• デザインの説明または添付画像（画像がない場合は説明してください。このスキルはその場合も機能します）
• ユーザーの目標（ユーザーはこのデザインで何を達成しようとしていますか？）
• コンテキスト（ウェブ／モバイル／デスクトップアプリ／物理的な製品）
• 段階（初期ワイヤーフレーム／中程度の忠実度／高忠実度／公開中の製品）
• 主な懸念事項（任意。例：「オンボーディングが長すぎるのではないかと心配です」や「CTA が分かりにくいと思います」）

出力構成

---

デザインレビュー：[デザイン名または画面]

ユーザーの目標： [ユーザーが達成する必要のあること] コンテキスト： [プラットフォーム／段階] レビューの焦点： [主な懸念事項が記載されている場合はそれを、記載がない場合は「全体レビュー」]

---

1. 効果的な点

[デザインがうまく機能している点について、具体的で誠実な所見を3〜5件記載します。無理に褒めず、本当に優れている点だけを挙げてください。具体的に述べてください。「視覚的な階層によって、見出し → 補足情報 → CTA へと視線が明確に導かれている」は有用です。「すっきりしている」では不十分です。]

---

2. 優先度の高い問題

ユーザーの目標への影響度に基づいて問題を順位付けしてください。次の区分を使用します。

• 🔴 高 — ユーザーの目標達成を妨げる、または大きく損なう
• 🟡 中 — 摩擦や混乱を招くが、達成を妨げるほどではない
• 🟢 低 — 仕上げや好みの問題。修正するとよいが、重要ではない

各問題について、以下を記載します。

[優先度] 問題 [N]：[短い名称]

何が起きているか： [具体的なデザイン上の問題を説明します。対象となる要素、画面、操作を正確に示してください。]

重要である理由： [ユーザーの目標または特定の原則と結び付けてください。「分かりにくい」とだけ述べず、なぜ混乱を招くのか、ユーザーにどのような結果をもたらすのかを説明してください。]

フレームワークの参照先： [違反している原則の名称を示します。例：ニールセンのヒューリスティック #6（想起より再認）、ゲシュタルトの近接、JTBD の明確さ、フィッツの法則など。]

推奨事項： [具体的で実行可能な提案。「ボタンを大きくする」ではなく、「タッチターゲットのガイドラインを満たすよう、主要 CTA を少なくとも 44x44px にしてください。誤タップを減らすため、入力欄の横ではなくフォームの下に配置することも検討してください。」のように記載します。]

---

3. ヒューリスティック評価

ニールセンのユーザビリティヒューリスティック 10 項目に照らした簡易評価を行います。各項目を ✅ 合格／🟡 一部合格／❌ 不合格で評価してください。

ヒューリスティック	状態	備考
1. システム状態の可視性
2. システムと現実世界の一致
3. ユーザーの制御と自由
4. 一貫性と標準
5. エラーの防止
6. 想起より再認
7. 柔軟性と効率性
8. 美的でミニマルなデザイン
9. エラーの認識、診断、回復をユーザーに支援する
10. ヘルプとドキュメント

デザイン上で確認できる内容に関係するヒューリスティックだけを含めてください。対象範囲外の項目を理由に評価を下げないでください。

---

4. ゲシュタルト原則の確認

[適切に適用されている、または違反されているゲシュタルト原則について述べてください。]

• 近接： [関連する要素が明確にグループ化されていますか？]
• 類同： [類似した要素が同じように見えますか？]
• 連続： [デザイン上で視線が自然に流れますか？]
• 図と地： [主要なコンテンツが背景から明確に区別されていますか？]
• 閉合： [暗示された図形やコンテナーによって混乱が生じていませんか？]

---

5. JTBD との整合性

[このデザインが、提示されたジョブ・トゥ・ビー・ダンにどの程度応えているか評価してください。]

• デザインからユーザーの主なジョブが明確に伝わりますか？ [はい／一部／いいえ — 説明してください]
• 主なジョブから注意をそらす要素はありますか？ [競合する CTA、注意をそらす要素、不明瞭な優先順位があれば列挙してください]
• このデザインが満たす感情的なジョブは何ですか？ [スピード／安心感／コントロール／楽しさ／その他] — ビジュアルデザインはその感情的な目標に合っていますか？

---

6. 推奨する次のステップ 3 つ

影響の大きい変更を優先順に 3 つ挙げてください。それぞれ、次のデザインイテレーションで実行できる内容にしてください。

1. [最も影響の大きい変更 — 具体的に]
2. [2 番目に優先度の高い変更]
3. [3 番目に優先度の高い変更]

---

品質チェック

• 「うまくいっている点」には、実際に確認できる具体的な観察事項だけを含める
• すべての問題に、主観的な意見だけでなく、フレームワークの根拠を示す
• 推奨事項は具体的で、実行可能である
• 優先度（高／中／低）は、ユーザーの目標に対する実際の影響を反映している
• ヒューリスティック評価は、目に見える要素だけを対象にする

アンチパターン

• ビジュアルの好み（例：「この色が好きではない」）から話を始めない — すべての問題に UX の原則またはユーザーへの影響を関連付ける
• 「うまくいっている点」のセクションで問題を捏造しない — 作り上げた称賛は、批評全体の信頼性を損なう
• すべての問題に同じ優先度（高／中／低）を付けない — 優先順位付けには、ユーザーへの影響についての適切な判断が必要
• プロダクト画面では JTBD のセクションを省略しない — フィードバックをユーザーのジョブ・トゥ・ビー・ダンに結び付けることが、UX 批評を美的な意見と区別する
• ユーザーがハイファイ段階にいるのに、全面的な再設計が必要な推奨事項を提示しない — 推奨事項の範囲をデザイン段階に合わせる

トリガーとなるフレーズの例

• 「このデザインを批評してください：[説明または画像]」
• 「この UI/UX にフィードバックをください」
• 「この Figma 画面のユーザビリティ上の問題を確認してください」
• 「このユーザーフローの問題点は何ですか？」
• 「[画面／プロダクト] のヒューリスティック評価をしてください」