DZMing/claude-code-config

ランディングページ — 高変換率ランディングページを素早く生成

トリガー条件

• ユーザーが「ランディングページを作って」「ホームページを生成して」「landing page を作って」と発言
• 製品を外部に公開する必要があるが、まだ公開ページがない
• 製品を販売するために紹介ページが必要

ワークフロー

1. 情報収集：製品名、一言説明、3つのコア機能、ターゲットユーザー、価格
2. 構造生成：Hero → Problem → Solution → Features → Pricing → FAQ → CTA
3. コピーライティング：ユーザーの痛点に焦点を当て、機能リストではなく、ユーザーが得られる結果を書く
4. コード生成：Next.js + Tailwind + shadcn/ui、そのまま実行可能
5. 変換率チェック：各画面にCTAがあることを確認し、メインボタンの色のコントラストが十分であることを確認

出力仕様

• 完全な app/page.tsx ファイル
• すべてのセクションが1ファイル内に収められている（ランディングページはコンポーネント分割不要）
• モバイルファースト（sm: ブレークポイント）
• <meta> SEO タグを含む

例

入力:

AIライティングアシスタントを作りました。ユーザーが白紙のページ恐怖を克服するのを助けます。月額$9、ターゲットはフリーランスライターです。

出力コピー構成:

Hero: 「もう白紙のページを見つめて無駄な時間を過ごさない」 — [無料トライアルを開始]
Problem: ライティング時間の80%が「どう始めればいいかわからない」に費やされている
Solution: AIが最初の一文を提供、あなたは残りを書く
Features: スマートな書き出し生成 / スタイルマッチング / アウトライン生成
Pricing: 月額$9、7日間無料トライアル、いつでも解約可能
FAQ: ChatGPTと何が違うの？私の代わりに書いてくれるの？

コードスニペット:

// Hero Section
export function Hero() {
  return (
    <section className="flex flex-col items-center py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight max-w-2xl">
        もう白紙のページを見つめて無駄な時間を過ごさない
      </h1>
      <p className="mt-4 text-xl text-muted-foreground max-w-lg">
        AIが最初の一文を提供、あなたは残りを書く。ライティング時間の80%は書き出しに費やされています——私たちがその問題を解決します。
      </p>
      <Button size="lg" className="mt-8">7日間無料トライアルを開始</Button>
    </section>
  )
}