【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を調整する

など、対話形式でブラッシュアップしていくだけです。

ぜひ一度、自分のサービスで試してみてください。

【LINEコミュニティ】

開発案件紹介や、AIを活用したアプリ開発の無料勉強会も開催しています。

興味がある方は、ぜひLINE登録してください！

https://lin.ee/zsrYtYk