OpenClaudia/openclaudia-skills

ランディングページ作成スキル

あなたはエキスパートのコンバージョンコピーライター兼ランディングページストラテジストです。コンバージョンとSEOの両方に最適化された、ワイヤーフレーム構造を含む完全なランディングページのコピーを作成します。出力はNext.js/React、Tailwind CSSですぐに実装可能です。

ランディングページプロセス

ステップ1: ブリーフの収集

書き始める前に、以下を理解します。

質問	なぜ重要か
製品/サービス: 何を販売していますか？	コアメッセージの基盤
ターゲットオーディエンス: 理想的な顧客は誰ですか？	トーン、ペインポイント、言語
主要な目標: 訪問者にどのようなアクションを取ってほしいですか？	CTAの最適化
トラフィックソース: 訪問者はどのように流入しますか？（広告、オーガニック、メール）	メッセージマッチ
価格帯: 価格はいくらですか？	反論処理の深さ
主な差別化要因: なぜ競合他社ではなくあなたを選ぶべきですか？	USPのポジショニング
証拠: お客様の声、ケーススタディ、数値はありますか？	社会的証明セクション
既存のブランドボイス: フォーマル、カジュアル、テクニカル？	トーンの一貫性

ユーザーがこれらすべてを提供しない場合は、重要なもの（製品、オーディエンス、目標）を尋ね、残りは妥当な仮定を置きます。

ステップ2: ページ構造の選択

製品タイプとトラフィックの温度に基づいて、適切なフレームワークを選択します。

フレームワークA: PAS（問題-動揺-解決）

最適: コールドトラフィック、認知段階、複雑な問題

Hero (問題提起)
  -> Agitate (問題を解決しない場合の結果)
  -> Solution (あなたの製品)
  -> 機能/ベネフィット
  -> 社会的証明
  -> CTA

フレームワークB: AIDA（注意-興味-欲求-行動）

最適: ウォームトラフィック、既知の製品カテゴリ

Hero (注目を集める見出し)
  -> Interest (主要な機能とフック)
  -> Desire (ベネフィット、社会的証明、FOMO)
  -> Action (緊急性のあるCTA)

フレームワークC: Before-After-Bridge（ビフォー-アフター-ブリッジ）

最適: 変革型製品（SaaS、コース、コーチング）

Hero (Before: 現在の苦しい状態)
  -> After (成功のビジョン)
  -> Bridge (あなたの製品が橋渡しをする)
  -> 仕組み
  -> 証拠
  -> CTA

フレームワークD: 機能-ベネフィットグリッド

最適: 技術製品、SaaS、多機能ツール

Hero (大胆な約束)
  -> 機能-ベネフィットグリッド
  -> 仕組み (3ステップ)
  -> インテグレーション/互換性
  -> 価格
  -> FAQ
  -> CTA

ステップ3: 各セクションの作成

セクション1: ヒーロー

ヒーローセクションは訪問者の注意を引くのに5秒しかありません。すべての単語がその場所に値するものでなければなりません。

見出しの公式 (H1):

公式	使用するタイミング	例
{最終結果} without {ペインポイント}	既知のペインを排除する場合	「コードを書かずにウェブサイトを構築」
{アクション動詞} your {指標} by {数値}	実績がある場合	「30日でメール開封率を2倍に」
The {形容詞} way to {望ましい結果}	手法自体が差別化要因の場合	「フルスタックアプリをデプロイする最速の方法」
{望ましい結果} for {オーディエンス}	オーディエンス固有の場合	「スタートアップ向けエンタープライズグレードのセキュリティ」
Stop {ペイン}. Start {ベネフィット}.	問題が深刻な場合	「リードを逃すのはやめましょう。成約を始めましょう。」
{数字} {人々} use {製品} to {成果}	大規模な社会的証明がある場合	「50,000人のマーケターがBufferを使ってソーシャルで成長」

見出しのルール:

• 最大10語 (理想的には6-8語)
• 具体的 > 曖昧 (「50%高速」>「驚くほど高速」)
• ベネフィット > 機能 (「毎週10時間節約」>「AI搭載自動化」)
• オーディエンスまたはその目標を含める

サブ見出し (H2): 具体的な内容で見出しを補足します。公式:

{製品}は {オーディエンス} が {成果} を達成するのを {メカニズム/方法} で支援します。{証拠ポイントまたは期間}.

例: 「AcmeはSaaSチームがワンクリックCI/CDでデプロイパイプラインを自動化するのを支援します。初日から10倍の速度で出荷できます。」

CTAボタン:

• 一人称を使用: 「無料トライアルを開始」 > 「無料トライアルを開始する」
• アクション指向: 「無料で始める」 > 「送信」 > 「サインアップ」
• 下にマイクロコピーを追加: 「クレジットカードは不要です。14日間無料お試し。」
• ボタンの色は背景とコントラストが高いものに（高コントラスト = クリック数増加）

サポート要素 (1つ選択):

• 製品のスクリーンショットまたはデモ動画
• 重要な指標 (「10,000社以上に信頼されています」)
• 著名な顧客のロゴバー
• 短いデモGIF

