【時短】AIでLP作成!Geminiのキャンバス機能で構成・デザイン・コードを実演

概要

デザイン会社経営者がGeminiの「Canvas」機能を使い、花屋のオンラインショップ向けLP(ランディングページ)を構成設計からデザイン、コード生成まで一気通貫でAIに作らせる実演動画。プロンプト作業のみでプロ級のLPが作れるかを検証している。

主なポイント

• Gemini Canvas機能でLPの構成・デザイン・コードをまとめて生成できる
• 独自に作ったGemini Gem(LP構成専用アプリ)で目的・ターゲット・悩み・強み・キャッチコピー・オファー・デザイン方向性を対話形式で設計してから構成案を作成
• 作った構成案をCanvasに渡すとコード生成とプレビューを同時に確認しながらLPデザインが仕上がる
• 画像リンク切れやアイコンの不備は、コードとプレビューを照合しながらピンポイントで修正指示できる
• 修正したい要素を選択してチャットで指示すると、他の部分を崩さず該当箇所だけ書き換えられる
• 完成したLPはHTML形式で書き出され、テキストエディタ(VSCode等)にコピペしてindex.htmlとして保存すれば自分のサーバーで公開可能
• CTAボタンなどのリンク先(hrefタグ)は初期状態がダミーのため、公開前に実際のURLへの差し替えが必要
• LP構成用のGemini Gemを公式LINE登録者に無料配布している

実践に使えること

• LPをAIで作る前に、目的・ターゲット・悩み・強み・キャッチコピー・オファー・デザインの方向性を先にテキストでまとめておくと生成がスムーズ
• Canvasが出したコードとプレビューを照らし合わせ、Command+Fでタグを検索して修正箇所を特定してから指示を出す
• 修正は全体ではなく該当パーツを選択してチャットで指示することで崩れを防ぐ
• 書き出したHTMLはテキストエディタでindex.htmlとして保存し、自前のサーバーにアップロードすれば独自ドメインで公開できる
• 公開前にCTAボタンなどのリンク先URLを実際のページに必ず差し替える