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

## Design Review Summary

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

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

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

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