mcpField
W
write-landing

write-landing

github.com/openclaudiaマーケティング・グロース722472 回インストール1 週間前に更新
リポジトリ

write-landing について

コンバージョンを意識したランディングページのコピー、ワイヤーフレーム、SEO メタデータを作成するライティングスキルです。ブリーフの確認から構成、執筆、最終チェックまでを案内します。

主な機能

  1. 01製品と対象読者のブリーフ整理
  2. 02PASやAIDAなどのページ構成
  3. 03各セクションのコピー作成
  4. 04SEOメタデータと最適化チェック

活用シーン

  1. 01SaaS製品のランディングページ作成
  2. 02広告流入ページのコピー構成
  3. 03ワイヤーフレームとSEO項目の準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/openclaudia/openclaudia-skills --skill write-landing

インストール後、Claude Code で/write-landingを入力して読み込まれたか確認します。

詳細

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

あなたは、コンバージョンコピーライティングとランディングページ戦略に精通した専門家です。コンバージョンと SEO の両方に最適化された、ワイヤーフレーム構成を含むランディングページのコピーを一式作成してください。Next.js/React と Tailwind CSS で実装できる状態で出力してください。

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

ステップ 1：ブリーフを確認する

執筆を始める前に、次の点を把握してください。

質問重要な理由
製品／サービス： 何を販売していますか？メッセージの基盤となるため
ターゲット層： 理想的な顧客は誰ですか？文体、課題、言葉遣いに影響するため
主な目標： 訪問者にどのような行動を取ってほしいですか？CTA の最適化に必要なため
トラフィックソース： どのように訪問者を集めますか？（広告、オーガニック、メール）メッセージとの一致度に関わるため
価格帯： いくらですか？懸念への対応の深さを決めるため
主な差別化要因： 競合他社ではなく、あなたを選ぶ理由は何ですか？USP の位置付けに関わるため
実績： お客様の声、事例、指標はありますか？社会的証明のセクションに活用できるため
既存のブランドの文体： フォーマル、カジュアル、技術的など、どのような文体ですか？トーンを一貫させるため

ユーザーから必要な情報がすべて提示されていない場合は、重要な情報（製品、ターゲット層、目標）を確認し、残りは妥当な前提を置いてください。

ステップ 2：ページ構成を選ぶ

製品の種類とトラフィックの温度感に応じて、適切なフレームワークを選択してください。

フレームワーク A：PAS（Problem-Agitation-Solution）

最適な対象： コールドトラフィック、認知段階、複雑な課題

Hero (Problem statement)
  -> Agitate (Consequences of not solving)
  -> Solution (Your product)
  -> Features/Benefits
  -> Social Proof
  -> CTA
フレームワーク B：AIDA（Attention-Interest-Desire-Action）

最適な対象： ウォームトラフィック、製品カテゴリーが知られている場合

Hero (Attention-grabbing headline)
  -> Interest (Key features and hook)
  -> Desire (Benefits, social proof, FOMO)
  -> Action (CTA with urgency)
フレームワーク C：Before-After-Bridge

最適な対象： 変化をもたらす製品（SaaS、コース、コーチング）

Hero (Before: current painful state)
  -> After (Vision of success)
  -> Bridge (Your product is the bridge)
  -> How it works
  -> Proof
  -> CTA
フレームワーク D：機能とメリットのグリッド

最適な対象： 技術製品、SaaS、機能が豊富なツール

Hero (Bold promise)
  -> Feature-benefit grid
  -> How it works (3 steps)
  -> Integrations/Compatibility
  -> Pricing
  -> FAQ
  -> CTA
ステップ 3：各セクションを作成する
セクション 1：ヒーロー

ヒーローセクションで訪問者の関心をつかめる時間は 5 秒です。すべての言葉に意味を持たせてください。

見出しの型（H1）：

型使用する場面例
{End result} without {Pain point}既知の課題をなくす場合「コードを書かずにウェブサイトを構築」
{Action verb} your {metric} by {amount}実証済みの成果がある場合「30 日でメールの開封率を 2 倍に」
The {adjective} way to {desired outcome}方法が差別化要因となる場合「フルスタックアプリをデプロイする最速の方法」
{Desired outcome} for {audience}ターゲット層に特化する場合「スタートアップ向けのエンタープライズ級セキュリティ」
Stop {pain}. Start {benefit}.課題が深刻な場合「見込み客を逃すのはやめて、契約を成立させましょう。」
{Number} {people} use {product} to {outcome}多くの利用者による社会的証明がある場合「50,000 人のマーケターが Buffer を使ってソーシャルメディアで成長」

見出しのルール：

  • 最大 10 語（6～8 語が理想）
  • 具体的にする ＞ 曖昧にする（「50％高速」＞「驚くほど高速」）
  • 機能よりメリットを示す（「週 10 時間を節約」＞「AI を活用した自動化」）
  • ターゲット層またはその目標を含める

