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

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

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

使用するタイミング

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

コア機能

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

生成ワークフロー

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

入力を収集する — 以下のトリガー形式を使用して、製品名、タグライン、ターゲットオーディエンス、ペインポイント、主なメリット、価格階層、デザインスタイル、コピーフレームワークを収集します。不足しているフィールドのみを質問します。
ブランドボイスを分析する（推奨） — ユーザーが既存のブランドコンテンツ（ウェブサイトのコピー、ブログ記事、マーケティング資料）を持っている場合、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 ファイルを提供します。

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

製品: [名前]
タグライン: [1文の価値提案]
ターゲットオーディエンス: [誰か]
主要なペインポイント: [解決する問題]
主なメリット: [主な成果]
価格階層: [無料/プロ/エンタープライズ または説明]
デザインスタイル: dark-saas | clean-minimal | bold-startup | enterprise
コピーフレームワーク: 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: 「あなたのチームは手動レポートに毎日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>
  )
}

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

特徴セクション（交互）

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

価格テーブル

plans 配列を { name, price, description, features[], cta, highlighted } でマッピングします。ハイライトされたプランには 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 を注入します。FAQ を { q, a } で shadcn <Accordion> にマッピングし、type="single" collapsible を設定します。コンテナ: max-w-3xl。

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

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

SEO チェックリスト

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

パフォーマンス目標

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

よくある落とし穴

ヒーロー画像がプリロードされていない — 最初の <Image> に priority プロパティを追加
モバイルブレークポイントの欠落 — 常に sm: プレフィックスを使用してモバイルファーストでデザイン
CTA コピーが曖昧 — 「Learn more」よりも「Get started」が効果的。「Sign up」よりも「Start free trial」が効果的
価格ページに信頼シグナルがない — CTA の近くに返金保証とお客様の声を追加
モバイルで above-the-fold に CTA がない — 375px ビューポートでスクロールせずにボタンが表示されることを確認

制限事項

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

n2g7/agent-skills

agent-skills とは？

お気に入りのAIに質問する

ドキュメント