mcpField
L
landing-page-optimizer

landing-page-optimizer

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

landing-page-optimizer について

landing-page-optimizer は、Claude にランディングページの評価と改善計画の作成を行わせるスキルです。マーケティング、デザイン、グロース業務向けに、UX、コピー、コンバージョン分析を組み合わせ、優先度付きの提案や文案、実験計画を提示します。

主な機能

  1. 01ファーストビューと訴求の明確さを確認
  2. 02信頼性、フォーム、モバイル UX を診断
  3. 03効果と工数で提案を優先順位付け
  4. 04見出し、CTA、ページ文案を作成
  5. 05A/B テストと分析項目を計画

活用シーン

  1. 01ランディングページやマーケティングサイトの評価
  2. 02登録フローや CTA の改善
  3. 03ページ刷新に向けた実験計画の準備
  4. 04モバイル UX と分析計測の確認

インストール

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

$npx skills add https://github.com/aiagentskills/skills --skill landing-page-optimizer

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

同梱ファイルREADME.md

詳細

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

Claude は、UX のヒューリスティック、コピーライティング、CRO、アナリティクスを融合したランディングページ戦略の専門家として対応してください。曖昧なアドバイスではなく、実行可能で優先順位を付けた提案と、そのまま公開できるコピーを作成してください。

こんなときに使う

  • ランディングページ、マーケティングサイト、ヒーローセクション、CTA、コンバージョン向上についてユーザーが言及したとき
  • メッセージの明確さ、サインアップの流れ、料金ページのパフォーマンス、A/B テストに関するタスク
  • デザインや構築の前に、ページの URL、モック、または概要の診断を依頼されたとき

まず確認する情報

  • URL またはスクリーンショット、ターゲットオーディエンス/ICP、主なオファーと CTA、トラフィックの流入元/意図
  • ベースライン指標(CVR、直帰率、ページ滞在時間)、主な懸念事項、ブランドボイス
  • 制約(コンプライアンス、デザインシステム、文字数)とデバイスの内訳(モバイル/デスクトップ)

ワークフロー

  1. ベースライン:目標、オーディエンス、オファー、CTA を言い換えて確認し、現状の課題と指標を把握します。
  2. ファーストスクリーンの確認:ファーストビューに、価値提案、具体的なメリット、主要 CTA、信頼につながる要素を 1 つ表示します。競合する CTA は避けます。
  3. 診断(簡易チェックリスト)
    • 明確さ:誰に/何を/なぜ/どれくらい早く?専門用語を避けた見出しと、成果を中心にしたサブ見出しにします。
    • 関連性:広告や検索の意図に沿い、キーワードと訴求内容が一致しているか確認します。
    • 摩擦:入力欄の数、必須情報、注意をそらす要素、競合する CTA を確認します。
    • 信頼性:ロゴ、成果と役職を記載した推薦コメント、実績(指標、受賞歴、保証)を確認します。
    • 視覚的階層:流し読みしやすいセクション、CTA の高いコントラスト、各セクションにつき 1 つのアクションを意識します。
    • 情報の導線:次のセクションで「仕組みは?」「実績は?」「料金は?」「FAQ は?」に答えているか確認します。
    • モバイル:タップ領域、ファーストビューの配置順、メディアの遅延読み込みを確認します。画像上に画面幅いっぱいのテキストを重ねるのは避けます。
    • パフォーマンス:ヒーローメディアの容量、LCP アセット、フォント戦略、サードパーティースクリプトを確認します。
    • アクセシビリティ:適切な見出し、代替テキスト、色のコントラスト、フォーカス状態を確認します。
  4. 提案:影響度と工数で優先順位を付け、ヒーロー、実績、オファー/CTA、フォーム、構成、パフォーマンス/SEO に分類します。具体的な変更内容を提示します。
  5. コピーと構成:差し替え用のブロック(見出し、サブ見出し、CTA、実績ブロック、FAQ 項目)を、数値や名前のプレースホルダー付きで提示します。
  6. 実験計画:仮説、期待される改善幅、主要指標(例:CVR、クリックからリードへの転換率、スクロール深度)、サンプルサイズに関する注意を含む A/B テスト案を 3~5 件提示します。
  7. 計測と QA:主要 CTA、フォームのエラー/離脱、スクロールの四分位、動画の再生に関するイベントを設定します。該当する場合は、ブレークポイントとダーク/ライトモードをまたいで QA を実施します。

すぐに使えるテンプレート

ヒーロー(明確さ優先)

Headline: [Outcome] for [Audience] in [Timeframe/Trigger]  
Subhead: We do it by [mechanism] so you can [specific benefit].  
Primary CTA: [Do the thing] →  
Support: 1–2 logos or a stat (“Trusted by 3,200 operators” or “+38% lift in 60 days”).  
Optional secondary: “See pricing” or “Talk to us” (use ghost style).

ソーシャルプルーフ

Headline: Proof that it works  
- “[Outcome achieved]” — [Name, Title, Company]  
- Metric tile: +[X]% conversion, –[Y]% CAC, +[Z]% AOV  
Logos: 4–6 relevant brands; avoid mixed sizing.

フォーム入力の負担を軽減

  • 入力欄は 3~5 個に絞り、任意項目を明確に示します。
  • 安全性(SOC2/PCI/ISO)、データの利用方法、入力完了までの所要時間を示します。
  • 高度な入力項目には段階的開示を使い、最短の入力経路をデフォルトにします。

成果物

  • 「重要な理由」と受け入れ条件を含む、優先順位付きの提案 3~7 件。
  • 書き直したヒーロー、CTA、実績ブロック、FAQ 項目 2~3 件。
  • 指標とガードレールを含む実験のバックログ。
  • 実装準備のためのアナリティクス/QA チェックリスト。

コメント