landing-page-generator

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

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

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

---

主な機能

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

---

生成ワークフロー

すべてのランディングページのリクエストで、以下の手順に従ってください。

1. 入力情報を収集する — 以下のトリガー形式を使って、製品名、キャッチコピー、対象ユーザー、課題、主な利点、料金プラン、デザインスタイル、コピーライティングのフレームワークを収集します。不足している項目だけを質問してください。
2. ブランドの声を分析する（推奨）— ユーザーが既存のブランドコンテンツ（ウェブサイトのコピー、ブログ記事、マーケティング資料など）を持っている場合は、marketing-skill/skills/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 (Problem → Agitate → Solution)

• H1: 彼らが陥っている苦痛な状態
• Sub: 解決しなければどうなるか
• CTA: あなたが提供するもの
• 例 — H1: 「あなたのチームは手作業のレポート作成に毎日3時間を浪費している」 / Sub: 「スプレッドシートに費やす1時間は、契約を成約できない1時間です。競合他社はすでに自動化しています。」 / CTA: 「レポートを10分で自動化 →」

AIDA (Attention → Interest → Desire → Action)

• H1: 注目を集める大胆なステートメント → Sub: 興味深い事実またはメリット → Features: 欲望を高める根拠となるポイント → CTA: 明確なアクション

BAB (Before → After → Bridge)

• H1: 「[Before の状態] → [After の状態]」 → Sub: 「[製品] がどのようにギャップを埋めるかをご紹介します」 → Features: 仕組み (架け橋)

---

代表的なコンポーネント: ヒーロー (中央寄せグラデーション — ダーク 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 と rounded-2xl shadow-xl を指定した <Image> を使用します。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 の価格は「Custom」としてレンダリングします。機能の各行ごとに <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 チェックリスト

• <title> タグ: 主要キーワード + ブランド (50〜60文字)
• メタディスクリプション: メリット + CTA (150〜160文字)
• OG 画像: 製品名とタグラインを含む 1200×630px
• H1: 1ページに1つ、主要キーワードを含む
• 構造化データ: FAQPage、Product、または Organization スキーマ
• 正規 URL の設定
• すべての <Image> コンポーネントに画像の alt テキスト
• robots.txt と sitemap.xml の設定
• Core Web Vitals: LCP < 1s、CLS < 0.1
• モバイルビューポートのメタタグが存在する
• 料金とドキュメントへの内部リンク

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

---

パフォーマンス目標

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

---

よくある落とし穴

• ヒーロー画像がプリロードされていない — 最初の <Image> に priority プロパティを追加してください
• モバイルのブレークポイントが欠けている — 常に sm: プレフィックスを使ってモバイルファーストで設計してください
• CTA のコピーが曖昧すぎる — 「Get started」は「Learn more」より優れており、「Start free trial」は「Sign up」より優れています
• 料金ページに信頼シグナルが欠けている — CTA の近くに返金保証とお客様の声を追加してください
• モバイルでスクロールせずに見える位置に CTA がない — 375px ビューポートでスクロールせずにボタンが見えることを確認してください

---

関連スキル

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