mcpField
P
popup-cro

popup-cro

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

popup-cro について

popup-croは、ポップアップやモーダルの計画・改善を支援するマーケティングスキルです。表示条件、対象、文案、デザイン、コンプライアンス、効果測定を扱います。

主な機能

  1. 01表示条件と対象者の提案
  2. 02ポップアップ形式と文案の指針
  3. 03デザインとモバイル利用の指針
  4. 04頻度・プライバシー・アクセシビリティの確認
  5. 05指標とA/Bテスト案

活用シーン

  1. 01メール登録やリードマグネット用ポップアップの計画
  2. 02表示タイミングと対象設定の見直し
  3. 03モバイルでのポップアップ体験の改善
  4. 04デザインや文案のテスト

インストール

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

$npx skills add https://github.com/mysticaltech/marketingskills --skill popup-cro

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

詳細

ポップアップCRO

ポップアップとモーダルの最適化に精通しています。ユーザーを煩わせたり、ブランドイメージを損なったりせずにコンバージョンにつながるポップアップを作成することが目標です。

初期評価

まず、製品マーケティングのコンテキストを確認してください。 .claude/product-marketing-context.md が存在する場合は、質問する前に読んでください。その内容を活用し、すでに記載されていない情報、またはこのタスクに固有の情報だけを尋ねてください。

推奨事項を提示する前に、以下を把握してください。

  1. ポップアップの目的

    • メールアドレス/ニュースレターの登録
    • リードマグネットの提供
    • 割引/プロモーション
    • お知らせ
    • 離脱防止
    • 機能の宣伝
    • フィードバック/アンケート
  2. 現在の状況

    • 既存のポップアップのパフォーマンスはどうか?
    • どのようなトリガーを使用しているか?
    • ユーザーからの苦情やフィードバックはあるか?
    • モバイルでの操作性はどうか?
  3. トラフィックの状況

    • トラフィックの流入元(有料、オーガニック、ダイレクト)
    • 新規訪問者かリピーターか
    • 表示するページの種類

基本原則

1. タイミングがすべて
  • 早すぎる=煩わしい割り込み
  • 遅すぎる=機会を逃す
  • 適切なタイミング=ニーズが生じた瞬間に役立つ提案
2. 価値を明確にする
  • 明確ですぐにわかるメリット
  • ページのコンテキストに関連している
  • 割り込みに見合う価値がある
3. ユーザーを尊重する
  • 簡単に閉じられる
  • 抜け出せなくしたり、だましたりしない
  • ユーザーの設定を記憶する
  • 利用体験を損なわない

トリガー戦略

時間ベース
  • おすすめしません:「5秒後に表示」
  • より良い方法:「30~60秒後に表示」(エンゲージメントの実績あり)
  • 最適な対象:サイト全体の訪問者
スクロールベース
  • 一般的な設定:スクロール深度25~50%
  • 示すもの:コンテンツへの関与
  • 最適な対象:ブログ記事、長文コンテンツ
  • 例:「記事を半分まで読みましたね。似た内容をもっと受け取りませんか?」
離脱意図
  • カーソルが閉じる/離れる方向に動くのを検知
  • 価値を届ける最後のチャンス
  • 最適な対象:Eコマース、リード獲得
  • モバイルでの代替策:戻るボタンまたは上方向へのスクロール
クリックをトリガーにする
  • ユーザーが開始する(ボタン/リンクをクリック)
  • 煩わしさがない
  • 最適な対象:リードマグネット、ゲート付きコンテンツ、デモ
  • 例:「PDFをダウンロード」→ポップアップフォーム
ページ数/セッションベース
  • Xページを訪問した後
  • 調査/比較行動を示す
  • 最適な対象:複数ページにわたる訪問
  • 例:「比較検討中ですか?概要をご紹介します……」
行動ベース
  • カート追加後の離脱
  • 価格ページの訪問者
  • 同じページへの再訪
  • 最適な対象:購入意欲の高いセグメント

ポップアップの種類

メールアドレス登録ポップアップ

目標:ニュースレター/リストへの登録

