【時短】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を実際のページに必ず差し替える