株式会社renue
AI導入・DXの悩みをプロに相談してみませんか？
AIやDXに関する悩みがありましたら、お気軽にrenueの無料相談をご利用ください。 renueのAI支援実績、コンサルティングの方針や進め方をご紹介します。
LP(ランディングページ)自動生成AIは、2026年現在「一括生成型」と「セクション単位生成型」の2つに大別される。前者は単純なプロンプト1回でLP全体を作る方式で、修正が難しい。後者は8種類のセクション(HERO/PAIN/SOLUTION/FEATURES/TESTIMONIAL/CTA/FAQ/FOOTER)を独立した単位として生成・管理する方式で、本番運用に耐える柔軟性を持つ。本記事では、renueが自社プロダクトとして実装している後者方式の本番アーキテクチャをもとに、実装パターンを解説する。
8セクション型LP自動生成のアーキテクチャ
本番品質のLP自動生成は、以下の8セクションを基本単位として設計する。各セクションは独立してコンテンツ生成・画像生成・HTML出力・再生成が可能な設計にする。
| セクション | 目的 | 主要要素 |
|---|---|---|
| 1. HERO | 訪問者の関心をつかみ、提供価値を端的に示す | headline / sub_headline / cta_text / 背景画像 |
| 2. PAIN | 読者の課題に寄り添い、解決の必要性を伝える | title / pain_points(list) / empathy_message |
| 3. SOLUTION | 課題を解決する方法を提示し、希望を与える | title / solution_description / benefits(list) |
| 4. FEATURES | 具体的な特徴・機能を紹介し、信頼性を高める | title / features(icon+title+description) |
| 5. TESTIMONIAL | 第三者の実績で信頼性を裏付ける | title / testimonials(quote+author+company+role) |
| 6. CTA | 明確なアクションを促す | headline / sub_text / cta_text / urgency_message |
| 7. FAQ | 疑問を解消し、購入障壁を取り除く | title / faqs(question+answer list) |
| 8. FOOTER | 追加情報とナビゲーションを提供 | company_name / links / contact_info / copyright |
本番品質LP自動生成に必要な6レイヤー
レイヤー1: 多次元コンテキスト統合
LP生成の品質は、LLMに渡すコンテキストで決まる。単に「化粧品LP作って」と頼むだけでは業務品質のLPは出てこない。renueの実装では以下の5要素を統合したコンテキストを構築する。
- ペルソナ情報: ターゲット像(年齢/性別/職業/価値観)
- ペインポイント情報: ペインポイント(課題/悩み/解決したいこと)
- セールスポイント情報: セールスポイント(強み/差別化要素)
- 商品情報: 商品の名前・説明・価格・特徴
- BrandAsset: ブランドガイドライン(色/フォント/トーン)
これら5要素をデータベースで管理し、LP生成時に動的に組み立てる。この設計により「ペルソナだけ変えて別バージョンLPを作る」「商品だけ変えて類似LPを量産する」といった運用が簡単になる。
レイヤー2: セクション単位の独立生成
LPを一度に生成するのではなく、セクション単位で独立して生成する。これにより以下のメリットがある。
- 修正の容易さ: 特定セクションだけを再生成できる
- トークン節約: 1回のLLM呼び出しが短くなる
- 並列生成: 複数セクションを同時に生成可能
- A/Bテスト: セクション単位でバリエーション生成
- 再利用: 優秀なセクションを他LPに流用
セクション別のプロンプトテンプレート
各セクションの目的と必要要素を明示したテンプレートをシステムプロンプトに含める。
セクションごとに目的と必要要素が異なるため、それぞれに特化したテンプレートを用意することが重要である。
レイヤー3: 構造化JSON出力 + HTML生成
LLM出力は必ず構造化JSONで受け取る。これによりプログラムから各要素(headline, cta_text等)にアクセスできる。
出力フォーマット例
3つの出力を同時生成する理由
- content (JSON): 構造化データとして他システムで再利用可能
- html_snippet: そのままWebページに埋め込める
- css_snippet: 追加スタイルが必要な場合に利用
contentとhtml_snippetを別々に生成するのではなく、同じJSONの中に含めて1回のLLM呼び出しで取得する設計にすることで、トークンとレイテンシを節約できる。
レイヤー4: Tailwind CSS統合
html_snippetはTailwind CSSを前提に生成する。理由は以下の通り。
- Utility-firstなので生成しやすい
- LLMの学習データに豊富に含まれている
- カスタムCSSなしでも見栄えが整う
- レスポンシブ対応が簡単(md:/lg:プレフィックス)
- コンポーネント化しやすい
LLMへの指示例
レイヤー5: 画像自動生成との統合
LPはビジュアル重視のため、画像の自動生成が欠かせない。renueの実装では画像生成モジュールと統合し、セクションごとに適切な画像を生成する。
セクション別の画像プロンプト
画像を生成すべきセクション
全セクションに画像を生成するとコストが高く、デザインも冗長になる。renueの実装では以下の基準で絞っている。
- HERO: 必ず生成(LPの第一印象を決める)
- SOLUTION: 必要に応じて生成(解決策のビジュアル化)
- FEATURES: アイコンのみ(画像生成コスト削減)
- その他: テキストのみで十分
レイヤー6: ブランドアセット統合
自動生成されたLPがブランドガイドラインを無視していては意味がない。renueの実装ではブランドアセット情報をLP生成時に必ず参照する。
反映するブランド要素
- プライマリカラー: CTA・ヘッダー・アクセントに使用
- サブカラー: 背景・装飾に使用
- フォント: 見出しフォントと本文フォントを指定
- トーン: 誠実/革新的/親しみやすいなどの指針
- 禁止表現: ブランドが避ける表現(「世界一」「絶対」等)
- 必須要素: ロゴの配置、法的表記の義務など
ブランド反映の実装パターン
これらをプロンプトのコンテキストに含めることで、LLMが生成するHTMLとコピーがブランドガイドラインに沿ったものになる。単にプロンプトで「誠実なトーンで」と書くだけでなく、構造化データとして渡すことで再現性が高まる。
LP全体のコンテキスト共有
8セクションを独立生成する場合、「LP全体のトーン」が統一されないリスクがある。これを防ぐため、renueの実装ではLPコンテキストオブジェクトを各セクション生成時に渡す設計を採用している。
LPコンテキストに含める情報
- LP全体のメインメッセージ
- ターゲットペルソナのサマリー
- 既に生成済みのセクションのhighlights
- LP全体のCTA(次のアクション)
- 使用する用語・言い回しの統一
最初にHEROセクションを生成し、その内容をLPコンテキストに含めて他セクションを生成することで、LP全体の一貫性が保たれる。
マルチバリエーション生成
A/Bテストのため、同じ条件で複数のバリエーションを生成することがある。renueの実装では以下のパターンを提供する。
バリエーション生成の3パターン
- トーン変更: 同じ内容を異なるトーン(フォーマル/カジュアル/熱血)で生成
- 構成変更: セクション順序を変えて生成(HERO→PAIN vs HERO→SOLUTION)
- CTA変更: CTA文言だけを複数パターン生成
これらをA/Bテストツールと連携することで、データドリブンなLP改善が可能になる。
LP生成の全体フロー
1. [入力] ペルソナ/ペイン/SP/商品/ブランドアセットを指定
↓
2. [LP全体構造の生成] どのセクションを何個並べるか決定
↓
3. [セクション個別生成] 8セクションをループで生成
├─ HEROから開始(後続セクションのコンテキストになる)
├─ 各セクションでLLM呼び出し
├─ JSON出力を検証
└─ HTMLとCSSを抽出
↓
4. [画像生成] HERO/SOLUTIONの画像を画像生成モジュールで生成
↓
5. [ブランドアセット合成] ロゴを画像に自動合成
↓
6. [全体結合] 8セクションのHTMLを結合してLP完成
↓
7. [保存] LP構造データとしてDBに永続化
PoC→本番移行時の課題
LP自動生成をPoCから本番運用に移行する際、以下の課題が発生する。
1. 生成品質のばらつき
LLMの出力は毎回微妙に異なる。同じ条件でも「当たり・外れ」がある。renueの実装では、品質スコアをLLMで自己評価させ、閾値を下回る場合は再生成する仕組みを取っている。
2. ブランドガイドライン逸脱
プロンプトでブランドを指定しても、LLMが無視することがある。生成後に禁止表現チェック・色コードチェック・フォント確認を自動で行い、違反時は該当箇所だけ再生成する。
3. トークンコスト
8セクション×1回のLLM呼び出し+画像生成で、1LPあたり数十円〜数百円のコストがかかる。大量生成する場合は、安価なモデル(Gemini Flash等)で一次生成し、重要セクション(HERO/CTA)だけ高性能モデルで再生成する運用が推奨される。
4. レスポンスタイム
8セクションを順次生成すると数分かかる。ユーザーが待てる時間ではない。並列生成+プログレス表示+生成完了後のバックグラウンド反映など、UX設計が重要になる。
renueの実装技術スタック
renueは「Self-DX First」の方針のもと、LP自動生成機能を自社プロダクトとして実装している。社内の主要業務を自社開発のAIツールで自動化済み(2026年1月時点)であり、LP生成もその一部である(全て公開情報)。
公開されている技術スタック
- バックエンド: Python + FastAPI
- LLM: 外部AIサービス（組織のセキュリティ方針に沿って接続）
- 画像生成: 画像生成モジュール(別記事で詳説)
- データモデル: ORM + ペルソナ・ペイン・セールスポイント・商品・ブランド情報
- 出力: JSON + HTML + CSS(Tailwind)
業界別の適用パターン
| 業界 | 重視するセクション | 特有の注意点 |
|---|---|---|
| EC/D2C | HERO / FEATURES / TESTIMONIAL / CTA | 景表法に注意 |
| BtoB SaaS | PAIN / SOLUTION / FEATURES / FAQ | 具体的な課題解決 |
| 金融 | FEATURES / FAQ / FOOTER(法的表記) | 金商法対応 |
| 医療 | SOLUTION / TESTIMONIAL / FAQ | 医療広告ガイドライン |
| 不動産 | HERO / FEATURES / TESTIMONIAL | 物件情報の正確性 |
| 採用 | PAIN / SOLUTION / TESTIMONIAL / CTA | 候補者への訴求 |
導入時のよくある失敗パターン
- プロンプトだけで済ませる: ペルソナ・ブランドアセットを構造化しないと品質が不安定
- 一括生成にこだわる: 修正ができず運用で詰まる
- 全セクションに画像生成: コストが爆発する
- Tailwindを使わない: LLMの生成品質が低下する
- LP全体コンテキストがない: セクション間のトーンがバラバラになる
- ブランドチェックをしない: 生成後の検証がなく本番で事故
- バリエーション管理がない: A/Bテストが回せない
- 同期レスポンスで返す: タイムアウトが頻発
