イベントLPをAIで自動生成！2段階LLMで実現するランディングページ生成機能

みなさんこんにちは！入社2年目、プロダクトサービス事業部のハニーです。

自社サービス「Qube」では、イベントの申し込みや告知に使うランディングページ（LP）を、AIが自動で生成する機能の先行体験版を開発・リリースしました。

このLP自動生成機能がどういう仕組みなのか、開発時にどこで苦戦したのかについて、今回お話ししたいと思います！

1. イベントLP自動生成機能とは

イベントLP自動生成機能は、イベントの基本情報（イベント名・概要・詳細など）と選択した「テーマ」をもとに、コンバージョン（申し込み）を意識したLPをAIが生成する機能です。イベントとテーマ（ビジネス・ラグジュアリー・ポップなど）を選び生成ボタンを押すと、そのイベント専用のLPが自動で出来上がり、プレビュー画面で確認したうえで公開・非公開を切り替えて利用できます。

画像１：イベントLP生成画面

画像２：イベントLP詳細画面（テーマ：ビジネス）

2. どういう仕組みなのか

このLP自動生成機能では、プロンプト・チェイニングという手法を採用しました。

プロンプト・チェイニングとは、複雑なタスクを複数の小さなステップに分割し、1つ前の回答を次の入力に使いながら、鎖（チェーン）のようにつなげて処理する手法です。段階を踏んでAIに考えさせることで、一度に全部やらせるより精度の高い結果が得られます。

本機能では、1回目のLLM呼び出しで「設計図」となるJSONデータを生成し、そのJSONを2回目の入力として渡してHTMLを組み立てる、という2段階にしています。プロンプト・チェイニングの「前の出力を次に渡す」という形を、この「JSON → HTML」のつながりで実現しました。1回目ではLPの「何をどの順で書くか」「どんな文言にするか」を決め、2回目では色・余白・レイアウトなど「どう見せるか」を担当する、という役割分担です。なぜこう分けたかというと、LPでは中身も見た目も求められる一方、両方を一度にLLMに任せると指示が複雑になり、どちらも中途半端になりがちだからです。各段階でLLMに集中させることで、精度を高めました。

具体的な流れは以下のとおりです。

① 入力データの準備

イベント名・概要・詳細・開場/開始/終了日時・参加費・開催場所・テーマ用プロンプトを準備します。

② 1回目のLLM呼び出し：LP用JSONの生成

イベント情報を渡し、後続のHTML生成プロンプトの設計図となる中間JSONを生成します。プロンプトでは、役割・ガイドライン（事実に基づく訴求、禁止事項、CTAの確定表現など）・出力形式などを指定しており、この段階ではデザインは指定せず「何をどう書くか」に集中させています。

③ 2回目のLLM呼び出し：JSONからHTMLの生成

1回目で得たJSONデータとテーマ用プロンプトを渡し「UI/UXデザイナー・Tailwindを極めたフロントエンドエンジニア」という役割で、実際のHTMLを生成します。ここで初めて、テーマに応じた色・余白・フォント・レイアウト（Bento Grid、Glassmorphismなど）の指示を効かせます。

このように、プロンプト・チェイニングにより「構成・文言」と「見た目」を分離した2段階の仕組みになっています。1回目で設計図（JSON）を、2回目でそれに基づくHTMLを出力する流れです。この形にすることで、テーマ（デザイン）を変えても訴求内容は一貫させられます。また、プロンプトのルールを後から見直すときも、JSON生成側とHTML生成側のどちらを直すべきか判断しやすくなります。

3. 開発で苦戦したこと

機能の核は「何をLLMに渡して、どう指示するか」です。ここでは、JSON・HTML生成プロンプトと、テーマごとのプロンプトの2つでつまずいたポイントをお話しします。

3.1 苦戦したポイント①：JSON・HTML生成プロンプト

JSON生成プロンプト・HTML生成プロンプトのどちらでも、守らせたいルールを書いてもLLMが逸脱するという課題がありました。そこで、以下のような「課題洗い出し→対応」を繰り返しました。

 

