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（良い点）
- 良い点の説明