取り組みの背景：AI時代のデザインワークフロー
「LP（ランディングページ）を作りたいけれど、コーディングは苦手」「デザインツールを使いこなす時間がない」——そんな方にとって、AI を活用したデザインワークフローは大きな武器になります。
Gemini の Canvas モード（思考モード付き）と Figma を組み合わせると、素材さえ揃っていれば 1時間以内に完成度の高い LP を仕上げることができます。ここでは実際に桜ラテのプロモーション LP を制作したプロセスをもとに、再現性の高いワークフローを丁寧に解説します。
使用するツールの全体像
今回のワークフローで使うツールは以下の通りです。
- Gemini（Canvas モード・思考モード有効）：LP の HTML コード生成メイン
- ChatGPT（画像生成）：ロゴや商品画像の素材生成
- html.to.design：生成された HTML を Figma に変換するプラグイン
- Figma：最終調整とブラッシュアップ
それぞれ無料プランでも利用できますが、Gemini は Gemini Advanced（Google One AI Premium） に含まれる思考モードを有効にすることで、コード生成の精度が大きく向上します。
ステップ 1：素材を先に用意する
AI ツールへの指示を送る前に、以下の素材を先に揃えることをお勧めします。素材が手元にあると、プロンプトに具体的な情報を含められるため、生成結果のクオリティが上がります。
必要な素材リスト
- 商品・サービスの説明文（キャッチコピー・特徴3点・CTAテキスト）
- 商品画像またはモックアップ（ChatGPT や Midjourney で生成も可）
- ブランドカラー（HEX コード）
- ロゴ画像（PNG、背景透明推奨）
素材が不足している場合：ChatGPT に「桜ミルクラテの商品画像をリアルスタイルで生成してください」のように依頼して画像を生成しましょう。テキスト原稿は Gemini 自身に「桜ミルクラテの LP 用コピーを作成してください」と依頼すれば、Gemini との協調作業で完成させられます。
ステップ 2：Gemini の Canvas モードを開く
- gemini.google.com にアクセスしてログイン
- 右側の「Canvas」パネルをクリックして Canvas モードを有効にする
- 設定から「思考モードを有効化」をオンにする
思考モードが重要な理由：通常モードでは Gemini が即座に返答するのに対し、思考モードでは内部でロジックを組み立ててから回答するため、HTML/CSS コードの構造的な整合性が大幅に向上します。「なぜこのレイアウトにするのか」を考えた上でコードが出力されるため、デザインの完成度が一段上がります。
ステップ 3：LP 要件をプロンプトで伝える
プロンプト設計が LP の品質を決定する最も重要な工程です。以下のテンプレートを参考にしてください。
以下の原稿をもとに、桜ミルクラテのランディングページをHTMLとCSSで作成してください。
【商品情報】
商品名: 桜ミルクラテ
キャッチコピー: 春の訪れを、一杯に。
特徴:
1. 国産桜の花びら入りシロップ使用
2. 北海道産生クリームで仕上げたまろやかな口当たり
3. カフェインゼロで毎日飲める優しさ
【デザイン要件】
- カラー: メインカラー #F4A7B9（桜ピンク）、アクセント #FFFFFF、テキスト #333333
- ターゲット: 20〜35歳の女性、カフェ好き、SNS映えを意識
- スタイル: 清潔感・上品さ・春らしさ
- レイアウト: モバイルファースト（スマホ最適化必須）
【構成セクション】
1. ヒーローセクション（キャッチコピー + CTA ボタン）
2. 特徴3点（アイコン付きカード）
3. 商品詳細（左右レイアウト）
4. お客様の声（2〜3件のレビュー）
5. 購入 CTA
【技術要件】
- HTML5 + CSS3（外部ライブラリなし）
- Google Fonts 使用可（Noto Sans JP 推奨）
- アニメーション: 控えめに（フェードインのみ）
- 画像はプレースホルダーで代替可
プロンプトのポイント
具体的な数値・カラーコードを含める：「おしゃれな感じで」ではなく、#F4A7B9 のように具体値を指定することで、デザインの一貫性が保たれます。
ターゲット像を明示する：年齢・性別・ライフスタイルを伝えることで、Gemini がデザインのトーンを適切に調整します。
セクション構成を先に決める：構成を指示の中に含めることで、情報の抜け漏れを防げます。
ステップ 4：Canvas モードでリアルタイム確認・修正
Gemini の Canvas モードでは、コードを生成しながらブラウザプレビューをリアルタイムに確認できます。
生成されたコードを確認して気になる点があれば、Canvas 上で直接追加指示を出します。
ヒーローセクションのフォントサイズが小さいので、キャッチコピーを 2.5rem に変更してください。
また、CTAボタンを丸みのある角丸デザイン（border-radius: 30px）に修正してください。
このように、「どのセクションの」「何を」「どのように変えたいか」を明確に伝えることで、部分的な修正が素早くできます。
ステップ 5：html.to.design で Figma に取り込む
Gemini で満足のいく HTML コードが完成したら、Figma に取り込んでデザインの最終調整を行います。
html.to.design の使い方
- Figma を開き、プラグイン検索で「html.to.design」をインストール
- プラグインを起動
- Gemini が生成した HTML コードを貼り付けるか、URL を入力
- 「Import」ボタンをクリックすると、HTML が Figma のフレーム・レイヤーに自動変換される
変換されたデザインは Figma のコンポーネントとして編集可能な状態になります。
Figma での最終調整ポイント
html.to.design での取り込み後は、以下の点を重点的に確認・調整します。
行間・文字間隔の微調整 HTML/CSS の line-height や letter-spacing は Figma 上でも反映されますが、日本語フォントの場合はわずかにずれることがあります。テキストレイヤーを選択して、行間を手動で調整しましょう。
画像の差し替え プレースホルダー画像を実際の商品画像に差し替えます。事前に準備した画像ファイルをそのまま Figma にドロップして置き換えられます。
ボタン・カードの整列確認 自動変換では位置が微妙にずれる場合があります。Figma の「整列」機能（左揃え・中央揃え・等間隔）を使って揃えましょう。
スペーシングの統一 各セクション間のパディング・マージンを統一します。通常 24px か 32px の倍数で揃えると、プロっぽい印象になります。
完成：1時間で何が達成できるか
このワークフローの制作時間の内訳はおよそ以下の通りです。
- 素材準備・コピー作成：15分
- Gemini でのコード生成・修正：20分
- html.to.design での変換：5分
- Figma での最終調整：20分
- 合計：約1時間
もちろん、慣れるにつれてより短い時間で仕上げられるようになります。また、Figma での調整を省略してそのまま HTML をコーディングに使うことも可能です。
AIが作ったものを「デザインし直す力」が差を生む
このワークフローで重要なのは、AI の生成物をそのまま使うのではなく、「どこを直すべきか」を判断できる眼 を持つことです。
AI が生成する初期出力は80点程度の完成度です。残りの20点——フォントの視認性、ボタンの押しやすさ、情報の優先順位——は人間の判断が必要な部分です。
この「AI と協働してデザインを仕上げる力」こそが、これからのデザイナーや個人開発者に求められるスキルです。Gemini を使えるかどうかではなく、Gemini の出力を洗練させられるかどうかが、実力の差になります。
まとめ
GeminiとFigmaを組み合わせた LP 制作ワークフローをまとめます。
- 素材（コピー・画像・カラー）を先に用意する
- Gemini の Canvas モードで思考モードを有効にする
- ターゲット・デザイン要件・セクション構成を含む詳細なプロンプトを送る
- Canvas 上でリアルタイムに確認・修正する
- html.to.design で Figma に変換する
- Figma で行間・画像・整列を最終調整する
特別なコーディングスキルがなくても、このワークフローを使えば、プロ品質に近い LP を短時間で制作できます。Gemini の Canvas モードはまだ多くの人が活用しきれていない機能ですので、ぜひ積極的に試してみてください。
さらに応用的なワークフロー（複数バリエーションの A/B テスト用 LP 量産・Gemini API を使ったデザイン自動化・コンポーネントライブラリの生成など）については、プレミアム記事で詳しく解説しています。