LPを作るうえで考えるべきこと

イベントの種類に合った訴求や交流会ならではの心理障壁の解消など、LPとして考えるべきことがLLM任せだと抜けがちでした。そこで、イベントのカテゴリー（交流・マッチング型、学習・教育型など）を特定して、訴求の方向性を決めることなどをプロンプトに明示して組み込みました。

 

事実に基づく訴求

イベントにない実績数値・企業名・主催者実績をLLMが作りがちで、信頼性を損なう出力になることがありました。そこで、「入力にないものは捏造しない」「データ不足時は誇張を避ける」ことを明示しました。

 

表記の維持

イベント名や固有名詞の大文字・小文字が、入力と異なる形で「校正」されてしまうことが多くありました。「入力の表記をそのまま維持する」「文頭大文字化などの校正は行わない」と指定し、HTML生成プロンプトではTailwindのuppercase/capitalizeを不用意に使わないよう注意を入れて対応しています。指定はしているものの、なかなかうまくいかないケースが現在もあります、、、。

ほかにもルールを書いても無視されることがあったため、Role / Task / Guidelines / Output Formatのように役割とタスクを分けて書き、重要なルールは複数箇所に書く・表現を少し変えて重ねるなどして強化しました。

3.2 苦戦したポイント②：テーマごとのプロンプト

テーマ（ビジネス・ラグジュアリー・ポップなど）ごとにデザインの方向性を変えられるようにしましたが、ここでも思うような出力にならないことが多く、試行錯誤しました。

 

JSON・HTML生成プロンプトの制約との両立

テーマ用プロンプトで「高級感を出したい」「ポップにしたい」と書くと、JSON・HTML生成プロンプトで禁止している要素を出そうとするケースがありました。そこで、テーマ用プロンプトは「色・余白・フォント・レイアウト・雰囲気」に限定し、禁止事項はJSON・HTML生成プロンプトに任せる形に整理しました。

 

具体性のバランス

曖昧に書く（例：「きれいなデザインで」）とテーマ差が出にくく、細かく書きすぎる（例：「paddingは必ず16pxで」）と毎回同じような見た目になりがちで苦戦しました。そこで、カラーコード・フォント名・レイアウトのキーワード（Bento Grid、Glassmorphism等）をテーマごとに書きつつ、細かい数値は「Tailwindのクラスで自然に」任せるようにバランスを取るようにしました。

テーマを増やしたり文言を変えたりしたあとは、実際に何度か生成して禁止事項違反やレイアウト崩れが出ないか確認する運用を続けており、まだまだ調整の余地がある状態です。

画像３：イベントLP例（テーマ：モノクロ）

4. まとめ

イベントLP自動生成機能は、イベント情報とテーマからコンバージョン重視のLPを自動生成する機能です。この機能ではプロンプト・チェイニングを採用し、設計図（JSON）→HTMLの2段階でLLMを呼び出してLPを生成しています。

開発では、JSON・HTML生成プロンプトで「事実ベースの訴求・禁止事項・表記維持・CTAの確定表現」などを守らせることと、テーマ用プロンプトで「デザインの方向性だけを変える」ことの両立に苦戦しました。生成結果を見ては修正する繰り返しでしたが、役割分担（JSON＝設計、HTML＝見た目）とルールの明文化・重複記載で、だいぶ安定してきました。

現在はプロンプトによる指示でLPを生成していますが、今後はAIエージェントによるLP生成機能の開発に取り組みたいと考えています。エージェントが自律的に判断・実行することで、より使いやすく、より良いLP生成を実現することが目標です！

【合わせて読みたい】

blog.css-net.co.jp

この記事を書いた人

【ニックネーム】ハニー  
【経歴】入社2年目。自社サービスであるBtoBコミュニケーションプラットフォーム「Qube」というSaaS開発に携わっています。  
【一言】資格を取りたい、頑張りたい！

 

＼DX推進・AI導入支援なら、株式会社シー・エス・エスへ／