【初心者向け】AIとCanvaで美容系ランディングページをゼロから作る最速プロジェクト

概要

Geminiの画像生成機能「ナノバナナ」とCanvaのウェブサイト機能だけを使い、Figma・コーディング・WordPressなしで美容系LP(ランディングページ)をデザインから公開まで行う手順を解説する動画。デザイン未経験者でも数十分〜数時間でモバイルファーストの1枚ペライメージ型LPを完成させ、実際にネット上に公開するところまでを実演している。

主なポイント

• Gemini(ナノバナナ、Pro版推奨)に参考デザイン画像を貼り付け、「添付画像を参考に下の文章でLP画像を生成して」という共通命令文とセクション別の台本テキストをセットで送ると精度が上がる
• 参考デザインはプロンプトで一から考えるより、Pinterestや「LP幹部」のような参考サイトで似た業種のLPを探して画像コピーする方が再現度が高い
• 生成結果がモデルの顔などを模倣(パクリ)しすぎる場合は新規チャットで生成し直すと改善することがある
• 美容系LPの鉄板構成(ファーストビュー→お悩み提起→ソリューション→CTA→Q&A→比較・口コミ→最終CTA)をセクションごとに画像生成していく
• Canvaの「ウェブサイト」新規作成機能で600×600pxの正方形を基準サイズにし、生成した画像を隙間なく縦に並べてLP化する
• ボタン画像は単体で切り出してから背景透過処理をし、別パーツとしてリンクを設定しないと画像全体がリンク化してしまう不具合を回避できる
• 予約フォームはCanvaでは作れないためGoogleフォームなど外部サービスと連携させる
• 変更を反映するには「変更を公開」を必ず押す必要があり、押さないと編集内容がライブサイトに反映されない

実践に使えること

• 案件受注前のポートフォリオ用に、Gemini(ナノバナナ)+Canvaで低コスト・短時間の1枚LPサンプルを複数業種分作って実績化する
• クラウドソーシングでLP制作を出品する際、参考にしたようなAIによる低価格・短納期LP制作の訴求文言を自分のサービス紹介に流用する
• Web制作でAI画像生成を使う際は、プロンプトだけに頼らず「参考画像+指示文」の組み合わせで生成精度を上げる手法を他のデザイン生成タスクにも応用する