landing-page-generator

ランディングページジェネレーター

製品の説明から、コンバージョン率の高いランディングページを生成します。複数のセクションバリエーション、実績のあるコピーライティングフレームワーク、SEO最適化、パフォーマンスを優先したパターンを取り入れた、完全なNext.js/Reactコンポーネントを出力します。単なるダミーテキストではなく、コンバージョンにつながる実際のコピーを作成します。

目標： LCP < 1s · CLS < 0.1 · INP < 200ms 出力： TSXコンポーネント + Tailwindスタイル + SEOメタデータ + コピーのバリエーション

使用する場面

• Next.jsまたはReactでマーケティング用ランディングページを生成する必要がある場合。
• コンバージョンを重視したページ構成、セクションのバリエーション、Tailwindのスタイリング、またはSEOを意識したコピーが必要な場合。
• 個別のUI断片ではなく、製品の説明をもとにランディングページ全体を出力したい場合。

エビデンスと実装上の制限

コンバージョンの成果は保証されません。フレームワークの例には架空の数値や顧客の主張が含まれています。裏付けのある指標、使用許可を得たロゴや推薦文、実際の保証内容、確認済みの価格のみを公開してください。参照されているブランド分析／UIシステム／ティアダウンのパスは同梱されていません。利用可能なレビュー済みツール、または手動で分析してください。スキャフォールドは部分的な出発点であり、すべてのヒーローバリエーション、FAQスキーマ、課金切り替え、インテグレーション、計測に基づくパフォーマンス監査を実装しているわけではありません。インポート（Button/Image/Accordion/Check）、アクセシビリティ、ルーティング、実際のビルド／レンダリング動作を確認してください。ソースコードの確認だけでCore Web Vitalsに合格したと主張してはいけません。

主な機能

• ヒーローセクションのバリエーション5種（中央配置、分割、グラデーション、動画背景、ミニマル）
• 特徴セクション（グリッド、交互配置、アイコン付きカード）
• 料金表（機能リストと切り替えを含む2～4段階のプラン）
• スキーママークアップ付きFAQアコーディオン
• お客様の声（グリッド、カルーセル、単一の引用）
• CTAセクション（バナー、ページ全体、インライン）
• フッター（シンプル、メガ、ミニマル）
• Tailwindクラスセット付きのデザインスタイル4種

---

生成ワークフロー

ランディングページの依頼ごとに、次の手順を順番に実行してください。

1. 入力情報を収集する — 下記のトリガー形式を使って、製品名、タグライン、対象ユーザー、課題、主なメリット、料金プラン、デザインスタイル、コピーライティングフレームワークを集めます。不足している項目だけを尋ねてください。
2. ブランドの声を分析する（推奨） — ユーザーが既存のブランドコンテンツ（ウェブサイトのコピー、ブログ記事、マーケティング資料）を持っている場合は、marketing-skill/content-production/scripts/brand_voice_analyzer.py に通して、声のプロファイル（フォーマルさ、トーン、視点）を取得します。そのプロファイルをもとに、デザインスタイルとコピーライティングフレームワークの選択に反映します。
   • フォーマルでプロフェッショナル → エンタープライズスタイル、AIDAフレームワーク
   • カジュアルで親しみやすい → ボールド・スタートアップスタイル、BABフレームワーク
   • プロフェッショナルで権威がある → ダークSaaSスタイル、PASフレームワーク
   • カジュアルで会話調 → クリーン・ミニマルスタイル、BABフレームワーク
3. デザインスタイルを選ぶ — ユーザーの選択（またはブランドの声の分析から推定した内容）を、デザインスタイルのリファレンスにある4つのTailwindクラスセットのいずれかに対応させます。
4. コピーライティングフレームワークを適用する — コンポーネントを生成する前に、選択したフレームワーク（PAS / AIDA / BAB）を使ってすべての見出しと本文のコピーを作成します。全体を通して、声のプロファイルのフォーマルさとトーンに合わせてください。
5. 順番にセクションを生成する — ヒーロー → 特徴 → 料金 → FAQ → お客様の声 → CTA → フッター。製品に関連しないセクションは省略します。
6. SEOチェックリストに照らして検証する — 最終コードを出力する前に、SEOチェックリストの全項目を確認します。不足があれば、その場で修正してください。
7. 最終コンポーネントを出力する — Tailwindクラス、SEOメタデータ、構造化データをすべて含む、コピー＆ペーストですぐに使える完全なTSXファイルを提供します。

---

このスキルの呼び出し

Product: [name]
Tagline: [one sentence value prop]
Target audience: [who they are]
Key pain point: [what problem you solve]
Key benefit: [primary outcome]
Pricing tiers: [free/pro/enterprise or describe]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB

---

デザインスタイルの参考

スタイル	背景	アクセント	カード	CTA ボタン
ダーク SaaS	bg-gray-950 text-white	violet-500/400	bg-gray-900 border border-gray-800	bg-violet-600 hover:bg-violet-500
クリーン・ミニマル	bg-white text-gray-900	blue-600	bg-gray-50 border border-gray-200 rounded-2xl	bg-blue-600 hover:bg-blue-700
大胆なスタートアップ	bg-white text-gray-900	orange-500	shadow-xl rounded-3xl	bg-orange-500 hover:bg-orange-600 text-white
エンタープライズ	bg-slate-50 text-slate-900	slate-700	bg-white border border-slate-200 shadow-sm	bg-slate-900 hover:bg-slate-800 text-white

大胆なスタートアップの見出し：すべての <h1>／<h2> 要素に font-black tracking-tight を追加します。

---