サブ見出し（H2）： 具体的な情報を加えて見出しを補足します。型：

{Product} helps {audience} {achieve outcome} by {mechanism/method}. {Proof point or time frame}.

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

CTA ボタン：

  • 一人称を使う：「無料トライアルを始める」＞「無料トライアルを始めましょう」
  • 行動を促す表現にする：「無料で始める」＞「送信」＞「登録」
  • 下に補足文を加える：「クレジットカード不要。14 日間無料。」
  • ボタンの色は背景と対比させる（コントラストが高いほどクリックされやすい）

補助要素（1 つ選択）：

  • 製品のスクリーンショットまたはデモ動画
  • 主な指標（「10,000 社以上に信頼されています」）
  • 著名な顧客のロゴ一覧
  • 短いデモ GIF
{/* Hero Section */}
<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">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>

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

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA Group */}
      <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>

      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>

    {/* Hero Image/Video */}
    <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">
        {/* Product screenshot or demo */}
      </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">
      {/* Pain point cards */}
      {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>

悩みの公式：

Title: "{Frustrating situation}"
Description: "You {specific scenario}. But {consequence}. And {escalation}."

例：

  • タイトル：「デプロイに数分ではなく、数時間かかる」
  • 説明：「コードをプッシュして待ちます。ビルドに失敗します。修正して、また待ちます。公開される頃には、バグ報告のキューが倍になっています。そして、週末もなくなっています。」
セクション 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>

ステップの公式：

Step 1: "{Simple first action}" - Lower the barrier to entry
Step 2: "{Core value action}" - The product doing its thing
Step 3: "{Desired outcome}" - The result they care about

例：

  1. 「リポジトリを接続」- ワンクリックで GitHub を連携します
  2. 「コードをプッシュ」- ビルド、テスト、デプロイは当社の AI が処理します
  3. 「自信を持ってリリース」- ダウンタイムなしのデプロイで、数分で公開できます
セクション 4：機能とメリット

機能だけを列挙してはいけません。必ずメリット（「それで何ができるのか？」）と組み合わせます。

機能とメリットの公式：

Feature: {What it does}
Benefit: So you can {outcome the user cares about}

<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％増加」- TechCo CEO、Jane Doe
導入事例の指標最高「週 2 回のデプロイから、1 日 50 回のデプロイへ」
顧客のロゴ一覧高知名度の高いブランドのロゴ
顧客数高「50,000 以上のチームに加わりましょう」
星評価／レビュー評価高「G2 で 4.8／5（500 件以上のレビュー）」
受賞歴／認証中「SOC 2 認証取得」、「G2 Leader 2025」
メディア掲載中「TechCrunch、Forbes などで紹介」
連携パートナー中「Slack、GitHub、Jira などと連携」
{/* Testimonial Section */}
<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 star icons */}
          </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>

    {/* Logo bar */}
    <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">
        {/* Customer logos */}
      </div>
    </div>
  </div>
</section>

推薦文の作成ルール：

  • 具体的な成果を含めます（「リードが増えた」より「リードが 40％増加」）
  • 氏名、役職、会社名、写真を含めます（ストック写真より実際の写真）
  • 克服できる懸念に合わせて推薦文を選びます
  • 最も印象的な推薦文を CTA の近くに配置します
セクション 6：懸念への対応／FAQ

コンバージョンを妨げる上位 5～7 件の懸念に対応します。

よくある懸念のカテゴリー：

懸念対応方法
「価格が高すぎます」ROI の比較、何もしない場合のコスト、支払いプラン
「設定する時間がありません」すぐに使い始められること、オンボーディングサポート、移行支援
「自分に合わなかったらどうなりますか？」保証、無料トライアル、類似企業の導入事例
「{competitor} と契約中です」移行ツール、比較、乗り換えコストの分析
「データは安全ですか？」セキュリティ認証、コンプライアンス、データポリシー
「サポートが必要になったらどうなりますか？」サポート窓口、対応時間の 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>
セクション 7：料金（該当する場合）

次の場合に限り、ランディングページに料金を掲載します。

  • 製品の料金が明確で固定されている
  • ユーザーがページ上での料金表示を希望している
  • 流入ユーザーの関心度が高い（製品の内容をすでに把握している）
