mcpField
L
landing-page-optimizer

landing-page-optimizer

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

landing-page-optimizer について

Claude Code向けのランディングページ評価スキルです。コピー、レイアウト、フォーム、ソーシャルプルーフ、モバイル対応を確認し、コンバージョン改善の指針を示します。

主な機能

  1. 01ファーストビューの評価
  2. 02ヒーローレイアウトの指針
  3. 03CTAとソーシャルプルーフの評価
  4. 04フォームとモバイルの最適化
  5. 05コンバージョン基準と注意点

活用シーン

  1. 01公開前のページ確認
  2. 02登録フォームの障壁発見
  3. 03モバイルページの改善

インストール

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

$npx skills add https://github.com/thatrebeccarae/claude-marketing --skill landing-page-optimizer

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

EXAMPLES.md
LICENSE
REFERENCE.md

詳細

ランディングページ最適化

コンバージョンを最大化するために、ランディングページを監査して最適化します。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/landing-page-optimizer ~/.claude/skills/

監査フレームワーク

ファーストビュー（最初の5秒）

訪問者が次の3つの質問にすぐ答えられるようにします。

  1. これは何ですか？（明確な見出し）
  2. なぜ気にする必要がありますか？（メリットを重視したサブ見出し）
  3. 次に何をすればよいですか？（目に入るCTA）
ヒーローレイアウトのパターン
パターン最適な用途構成
左にコピー／右にビジュアルSaaS、B2B左に見出し＋CTA、右に製品のスクリーンショット
中央揃えのヒーローシンプルなオファー中央揃えの見出し、サブ見出し、CTA
動画ヒーロー複雑な製品自動再生の背景動画、または埋め込みの説明動画
ソーシャルプルーフヒーロー高い信頼性が必要な場合顧客のロゴや指標を添えた見出し
分岐テスト対象者が2種類の場合CTAを分けた2つの明確な導線
価値提案の優先順位
H1: Primary benefit (what outcome they get)
Subheadline: How you deliver it (mechanism or differentiator)
Supporting points: 3 proof points or features (bullets)
CTA: Specific action + anxiety reducer
CTAの最適化

テキスト： 動作を表す動詞＋具体的な成果（「送信」ではなく「無料トライアルを開始」） デザイン： 背景とのコントラストを高め、余裕のあるパディングと周囲の余白を確保します 配置： ファーストビュー、各コンテンツセクションの後、スクロール時に固定 マイクロコピー： CTAの下に不安を軽減する文言を添えます（「クレジットカード不要」「いつでも解約可能」）

ソーシャルプルーフのパターン
種類配置効果
顧客のロゴヒーローの下信頼（B2B）
指標（「50,000人以上のユーザー」）見出しの近く規模の証明
星評価CTAの近く購入への安心感
お客様の声ページ中ほど感情に訴える証明
導入事例の成果ページ下部詳細な証明
信頼バッジフォーム／チェックアウトの近くセキュリティ
フォームの最適化
  • フィールドを1つ削除するごとに、完了率が5～10％上がります
  • ラベルはフィールドの上に配置します（プレースホルダーのみにはしません）
  • インライン検証を行います（送信時ではなくリアルタイムで）
  • 適切な初期値と自動入力を設定します（autocomplete属性）
  • 複数ステップのフォームは、長い単一フォームより成果が上がります
  • 複数ステップの場合は進捗インジケーターを表示します
モバイル最適化
  • タッチターゲットは最低48x48pxにします
  • 1カラムのレイアウトにします
  • 親指で操作しやすい位置（画面の下半分）にCTAを配置します
  • 横スクロールをなくします
  • ナビゲーションを簡素化します（ハンバーガーメニュー、またはなし）
  • 読み込みを高速化します（4GでLCP <2.5s）

コンバージョンのベンチマーク

ページの種類良好平均低調
SaaSのトライアル登録>5%2-5%<2%
Eコマースの商品ページ>3%1.5-3%<1.5%
リード獲得（B2B）>10%5-10%<5%
ニュースレター登録>5%2-5%<2%
ウェビナー登録>30%15-30%<15%

アンチパターン

  1. 競合するCTAが複数ある — ページごとに主要なアクションを1つにします
  2. 機能中心の見出し — 機能ではなくメリットを先に伝えます
  3. ストックフォト — 実際の製品スクリーンショットや実在の人物を使います
  4. ランディングページのナビゲーション — 広告流入向けのページではナビゲーションを取り除きます
  5. ファーストビューより下にしかCTAがない — 必ずファーストビューにCTAを配置します
  6. ソーシャルプルーフがない — すべてのランディングページに信頼の指標が必要です
  7. 読み込みが遅い — 遅延が100ms増えるごとに、コンバージョン率が1％低下します
  8. デスクトップ専用のデザイン — トラフィックの60％以上がモバイルです

他のスキルとの連携

  • cro-auditor — より広範なCRO監査フレームワークです。このスキルでは個々のページを詳しく掘り下げます
  • ab-testing-framework — このスキルが推奨する変更をテストします
  • copywriting-frameworks — ランディングページのコピーにPAS／AIDAを適用します
  • frontend-design — 最適化したページデザインを実装します
  • technical-seo-audit — ページ速度と技術的な最適化を行います

コメント

Markdown 対応