【Gemini】殺風景なLPは卒業！「デザイン×コード」を一撃出力する黄金プロンプト
「新サービスを始めたいけど、LP（ランディングページ）の文章が書けない…」
「AIにコードを書かせたけど、白黒の殺風景なサイトが出てきた…」
LPはビジネスの“玄関口”です。
しかし実際には、マーケティング知識・セールスコピー・Webデザイン・コーディングまで求められるため、初心者にはかなりハードルが高い領域でもあります。
そこで本記事では、私が試行錯誤の末にたどり着いた、
「デザイン知識ゼロでも、AIに“売れる構成”と“リッチなデザインコード”を同時出力させる黄金テンプレート」
を公開します。
単なる文章生成ではなく、
“そのままブラウザで開けるレベルのLP”をAIに作らせる方法です。
目次
1. なぜAIが作るLPは「殺風景」なのか？
AIに対して、
「モダンなLPを作って」
とだけ指示すると、多くの場合、
- 白背景
- 黒文字
- シンプルすぎるレイアウト
という“味気ないページ”が生成されます。
理由はシンプルで、AIにとっての「モダン」と、私たちがSNSやWebサービスで見慣れている「洗練されたUI」は別物だからです。
特に不足しやすいのが、以下の3点です。
問題点①：ビジュアルがない
Heroセクションに画像や背景演出がないと、一気に素人感が出ます。
- メインビジュアル
- 背景オーバーレイ
- イラスト
- 写真
などの指示が必要です。
問題点②：質感の指示がない
最近のLPは「情報」よりも先に“空気感”を伝えています。
例えば、
- グラデーション
- ガラスモフィズム
- シャドウ
- 透過
- ブラー
などです。
これらを明示しないと、AIはプレーンなCSSで済ませてしまいます。
問題点③：動きがない
静的すぎるUIは、どうしても古く見えます。
例えば、
- ホバー時のアニメーション
- CTAボタンの発光
- スクロール時フェードイン
などを入れるだけで、一気に“今っぽさ”が出ます。
つまり重要なのは、
「マーケティング構成」だけでなく、“視覚演出”までプロンプトで指定すること」
です。
2. 爆速×リッチ作成を可能にする「黄金プロンプトテンプレート」
以下のテンプレートをGeminiに貼り付けるだけで、
- LP構成
- コピーライティング
- HTML/CSS
- デザイン演出
までを一括生成できます。
特に重要なのが、
「デザイン指示を抽象表現で終わらせず、具体的に書くこと」
です。
You are a highly skilled sales copywriter, visual designer, and front-end engineer.
Based on the information below, create a professional landing page structure AND the actual HTML/CSS code in a single file, featuring a rich and modern visual design.
### 【基本構成】
* **目的:** [例：公式LINE登録 / 無料勉強会への集客]
* **ターゲット:** [例：AIを仕事に活かしたい会社員]
* **解決する課題:** [例：独学に限界を感じている]
### 【必須・構成要素（PASONA）】
1. キャッチコピー: 悩みを言い当て、解決を確信させる。
2. 問題提起: 挫折経験や焦りに寄り添う。
3. 解決策: なぜこのサービスが最適なのかを提示。
4. ベネフィット: 具体的な未来（3つ）。
5. 行動（CTA）: 強力な誘導。
### 【追加オプション（実装指示：殺風景さを回避するリッチ指定）】
* **出力形式:** HTML/CSSを1つのコードブロックで出力。
* **デザインコンセプト:** [例：ダークモード、清潔感のある白ベース]
* **ビジュアル:** 「Heroセクションには、勉強会の様子が伝わる高品質な画像を配置」
* **質感:** 「全体に薄いグラデーションと、柔らかなドロップシャドウを適用」
* **エフェクト:** 「スクロール時にふわっとフェードインするアニメーションを追加」
* **要件:** レスポンシブ対応、Google Fonts（Noto Sans JP）の適用。
3. 実践デモ：構成案からリッチなコード実装まで一気に！
今回は実際に、
「週末開催のAIアプリ開発勉強会」
をテーマに、GeminiへLP生成を依頼してみます。
手順①：適切な生成モードの選択
まず、Geminiのモデル設定で**「思考モード」**を有効化します。
これにより、
- コピー構成
- UI設計
- デザイン意図
- セールス導線
まで含めた出力が期待できます。
手順②：プロンプトの入力
テンプレートへ今回の条件を流し込みます。
今回実際に使用したプロンプト
You are a highly skilled sales copywriter, visual designer, and front-end engineer.
Based on the information below, create a professional landing page structure AND the actual HTML/CSS code in a single file, featuring a rich and modern visual design.
### 【基本構成】
* **目的:** 無料の「AIアプリ開発勉強会（カフェ開催）」への集客および公式LINE登録への誘導。
* **ターゲット:** AIを仕事に活かしたいが焦っている30代会社員。プログラミング独学挫折経験あり。
* **解決する課題:** 「AIは難しそう」というハードル、独学限界、情報過多。
### 【必須・構成要素（PASONA）】
1. 解決策（AIを「相棒」にする新しい開発手法）
2. ベネフィット（残業削減、アイデアを即形にできる、スキルの希少性）
3. 信頼の証拠（カフェで和気藹々と学ぶ勉強会の実績）
### 【追加オプション】
* **文体:** 親しみやすく、知的好奇心を刺激するプロフェッショナルなトーン。
* **フッキングワード:** 「期間限定」「無料」「今週末のカフェ開催」
* **出力形式:** HTML/CSSを1つのコードブロックで出力。
* **デザインイメージ:** モダンなダークモード。
* **ビジュアル:** Heroセクションにカフェ勉強会の風景画像を大きく配置。
* **質感:** 各セクションにガラスモフィズム（透過）エフェクトを適用。
* **エフェクト:** CTAボタンにホバー時の発光アニメーションを追加。
手順③：生成結果とこだわりポイントの確認
プロンプト送信後、Geminiは単なるコードではなく、
「売れる構成」と「視覚的に魅力あるUI」
をセットで生成してくれました。
特に印象的だったのが、以下の4点です。
-
マイクロインタラクション
→ ボタンにカーソルを乗せると光が走る -
ガラスモフィズム
→ 背景グラデーションが透けるトレンドUI -
視認性設計
→ 背景画像にオーバーレイを重ね、文字を読みやすく調整 -
心理設計されたコピー
→ 「AI時代に置いていかれる不安」に寄り添う構成
手順④：成果物の確認（ブラウザ表示）
実際に生成されたHTMLをブラウザで開くと、かなり完成度の高いLPが表示されました。
メインビジュアルと導入
ダークモードベースに、ライムグリーンのアクセントカラーが効いたモダンなUIです。
共感と課題提起
ターゲットの悩みを整理し、心理導線を丁寧に設計しています。
解決策の提示
透過カードと背景グラデーションによって、奥行きのある質感を実現しています。
ベネフィットの整理
カードUIで情報を整理しつつ、全体の統一感も維持されています。
最終CTA
「一生モノの武器」という強いメッセージと、視認性の高いCTAが配置されています。
4. まとめ：AIを「デザイナー兼エンジニア」として雇う
今回紹介した方法を使えば、AI生成LPの“殺風景問題”はかなり改善できます。
重要なのは次の3点です。
- PASONAなどの“売れる型”をAIに渡す
- デザイン手法を具体的に指定する
- 視覚演出まで含めてプロンプトを書く
これだけで、AIは単なる文章生成ツールではなく、
「24時間働くデザイナー兼フロントエンドエンジニア」
として機能し始めます。
LP制作のハードルは、ここ数ヶ月で大きく変わりました。
あとは、
- 色味を変更する
- フォントを変える
- アニメーションを強化する
- CTAを調整する
など、対話形式でブラッシュアップしていくだけです。
ぜひ一度、自分のサービスで試してみてください。