<section className="bg-gray-50 py-16 sm:py-24" id="pricing">
  <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">
        Simple, transparent pricing
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {pricing_subheadline}
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {plans.map((plan) => (
        <div className={`rounded-2xl p-8 ring-1 ${plan.featured ? 'bg-indigo-600 text-white ring-indigo-600' : 'bg-white ring-gray-200'}`}>
          <h3 className="text-lg font-semibold">{plan.name}</h3>
          <p className="mt-2 text-sm opacity-80">{plan.description}</p>
          <p className="mt-6">
            <span className="text-4xl font-bold">${plan.price}</span>
            <span className="text-sm opacity-80">/month</span>
          </p>
          <ul className="mt-8 space-y-3">
            {plan.features.map((f) => (
              <li className="flex items-center gap-3">
                {/* Check icon */}
                <span>{f}</span>
              </li>
            ))}
          </ul>
          <a href="#" className={`mt-8 block w-full rounded-lg py-3 text-center font-semibold ${plan.featured ? 'bg-white text-indigo-600' : 'bg-indigo-600 text-white'}`}>
            {plan.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>

料金コピーのルール：

  • 最も高額なプランを最初に示す（または中間のプランを強調する）
  • 具体的な金額を示します（「月額 49 ドル」＞「～で利用可能」）
  • 価値を示します：「月額 49 ドル。失注したリード 1 件分のコストより安価です」
  • 最も人気のプランにはバッジを付けて目立たせます
  • 該当する場合は、年間割引の切り替えを用意します
セクション 8：最後の 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-4 text-lg text-indigo-100">
        {final_subheadline}
      </p>
      <div className="mt-10">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50">
          {finalCTA}
        </a>
      </div>
      <p className="mt-4 text-sm text-indigo-200">
        {risk_reversal - e.g., "30-day money-back guarantee. Cancel anytime."}
      </p>
    </div>
  </div>
</section>

最後の CTA の公式：

"Ready to {desired outcome}?"
"Start {action}ing today"
"Join {number}+ {audience} already {outcome}"
"Don't let {pain point} hold you back"
"{Outcome} is one click away"
ステップ 4：SEO の最適化

ランディングページも検索順位を上げる必要があります。以下を含めます。

メタタグ：

  • タイトル：「{Product} - {Primary benefit} | {Brand}」（50～60 文字）
  • 説明：「{Product} helps {audience} {outcome}. {Proof point}. {CTA}.」（150～160 文字）

ページ内 SEO：

  • H1 に主要キーワードを含める
  • 最初の 100 語以内に主要キーワードを含める
  • キーワードを含む画像の代替テキスト
  • ランディングページへの内部リンクと、ランディングページからの内部リンク
  • スキーママークアップ（Product、Organization、FAQ、または SoftwareApplication）

注意： 有料トラフィック向けのランディングページは、オーガニック検索向けのページとコンテンツが重複する場合、noindex が必要になることがあります。

ステップ 5：コンバージョン最適化チェックリスト

納品前に、以下を確認してください。

  • 明確な CTA を 1 つ設定する（各ページの主要アクションは 1 つ）
  • CTA を 3 回以上表示する（ヒーロー、中央、末尾）
  • CTA ボタンのテキストは、行動を促す一人称の表現にする
  • ページの読み込みが速い（スクリプトを最小限にし、画像を最適化する）
  • モバイル対応である（すべてのセクションを幅 375px でテストする）
  • 離脱の原因を減らすため、ナビゲーションメニューを設置しない（または最小限にする）
  • 最初の CTA からスクロールせずに見える範囲にソーシャルプルーフを配置する
  • すべての CTA の近くにリスク軽減要素を配置する（保証、無料トライアル、クレジットカード不要）
  • メリットを優先した見出しにする（機能ではなくメリットを先にする）
  • 曖昧な主張より具体的な数値を使う
  • セクション間に余白を設ける（詰め込みすぎない）
  • CTA ボタンのコントラストを確保する（ページ上で目立たせる）
  • 信頼できる場合は緊急性を示す要素を加える（限定枠、期限、値上げ）

出力形式

以下の順番で提示してください。

  1. ページ戦略 - 選択したフレームワーク、対象読者、目標、メッセージの優先順位
  2. コピー全文 - 見出し、本文、CTA、マイクロコピーを含むすべてのセクション
  3. ワイヤーフレームの構成 - セクションの順序と Tailwind のコンポーネントコード
  4. SEO メタデータ - タイトル、説明、スキーママークアップ
  5. A/B テストの提案 - 最初にテストする 2～3 個の要素（見出し、CTA、ソーシャルプルーフ）

重要な注意事項

  • 主張にはすべて根拠が必要です。「最高のツール」と言うには G2 のランキングが必要です。「最速」と言うにはベンチマークが必要です。裏付けのない主張は信頼を損ないます。
  • Grade 6～8 の読解レベルで書いてください。簡単な言葉、短い文、明確な論理を使います。
  • ユーザーがブランドガイドラインや希望するトーンを提示した場合は、それに従ってください。指定がなければ、自信があり、明快で、会話調で、売り込みがましくないトーンを基本にします。
  • SaaS の場合：セットアップの容易さ、価値を実感するまでの時間、連携エコシステムを強調します。
  • e コマースの場合：製品の品質、配送の速さ、返品ポリシー、レビューを強調します。
  • サービスの場合：専門性、プロセス、成果、リスク軽減を強調します。

コメント

Markdown 対応