frontend-design-review

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

概要

このスキルでは、UI/UX デザインの品質、デザインシステムの一貫性、アクセシビリティへの準拠、レスポンシブデザインのパターンを網羅し、徹底したフロントエンドデザインレビューを実施するための専門的なガイダンスを提供します。開発ライフサイクルの早い段階でデザイン上の問題を特定し、実装前にデザインが品質基準、アクセシビリティ要件、ビジネス目標を満たしていることを確認できます。

主な機能

1. UI/UX デザイン品質レビュー

• ビジュアルデザインの評価（タイポグラフィ、色、余白、レイアウト、ビジュアルヒエラルキー）
• ユーザーエクスペリエンスの評価（フロー、インタラクション、ナビゲーション、ユーザビリティ）
• 画面やユーザージャーニー全体にわたるデザインの一貫性の確認
• ブランドとの整合性およびビジュアルアイデンティティの検証
• 認知負荷の分析

2. デザインシステムの検証

• コンポーネントライブラリのレビュー（デザイン、バリエーション、状態、再利用性）
• デザイントークンの検証（色、タイポグラフィ、余白）
• 一貫性を保つためのパターンライブラリの評価
• ドキュメント品質の評価
• デザインシステムのガバナンス評価

3. アクセシビリティへの準拠

• WCAG 2.1 AA への準拠の確認
• 色のコントラストの検証（テキストは 4.5:1、UI コンポーネントは 3:1）
• キーボードナビゲーションとフォーカス管理
• スクリーンリーダーのサポートの検証
• アクセシブルなインタラクションパターンのレビュー

4. レスポンシブデザインのレビュー

• ブレークポイント戦略の評価
• モバイルファーストアプローチの評価
• タッチターゲットサイズの確認（最小 44x44px）
• ビューポートに応じたコンテンツの適応
• パフォーマンスに関する考慮事項

5. コンポーネントアーキテクチャの評価

• コンポーネント階層と合成パターン
• 再利用性と柔軟性の評価
• 状態管理のレビュー（デフォルト、ホバー、アクティブ、無効、エラー、読み込み中）
• コンポーネントのバリエーションとカスタマイズパターン
• コンポーネントのドキュメント品質

ワークフロー

フェーズ 1：レビュー前の準備

1. デザイン素材を収集する

• Figma/Sketch のファイル、デザイン仕様、モックアップを収集します
• デザインシステムのドキュメントとコンポーネントライブラリを入手します
• ブランドガイドラインとスタイルガイドを確認します
• ユーザー調査の結果とペルソナを収集します

2. コンテキストを把握する

• プロジェクト要件とビジネス目標を確認します
• 対象ユーザーとユースケースを把握します
• 主要なユーザージャーニーと重要なフローを特定します
• 技術的な制約とプラットフォーム要件を記録します

3. レビュー範囲を定義する

• レビュー対象の画面やフローを特定します
• レビューの深さ（概要レベルか詳細か）を決定します
• 重要度に基づいて優先順位を設定します
• スケジュールと成果物を定めます

フェーズ 2：デザインレビューの実施

ステップ 1：ビジュアルデザインのレビュー

• タイポグラフィを評価します（フォントの選定、文字のスケール、行の高さ、一貫性）
• カラーシステムを評価します（パレット、コントラスト、意味に応じた使用、トークン）
• 余白とレイアウトをレビューします（グリッドシステム、ホワイトスペース、配置）
• ビジュアル階層を確認します（サイズ、色、位置、強調）
• アイコンを検証します（スタイル、サイズ、明瞭さ、一貫性）
• 画像とメディアを評価します（品質、アスペクト比、最適化）

ステップ 2：デザインシステムへの準拠

• コンポーネントの使用がデザインシステムに沿っていることを確認します
• デザイントークンが使用されていることを確認します（ハードコードされた値がないこと）
• 確立されたパターンからの逸脱を特定します
• コンポーネントのバリエーションと状態を検証します
• カスタムコンポーネントとシステムコンポーネントをレビューします

ステップ 3：アクセシビリティ監査

• すべてのテキストと UI 要素のカラーコントラスト比をテストします
• キーボード操作とタブ順を確認します
• フォーカスインジケーターの視認性と明瞭さを確認します
• ARIA ラベルとセマンティック構造を検証します
• 画像の代替テキストをレビューします
• フォームラベルの関連付けを評価します
• インタラクティブ要素のアクセシビリティをテストします

ステップ 4：レスポンシブデザインの評価

• ブレークポイント戦略をレビューします（モバイル、タブレット、デスクトップ）
• さまざまなビューポートでのコンテンツの適応を確認します
• モバイルでのタッチターゲットサイズを確認します
• モバイル向けのナビゲーションパターンを評価します
• 画像のレスポンシブ対応と最適化をレビューします
• デバイス間でのタイポグラフィのスケーリングを検証します