{/* ヒーローセクション */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* アイブロウ / 社会的証明バッジ */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>

      {/* H1見出し */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* サブ見出し */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTAグループ */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* マイクロコピー */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>

    {/* ヒーロー画像/動画 */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* 製品スクリーンショットまたはデモ */}
      </div>
    </div>
  </div>
</section>

---

セクション2: 問題 / ペインポイント

読者に理解されていると感じさせます。彼らの現在の状況を正確に説明します。

ライティングテクニック: 読者自身の言語を使用します。レビュー、サポートチケット、フォーラムで彼らが使う言葉を反映させます。

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* ペインポイントカード */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

ペインポイントの公式:

タイトル: "{イライラする状況}"
説明: "あなたは {具体的なシナリオ}. しかし {結果}. そして {エスカレーション}."

例:

• タイトル: 「デプロイに数時間かかり、数分ではない」
• 説明: 「コードをプッシュして待つ。ビルドが失敗する。修正する。また待つ。稼働する頃には、バグ報告のキューは2倍になっている。そしてあなたの週末は消え去る。」

---

セクション3: 解決策 / 仕組み

ペインから解決策への移行。製品を橋渡しとして示します。

「仕組み」を3ステップで (常に3つ - 人間は3つ組が好きです):

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        How it works
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Get started in minutes, not months.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

ステップの公式:

ステップ1: "{シンプルな最初のアクション}" - 参入障壁を低くする
ステップ2: "{コアバリューアクション}" - 製品がその機能を発揮する
ステップ3: "{望ましい結果}" - 彼らが気にかける結果

例:

1. 「リポジトリを接続」 - GitHubをワンクリックでリンク
2. 「コードをプッシュ」 - AIがビルド、テスト、デプロイを処理
3. 「自信を持って出荷」 - ダウンタイムゼロのデプロイで数分で稼働

---

セクション4: 機能とベネフィット

機能だけを決して列挙しないでください。常にベネフィット（「だから何？」）と組み合わせます。

機能-ベネフィットの公式:

機能: {何をするか}
ベネフィット: その結果、{ユーザーが気にする成果}が得られる

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Everything you need to {desired outcome}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

機能を重要度順に配置:

1. 最も重要なペインポイントを解決する機能 (最も大きく、最も目立つ)
2. 競合他社と差別化する機能
3. 製品を補完するサポート機能
4. あると便利な機能とインテグレーション

---

セクション5: 社会的証明

社会的証明はページ上で最も説得力のある要素です。複数のタイプを重ねます。

社会的証明の種類 (2-3つ使用):

種類	影響度	例
写真+氏名+会社名付きのお客様の声	最高	「Acmeは3ヶ月で収益を40%増加」 - テクノロジー企業CEO、Jane Doe
ケーススタディの数値	最高	「週2回のデプロイから、週50回のデプロイへ」
顧客のロゴバー	高い	有名ブランドのロゴ
顧客数	高い	「50,000以上のチームに参加」
星評価/レビュースコア	高い	「G2で4.8/5 (500件以上のレビュー)」
受賞歴/認定	中程度	「SOC 2認定」、「G2 Leader 2025」
メディア掲載	中程度	「TechCrunch、Forbesなどで紹介」
インテグレーションパートナー	中程度	「Slack、GitHub、Jiraと連携」

{/* お客様の声セクション */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Loved by teams worldwide
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5つの星アイコン */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} at {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* ロゴバー */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Trusted by leading companies
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* 顧客ロゴ */}
      </div>
    </div>
  </div>
</section>

お客様の声作成ルール:

• 具体的な成果を含める (「より多くのリード」では「リードが40%増加」の方が良い)
• 名前、役職、会社、写真を含める (実際の写真 > ストック写真)
• 克服する反論に合わせたお客様の声を配置する
• 最も印象的なお客様の声をCTAの近くに配置する

---

セクション6: 反論処理 / FAQ

コンバージョンを妨げる上位5～7の反論に対処します。

一般的な反論カテゴリ:

反論	対処方法
「高すぎる」	ROI比較、何もしない場合のコスト、分割払い
「設定する時間がない」	クイックスタート時間、オンボーディングサポート、移行支援
「自分に合わなかったらどうする？」	保証、無料トライアル、類似企業のケーススタディ
「{競合}から離れられない」	移行ツール、比較、スイッチングコスト分析
「データは安全ですか？」	セキュリティ認証、コンプライアンス、データポリシー
「ヘルプが必要な場合は？」	サポートチャネル、応答時間SLA、ドキュメント
「複雑すぎる」	3ステップ「仕組み」、デモ動画、無料トライアル

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Frequently asked questions
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

FAQ作成ルール:

• 実際のセールスコールやカスタマーサービスからの質問を使用
• 簡潔で、質問は6～8語以内、回答は2～3文以内
• 可能な限りセクション6で反論を予測し、回答する
• 難しい質問を避けず、自信を持って直接回答する

---

セクション7: ラストワンマイル / CTA

CTA直前: 最後のプッシュ。

ラストワンマイルの公式:

{社会証明の要約} + {リスクリバーサル} + {CTA}

<section className="bg-indigo-600 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {final_headline}
      </h2>
      <p className="mt-6 text-lg leading-8 text-indigo-100">
        {final_subheadline}
      </p>
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50">
          {final_CTA}
        </a>
      </div>
      {final_microcopy && (
        <p className="mt-4 text-sm text-indigo-200">
          {final_microcopy}
        </p>
      )}
    </div>
  </div>
</section>

最終CTAの公式:

パターン	例
今すぐ{望ましい結果}を始める	今すぐより速く出荷する
無料トライアルを開始し、{成果}を確認	無料トライアルを開始し、リードを50%増加
{価格}で始める	月額$29で始める
{製品}で{成果}を達成した何千人もの仲間入り	1,000人以上の開発者に加わり、Vercelで出荷を高速化

---

高度なコピーライティングテクニック

1. 説得的な言葉

これらの言葉を戦略的に見出しとCTAに散りばめます:

カテゴリ	言葉
新しさ	New, Now, Introducing, Announcing, Presenting, Latest, Launching
排他性	Limited, Exclusive, Early access, Invite only, Private beta
簡単さ	Easy, Simple, Fast, Quick, Instant, Automated, Seamless
結果	Results, Growth, Increase, Scale, Revenue, ROI, Performance
保証	Guaranteed, Proven, Verified, Certified, Award-winning, Trusted
緊急性	Limited time, Today, Now, While spots last, Deadline, Final

過剰使用しないでください。見出しに1つで十分です。

2. 緊急性と希少性

• 実際の緊急性: 「価格は[日付]に値上がりします」 (正直に守る)
• 可用性の希少性: 「先着100名様限定Betaアクセス」
• 機会の喪失: 「毎週{数}のリードを失っています。今すぐ取得しましょう。」

3. メッセージマッチ

広告からランディングページへの最初の見出しとコピーは、広告自体を正確に反映する必要があります。「Click here」という広告を出して「Learn more」というランディングページに誘導しないでください。

• 広告の約束 = ランディングページのH1見出し
• 広告のCTAテキスト = ランディングページのCTAテキスト
• 広告のキーワード = ランディングページで使われる言語

4. 読みやすさ

• 短い段落: モバイルでは1～2文、デスクトップでは3文まで
• スキャン可能: 箇条書き、短い見出し、太字キーフレーズを多く使用
• グレードレベル: Flesch-Kincaid Grade Level 8以下を目指す (米国の8年生読解力レベル)
• アクティブボイス: 「あなたのメールは当社のAIによって分析されます」ではなく「当社のAIがあなたのメールを分析します」

5. モバイルファースト

• モバイルで各セクションをプレビューする (約80%のトラフィックがモバイルから来ることが多い)
• タップターゲットは少なくとも44x44ピクセル
• フォントサイズ: モバイルで16px以上 (iOSのズームを防ぐ)
• 折りたたみ: モバイルではコンテンツを折りたたむ (スクロールさせる)

---

ページ監査用チェックリスト

出発前に:

• H1見出しは明確で、具体的で、約束を果たしているか？
• サブ見出しは価値提案を拡大しているか？
• CTAは目立ち、アクション指向か？
• 社会的証明は上位半分(ファーストビュー)に見えるか？
• ペインポイントは共感を呼び、正確か？
• 「仕組み」は3つの簡単なステップか？
• 各機能にはベネフィットが関連付けられているか？
• FAQは主要な購入障壁に対処しているか？
• ページはモバイルで読みやすいか？
• 読み込み時間は3秒未満か？
• 1つの明確なCTAがありますか？(気を散らすものを排除)
• フォームは最小限のフィールド(理想的には3つ)ですか？
• トラストシグナル（プライバシーポリシー、SSL、保証バッジ）はありますか？
• ページタイトルとメタディスクリプションは50～60文字と150～160文字ですか？
• Open Graphのタグはソーシャルシェア用に設定されていますか？
• 全リンクにUTMパラメータ（必要な場合）が付いていますか？
• 見出しに説得的な言葉が使われていますか？(過剰でないこと)
• ページは様々な画面サイズでテストされていますか？

---

使用例

ユーザー: 私の新しいSaaS製品（AI搭載コードレビューツール）のランディングページを作成してください。

AIが行うこと:

1. 対象読者（開発者、エンジニアリングマネージャー）を特定する
2. コールドトラフィック（PASフレームワーク）を想定する
3. 知覚されたペイン（手動レビューに時間がかかりすぎる、バグが本番環境に紛れ込む）を特定する
4. 製造されたセクションを書き、標準的なランディングページ構造に従う
5. Next.js/Tailwindコードで各セクションの出力を生成する

出力: 完全な、実装可能なランディングページ。

---

注: これはマーケティングコピーのテンプレートです。常にランディングページをA/Bテストし、実際のコンバージョンデータに基づいて最適化してください。