frontend-design-review

フロントエンドデザインレビュー

UI の実装をデザイン品質基準およびデザインシステムに照らしてレビューするか、または 独自性があり、本番環境に対応したフロントエンドインターフェースを一から作成します。

2 つのモード

モード 1：デザインレビュー

既存の UI について、デザインシステムへの準拠、3 つの品質の柱（摩擦のなさ、質の高いクラフト、信頼性）、アクセシビリティ、コード品質を評価します。

モード 2：クリエイティブなフロントエンドデザイン

ありきたりな「AI らしい粗雑なデザイン」を避け、明確なコンセプトに基づき、精度高く仕上げた独自性のあるインターフェースを作成します。

---

クリエイティブなフロントエンドデザイン

コーディングを始める前に、デザインの方向性を決めてください。

• 目的：どのような問題を解決しますか？誰が使いますか？
• トーン：ミニマル、マキシマリスト、レトロフューチャー、オーガニック、ラグジュアリー、遊び心のあるデザイン、エディトリアル、ブルータリスト、アールデコ、ソフト／パステル、インダストリアルなど。
• 制約：フレームワーク、パフォーマンス、アクセシビリティの要件。
• 差別化：どのような点で独自性があり、文脈に適していますか？

美的デザインのガイドライン

• タイポグラフィ：美しさを高める個性的なフォントを選びます。ディスプレイフォントと洗練された本文フォントを組み合わせます。Inter、Roboto、Arial、Space Grotesk は避けます。
• 色とテーマ：CSS 変数を使って統一感のあるカラーパレットを作ります。控えめで均等に配色されたパレットより、支配的な色と鮮烈なアクセントを優先します。
• モーション：CSS のみで実装するのが望ましいです。細かなマイクロインタラクションを散りばめるより、段階的に表示する、よく演出されたページ読み込みを優先します。
• 空間構成：非対称、重なり、斜めの流れ、グリッドを崩す要素、ゆとりのある余白 または 適切に制御された密度を取り入れます。
• 背景：グラデーションメッシュ、ノイズテクスチャ、幾何学模様、レイヤー化した透明表現、印象的なシャドウ、粒子のオーバーレイを使います。

避けるもの：使い古されたフォント、ありきたりな配色、予測可能なレイアウト、文脈に合った個性のない型どおりのデザイン。

実装の複雑さはビジョンに合わせます。マキシマリストなら作り込み、ミニマリストなら抑制と精度を重視します。

---

デザインレビュー

デザインシステムのワークフロー

実装前：

1. Storybook／コンポーネントライブラリでコンポーネントを確認し、API と使い方を把握します
2. Figma Dev Mode を使って正確な仕様（間隔、トークン、プロパティ）を確認します
3. デザインシステムのコンポーネントとデザイントークンを使って実装します

レビュー中：

1. 実装を Figma のデザインと比較します
2. デザイントークンが使われていることを確認します（ハードコードされた値ではないこと）
3. すべてのバリエーション／状態が正しく実装されていることを確認します
4. 差異があれば指摘します（デザインの承認が必要です）

コンポーネントが存在しない場合：

1. 既存のコンポーネントを調整できるか確認します
2. 新しいコンポーネントの作成についてデザインチームに相談します
3. 例外とその理由をコードに記録します

レビュープロセス

1. ユーザーのタスクを特定します
2. デザインシステムに一致するパターンがあるか確認します
3. 美的デザインの方向性を評価します
4. 対象範囲（コンポーネント、機能、またはフロー）を特定します
5. 各品質の柱を評価します
6. 問題を採点し、優先順位を付けます（ブロッカー／重大／軽微）
7. デザインシステムの例を挙げて改善案を提示します

基本原則

• タスクの完了：操作は最小限にします。すべての画面で「何ができるか」と「次に何が起こるか」が分かるようにします。
• アクションの階層：1 つの画面につき主要なアクションは 1～2 個にします。副次的なアクションはプログレッシブディスクロージャーで示します。
• オンボーディング：導入時に機能を説明します。設定よりも適切なデフォルトを優先します。
• ナビゲーション：開始地点と終了地点を明確にします。戻る／キャンセルの手段は常に用意します。複雑なフローではパンくずリストを表示します。

---

品質の柱

1. 気づきからアクションまで摩擦がないこと

評価項目： タスクは 3 回以内の操作で完了できますか？主要なアクションは明確で、1 つに絞られていますか？

危険信号： 操作が多すぎる、競合する主要ボタンが複数ある、アクションが見つけにくい、行き止まりがある。

2. 質の高さはクラフトに宿る

評価項目：

• デザインシステムへの準拠：Figma の仕様に一致し、デザイントークンを使用している
• 美的デザインの方向性：個性的なタイポグラフィ、統一感のある配色、意図的なモーション
• アクセシビリティ：最低でもグレード C（WCAG 2.1 A）、理想はグレード B（WCAG 2.1 AA）

危険信号： ありきたりな AI 風のデザイン、ハードコードされた値、Figma と一致しない実装、リフローの破損、フォーカスインジケーターの欠落。

3. 信頼性の高い構築

評価項目：

• AI の透明性：AI 生成コンテンツに関する免責事項
• エラーの透明性：対処方法が明確なエラーメッセージ

懸念事項： AI に関する免責事項がない、対処方法の案内がない不透明なエラー。

---

レビュー出力形式

レビュー用テンプレートの全容については、references/review-output-format.md をご覧ください。

レビュー種別の修飾子

状況に応じたレビューの重点項目（PR、クリエイティブ、デザイン、アクセシビリティ）については、references/review-type-modifiers.md をご覧ください。

クイックチェックリスト

デザインシステムへの準拠、美的品質、摩擦のなさ、丁寧な仕上がり、信頼性という各柱を対象とした承認前チェックリストについては、references/quick-checklist.md をご覧ください。

パターン例

フロントエンドのクリエイティブな制作とデザインシステムのレビューに関する良い例・悪い例については、references/pattern-examples.md をご覧ください。

---

謝辞

フロントエンドのクリエイティブな制作に関する原則は、Anthropic's frontend-design skill に着想を得ています。デザインレビューの原則と品質の柱となるフレームワークは、体系的な UI 評価のために @Quirinevwm が作成しました。