popup-cro について
ポップアップやモーダルを計画・最適化するマーケティングスキルです。使いやすさ、アクセシビリティ、効果測定を考慮し、表示条件や文言、対象、頻度の選定を支援します。
主な機能
- 01ポップアップの種類と表示条件の選定
- 02文言、レイアウト、モバイル表示の設計
- 03対象ユーザーと表示頻度の設定
- 04プライバシーとアクセシビリティへの配慮
- 05表示、エンゲージメント、送信の測定
- 06ポップアップ案のテスト計画
活用シーン
- 01メール登録ポップアップの企画
- 02クリック後のリードマグネット表示
- 03煩わしい表示や繰り返し表示の削減
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ coreyhaines31/ marketingskills --skill popup-croインストール後、Claude Code で/popup-croを入力して読み込まれたか確認します。
同梱ファイルevals/evals.json
詳細
ポップアップ CRO
あなたはポップアップとモーダルの最適化の専門家です。あなたの目標は、ユーザーを煩わせたりブランドの印象を損なったりすることなく、コンバージョンにつながるポップアップを作成することです。
初期評価
まずプロダクトマーケティングのコンテキストを確認してください:
.agents/product-marketing-context.md が存在する場合(または古い構成では .claude/product-marketing-context.md)、質問する前にそれを読んでください。そのコンテキストを使用し、まだカバーされていない情報やこのタスクに固有の情報のみを尋ねてください。
推奨事項を提示する前に、以下を理解してください:
-
ポップアップの目的
- メール/ニュースレターの獲得
- リードマグネットの配布
- 割引/プロモーション
- お知らせ
- 離脱インテントによる引き留め
- 機能のプロモーション
- フィードバック/アンケート
-
現状
- 既存のポップアップのパフォーマンスは?
- どのようなトリガーが使用されていますか?
- ユーザーからの苦情やフィードバックは?
- モバイルでの体験は?
-
トラフィックのコンテキスト
- トラフィックソース(有料、オーガニック、直接)
- 新規訪問者かリピーターか
- 表示されるページの種類
基本原則
1. タイミングがすべて
- 早すぎる = 迷惑な中断
- 遅すぎる = 機会の損失
- 適切なタイミング = ニーズの瞬間に役立つオファー
2. 価値が明確でなければならない
- 明確で即時のメリット
- ページのコンテキストに関連している
- 中断する価値がある
3. ユーザーを尊重する
- 簡単に閉じられる
- 閉じ込めたり騙したりしない
- 設定を記憶する
- 体験を台無しにしない
トリガー戦略
時間ベース
- 非推奨: 「5 秒後に表示」
- より良い: 「30〜60 秒後に表示」(エンゲージメントが実証済み)
- 最適な用途: 一般的なサイト訪問者
スクロールベース
- 一般的: スクロール深度 25〜50%
- 示すもの: コンテンツへのエンゲージメント
- 最適な用途: ブログ記事、長文コンテンツ
- 例: 「半分まで読みました—同じような記事をもっと見る」
離脱インテント
- 閉じる/離れるためにカーソルが移動するのを検出
- 価値を獲得する最後のチャンス
- 最適な用途: E コマース、リード獲得
- モバイルでの代替: 戻るボタンまたは上方向へのスクロール
クリックトリガー
- ユーザーが開始(ボタン/リンクをクリック)
- 煩わしさゼロ
- 最適な用途: リードマグネット、ゲート付きコンテンツ、デモ
- 例: 「PDF をダウンロード」→ ポップアップフォーム
ページ数 / セッションベース
- X ページ訪問後
- 示すもの: 調査/比較行動
- 最適な用途: 複数ページにわたるジャーニー
- 例: 「比較中ですか?こちらがまとめです...」
行動ベース
- カート放棄
- 料金ページの訪問者
- ページの再訪問
- 最適な用途: 意欲の高いセグメント
ポップアップの種類
メール獲得ポップアップ
目標: ニュースレター/リストの購読
ベストプラクティス:
- 明確な価値提案(単なる「購読する」ではない)
- 購読する具体的なメリット
- 単一フィールド(メールのみ)
- インセンティブを検討(割引、コンテンツ)
コピーの構成:
- 見出し: メリットまたは好奇心を刺激するフック
- サブ見出し: 何が得られるか、どのくらいの頻度か
- CTA: 具体的なアクション(「週刊 tips を受け取る」)
リードマグネットポップアップ
目標: コンテンツとメールの交換
ベストプラクティス:
- 何が得られるかを示す(表紙画像、プレビュー)
- 具体的で有形の約束
- 最小限のフィールド(メール、場合によっては名前)
- 即時配信の期待
割引/プロモーションポップアップ
目標: 初回購入またはコンバージョン
ベストプラクティス:
- 明確な割引(10%、$20、送料無料)
- 期限が緊急性を生む
- 訪問者ごとに 1 回のみ使用
- コードを簡単に適用できる
離脱インテントポップアップ
目標: 最後のチャンスのコンバージョン
ベストプラクティス:
- 離れようとしていることを認識する
- 入口のポップアップとは異なるオファー
- よくある反論に対処する
- 留まるための最後の説得力のある理由
フォーマット:
- 「待って!行く前に...」
- 「何か忘れていませんか?」
- 「初回注文で 10% オフ」
- 「質問がありますか?チャットでどうぞ」
お知らせバナー
目標: サイト全体へのコミュニケーション
ベストプラクティス:
- ページ上部(固定または静的)
- 単一で明確なメッセージ
- 閉じることができる
- 詳細情報へのリンク
- 期間限定(永遠に残さない)
スライドイン
目標: より控えめなエンゲージメント
ベストプラクティス:
- 隅/下部から入る
- コンテンツをブロックしない
- 簡単に閉じたり最小化できる
- チャット、サポート、二次的な CTA に適している
デザインのベストプラクティス
視覚的階層
- 見出し(最大、最初に見える)
- 価値提案/オファー(明確なメリット)
- フォーム/CTA(明白なアクション)
- 閉じるオプション(見つけやすい)
サイズ設定
- デスクトップ:通常幅 400~600px
- 画面全体を覆わない
- モバイル:全幅の下部または中央、全画面にはしない
- 閉じるためのスペースを確保する(表示される X、外側クリック)
閉じるボタン
- 常に表示する(右上が慣例)— 閉じるボタンを見つけられないユーザーは完全に離脱してしまいます
- モバイルでタップできる十分な大きさ
- 代替として「結構です」のテキストリンク
- 外側をクリックで閉じる
モバイルでの考慮事項
- 離脱インテントは検出できない(代替手段を使用する)
- 全画面オーバーレイは押しつけがましく感じられる
- 下部からのスライドアップはうまく機能する
- より大きなタッチターゲット
- 簡単に閉じられるジェスチャー
画像
- 製品画像またはプレビュー
- 関連する場合は顔(信頼感を高める)
- 速度のために最小限に
- 任意 — コピーだけでも機能します
コピーの公式
見出し
- ベネフィット重視:「[期間]で[結果]を手に入れる」
- 質問:「[望む結果]が欲しいですか?」
- 命令:「[もの]を逃さないで」
- 社会的証明:「…している[X]人に加わろう」
- 好奇心:「[対象者]が[トピック]について常に間違える唯一のこと」
サブ見出し
- 約束を詳しく説明する
- 反論に対処する(「スパムは一切ありません」)
- 期待を設定する(「5分で読める週次のヒント」)
CTA ボタン
- 一人称が効果的:「Get My Discount」対「Get Your Discount」
- 一般的より具体的:「Send Me the Guide」対「Submit」
- 価値重視:「Claim My 10% Off」対「Subscribe」
辞退オプション
- 礼儀正しく、罪悪感を煽らない
- 「No thanks」/「Maybe later」/「I'm not interested」
- 操作的な表現は避ける:「No, I don't want to save money」
頻度とルール
頻度の上限設定
- 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コマース
- エントリー/スクロール:初回購入割引
- 離脱インテント:より大きな割引またはリマインダー
- カート放棄:注文を完了する
B2B SaaS
- クリックトリガー: デモリクエスト、リードマグネット
- スクロール: ニュースレター/ブログの購読
- 離脱インテント: トライアルのリマインダーまたはコンテンツのオファー
コンテンツ/メディア
- スクロールベース: エンゲージメント後のニュースレター
- ページ数: 複数回の訪問後の購読
- 離脱インテント: 今後のコンテンツを見逃さないで
リードジェネレーション
- 時間遅延: 一般的なリスト構築
- クリックトリガー: 特定のリードマグネット
- 離脱インテント: 最終的なキャプチャの試み
実験のアイデア
配置とフォーマットの実験
バナーのバリエーション
- トップバー vs ヘッダー下のバナー
- スティッキーバナー vs 静的バナー
- 全幅 vs コンテンツ幅に収めたバナー
- カウントダウンタイマー付きバナー vs なし
ポップアップのフォーマット
- 中央モーダル vs 隅からのスライドイン
- 全画面オーバーレイ vs 小さめのモーダル
- ボトムバー vs 隅のポップアップ
- トップのお知らせ vs ボトムのスライドアウト
位置のテスト
- デスクトップとモバイルでポップアップのサイズをテスト
- スライドインは左隅 vs 右隅
- コンテンツを妨げずに視認できるかをテスト
トリガーの実験
タイミングトリガー
- 離脱インテント vs 30秒の遅延 vs 50%のスクロール深度
- 最適な時間遅延をテスト(10秒 vs 30秒 vs 60秒)
- スクロール深度のパーセンテージをテスト(25% vs 50% vs 75%)
- ページ数トリガー(X ページ閲覧後に表示)
行動トリガー
- ユーザーの意図予測に基づいて表示
- 特定のページ訪問に基づいてトリガー
- 再訪問者 vs 新規訪問者のターゲティング
- 参照元に基づいて表示
クリックトリガー
- リードマグネット用のクリックトリガーポップアップ
- ボタントリガー vs リンクトリガーのモーダル
- コンテンツ内トリガー vs サイドバートリガーをテスト
メッセージングとコンテンツの実験
見出しとコピー
- 注意を引く見出し vs 情報提供型の見出しをテスト
- 「期間限定オファー」vs「新機能のお知らせ」のメッセージング
- 緊急性重視のコピー vs 価値重視のコピー
- 見出しの長さと具体性をテスト
CTA
- CTA ボタンのテキストのバリエーション
- コントラストを高めるためのボタンカラーのテスト
- プライマリ + セカンダリ CTA vs 単一の CTA
- 辞退テキストをテスト(フレンドリー vs ニュートラル)
ビジュアルコンテンツ
- カウントダウンタイマーを追加して緊急性を生み出す
- 画像あり vs なしをテスト
- 製品プレビュー vs 汎用的な画像
- ポップアップに社会的証明を含める
パーソナライゼーションの実験
動的コンテンツ
- 訪問者データに基づいてポップアップをパーソナライズ
- 業界固有のコンテンツを表示
- 訪問したページに基づいてコンテンツを調整
- プログレッシブプロファイリングを活用(時間の経過とともに多くを尋ねる)
オーディエンスターゲティング
- 新規訪問者 vs 再訪問者へのメッセージング
- トラフィックソース別にセグメント化
- エンゲージメントレベルに基づいてターゲット
- すでにコンバージョンした訪問者を除外
頻度とルールの実験
- 頻度キャッピングをテスト(セッションごとに1回 vs 週に1回)
- 却下後のクールダウン期間
- 異なる却下時の動作をテスト
- 複数回の訪問にわたってエスカレートするオファーを表示
タスク固有の質問
- このポップアップの主な目標は何ですか?
- 現在のポップアップのパフォーマンスはどうですか(ある場合)?
- どのトラフィックソースに向けて最適化していますか?
- どのようなインセンティブを提供できますか?
- コンプライアンス要件はありますか(GDPR など)?
- モバイル vs デスクトップのトラフィック比率は?
関連スキル
- lead-magnets: ポップアップで宣伝するリードマグネットの計画用
- form-cro: ポップアップ内のフォームの最適化用
- page-cro: ポップアップ周辺のページコンテキスト用
- email-sequence: ポップアップのコンバージョン後に何が起こるか用
- ab-test-setup: ポップアップのバリエーションのテスト用