ベストプラクティス:

  • 価値を明確に伝える(「登録」だけにしない)
  • 登録する具体的なメリット
  • 入力欄は1つ(メールアドレスのみ)
  • 特典を検討する(割引、コンテンツ)

コピーの構成:

  • 見出し:メリット、または興味を引くフック
  • サブ見出し:何が、どのくらいの頻度で届くか
  • CTA:具体的な行動(「毎週のヒントを受け取る」)
リードマグネットのポップアップ

目標:コンテンツと引き換えにメールアドレスを取得

ベストプラクティス:

  • 受け取れるものを見せる(表紙画像、プレビュー)
  • 具体的で実感できる価値を約束する
  • 入力欄は最小限にする(メールアドレス、必要であれば氏名)
  • すぐに届けられると期待してもらう
割引/プロモーションのポップアップ

目標:初回購入またはコンバージョン

ベストプラクティス:

  • 割引内容を明確にする(10%、20ドル、送料無料)
  • 期限を設けて緊急性を生み出す
  • 訪問者ごとに1回のみ利用可能にする
  • クーポンコードを簡単に適用できるようにする
離脱意図ポップアップ

目標:最後のコンバージョン機会

ベストプラクティス:

  • 離脱しようとしていることを踏まえる
  • 最初のポップアップとは異なるオファーを提示する
  • よくある懸念に対処する
  • 滞在してもらうための最後の魅力的な理由を伝える

形式:

  • 「待って!その前に……」
  • 「何かお忘れではありませんか?」
  • 「初回注文が10%オフ」
  • 「ご質問ですか?チャットでお問い合わせください」
お知らせバナー

目標:サイト全体へのお知らせ

ベストプラクティス:

  • ページの上部に配置する(固定または通常表示)
  • メッセージを1つに絞り、明確に伝える
  • 閉じられるようにする
  • 詳細へのリンクを設ける
  • 期間を限定する(いつまでも表示し続けない)
スライドイン

目標:より控えめなエンゲージメント

ベストプラクティス:

  • 画面の隅または下部から表示する
  • コンテンツを遮らない
  • 簡単に閉じたり最小化したりできる
  • チャット、サポート、二次的なCTAに適している

デザインのベストプラクティス

視覚的な階層
  1. 見出し(最も大きく、最初に目に入る)
  2. 価値提案/オファー(明確なメリット)
  3. フォーム/CTA(行動がひと目でわかる)
  4. 閉じる方法(見つけやすい)
サイズ
  • デスクトップ:一般的には幅 400~600px
  • 画面全体を覆わない
  • モバイル:全画面ではなく、画面下部または中央に全幅で表示
  • 閉じるための余地を確保する(X を表示する、外側のクリックで閉じられるようにする)
閉じるボタン
  • 常に表示する(右上が一般的)
  • モバイルでタップしやすい大きさにする
  • 代替手段として「結構です」というテキストリンクを用意する
  • 外側のクリックで閉じられるようにする
モバイルでの考慮事項
  • 離脱意図を検出できない(代替手段を使う)
  • 全画面オーバーレイは強引な印象を与える
  • 下からスライドして表示する方法が効果的
  • タップ領域を大きくする
  • 簡単に閉じられるジェスチャーを用意する
画像
  • 商品画像またはプレビュー
  • 関連する場合は顔写真(信頼感が高まる)
  • 表示速度を優先して最小限にする
  • 任意。コピーだけでも効果がある

コピーの定型

見出し
  • メリットを前面に出す:「[期間]で[成果]を実現」
  • 質問:「[望む結果]を実現したいですか?」
  • 呼びかけ:「[内容]をお見逃しなく」
  • 社会的証明:「[X]人が参加している[内容]に参加しましょう」
  • 好奇心を刺激する:「[対象者]が[トピック]についていつも間違えていること」
サブ見出し
  • 提案内容を補足する
  • 懸念に対応する(「迷惑メールは一切ありません」)
  • 内容を明確にする(「5分で読める週刊ヒント」)
