/design-critique

不慣れなプレースホルダーが表示されたり、どのツールが接続されているか確認する必要がある場合は、CONNECTORS.md を参照してください。

複数の観点から構造化されたデザインフィードバックを取得します。

使い方

/design-critique $ARGUMENTS

デザインをレビューしてください: @$1

Figma URL が提供されている場合は、Figma からデザインを取得します。ファイルが参照されている場合はそれを読みます。それ以外の場合は、ユーザーにデザインを説明するか共有するよう求めます。

必要な情報

• デザイン: Figma URL、スクリーンショット、または詳細な説明
• コンテキスト: これは何か？誰のためか？どの段階か（初期検討、改善、最終版）？
• フォーカス（オプション）: 「モバイルに焦点を当ててください」または「オンボーディングフローに焦点を当ててください」

クリティーク フレームワーク

1. 第一印象（2秒）

• 最初に目に入るものは何か？それは正しいか？
• 感情的な反応は？
• 目的は一目瞭然か？

2. ユーザビリティ

• ユーザーは目標を達成できるか？
• ナビゲーションは直感的か？
• インタラクティブ要素は明らかか？
• 不必要なステップはないか？

3. ビジュアルハイアラキー

• 明確な読む順序があるか？
• 適切な要素が強調されているか？
• ホワイトスペースは効果的に使用されているか？
• タイポグラフィーが適切なハイアラキーを作成しているか？

4. 一貫性

• デザインシステムに従っているか？
• スペーシング、色、タイポグラフィーは一貫しているか？
• 類似した要素は同じように動作するか？

5. アクセシビリティ

• カラーコントラスト比
• タッチターゲットサイズ
• テキスト可読性
• 画像の代替テキスト

フィードバックの与え方

• 具体的に: 「レイアウトが混乱している」ではなく「CTA がナビゲーションと競合している」
• 理由を説明する: フィードバックをデザイン原則またはユーザーのニーズに関連付ける
• 代替案を提案する: 問題を特定するだけでなく、解決策を提案する
• うまくいっていることを認める: 良いフィードバックには肯定的な観察も含める
• 段階に合わせる: 初期検討と最終版では異なるフィードバックを行う

出力

## Design Critique: [Design Name]

### Overall Impression
[1〜2文の初期反応 — 機能していること、最大の改善の機会]

### Usability
| Finding | Severity | Recommendation |
|---------|----------|----------------|
| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |

### Visual Hierarchy
- **What draws the eye first**: [Element] — [これは正しいか？]
- **Reading flow**: [目がレイアウトをどのように移動するか？]
- **Emphasis**: [適切な要素が強調されているか？]

### Consistency
| Element | Issue | Recommendation |
|---------|-------|----------------|
| [Typography/spacing/color] | [Inconsistency] | [Fix] |

### Accessibility
- **Color contrast**: [主要なテキストのパス/失敗]
- **Touch targets**: [適切なサイズか？]
- **Text readability**: [フォントサイズ、行の高さ]

### What Works Well
- [肯定的な観察 1]
- [肯定的な観察 2]

### Priority Recommendations
1. **[最も影響力のある変更]** — [理由と方法]
2. **[2番目の優先事項]** — [理由と方法]
3. **[3番目の優先事項]** — [理由と方法]

コネクターが利用可能な場合

~~design tool が接続されている場合:

• Figma からデザインを直接取得し、コンポーネント、トークン、レイヤーを検査します
• 既存のデザインシステムと比較して一貫性を確認します

~~user feedback が接続されている場合:

• 設計上の決定と最近のユーザーフィードバック、サポートチケットを相互参照します

ヒント

1. コンテキストを共有する — 「これは B2B SaaS のチェックアウトフロー」と言うと、より適切なフィードバックができます。
2. 段階を指定する — 初期検討は最終版とは異なるフィードバックが必要です。
3. フォーカスを指定する — 「ナビゲーションだけを見てください」と言うと、1つの領域についてより詳しい情報が得られます。