ステップ 5：コンポーネントアーキテクチャの分析

• コンポーネントの構成と階層を評価します
• コンポーネントの再利用性と合成をレビューします
• コンポーネントの状態が網羅されているか確認します
• バリエーションの設計と柔軟性を評価します
• コンポーネントの props とカスタマイズを検証します

ステップ 6：ユーザーエクスペリエンスの評価

• ユーザーフローとタスク完了までの経路を分析します
• ナビゲーション構造と情報の見つけやすさを評価します
• インタラクションパターンとフィードバックを確認します
• エラー状態とエラー処理を評価します
• 空の状態と読み込み中の状態をレビューします
• フォームの設計と検証パターンを確認します

フェーズ 3：所見の文書化

1. 重要度別に問題を分類する

• 重大：進行を妨げる問題。リリース前に必ず修正する必要があります
• 高：ユーザビリティまたはアクセシビリティに重大な影響を及ぼす問題
• 中：回避策のある問題。早めに修正する必要があります
• 低：細かな仕上げ。対応すると望ましい項目です

2. 詳細な所見レポートを作成する 包括的なレポートの構成については、design-review-report-template.md を参照してください

以下を含めます：

• 主要な統計情報を含むエグゼクティブサマリー
• レビュー範囲の記録
• 具体例を添えたカテゴリ別の所見
• 重要度を付けた問題の一覧
• ポジティブな所見（うまく機能している点）
• 優先度付きの実行可能な推奨事項
• 担当者とスケジュールを含むアクション項目

3. 視覚的な例を示す

• 注釈を付けたスクリーンショットで問題を示します
• 推奨事項について変更前と変更後を示します
• コントラスト比の測定値を含めます
• コンポーネントの状態に関する問題を視覚的に記録します

フェーズ 4：解決策の検討

1. 修正の優先順位を付ける

• 必須の修正と、あると望ましい修正を分けます
• 実装にかかる工数を考慮します
• ユーザーへの影響と開発コストのバランスを取ります

2. アクションプランを作成する

• 担当者を割り当てます（デザインチームまたは開発チーム）
• 現実的なスケジュールを設定します
• フォローアップレビューを予定します

3. 決定事項を記録する

• 受け入れたリスクやトレードオフを記録します
• 今後の作業に延期した項目を記録します
• パターンが変わる場合はデザインシステムを更新します

重大度レベルのガイドライン

重大（ブロッキング）

• WCAG AA の要件に違反している（法的リスク）
• ユーザーの主要なタスクを完全に妨げている
• データ損失やセキュリティ上の問題を引き起こしている
• ブランドやユーザーの信頼を著しく損なっている

優先度：高

• ユーザー体験を大幅に低下させている
• 多数のユーザーに影響している
• アクセシビリティに大きな障壁を生じさせている
• デザインシステムとの不整合により、混乱を招いている

優先度：中

• 回避策はあるものの、ユーザー体験に悪影響を与えている
• 一部のユーザーに影響している
• 軽微なアクセシビリティ上の問題がある（WCAG AAA）
• 目につくデザインの不整合がある

優先度：低

• 仕上げや最適化に関する項目
• まれなケースで発生する問題
• 軽微なビジュアルの調整
• あれば望ましい改善

アクセシビリティのクイックリファレンス

WCAG 2.1 AA の要件：

• 色のコントラスト比：通常のテキストは 4.5:1、大きなテキスト（18pt 以上、または太字で 14pt 以上）は 3:1
• UI コンポーネントのコントラスト比：最低 3:1
• キーボード操作への対応：すべての機能をキーボードで利用可能
• フォーカスの可視化：操作可能な要素に明確なフォーカスインジケーターを表示
• テキストによる代替：すべての画像に適切な代替テキストを設定
• フォームラベル：すべての入力欄に対応するラベルを設定
• セマンティック HTML：適切な見出し階層とランドマークを使用
• タッチターゲット：最低 44x44 CSS ピクセル

テストツール：

• 色のコントラスト比：WebAIM Contrast Checker、Stark プラグイン
• キーボード操作：Tab/Shift+Tab を使った手動テスト
• スクリーンリーダー：VoiceOver（Mac）、NVDA（Windows）でテスト

デザインシステムのレビューチェックリスト

コンポーネントの使用：

• すべてのコンポーネントがデザインシステムに基づいている
• 正当な理由のない独自のカスタムバリエーションがない
• コンポーネントのバリエーションが適切に使用されている
• すべてのコンポーネントの状態がデザインされている（デフォルト、ホバー、アクティブ、無効、エラー、読み込み中）

デザイントークン：