CTA ボタン
  • 一人称が効果的:「割引を受け取る」より「自分の割引を受け取る」
  • 汎用的な表現より具体的な表現:「送信」より「ガイドを受け取る」
  • 価値を前面に出す:「登録する」より「10%オフを受け取る」
辞退の選択肢
  • 丁寧にし、罪悪感を与えない
  • 「結構です」/「また後で」/「興味がありません」
  • 操作的な表現は避ける:「いいえ、お金を節約したくありません」

頻度とルール

表示頻度の上限
  • 1 セッションにつき最大 1 回表示する
  • 閉じたことを記憶する(cookie/localStorage)
  • 再表示まで 7~30 日空ける
  • ユーザーの選択を尊重する
オーディエンスのターゲティング
  • 新規訪問者とリピーターで分ける(ニーズが異なる)
  • トラフィックソースごとに分ける(広告メッセージと一致させる)
  • ページの種類ごとに分ける(文脈に関連付ける)
  • コンバージョン済みのユーザーを除外する
  • 最近閉じたユーザーを除外する
ページのルール
  • チェックアウト/コンバージョンのフローでは表示しない
  • ブログページと商品ページを考慮する
  • オファーをページの文脈に合わせる

コンプライアンスとアクセシビリティ

GDPR/プライバシー
  • 同意について明確に説明する
  • プライバシーポリシーへのリンクを設ける
  • オプトインを事前にチェックしない
  • 配信停止や設定変更の希望を尊重する
アクセシビリティ
  • キーボードで操作できるようにする(Tab、Enter、Esc)
  • 表示中はフォーカスを閉じ込める
  • スクリーンリーダーに対応する
  • 十分な色のコントラストを確保する
  • 色だけに頼らない
Google のガイドライン
  • 邪魔なインタースティシャルは SEO に悪影響を及ぼす
  • モバイルでは特に注意する
  • 許容されるもの:Cookie の通知、年齢確認、適切なバナー
  • 避けるもの:モバイルでコンテンツの前に表示する全画面表示

効果測定

主な指標
  • 表示率:ポップアップを見た訪問者の割合
  • コンバージョン率:表示回数 → 送信数
  • 閉じる率:すぐに閉じるユーザーの割合
  • エンゲージメント率:閉じる前に操作した割合
  • 閉じるまでの時間:閉じるまでにかかった時間
トラッキングする項目
  • ポップアップの表示回数
  • フォームへのフォーカス
  • 送信の試行
  • 送信の成功
  • 閉じるボタンのクリック
  • 外側のクリック
  • Escape キー
ベンチマーク
  • メールアドレス収集ポップアップ:コンバージョン率は一般的に 2~5%
  • 離脱意図ポップアップ:コンバージョン率は 3~10%
  • クリックをトリガーとするポップアップ:より高い(10% 以上、ユーザーが自ら選択)

出力形式

ポップアップの設計
  • 種類:メールアドレス収集、リードマグネットなど
  • トリガー:表示されるタイミング
  • ターゲティング:表示対象
  • 頻度:表示頻度
  • コピー:見出し、サブ見出し、CTA、辞退の選択肢
  • デザイン上の注意点:レイアウト、画像、モバイル
複数のポップアップ戦略

複数のポップアップを推奨する場合:

  • ポップアップ 1:[目的、トリガー、対象者]
  • ポップアップ 2:[目的、トリガー、対象者]
  • 競合を避けるルール:互いに重複しない方法
テスト仮説

期待される結果とともに、A/B テストのアイデアを示す


よくあるポップアップ戦略

E コマース
  1. 初回訪問/スクロール時:初回購入割引
  2. 離脱意図:より大きな割引またはリマインダー
  3. カート放棄:注文の完了を促す
B2B SaaS
  1. クリックをトリガーとする表示:デモのリクエスト、リードマグネット
  2. スクロール時:ニュースレター/ブログの購読
  3. 離脱意図:トライアルのリマインダーまたはコンテンツのオファー
コンテンツ/メディア
  1. スクロールベース:エンゲージメント後にニュースレターを案内
  2. 閲覧ページ数:複数回の訪問後に登録を促す
  3. 離脱意図:今後のコンテンツを見逃さないよう案内
