AI Landing Page Studio — BtoB LP 制作パイプライン v0.2

プロダクト定義

単発プロンプトからLPらしい画面を出すツールではなく、制作会社の判断工程を利用者とAIで進める制作スタジオ。成果物はHTMLだけではなく、ヒアリング回答、調査根拠、CV仮説、構成、トーン採否、コメント、変更履歴を含む。

工程

1. 内容理解・ヒアリング — 資料を解析し、不足情報だけを適応型UIで質問する。
2. CV・競合・ジャーニー設計 — 流入前からCV後までを定義し、直接競合・間接競合・代替手段の採否理由を残す。
3. ストーリー・構成・ライティング — Markdownを正本にし、直接編集と指示再生成の両方を提供する。
4. デザイントーン提案 — 3案のムードボードとメインビジュアルを提示。色、書体、画像、動き、言葉、採用理由、避ける表現をセットにする。
5. WFレビュー — セクションの役割・主張・根拠・CTA・素材条件を表示し、座標付きコメントで再生成する。
6. デザインレビュー — 選択トーンに基づくデザインへ座標付きコメントを置き、部分再生成する。
7. 実装・書き出し — HTML/CSS/JS、画像、設計書、変更履歴を出力する。

画像生成の境界

各セクションは、文字なしの背景レイヤーと、写真・図版・日本語文字組みを統合したコンテンツレイヤーへ分ける。FV、メッセージ、課題、仕組み、用途、工程、証拠などはコンテンツ画像を積極的に使う。

一方、CTAボタン、フォーム、入力欄、FAQ、価格、比較表、法務表記、計測要素はHTMLとして保持する。画像内コピーを採用する場合も、同じ意味のHTML正本をアクセシブルに残し、SPで画像内文字が読めない箇所はHTMLコピーを表示する。これにより、画像生成によるデザイン品質と、編集、計測、SEO、アクセシビリティ、レスポンシブを両立する。

BtoB LP 上位ゲート

• ターゲットが自分向けと認識し、提供価値と選ばれる理由を誤解なく理解できる。
• 広告・検索・SNS・営業など流入前の期待から、CV後の行動まで連続している。
• ページ構成、証拠、CTA、機能が主目的と因果でつながる。
• 直接競合、間接競合、代替手段の比較軸が設計へ反映され、非採用理由も説明できる。
• 根拠のない実績・効果・顧客の声を生成しない。

参照したPENGIN資産

• Notion「BtoB LPの設計マニュアル」: 即決型・中間型・心配性型、価値訴求と安心材料、流入心理。
• Notion「D-4.0 トンマナ・コンテンツ・サイトマップ」: 主張と伝達の分離、トーンの具体化、採用理由とNG。
• Notion「D-5.0 ページ設計・ワイヤーフレーム」: 上位4ゲート、セクション仕様、座標コメントと変更管理。
• Notion「ヒアリングシート」: 事業の想い、独自性、目的、ターゲット、ブランド、参考、競合。
• Drive lp_knowledge_base.md: LP標準構成、業種分岐、コピー・品質チェックの既存整理。
• ローカル ai-support-lp: 役割・レイアウト・コピー・ビジュアル指示まで持つ実LP設計。
• ローカル touch-to-go/design: 3方向提案、主参考・補助参考、採否理由、暫定値管理。
• ローカル gk-partners/seminar-lp-renewal: 温度設計、差別化、煽らない緊急性、セクション単位の仕様。

外部プロダクトから採用する部分

• Typeform: 条件分岐で不要な設問を隠す。固定質問票ではなく回答に応じた次問を出す。
• Relume: 構成を先に編集し、その変更をWF生成へ伝播する。
• Figma: 座標・範囲コメント、スレッド、解決状態をレビュー正本にする。
• Webflow AI: 構造、コンテンツ、テーマを別レイヤーとして調整可能にする。

外部サービスの単純な模倣はせず、PENGINの上流設計・採否理由・品質ゲートを差別化の中心にする。