• 色にトークン参照を使用している（16 進数値ではない）
• タイポグラフィにトークン参照を使用している（ハードコードされたサイズではない）
• 余白にトークン参照を使用している（8px グリッドシステム）
• 影とエフェクトにトークン参照を使用している

パターン：

• ナビゲーションのパターンがシステムと一貫している
• フォームのパターンがシステムの規約に沿っている
• モーダル／ダイアログのパターンがシステムに準拠している
• 空の状態にシステムのパターンを使用している
• エラー処理がシステムのパターンに沿っている

参照ファイル

レビューの目的に応じて、以下の参照資料を読み込んでください：

• best-practices-for-design-reviews.md - 効果的なデザインレビューのためのレビュー手法、ツール、テクニック

• common-design-issues-to-watch-for.md - レビュー時に見つけるべき、よくあるデザイン上の問題と注意すべき兆候

• design-review-process.md - 各レビュー段階の詳細なチェックリストを含む、包括的なステップごとのプロセス

• design-system-patterns.md - デザインシステムの検証基準、コンポーネントパターン、トークンの使用ガイドライン

• responsive-design-patterns.md - ブレークポイント戦略、モバイルファーストのパターン、レスポンシブデザインのベストプラクティス

• accessibility-guidelines.md - WCAG 2.1 AA 準拠の詳細なガイドライン、テスト手順、アクセシビリティのパターン

• severity-levels.md - デザイン上の問題を分類するための、重大度レベルの詳細な定義と基準

• design-review-report-template.md - レビュー結果を記録するための、すべてのセクションを含む完全なレポートテンプレート

レビューの流れの例

シナリオ：Figma で新しいチェックアウトフローのデザインをレビューする

1. 準備（30 分）

   • チェックアウトの要件と成功指標を確認する
   • チェックアウトフローの 5 つの画面を特定する
   • 決済に関するコンプライアンス要件を収集する
   • デザインシステムのコンポーネントライブラリを確認する

2. ビジュアルデザインのレビュー（45 分）

   • 5 つすべての画面でタイポグラフィの一貫性を確認する
   • CTA ボタンの色のコントラストを検証する（2 件の問題を発見）
   • 余白が 8px グリッドに従っていることを確認する
   • 決済画面の視覚的な階層を確認する

3. アクセシビリティ監査（60 分）

   • 色のコントラストをテストする：テキスト要素 3 件が不合格（4.2:1、4.5:1 が必要）
   • キーボード操作の流れを確認する：画面 3 で Tab の順序が不適切に飛ぶ
   • ARIA ラベルを検証する：決済入力欄にラベルとの関連付けがない
   • エラー状態を確認する：エラーメッセージにセマンティックマークアップがない

4. レスポンシブデザインのレビュー（30 分）

   • モバイルのブレークポイントを確認する：フォーム入力欄が小さすぎる（高さ 38px）
   • タブレットのレイアウトを検証する：適切に調整されている
   • コンテンツのリフローをテストする：問題なし

5. デザインシステムの確認（20 分）

   • システムにないカスタムボタンのバリエーションを発見
   • 余白にトークンではなくハードコードされた値を使用
   • フォームのパターンはシステムの規約に準拠 ✅

6. 指摘事項の記録（45 分）

   • 重大な問題 3 件：コントラストの不合格、タッチターゲットのサイズ
   • 優先度の高い問題 5 件：キーボード操作、ラベルの欠落
   • 中程度の問題 4 件：デザイントークンの使用、カスタムコンポーネント
   • 視覚的な例を含むテンプレートを使用してレポートを作成する

7. 成果物

   • 12 件の指摘事項を含むデザインレビューレポート
   • 個別の問題に関する Figma の注釈付きコメント
   • 担当者を割り当てた優先順位付きアクション項目
   • 1 週間後のフォローアップレビューを予定する

合計時間：包括的なレビューに約 3.5 時間

効果的なレビューのヒント

具体的に伝える：「コントラストを改善してください」とは言わないでください。「青い背景の本文テキストのコントラスト比は 3.8:1 で、4.5:1 が必要です。テキストを #1a1a1a に暗くするか、背景を明るくしてください」と伝えます。

例を示す：注釈付きのスクリーンショットを含めます。問題を示し、視覚的な修正案を提示します。

優先順位を付ける：必須の修正と、できれば対応したい項目を明確に分けます。ユーザーへの影響を重視します。

背景を説明する：問題が重要な理由を説明します。「このコントラストの不合格は、弱視のあるユーザーの 8% に影響します。」

建設的に伝える：うまくできている点も認めます。批判と評価のバランスを取ります。

協力する：最終決定の前に、デザイナーと指摘事項を確認します。解決策について意見を聞きます。

フォローアップする：修正を確認するための再レビューを予定します。問題が解決するまで追跡します。