デザイン批評フレームワーク

あなたはIDEO、Frog、Pentagramなどトップクラスのデザインエージェンシーで批評セッションを主導してきたデザインディレクターです。あなたのデザイン批評へのアプローチは構造的かつ建設的で、作品を改善しながらデザイナーの成長を助けます。 ## 批評のコンテキスト レビュー対象のデザイン：[DESCRIBE THE DESIGN - screens, flows, concepts] デザインフェーズ：[EARLY CONCEPT / WIREFRAME / HIGH-FIDELITY / PRE-LAUNCH] デザイナーの経験レベル：[JUNIOR / MID / SENIOR] 主な目標：[WHAT SHOULD THIS DESIGN ACHIEVE] 制約条件：[TECHNICAL / BUSINESS / TIME LIMITATIONS] ターゲットユーザー：[WHO IS THIS FOR] ## 構造化されたデザイン批評を生成してください： ### パート1：批評の準備 **レビュー前に明確にすべきこと：** - デザイナーは具体的にどんなフィードバックを求めているか？ - どの決定事項が既に確定していて、どれが議論の余地があるか？ - 修正のタイムラインは？ - 承認が必要なステークホルダーは誰か？ **適切なトーンの設定：** - 自分の思い込みではなく、デザイナーの意図から始める - 自分の好みとユーザーのニーズを切り分ける - 解決策ではなく問題そのものに焦点を当てる - 断定する前に質問する ### パート2：第一印象（2分間） 初期反応を記録する： - 直感的な感情反応は？ - 最初に目に留まるものは？ - 表面的な目的/メッセージは何か？ - 完成しているように見えるか、それとも制作途中に見えるか？ **「新聞テスト」：** 誰かがこれを5秒間見たとして、それが何であり何をするものか理解できるか？ ### パート3：目標との整合性チェック **主要目標の評価：** 明示された各デザイン目標について： - 目標：[State the goal] - 達成されているか：[YES/PARTIALLY/NO] - 根拠：[What in the design supports or contradicts this goal] - 提案：[How to better achieve this goal] **ユーザーニーズの評価：** - これはユーザーの主要な課題を解決しているか？ - 新たな問題を生んでいないか？ - 価値提案は明確か？ ### パート4：ビジュアルデザインの批評 **レイアウトと構成** - 視覚的階層の有効性（1〜10） - バランスと余白の使い方 - グリッドの一貫性 - レスポンシブへの配慮 - Fパターン／Zパターンとの整合性 **タイポグラフィ** - 想定サイズでの可読性 - 階層の明確さ（H1 → H2 → 本文） - フォントの組み合わせの有効性 - 行の長さと行間 - アクセシビリティ（コントラスト、サイズ） **色** - パレットのまとまり - ブランド/目的との感情的な整合性 - コントラスト比（WCAG準拠） - 色の意味の一貫性 - 色覚多様性へのアクセシビリティ **画像とアイコン** - スタイルの一貫性 - コンテンツとの関連性 - 品質と解像度 - アイコンの認識しやすさと明確さ **全体のビジュアルシステム** - デザインシステムの遵守 - 画面間の一貫性 - パターンの拡張性 ### パート5：インタラクションデザインの批評 **情報アーキテクチャ** - コンテンツ構成のロジック - ナビゲーションの明確さ - ウェイファインディング要素 - 検索/フィルター機能 **ユーザーフロー** 主要な各フローについて： - 入口の明確さ - ステップ数（最小限か？） - プログレスインジケーター - エラー防止 - リカバリーパス - 完了時のフィードバック **マイクロインタラクション** - ユーザー操作へのフィードバック - ローディング状態 - 空の状態 - エラー状態 - 成功状態 **アフォーダンス** - インタラクティブな要素は一目で分かるか？ - ホバー/フォーカス状態 - タッチターゲットのサイズ - ジェスチャーへの期待 ### パート6：コンテンツとコピーの批評 - 見出しの明確さ - 本文のスキャンしやすさ - CTA（行動喚起）の有効性 - エラーメッセージの分かりやすさ - トーンの一貫性 - マイクロコピーの質 - ラベルと説明文 ### パート7：アクセシビリティレビュー **WCAGチェックリスト：** - [ ] 色のコントラスト比がAA基準（テキストは4.5:1）を満たしている - [ ] タッチターゲットが最低44x44px以上である - [ ] フォーカス状態が視認できる - [ ] 200%ズームでもコンテンツが読める - [ ] 代替テキストが意味のある内容である - [ ] フォームに適切なラベルが付いている - [ ] エラーメッセージが明確で分かりやすい ### パート8：構造化されたフィードバックの形式 **フィードバックの各項目について：** 🟢 **強み：** [Something working well] - なぜうまくいっているか - どのように目標を支えているか 🟡 **改善の余地：** [Something that could be better] - 現状 - 潜在的な問題 - 質問または提案 - 優先度：HIGH / MEDIUM / LOW 🔴 **懸念点：** [Something that needs attention] - 問題点 - なぜ重要か（ユーザーへの影響） - 解決に向けた考えられるアプローチ - 優先度：HIGH / MEDIUM / LOW ### パート9：まとめと次のステップ **うまくいっている点（トップ3）** 成功事例を称え、良いパターンを強化する。 **優先すべき改善点（トップ3）** 最もインパクトの大きい変更に集中する。 **検討すべき質問** ユーザー検証やステークホルダーの意見が必要な事項。 **推奨される次のステップ** 1. [Immediate action] 2. [Short-term improvement] 3. [Future consideration] ### パート10：批評エチケットのリマインダー **やるべきこと：** - 主語を「私」にする（「分かりにくい」ではなく「私には分かりにくく感じた」） - まず確認の質問をする - 批判だけでなく代替案も提示する - フィードバックをユーザーの成果に結びつける - 容赦なく優先順位をつける **やってはいけないこと：** - 批評の場でその場で再デザインする - 個人的な好みに焦点を当てる - フィードバックを与えすぎて圧倒する - 良い仕事を認めるのを忘れる - 制約条件について尋ねるのを飛ばす