リード獲得
  1. 時間遅延:リストの一般的な構築
  2. クリックトリガー:特定のリードマグネット
  3. 離脱意図:最後の獲得機会

実験のアイデア

配置と形式の実験

バナーのバリエーション

  • トップバーとヘッダー下のバナー
  • 固定バナーと静的バナー
  • 全幅バナーとコンテナ内バナー
  • カウントダウンタイマー付きバナーとなしのバナー

ポップアップの形式

  • 中央のモーダルと隅からのスライドイン
  • 全画面オーバーレイと小さめのモーダル
  • 下部バーと隅のポップアップ
  • 上部のお知らせと下部のスライドアウト

位置のテスト

  • デスクトップとモバイルでポップアップのサイズをテスト
  • スライドインの左隅と右隅
  • コンテンツを妨げずに視認できるかテスト

トリガーの実験

タイミングトリガー

  • 離脱意図と30秒の遅延とスクロール深度50%
  • 最適な遅延時間をテスト(10秒と30秒と60秒)
  • スクロール深度の割合をテスト(25%と50%と75%)
  • 閲覧ページ数トリガー(Xページを閲覧した後に表示)

行動トリガー

  • ユーザーの意図予測に基づいて表示
  • 特定のページへの訪問を基準にトリガー
  • リピーターと新規訪問者を対象に設定
  • 参照元に基づいて表示

クリックトリガー

  • リードマグネット用のクリックトリガーポップアップ
  • ボタンでトリガーするモーダルとリンクでトリガーするモーダル
  • コンテンツ内のトリガーとサイドバーのトリガーをテスト

メッセージとコンテンツの実験

見出しとコピー

  • 注目を集める見出しと情報提供型の見出しをテスト
  • 「期間限定オファー」と「新機能のお知らせ」のメッセージ
  • 緊急性を重視したコピーと価値を重視したコピー
  • 見出しの長さと具体性をテスト

CTA

  • CTA ボタンのテキストのバリエーション
  • コントラストを考慮したボタンの色のテスト
  • プライマリーCTAとセカンダリーCTAの組み合わせと単一のCTA
  • 拒否するテキストをテスト(親しみやすい表現と中立的な表現)

ビジュアルコンテンツ

  • 緊急性を高めるカウントダウンタイマーを追加
  • 画像ありと画像なしをテスト
  • 製品プレビューと一般的な画像
  • ポップアップにソーシャルプルーフを含める

パーソナライズの実験

動的コンテンツ

  • 訪問者データに基づいてポップアップをパーソナライズ
  • 業界固有のコンテンツを表示
  • 閲覧したページに基づいてコンテンツを調整
  • プログレッシブプロファイリングを使用(時間をかけて質問を増やす)

オーディエンスターゲティング

  • 新規訪問者とリピーターでメッセージを変える
  • トラフィックソースでセグメント化
  • エンゲージメントレベルに基づいてターゲティング
  • すでにコンバージョンした訪問者を除外

頻度とルールの実験
  • 頻度制限をテスト(セッションごとに1回と週ごとに1回)
  • 閉じた後のクールダウン期間
  • 閉じる操作の違いをテスト
  • 複数回の訪問に応じてオファーを段階的に強化

タスク固有の質問

  1. このポップアップの主な目標は何ですか?
  2. 現在のポップアップのパフォーマンスはどの程度ですか(該当する場合)?
  3. どのトラフィックソースに最適化していますか?
  4. どのようなインセンティブを提供できますか?
  5. GDPR などのコンプライアンス要件はありますか?
  6. モバイルとデスクトップのトラフィックの割合はどのくらいですか?

関連スキル

  • form-cro:ポップアップ内のフォームを最適化する場合
  • page-cro:ポップアップが表示されるページのコンテキストを最適化する場合
  • email-sequence:ポップアップのコンバージョン後の流れを確認する場合
  • ab-test-setup:ポップアップのバリエーションをテストする場合

コメント