GeminiとFigma Makeで要件定義からデザイン作成まで 実機検証レポート

こんにちは。アイレットデザイン事業部の黒木です。
アイレットデザイン事業部ではINSIDE UI/UXと題して、所属メンバーがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

最近は、開発現場でもAIの活用が急速に広がっています。
そこで今回は、GoogleのAI「Gemini」とFigmaの「Figma Make」を組み合わせ、「要件定義からHifiデザイン作成までをAIで完結できるか」を検証した内容をご紹介します。

1. 要件定義：Geminiを「課題解決」のパートナーに

まずは、設計の土台となる要件を固めるところからスタートしました。

①課題の抽出: Geminiに「架空の企業が持っている課題」を提示してもらい、その課題をどう改善すべきか、Geminiと対話しながら詳細を詰めました。

🥗 ベジ・コネクト：リニューアル詳細要望書
1. プロジェクトの背景とゴール
「これまでは『良い野菜を届ける』だけで精一杯でしたが、これからは『野菜のある豊かな生活をデザインする』フェーズに移行したい。現在のサイトは単なる『注文窓口』になってしまっているので、ブランドの世界観を伝えつつ、迷わせないサイトにしたいんです。」
2. 各ページ・機能への具体的な「こだわり」
【ホーム画面】
パーソナライズ感の演出： 初めて来た人には「ブランドの想い」を、ログイン済みの会員には「次回の配送予定日」や「今週届く野菜のレシピ」をトップに表示させたい。
動的なシズル感： 静止画だけでなく、農園の風景や調理シーンを背景動画などでさりげなく取り入れたい（重くならない程度に！）。
「選ばれる理由」の再構築： 「スーパーとの違い」を数字やアイコンでパッと見てわかるようにしてほしい。
【会員登録・ログイン】
ソーシャルログインの導入： LINEやGoogleでサクッと登録・ログインできるようにして、離脱を防ぎたい。
入力の「おもてなし」： 住所入力の自動化はもちろん、次に何を入力すればいいか迷わないよう、入力中の項目をハイライトしてほしい。
マイページへの期待感： ログイン後の画面は事務的ではなく、「あなたの健康をサポートするダッシュボード」のようにワクワクするものにしてほしい。
【お問い合わせフォーム】
「自己解決」の誘導： お問い合わせを減らしたい。入力フォームの横に「よくある質問」を出し、カテゴリー（配送、料金、品質など）を選んだ瞬間に解決策を提示したい。
写真添付機能： 「届いた野菜が傷んでいた」といったトラブル時に、スマホで撮ってすぐ送れるようにしてほしい。
3. AI駆動開発で特に重視してほしい「技術的要望」
アクセシビリティ： AIを使って、スクリーンリーダー対応やカラーユニバーサルデザインを徹底してほしい。
SEO最適化： 構造化データ（Schema.org）を完璧に実装し、Google検索で野菜の名前やレシピが上位に来るようにしたい。
拡張性： 将来的に「AIレシピ提案機能」を追加したいので、コンポーネントは疎結合で、再利用性が高いクリーンなコードで書いてほしい。
4. 課題解決のチェックリスト（ここが直っていないとNG！）
ボタンがどこか不明
→視覚的な優先順位（プライマリーボタン）を明確にする。
スマホで使いにくい
→指一本で全操作が完結する「親指フレンドリー」なUIにする。
読み込みが遅い
→画像のWebP対応や遅延読み込みを徹底し、Lighthouseのスコアで90点以上を狙う。

②要件定義書の作成: 対話内容を整理し、Geminiを使って正式な「要件定義書（PRD）」へと落とし込みました。

単なるアイデア出しに留まらず、AIを「伴走者」として要件を明文化することで、プロジェクトの骨子が非常にスピーディーに固まります。

2. Gemini Canvasによるワイヤーフレーム作成

作成した要件定義書を元に、Geminiの「Canvas」機能を使用してワイヤーフレームを作成します。

Gemini Canvasは、指示を元にHTMLベースのプレビューを数分で生成してくれます。このプレビューを以下の2つの方法で抽出し、デザイン工程の素材としました。

• html.to.design: プレビューをFigma上で編集可能な要素として抽出。

• 画像: プレビュー画面をそのままキャプチャ（※途中で修正を重ねたためhtml.to.design作成時と少し見た目が異なる）。

3. 【検証】Figma MakeによるLofiデザインの再現性