コピーのフレームワーク

PAS（問題 → 深刻化 → 解決策）

• H1：ユーザーが直面しているつらい状況
• サブ見出し：解決しなかった場合に起こること
• CTA：提供するもの
• 例 — H1：「チームは手作業のレポート作成に毎日3時間を費やしています」／サブ見出し：「スプレッドシートに費やす1時間は、商談成立に使えない1時間です。競合他社はすでに自動化しています。」／CTA：「10分でレポートを自動化 →」

AIDA（注目 → 関心 → 欲求 → 行動）

• H1：注目を集める大胆なメッセージ → サブ見出し：興味を引く事実やメリット → 特長：欲求を高める根拠 → CTA：明確な行動

BAB（導入前 → 導入後 → 橋渡し）

• H1：「［導入前の状態］→［導入後の状態］」→ サブ見出し：「［製品］がどのようにギャップを埋めるかをご紹介します」→ 特長：仕組み（橋渡し）

---

代表的なコンポーネント：ヒーロー（中央配置グラデーション — ダーク SaaS）

これをすべてのヒーローバリエーションの構造テンプレートとして使用します。分割、動画背景、ミニマルの各バリエーションでは、レイアウトクラス、グラデーションの方向、画像の配置を変更します。

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          Now in public beta
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Ship faster.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            Break less.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          The deployment platform that catches errors before your users do.
          Zero config. Instant rollbacks. Real-time monitoring.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            Start free trial
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            See how it works →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">No credit card required · 14-day free trial</p>
      </div>
    </section>
  )
}

---

その他のセクションパターン

特長セクション（交互配置）

{ title, description, image, badge } を持つ features 配列をマップします。i % 2 === 1 ? "lg:flex-row-reverse" : "" でレイアウトの方向を切り替えます。width／height を明示した <Image> を rounded-2xl shadow-xl とともに使用します。max-w-6xl コンテナを使い、<section className="py-24"> で囲みます。

料金表

{ name, price, description, features[], cta, highlighted } を持つ plans 配列をマップします。強調表示するプランには border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20 を、その他のプランには border border-gray-800 bg-gray-900 を適用します。価格が null の場合は「カスタム」と表示します。特長の各行に <Check> アイコンを使用します。レイアウト：grid gap-8 lg:grid-cols-3。

スキーママークアップ付き FAQ

セクション内に <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema).replace(/</g, "\\u003c") }} /> を使用して、FAQPage の JSON-LD を挿入します。{ q, a } を持つ FAQ をマップし、shadcn の <Accordion> に type="single" collapsible を指定して表示します。コンテナ：max-w-3xl。

お客様の声、CTA、フッター

• お客様の声： グリッド（grid-cols-1 md:grid-cols-3）または、アバター、名前、役職、引用文を含む単一引用のヒーローブロックを使用します。
• CTA バナー： 見出し、サブ見出し、2つのボタン（プライマリ＋ゴースト）を含む全幅のセクションを配置します。直下に信頼性を示す要素（返金保証、ロゴ一覧）を追加します。
• フッター： ロゴ＋ナビゲーション列＋ソーシャルリンク＋法的情報を配置します。区切りには border-t border-gray-800 を使用します。

---

SEO チェックリスト

• <title> タグ：主要キーワード＋ブランド（50～60文字）
• メタディスクリプション：メリット＋CTA（150～160文字）
• OG 画像：製品名とタグラインを含む1200×630pxの画像
• H1：各ページに1つ。主要キーワードを含める
• 構造化データ：FAQPage、Product、Organization のいずれかのスキーマ
• canonical URL を設定
• すべての <Image> コンポーネントに画像の alt テキストを設定
• robots.txt と sitemap.xml を設定
• Core Web Vitals：LCP < 1s、CLS < 0.1
• モバイルビューポートのメタタグを設定
• 料金ページとドキュメントへの内部リンク

検証手順： 最終コードを出力する前に、上記のチェックリストのすべての項目が満たされていることを確認します。不足があれば、その場で修正し、省略しないでください。

---

パフォーマンス目標

指標	目標	手法
LCP	< 1s	ヒーロー画像をプリロードし、Next/Image で priority を使用する
CLS	< 0.1	すべての画像に明示的な幅と高さを設定する
INP	< 200ms	重要でない JS の読み込みを遅らせ、loading="lazy" を使用する
TTFB	< 200ms	ランディングページには ISR または静的生成を使用する
バンドル	< 100KB JS	@next/bundle-analyzer で監査する

---

よくある落とし穴

• ヒーロー画像がプリロードされていない — 最初の <Image> に priority プロパティを追加します
• モバイルのブレークポイントがない — 常にモバイルファーストで、sm: プレフィックスを使って設計します
• CTA の文言が曖昧すぎる — 「詳しく見る」より「始める」、「登録する」より「無料トライアルを開始する」が効果的です
• 料金ページに信頼性を示す要素がない — CTA の近くに返金保証とお客様の声を追加します
• モバイルでファーストビューに CTA がない — ビューポート幅が 375px のとき、スクロールせずにボタンが見えるようにします

---

関連スキル

• ブランドボイス分析ツール (marketing-skill/content-production/scripts/brand_voice_analyzer.py) — 生成前に実行し、ボイスプロファイルを作成してコピーの一貫性を確保します
• UI デザインシステム (product-team/ui-design-system/) — ページを構築する前に、ブランドカラーからデザイントークンを生成します
• 競合分析 (product-team/competitive-teardown/) — 競合に対するポジショニングを、ランディングページのメッセージと差別化に反映します

制限事項

• このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を止めて確認を求めてください。