レビューの相手が見つからないという壁
UI を作り込む工程で、レビューは仕上がりを左右します。ところが個人や少人数の現場では、そもそもレビューを頼める相手がいなかったり、いても視点が偏ってしまったりと、この工程を回すこと自体が難しくなりがちです。
そこで活躍するのが Gemini。AI アシスタントとして、Figma のデザインをスクリーンショットとして送信し、リアルタイムで多角的なレビューを受けることができます。ここでは実務的な活用方法を、基礎から解説していきます。
Figma デザインを Gemini に送る基本ステップ
1. Figma でスクリーンショットを取得
Figma のキャンバス上で、レビュー対象の画面をフレーム化します。その後、スクリーンショット機能で出力します。
詳細手順：
- 対象フレームを選択
- 右側パネル > 「Export」を開く
- PNG 形式で書き出し（高解像度推奨：2倍以上）
- オプション：「Include background」にチェック
ポイントは、コンポーネント全体が見やすい解像度で出力することです。スマートフォンのアイコンサイズまで見えるようにしましょう。解像度の目安は 1200x900px 以上が望ましいです。
高品質エクスポート設定：
- Export セクションで「Scale」を「2x」に設定
- 背景色を「White」に統一（Gemini の画像認識が正確になる）
- 必要に応じてマージン（Padding）を追加
2. Gemini にアップロード
Gemini Chat（web版）を開き、新しい会話を作成します。その後、スクリーンショットを貼り付けます。
「このスクリーンショットのUIデザインをレビューしてください。特に以下の点に着目してください：
- レイアウトと余白
- タイポグラフィの階層
- カラーコントラスト
- アクセシビリティ上の改善点」
プロンプトを明確にすることで、より的確な指摘が返ってきます。複数の画像をアップロードして、関連するデザイン複数を同時にレビューすることもできます。
Gemini による多面的なデザインレビュー
レイアウトと余白の分析
Gemini は、UI の配置や余白のバランスを視覚的に判断できます。
確認ポイント：
- 要素間の余白が一貫しているか（8px、16px、24px など統一ルール）
- グリッドシステムに従っているか（8px グリッドが標準）
- 視線の流れが自然か（Z字読みまたは F 字読み）
- 画面密度は適切か（情報が詰め込まれすぎていないか）
- 画面端への配置は適切か（安全領域を確保しているか）
具体的な質問例： 「このデザインの視線フローを説明してください。ユーザーはどのように目を動かすか、優先順位順に列挙してください。」
Gemini に聞くと、画像認識によって、ユーザーがどのように目を動かすかを分析してくれます。分析結果から以下を判定：
- CTA ボタンは十分に目立っているか
- 情報グループが適切に分離されているか
- 空間を効果的に使っているか
余白の黄金比：
- 外側余白（マージン）：16-24px
- 要素間余白（ガター）：8-16px
- テキスト行間：1.4-1.6倍
タイポグラフィの階層構造
見出し、本文、補助テキストなどのタイプ分けが適切か、Gemini は判定できます。
質問例： 「このデザインに含まれるテキストサイズ別の分類を教えてください。現在のサイズ関係は読みやすいか、改善案も提示してください。」
Gemini の回答例：
- 主見出し：32px / 600 weight（ユーザーの注意を引く）
- 副見出し：20px / 600 weight（セクション区切り）
- 本文：16px / 400 weight（読みやすさ重視）
- 補助情報：14px / 400 weight（目立たないが必要な情報）
改善提案： 「見出しと本文のサイズ差が小さいです。主見出しを 40px に拡大し、視覚的階層を強化することを推奨します。」
タイポグラフィスケールの推奨値：
- ベースサイズ：16px
- スケール倍率：1.125 倍（8 度音階スケール）または 1.25 倍（4 度音階スケール）
- 推奨構成：12px → 14px → 16px → 18px → 20px → 24px → 28px → 32px → 40px
カラーコントラストと WCAG 基準
アクセシビリティの観点から、カラーコントラストの十分性を評価してもらう点が肝心です。
WCAG 基準の詳細：
- WCAG AA（一般推奨）：コントラスト比 4.5:1 以上
- WCAG AAA（より厳格）：コントラスト比 7:1 以上
- 大型テキスト：3:1 以上でも許容（32pt 以上）
特に以下のチェックが有効です：
- テキストと背景のコントラスト比が 4.5:1 以上か（WCAG AA）
- Gemini に「このテキストと背景色の組み合わせ、コントラスト比は十分ですか？」と聞く
- ボタンやリンク色が十分に識別できるか
- カラーのみで情報を伝えていないか（失敗事例：赤=必須、緑=オプション など）
- カラーのみで情報伝達していないか
- アイコンやテキストラベルも併用すること
具体的な依頼： 「WCAG 2.1 AA 基準に沿ったコントラスト比をチェックしてください。不足している部分があれば、具体的な色コードの提案をお願いします。」
Gemini の回答例： 「現在のテキスト色（#666666）と背景色（#F5F5F5）のコントラスト比は 4.3:1 で、WCAG AA 未満です。テキスト色を #333333 に変更すれば 6.2:1 になり基準クリアします。」
実践的なプロンプト例
ランディングページのレビュー
「このランディングページのデザインレビューをお願いします。
以下の観点から改善提案を5点ほど挙げてください：
1. ファーストビューのインパクト（ユーザーを惹きつけるか）
2. CTAボタンの目立ち度（行動喚起の効果性）
3. スクロール誘導の効果性（下にスクロールしたくなるか）
4. モバイル対応を想定した要素配置（スマートフォン表示でも読めるか）
5. 業界トレンドとの整合性（他社サイトと比較して遅れていないか）」
期待される回答：
- 具体的な改善箇所の指摘（「A セクションの余白が狭すぎる」など）
- 改善前後の効果測定ポイント（「CTA ボタンのクリック率が向上する可能性があります」）
- 代替案の提示（「フローティングメニューの追加を検討してください」）
アプリ画面のアクセシビリティチェック
「このアプリ画面をスクリーンリーダー利用者の視点で評価してください。
改善が必要な点と、具体的な修正案を教えてください。
特に以下をチェックしてください：
1. テキスト代替情報（画像に適切な alt テキストがあるか）
2. フォーカス順序（タブキーで論理的順序で移動するか）
3. ボタンのラベル（ボタンの役割が明確か）
4. 色のみに依存した情報表示（色盲者にも理解できるか）」
Gemini のスクリーンリーダー視点での分析：
- 画像に代替テキストが記載されているか
- アイコンボタンにツールチップやラベルがあるか
- リンクテキストが「ここをクリック」ではなく、意味のある文言か
デザインシステムの一貫性確認
複数の画面をまとめて送信し、以下のように聞けば、デザインシステムの統一性を検証できます：
「これらの画面間でカラーやテキストスタイルの使い方に矛盾がないか確認してください。
デザインシステムのルール違反を見つけたら、該当する画面と問題を列挙してください。
確認項目：
- 同じボタンタイプが異なるスタイルになっていないか
- テキスト色がルールに従っているか
- 余白（パディング）が統一されているか
- 影（シャドウ）の適用ルールは統一されているか」
Figma Dev Mode との連携
Figma の Dev Mode を使用すれば、デザインのメジャーメント情報（サイズ、余白、フォント）を自動生成できます。
Dev Mode の使用方法：
- Figma ファイル上部のタブで「Dev」を選択
- 左パネルで検査したいコンポーネントをクリック
- 右パネルに自動的に寸法情報が表示される
この情報を Gemini に共有すれば、「このデザインはボックスモデルに沿っているか」「コンポーネント化のポイントは」といった、より詳細な分析が可能になります。
Dev Mode の出力をコピーして Gemini に貼り付ける：
コンポーネント名：PrimaryButton
サイズ：48px (H) × 200px (W)
パディング：12px (T/B) × 16px (L/R)
フォント：Inter, 14px, 600 weight
背景色：#0066FF
テキスト色：#FFFFFF
コーナー半径：4px
Gemini への依頼： 「上記のボタンコンポーネント定義について、実装効率の観点から改善点があれば指摘してください。特にパディングやサイズに無駄はないか、また複数バリアント（サイズ別）への展開を想定した設計になっているか確認してください。」
デザインシステム構築への活用
Gemini との対話を通じて、デザインシステムの基盤を効率よく構築できます。
カラーパレット定義の最適化
複数案を提示し、以下のように依頼：
「デジタル商品（SaaS アプリ）向けの落ち着いた配色を 3 案提案してください。
各案について：
1. プライマリカラー（CTA 用）
2. セカンダリカラー（補助情報用）
3. ニュートラルカラー（背景・テキスト用）
4. エラー・警告・成功のシグナルカラー
を示して、それぞれの配色理由も説明してください。」
Gemini の回答例：
- 案 1: プロフェッショナル系：ディープブルー #003D82 × グレー #6B7280
- 案 2: モダン系：インディゴ #4F46E5 × スレート #64748B
- 案 3: ミニマル系：スレート #0F172A × アンバー #F59E0B（アクセント）
タイポグラフィスケール最適化
「プロダクト向けのタイポグラフィスケールを設計してください。
条件：
- ベースサイズ：16px
- 最小：12px、最大：48px
- 端末：スマートフォンから大型ディスプレイまで対応
- フォントファミリー：日本語と英語混在
スケールの理由と、各サイズの使用用途も教えてください。」
Gemini の設計例：
12px → キャプション、補助情報
14px → 小型ラベル、サブテキスト
16px → 本文、標準テキスト
18px → 補助見出し
20px → 見出し（小）
24px → 見出し（中）
32px → 見出し（大）
48px → ページタイトル
スペーシング規則の検証
「4px 単位のスペーシングシステムの実装について、以下を確認してください：
- 実装効率：開発者にとって管理しやすいか
- 柔軟性：様々なレイアウトに対応できるか
- ビジュアル調和：8px 単位の方が視覚的に優れていないか
改善案があれば提示してください。」
Gemini の分析結果： 「4px 単位は細かすぎて、結果的に複数の値が混在する可能性があります。8px 単位（4, 8, 12, 16, 24, 32...）の方が、実装効率と視覚的調和の両面でバランスが取れています。ただし、微調整が必要な場合のみ 4px を許容する柔軟性を持たせることをお勧めします。」
デザイン品質評価フレームワーク
Gemini に以下のフレームワークに基づいた総合評価をしてもらうことで、デザインの強み・弱みが明確になります：
「以下の 6 項目について 10 点満点で評価し、総合スコアを出してください。
1. ビジュアルデザイン（見た目の美しさ、統一感）
2. ユーザビリティ（使いやすさ、直感性）
3. アクセシビリティ（色弱者、スクリーンリーダー対応）
4. パフォーマンス考慮（画像サイズ、レンダリング効率）
5. ブランド表現度（ブランドアイデンティティの反映）
6. 実装可能性（開発者にとっての実装難度）
各項目について、強み 2 点、改善点 2 点も指摘してください。」
まとめ
Gemini を活用したデザインレビューは、以下の利点があります。
主な利点：
- 時間効率：複数のフィードバックが数秒で得られる
- 客観性：人的偏見なく、基準に基づいたアドバイス
- 学習性：プロのデザイン思考を学べる
- 24/7 対応：時間帯に関係なくレビューが可能
実装のコツ：
- 最初は小さな画面や要素から試し、徐々にプロジェクト全体へと活用範囲を広げることをお勧めします
- 同じデザインを複数回レビューして、段階的に改善することで、より深い学習ができます
- Gemini の提案がすべて正しいわけではないため、最終判断は人間が行う姿勢を保つことが重要です
Gemini との協働により、より品質の高いデザインへと進化させていきましょう。