Design Review

---
name: design-review
description: UIデザインをユーザビリティ観点でレビューするスキル
---

# Design Review

UIデザインをニールセンの10ヒューリスティクスとi3DESIGNのユーザビリティチェックリストに基づいてレビューする。

## Usage

```
/design-review <file or URL or screenshot>
```

## Instructions

レビュー対象のUIを以下の10カテゴリでチェックする。

### 1. システムステータスの可視化
- [ ] 入力項目が多い場合はステップ分割+ステッパー表示
- [ ] モード中であることを明示（編集中など）
- [ ] 画面変化をアニメーションで表現
- [ ] オーバーレイ時は背景を透過
- [ ] 絞り込み中の状態を明示（件数、色変化、Chips）
- [ ] エンプティステートを用意
- [ ] 状態変化はアクションの近くでフィードバック
- [ ] 現在地を把握できる（パンくず、タイトル）
- [ ] フリップフロップ問題を回避（オン/オフの区別）

### 2. システムと現実世界の一致
- [ ] ユーザーが分かる言葉を使用（プログラム用語を避ける）
- [ ] ボタン/リンクは「押すと何が起きるか」を明示
- [ ] ボタンは動詞的表現（「OK」ではなく「保存」）
- [ ] 日付は認識しやすい表記（「/」区切り、ゼロパディング）

### 3. ユーザーのコントロールと自由度
- [ ] 操作を元に戻せる/やり直せる
- [ ] カルーセルはドットだけでなくボタンも設置
- [ ] スクロールの先を示唆
- [ ] カード/リストはクリック可能を示唆

### 4. 一貫性と標準化
- [ ] ボタン文言と遷移先のタイトルを一致
- [ ] タブと分かる見た目
- [ ] 機能が違うものは見た目を変える
- [ ] 機能と色を揃える（赤=危険、緑=安心）
- [ ] リンクとボタンを使い分ける
- [ ] テキストリンクは下線+色で明示
- [ ] 外部リンク/新規タブはアイコン付与

### 5. エラー防止
- [ ] クリック/タップ可能エリアに十分な間隔
- [ ] 取り返しのつかないアクションは離れた位置に
- [ ] タップ/クリック可能エリアを広く取る
- [ ] 条件（バリデーション）は先に提示
- [ ] スクロール時に重要情報が隠れない
- [ ] リアルタイムバリデーション
- [ ] 手動入力を避ける（ステッパー、ドロップダウン）

### 6. 想起よりも認識
- [ ] 入力候補を表示
- [ ] プレースホルダーで記入例を明示
- [ ] 適切なフォーム幅（内容を推測可能に）

### 7. 使用の柔軟性と効率性
- [ ] スクロール負荷を軽減（アコーディオン）
- [ ] 価値のあるデフォルト値
- [ ] 自動入力できるものは入力させない
- [ ] 選択肢3個以下はラジオボタン
- [ ] スイッチとチェックボックスの使い分け

### 8. 美的でミニマルなデザイン
- [ ] 可読性の高いテキスト（行間50-100%、行長25-40文字）
- [ ] 錯視を考慮した視覚調整
- [ ] シンプルに（色・フォントを絞る）
- [ ] むやみに情報を隠さない（ホバー必須を避ける）
- [ ] ボタンの優先度を視覚的に表現
- [ ] フォーム項目をグループ化
- [ ] 色だけに頼らない（形状、文字で補足）
- [ ] コントラスト比4.5:1以上
- [ ] 情報のかたまりは7個以下

### 9. エラー時の回復補助
- [ ] エラー内容をリアルタイムに該当フォームの近くに表示
- [ ] 具体的な改善方法を提示

### 10. ヘルプとドキュメント
- [ ] アイコンだけに頼らない（ラベル併用、ツールチップ）

## Output Format

```markdown
## Design Review Summary

### Critical（必ず修正）
- [カテゴリ] 問題の説明 → 改善案

### Warning（修正推奨）
- [カテゴリ] 問題の説明 → 改善案

### Info（提案）
- [カテゴリ] 問題の説明 → 改善案

### Good（良い点）
- 良い点の説明
```