mcpField
L
landing-page

landing-page

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

landing-page について

landing-pageは、マーケティング用ランディングページの構成やコピーを作成するためのスキルです。ヒーローやソーシャルプルーフから料金、FAQ、公開前チェックまでを扱います。

主な機能

  1. 01ランディングページの構成計画
  2. 02ヒーロー見出しと副見出しの指針
  3. 03ソーシャルプルーフの配置
  4. 04機能・料金セクションの指針
  5. 05CTAとコンバージョンの最適化
  6. 06公開前チェックリスト

活用シーン

  1. 01製品のマーケティングページを計画
  2. 02ヒーローの価値提案とCTAを作成
  3. 03推薦文と機能紹介を整理
  4. 04モバイル対応と信頼要素を確認

インストール

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

$npx skills add https://github.com/nicepkg/ai-workflow --skill landing-page

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

詳細

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

手順

ランディングページを作成する際は、次の点に従ってください。

1. ページ構成
┌─────────────────────────────────────┐
│           HERO SECTION              │
│  Headline + Subheadline + CTA       │
│           + Hero Image              │
├─────────────────────────────────────┤
│         SOCIAL PROOF BAR            │
│    Logos / "As seen in" / Stats     │
├─────────────────────────────────────┤
│         PROBLEM SECTION             │
│     Pain points your audience has   │
├─────────────────────────────────────┤
│         SOLUTION SECTION            │
│    How your product solves it       │
├─────────────────────────────────────┤
│         FEATURES/BENEFITS           │
│    3-6 key features with benefits   │
├─────────────────────────────────────┤
│         HOW IT WORKS                │
│       3-step process                │
├─────────────────────────────────────┤
│         TESTIMONIALS                │
│    Customer quotes + photos         │
├─────────────────────────────────────┤
│         PRICING                     │
│    Clear pricing options            │
├─────────────────────────────────────┤
│            FAQ                      │
│    Objection handling               │
├─────────────────────────────────────┤
│         FINAL CTA                   │
│    Last push with urgency           │
├─────────────────────────────────────┤
│           FOOTER                    │
│    Trust badges, links, legal       │
└─────────────────────────────────────┘
2. ヒーローセクション

見出しの型：

  • [課題]を解決して、[悩み]から解放される
  • [望む結果]を実現する、[形容詞]な方法
  • [重要なメリット]をもたらす[製品]
  • [悪いこと]はやめて、[良いこと]を始めましょう。
  • [人数]人が[成果]を得るために[製品]を利用しています

サブ見出し：

  • 見出しの内容を掘り下げる
  • 具体性を加える
  • 副次的なメリットを含める

例：

<section class="hero">
  <h1>Build WordPress Themes 10x Faster</h1>
  <p class="subheadline">
    The developer toolkit that eliminates repetitive coding
    so you can focus on what matters — shipping great themes.
  </p>
  <a href="#" class="cta-button">Start Free Trial</a>
  <p class="microcopy">No credit card required • 14-day trial</p>
</section>
3. ソーシャルプルーフの種類

ロゴバー：

<section class="social-proof">
  <p>Trusted by 10,000+ developers at</p>
  <div class="logos">
    <img src="logo1.svg" alt="Company 1">
    <img src="logo2.svg" alt="Company 2">
    ...
  </div>
</section>

統計バー：

<div class="stats">
  <div class="stat">
    <span class="number">50,000+</span>
    <span class="label">Active Users</span>
  </div>
  <div class="stat">
    <span class="number">4.9/5</span>
    <span class="label">Average Rating</span>
  </div>
  <div class="stat">
    <span class="number">99.9%</span>
    <span class="label">Uptime</span>
  </div>
</div>

お客様の声：

<blockquote class="testimonial">
  <p>"Quote that highlights specific results..."</p>
  <footer>
    <img src="avatar.jpg" alt="Name">
    <cite>
      <strong>Name</strong>
      <span>Title, Company</span>
    </cite>
  </footer>
</blockquote>
4. 機能セクション

形式：機能 → メリット

<div class="feature">
  <div class="feature-icon">🚀</div>
  <h3>One-Click Deployment</h3>
  <p>Deploy to production in seconds, not hours.
     Spend more time building, less time configuring.</p>
</div>
5. 料金セクション
<div class="pricing-card popular">
  <span class="badge">Most Popular</span>
  <h3>Pro Plan</h3>
  <div class="price">
    <span class="currency">$</span>
    <span class="amount">49</span>
    <span class="period">/month</span>
  </div>
  <ul class="features">
    <li>✓ Feature 1</li>
    <li>✓ Feature 2</li>
    <li>✓ Feature 3</li>
  </ul>
  <a href="#" class="cta-button">Get Started</a>
  <p class="guarantee">30-day money-back guarantee</p>
</div>
6. CTA のベストプラクティス

ボタンの文言：

  • 無料トライアルを始める
  • 今すぐ始める
  • 無料ガイドをダウンロード
  • 10,000 人以上のユーザーの仲間入り
  • 割引を受け取る

補足要素：

  • リスク軽減策（返金保証）
  • 緊急性（期間限定）
  • 希少性（残り X 点のみ）
  • ソーシャルプルーフ（X 人のユーザーに続く）
7. FAQ セクション
<details class="faq-item">
  <summary>Common objection as a question?</summary>
  <p>Answer that overcomes the objection with
     specifics and reassurance.</p>
</details>

よくある FAQ のトピック：

  • 料金／返金
  • 技術要件
  • サポートの利用可否
  • 代替サービスとの比較
  • 利用開始の手順
8. コンバージョンの最適化

ファーストビュー：

  • 明確な価値提案
  • メイン CTA が見える
  • 信頼性を示す要素

ページ全体：

  • 複数の CTA（同じアクション）
  • 段階的な情報開示
  • 視覚的な階層
  • モバイル向けの最適化

摩擦を減らす：

  • フォーム項目を最小限にする
  • 次の手順を明確にする
  • ページの読み込みを速くする
  • 注意をそらす要素をなくす
9. コピーライティングのヒント

訴求力のある言葉：

  • 無料、新しい、実証済み、簡単
  • 即時、保証付き、限定
  • 独占、プレミアム、究極

避けるもの：

  • 専門用語や流行語
  • 曖昧な主張
  • 長文のかたまり
  • 複数の CTA
10. ランディングページのチェックリスト
  • 明確で、メリットを重視した見出し
  • 単一で、焦点を絞った CTA
  • ソーシャルプルーフがある
  • モバイル対応
  • 読み込みが速い（<3s）
  • 信頼性を示す要素が見える
  • FAQ で懸念事項に答えている
  • アナリティクスのトラッキングが設定されている

コメント

Markdown 対応