design-critique

/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 sentence first reaction — what works, what's the biggest opportunity]

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

### Visual Hierarchy
- **What draws the eye first**: [Element] — [Is this correct?]
- **Reading flow**: [How does the eye move through the layout?]
- **Emphasis**: [Are the right things emphasized?]

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

### Accessibility
- **Color contrast**: [Pass/fail for key text]
- **Touch targets**: [Adequate size?]
- **Text readability**: [Font size, line height]

### What Works Well
- [Positive observation 1]
- [Positive observation 2]

### Priority Recommendations
1. **[Most impactful change]** — [Why and how]
2. **[Second priority]** — [Why and how]
3. **[Third priority]** — [Why and how]

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

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

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

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

• デザイン上の判断を、最近のユーザーフィードバックやサポートチケットと照らし合わせます

ヒント

1. コンテキストを共有する — 「これは B2B SaaS のチェックアウトフローです」と伝えると、関連性の高いフィードバックを提供できます。
2. 段階を明示する — 初期の検討と最終的な仕上げでは、フィードバックの内容が異なります。
3. 重点項目を指定する — 「ナビゲーションだけ見て」と伝えると、特定の領域についてより詳しくフィードバックできます。