【開発秘話】AIでLPを自動生成！2段階LLMとプロンプトエンジニアリングの裏側

Qube prevalence AI開発を牽引するフロントランナー：ハニー君

まずは、BtoBコミュニケーションプラットフォーム「Qube」 で、本機能のアーキテクチャ設計から実装までを主導した、プロダクト・サービス事業部のエースをご紹介します。

【ハニー君】

• 経歴
  新卒入社2年目（2024年入社）。Qube開発チーム配属後、LLM（大規模言語モデル）を活用した機能実装に特化。
• 主な開発実績
   「AIアイコン生成機能（画像生成モデルの統合）」「AI自動ポスト機能」など、Qubeのインテリジェンス層を支える機能を次々とリリース。
• パーソナリティ
  野球観戦を愛するアクティブなエンジニア。「技術は使われてこそ価値がある」という信念のもと、ユーザー体験の向上に心血を注いでいます。

そんな彼が今回挑んだのが、「AIによる構造化データからの高精度なHTML生成」です。

 精度を極める「2段階LLM（Prompt Chaining）」の採用

一般的なAI生成では、一つのプロンプトで全てを完結させようとしますが、それでは出力の不安定さやデザインの崩れが避けられません。ハニー君が採用したのは、**「Prompt Chaining（プロンプト・チェイニング）」**という高度な手法です。

ステップ①：設計図（JSON）の生成【論理の確定】

まず、イベントの生データ（日時、場所、概要等）をLLMに渡し、LPのセマンティクスを定義した中間JSONデータを生成します。ここではデザイン要素を一切排除し、「何を、どの優先順位で伝えるか」という情報設計にリソースを集中させます。

ステップ②：JSONからHTMLへの変換【プレゼンテーション層の構築】

ステップ①で生成された構造化データを入力とし、別のプロンプトで実際のHTML/CSSを組み立てます。ここでは「Tailwind CSSを極めたフロントエンドエンジニア」というRoleを定義し、UIコンポーネントの構築に特化させます。

この「情報の抽象化」と「具象化」を分離するアプローチにより、一貫性のある高品質なアウトプットが可能になりました。

開発の壁：ハルシネーション対策とUIトレンドの実装

ハニー君が開発において最もこだわったのが、プロンプトエンジニアリングによる出力の制御です。

• ハルシネーションの徹底排除
   LLMが入力データにない実績や数字を捏造（ハルシネーション）することを防ぐため、「Grounding（根拠付け）」を徹底。プロンプト内に「事実に基づく訴求」や「入力情報の維持」をGuidelinesとして複数箇所に配置し、出力の信頼性を担保しています。
• 最新UIトレンドの反映：
  生成されるデザインには、Bento Grid（弁当箱のような整然としたグリッドレイアウト）やGlassmorphism（ガラスのような半透明エフェクト）など、モダンなUIトレンドを取り入れるようTailwindのクラス生成を最適化。
• デザインテーマの可変性
  ビジネス・ラグジュアリー・ポップといった各テーマに合わせて、カラーパレット、タイポグラフィ、余白のスケール設定を動的に切り替える仕組みを構築しました。

今後の展望：自律的に判断する「AIエージェント」への挑戦

今回のリリースはあくまで第一歩。ハニー君はすでに、次なる展開もしっかり見据えているようです！

「現在は静的なLP生成ですが、今後はAIが自律的にコンバージョン率を分析し、構成を改善していくAIエージェント化を目指しています。Qubeが自律的に成長し、ユーザーのマーケティングを最適化する世界を実現したいです」

Qubeはこれからも、ハニー君のようなエンジニアによる技術革新（R&D）を続け、企業のDXを強力にバックアップしていきます。

ハニー君の自信作を、ぜひご体感ください！

最新のLLM技術とエンジニアのこだわりが詰まった「イベントLP自動生成機能」。 先行体験版は、Qubeの管理画面より今すぐお試しいただけます。

▶BtoBコミュニケーションプラットフォーム「Qube」のご登録はこちらから！

https://www.css-net.co.jp/qube