ランディングページジェネレーターは何をしますか？

商品説明から高コンバージョンのランディングページを生成します。複数のセクションバリエーション、実証済みのコピーフレームワーク、SEO最適化、パフォーマンスファーストのパターンを備えた、完全なNext.js/Reactコンポーネントを出力します。ダミー文ではなく、実際にコンバージョンを生むコピーです。

ターゲット: LCP < 1秒 · CLS < 0.1 · FID < 100ms
出力: TSXコンポーネント + Tailwindスタイル + SEOメタ + コピーバリエーション

使用すべき場面

Next.jsまたはReactでマーケティング用ランディングページを生成する必要がある場合。
コンバージョン重視のページ構造、セクションバリエーション、Tailwindスタイリング、SEO対応コピーが含まれるタスクの場合。
商品説明から、断片的なUI断片ではなく、完全なランディングページの出力を求めている場合。

コア機能

ヒーローセクション5種類（中央揃え、分割、グラデーション、ビデオ背景、ミニマル）
特徴セクション（グリッド、交互配置、アイコン付きカード）
価格表（2～4段階、機能リストとトグル付き）
FAQアコーディオン（スキーママークアップ付き）
お客様の声（グリッド、カルーセル、単一引用）
CTAセクション（バナー、全画面、インライン）
フッター（シンプル、メガ、ミニマル）
Tailwindクラスセットを備えた4つのデザインスタイル

生成ワークフロー

ランディングページのリクエストごとに、以下の手順を順に実行します。

入力情報を収集 — 以下のトリガーフォーマットを使用して、商品名、タグライン、ターゲット層、ペインポイント、主なメリット、価格帯、デザインスタイル、コピーフレームワークを収集します。不足しているフィールドのみを質問します。
ブランドボイス分析（推奨） — ユーザーが既存のブランドコンテンツ（ウェブサイトのコピー、ブログ記事、マーケティング資料）を持っている場合、それを marketing-skill/content-production/scripts/brand_voice_analyzer.py に通して、ボイスプロファイル（形式性、トーン、視点）を取得します。このプロファイルをデザインスタイルとコピーフレームワークの選択に活用します。
- 形式 + プロフェッショナル → エンタープライズスタイル、AIDAフレームワーク
- カジュアル + フレンドリー → Bold Startupスタイル、BABフレームワーク
- プロフェッショナル + 権威的 → Dark SaaSスタイル、PASフレームワーク
- カジュアル + 会話的 → Clean Minimalスタイル、BABフレームワーク
デザインスタイルを選択 — ユーザーの選択（またはブランドボイス分析からの推論）を、デザインスタイルリファレンスの4つのTailwindクラスセットのいずれかにマッピングします。
コピーフレームワークを適用 — コンポーネントを生成する前に、選択したフレームワーク（PAS / AIDA / BAB）を使用してすべての見出しと本文コピーを記述します。ボイスプロファイルの形式性とトーンを全体にわたって一致させます。
セクションを順に生成 — ヒーロー → 特徴 → 価格 → FAQ → お客様の声 → CTA → フッター。商品に関係のないセクションはスキップします。
SEOチェックリストに対して検証 — 最終コードを出力する前に、SEOチェックリストのすべての項目を確認します。ギャップがあればその場で修正します。
最終コンポーネントを出力 — すべてのTailwindクラス、SEOメタ、構造化データを含む、コピー＆ペースト可能な完全なTSXファイルを提供します。

このスキルをトリガーする方法

Product: [商品名]
Tagline: [簡潔な価値提案（一文）]
Target audience: [ターゲット層]
Key pain point: [解決する問題]
Key benefit: [主な成果]
Pricing tiers: [無料/プロ/エンタープライズ または説明]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: PAS | AIDA | BAB

デザインスタイルリファレンス

スタイル	背景	アクセント	カード	CTAボタン
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`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`

Bold Startup の見出し: すべての <h1> / <h2> 要素に font-black tracking-tight を追加します。

コピーフレームワーク

PAS (問題 → 動揺 → 解決)

H1: 彼らが陥っている苦しい状況
サブ見出し: 修正しない場合の結果
CTA: あなたが提供するもの
例 — H1: 「あなたのチームは手動レポートに1日3時間浪費しています」 / サブ見出し: 「スプレッドシートに費やす1時間は、案件をクローズしない1時間です。競合他社はすでに自動化しています。」 / CTA: 「レポートを10分で自動化 →」

AIDA (注意 → 興味 → 欲求 → 行動)

H1: 大胆な注意喚起のステートメント → サブ見出し: 興味を引く事実またはメリット → 特徴: 欲求を喚起する証明ポイント → CTA: 明確な行動

BAB (Before → After → Bridge)

H1: 「[Beforeの状態] → [Afterの状態]」 → サブ見出し: 「[商品]がどのようにギャップを埋めるか」 → 特徴: 仕組み（橋渡し）

代表的なコンポーネント: ヒーロー（中央揃えグラデーション — Dark 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" />
          公開ベータ版
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          より速く出荷。<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            より少なく壊す。
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          ユーザーがエラーを見つける前にキャッチするデプロイプラットフォーム。
          設定不要。インスタントロールバック。リアルタイム監視。
        </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">
            無料トライアルを開始
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            仕組みを見る →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">クレジットカード不要 · 14日間無料トライアル</p>
      </div>
    </section>
  )
}

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

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

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

価格表

{ 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) }} /> で FAQPage JSON-LD を注入します。{ q, a } を持つFAQを、type="single" collapsible のshadcn <Accordion> にマッピングします。コンテナ: max-w-3xl。

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

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

SEOチェックリスト

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

パフォーマンス目標

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

よくある落とし穴

ヒーロー画像がプリロードされていない — 最初の <Image> に priority プロパティを追加する
モバイル用ブレークポイントがない — 常に sm: プレフィックスを使用したモバイルファーストでデザインする
CTAコピーがあいまい — 「詳しく見る」より「始める」、「サインアップ」より「無料トライアルを開始」が効果的
価格ページに信頼シグナルがない — CTAの近くに返金保証とお客様の声を追加する
モバイルで最初のビューにCTAがない — 375pxビューポートでスクロールせずにボタンが見えることを確認する

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