Geminiだけでランディングページ(LP)を高速作成する方法(構成からコーディングまで解説)

概要

Geminiのチャット機能とキャンバス機能を使い、契約書レビューSaaSを題材にLP(ランディングページ)を0から作成する工程を実演した動画。構成・ライティング・コーディングまでAIに任せつつ、画像生成はNano BananaやAdobe Fireflyを併用してクオリティを補う方法を紹介している。

主なポイント

• LP制作にはPASO(問題提起・共感・解決策・オファー)やAIDA(注目・興味・欲求・行動)といった定番フレームワークがあり、Geminiへの指示に組み込むと構成が安定する
• Geminiのチャットで「メインタイトルと説明の構成でセクションごとに作成」のようにテキストのみで壁打ちし、内容が固まってから「キャンバス」を選択して3 Proモデルでコード生成させると失敗が少ない
• キャンバスを選ばずに指示すると構造化されたコードが出力されないため、キャンバス選択は必須の手順
• デフォルトの出力はReact(ライブラリ)ベースで表示に構築作業が必要なため、「HTMLで書き出し」と指示するとシンプルな1枚のHTMLになりノーコードに近い実装が可能
• ファーストビューなどに「アイソメトリックイラストを挿入」と指示するとNano Bananaが画像を自動生成してくれるが、画像が切れるなど品質面の課題も残る
• 画像品質を上げたい場合はAdobe Firefly(Nova/Nano Banana Pro相当)でセクションごとに縦長(2:3)の画像を個別生成し、Adobe Expressの「スタジオ」にドラッグ&ドロップで配置・調整する方法が有効
• セクション画像を生成する際、直前に作った画像を参照しながら次のセクションを生成すると全体のトーン・色味の一貫性が保ちやすい
• 出来上がったHTMLコードはCursorやVSCodeなどのエディタに貼り付け、画像フォルダーを作成してパスを合わせることで最終的な表示を完成させる

実践に使えること

• LPやバナーなど訴求系コンテンツを作る際は、PASO/AIDAのどちらかのフレームワークを明示してAIに構成を作らせると、内容の抜け漏れが減る
• Geminiでコード生成する際は「キャンバス」選択+「HTMLで書き出し」の指定をセットにすることで、React知識がなくても実装可能なコードを得られる
• 画像生成の品質に不満がある場合は、Gemini(Nano Banana)だけで完結させず、Adobe Fireflyやスタジオ機能など他ツールと組み合わせてブラッシュアップする選択肢を持つ
• セクションごとに画像を生成する際は、前セクションの画像をそのまま参照素材として渡すと、デザインの一貫性が上がる