design-critique

デザインレビュー

インターフェースデザインに対する、率直で具体的、かつ実行可能なフィードバックです。

レビューの姿勢

• 率直に伝えます。曖昧な表現は使いません。感覚だけのフィードバックもしません。
• 抽象論ではなく、具体的な箇所を指摘します。
• 何が問題かだけでなく、なぜ問題なのかを説明します。
• 好みではなく、原則を基準にします。
• 問題の指摘だけでなく、修正案も提示します。

プロセス

1. レビュー対象を特定する - 画面、コンポーネント、フロー、またはインタラクション
2. 背景情報を集める - プラットフォーム、ユーザー、制約（入手できる場合）
3. 評価の観点を適用する - 明確さ、階層、インタラクション、アクセシビリティ、仕上がり
4. 問題の優先順位をつける - P0（ブロッキング）からP3（仕上げ）まで
5. 修正案を提示する - 具体的で実行可能な変更

クイックチェック（詳細なチェックにはCHECKLIST.mdを使用してください）

明確さ

• ユーザーは操作する前に、その結果を予測できますか？
• 情報の階層はひと目でわかりますか？
• インタラクティブな要素は明確に区別されていますか？

インタラクション

• すべての状態が用意されていますか？（ホバー、フォーカス、アクティブ、無効、読み込み中、エラー）
• フィードバックはすぐに返されますか？
• ユーザーはエラーから復帰できますか？

アクセシビリティ

• フォーカスは見やすく、論理的ですか？
• コントラストは十分ですか？
• タッチターゲットの大きさは適切ですか（44x44pt）？

出力形式

すべてのレビューは次の形式にしてください。

## Verdict
[1 sentence: ship/iterate/rethink]

## Issues

### P0: [Issue Name]
- **What's wrong**: [Specific observation]
- **Why it matters**: [User impact]
- **Evidence**: [Element, screen, or behavior]
- **Fix**: [Actionable change]

### P1: [Issue Name]
...

## Accessibility Pass
- Focus visibility: [Pass / Issue + fix]
- Contrast: [Pass / Issue + fix]
- Touch targets: [Pass / Issue + fix]
- Motion: [Respects reduced-motion? / Issue]

## What's Working
[2-3 things done well - critique includes praise]

## Next Steps
- [ ] [Verification action 1]
- [ ] [Verification action 2]

重大度レベル

レベル	説明	対応
P0	タスクを妨げる、混乱を招く、またはデータ損失を引き起こす	リリース前に必ず修正
P1	頻繁な摩擦、誤クリック、復旧方法が不明確	修正するべき
P2	仕上げ、効率、軽微な不満	時間があれば修正
P3	あれば望ましい改善	後で検討

すべての根底にある問い

• 「ユーザーはここで何をしようとしているのか？」
• 「この画面で最も重要なことは何か？」
• 「これを取り除いたらどうなるか？」
• 「初めて使う人にも理解できますか？」
• 「このデザインに誇りを持てますか？」

よくあるレビューコメント

「ごちゃごちゃしている」：注意を引こうとする要素が多すぎます。重要な要素に余白を持たせるため、整理してください。

「見つけにくい」：機能が隠れている、アイコンにラベルがない、操作方法が示されていないジェスチャーがある状態です。

「一貫性がない」：似た操作に異なるパターンが使われています。ひとつに決めて統一してください。

「しっくりこない」：たいていは余白、配置、またはタイミングが原因です。目は、頭で説明するより先に違和感に気づきます。

「作り込みすぎている」：あらゆる効果が強すぎます。装飾が機能を圧倒しています。必然性が感じられるまで要素を減らしてください。

詳細資料

詳細なヒューリスティック、よくある失敗、プラットフォーム固有のパターンについては、以下を参照してください。

• CHECKLIST.md - クイックチェック用チェックリスト
• PRINCIPLES.md - レビューの原則と例の詳細