抽出した素材を使い、FigmaのAI機能「Figma Make」でLofi（低解像度）デザインがどこまで再現されるかを、3つのパターンで比較検証しました。
※以下の画像はFigma Makeからデザインをコピーしたものなので一部デザインの崩れが起きている箇所があります。

①html.to.design ＋ 要件定義書

②html.to.design のみ

③画像のみ

まとめ

検証の結果、「html.to.design」で構造化されたデータと要件定義書を読み込ませる方法が、最もAIが意図を正しく解釈できることが分かりました。

4. Hifiデザインへの昇華と「AIの癖」

次に、作成したLofiデザインをベースに、要件定義書から作成した専用プロンプトを用いて「Hifi（高解像度）デザイン」へと昇華させました。先ほどの3パターンに対して同じプロンプトを適用したところ、興味深い知見が得られました。
※添付している画像はFigma Makeからデザインをコピーしたものなので一部デザインの崩れが起きている箇所があります。

▼使用したプロンプト

「ベジ・コネクト」のブランドリニューアルに伴い、このLofiワイヤーフレームを最高品質（Hifi）のプロフェッショナルなUIデザインに変換してください。以下の要件をすべて満たす、統一されたデザインシステムを構築すること。

. 【Style System】デザイン指針
ターゲット: 20～30代。豊かさと機能性を求める層。

スタイル: プレミアム・オーガニック・ミニマリズム。洗練された高級感と「農園の瑞々しさ」の融合。

配色（アースカラー）: セージグリーン、サンドベージュ、ウォームホワイトを基調とし、アクセントに「シズル感」のあるフレッシュオレンジを採用。

タイポグラフィ: モダンなサンセリフ体を使用。

装飾: 錠剤型（Pill-shaped）のボタン、柔らかな角丸のカード、そして控えめなガラスモーフィズム。

2. 【Functional Layout】構成要素
ヘッダー: 固定型（Sticky）。中央にロゴ、親指で操作しやすい位置にハンバーガーメニューと通知アイコンを配置。

ヒーローエリア（動的切替）:

ゲスト: 農園の空気感が伝わる「シズル感」溢れる全画面ビジュアル。

会員: ログイン状態を認識し、「次回の配送予定」を最優先で表示。

機能ハイライト: 「品質証明」「パーソナライズ」「健康サポート」をミニマルなアイコンで水平配置。

カテゴリー/商品: 水平スクロールのカードリスト（カルーセル）と、2列のグリッドレイアウト。余白を贅沢に使い、1つひとつの野菜を作品のように見せる。

健康ダッシュボード: 会員向けに野菜摂取履歴をグラフ化（Bento Gridスタイル）。

インテリジェント・フォーム: 入力フィールドにフォーカスした際、その項目をハイライトし、周囲を減光させる「おもてなし」演出（D-2準拠）。

3. 【Technical & UX Rules】
親指フレンドリー: 主要なインタラクションを画面下部〜中央の「Natural Reach Zone」に集約。

パフォーマンス: すべてのビジュアルはWebP品質の軽やかさを感じさせ、Lighthouseスコア90点以上を予感させるクリーンな設計。

アクセシビリティ: WCAG 2.1 Level AAに準拠したカラーコントラストの維持。

①html.to.design ＋ 要件定義書

②html.to.design のみ

③画像のみ

検証で見えてきた挙動

• クオリティの差分: Hifi化の段階では、Lofi時の3パターンの間にそこまで大きな差は出ませんでした。
• AI特有の挙動（癖）:
  • AIが独自に判断し、要素の順番を勝手に変えてしまうことがある。
  • 修正を重ねると、最初に提示したデザインファイルや画像の情報を忘れることがある。
  • プロンプトが雑だと、不要な要素まで勝手に追加してくる。

AIに指示を出す際は、明確な意図を持ったプロンプトを維持し続けることが重要です。

まとめ：今回の検証で確認できたこと

GeminiとFigma Makeを組み合わせた検証を通じて、以下の結果が得られました。

• Lofiデザインの再現性: 画像よりも html.to.design を介して構造を渡す方が、AIは元の意図を正しく反映する。
• 修正プロセスにおける課題: AIは対話を重ねる中で初期の制約を「忘却」したり、独自の判断で要素の順番を変更したりする挙動が見られる。
• プロンプトの重要性: 雑な指示は不要な要素の追加を招くため、要件定義書に基づいた厳密なプロンプト管理が必要である。