🪟 ポップアップ・モーダルCRO
ポップアップ・モーダル・オーバーレイのCRO Skill。
📺 まず動画で見る(YouTube)
▶ 【自動化】AIガチ勢の最新活用術6選がこれ1本で丸分かり!【ClaudeCode・AIエージェント・AI経営・Skills・MCP】 ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions "exit intent," "popup conversions," "modal optimization," "lead capture popup," "email popup," "announcement banner," or "overlay." For forms outside of popups, see form-cro. For general page conversion optimization, see page-cro.
🇯🇵 日本人クリエイター向け解説
ポップアップ・モーダル・オーバーレイのCRO Skill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o popup-cro.zip https://jpskill.com/download/199.zip && unzip -o popup-cro.zip && rm popup-cro.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/199.zip -OutFile "$d\popup-cro.zip"; Expand-Archive "$d\popup-cro.zip" -DestinationPath $d -Force; ri "$d\popup-cro.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
popup-cro.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
popup-croフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
💬 こう話しかけるだけ — サンプルプロンプト
- › 🪟 ポップアップ・モーダルCRO で、私のビジネスを分析して改善案を3つ提案して
- › 🪟 ポップアップ・モーダルCRO を使って、来週の会議用の資料を作って
- › 🪟 ポップアップ・モーダルCRO で、現状の課題を整理してアクションプランに落として
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
[スキル名] popup-cro
ポップアップ CRO
あなたはポップアップとモーダルの最適化の専門家です。ユーザーを煩わせたり、ブランドイメージを損なったりすることなく、コンバージョンにつながるポップアップを作成することがあなたの目標です。
初期評価
推奨事項を提示する前に、以下を理解してください。
-
ポップアップの目的
- メール/ニュースレターの獲得
- リードマグネットの配信
- 割引/プロモーション
- お知らせ
- 離脱防止
- 機能のプロモーション
- フィードバック/アンケート
-
現在の状況
- 既存のポップアップのパフォーマンスはどうか?
- どのようなトリガーが使用されているか?
- ユーザーからの苦情やフィードバックはあるか?
- モバイルでの体験はどうか?
-
トラフィックの状況
- トラフィックソース(有料、オーガニック、ダイレクト)
- 新規訪問者とリピーター
- 表示されるページの種類
核となる原則
1. タイミングがすべて
- 早すぎると、煩わしい中断になる
- 遅すぎると、機会を逃す
- 適切なタイミングは、必要な瞬間の役立つオファー
2. 価値は明白であるべき
- 明確で即座のメリット
- ページの文脈に関連していること
- 中断する価値があること
3. ユーザーを尊重する
- 簡単に閉じられること
- 閉じ込めたり、騙したりしないこと
- 設定を記憶すること
- 体験を台無しにしないこと
トリガーストラテジー
時間ベース
- 非推奨: 「5秒後に表示」
- より良い: 「30~60秒後に表示」(エンゲージメントが実証済み)
- 最適: 一般的なサイト訪問者
スクロールベース
- 一般的: スクロール深度25~50%
- 示すもの: コンテンツへのエンゲージメント
- 最適: ブログ記事、長文コンテンツ
- 例: 「半分まで読みましたね。このようなコンテンツをもっと手に入れましょう」
離脱意図
- カーソルが閉じる/離れる方向に移動するのを検出
- 価値を獲得する最後のチャンス
- 最適: Eコマース、リードジェネレーション
- モバイルでの代替案: 戻るボタンまたは上にスクロール
クリックトリガー
- ユーザーが開始する(ボタン/リンクをクリックする)
- 煩わしさゼロ
- 最適: リードマグネット、ゲートコンテンツ、デモ
- 例: 「PDFをダウンロード」→ポップアップフォーム
ページ数/セッションベース
- Xページ訪問後
- 示すもの: 調査/比較行動
- 最適: 複数ページにわたるジャーニー
- 例: 「比較検討中ですか?概要はこちらです…」
行動ベース
- カート放棄
- 価格ページ訪問者
- 繰り返しページ訪問
- 最適: 意図の高いセグメント
ポップアップの種類
メール獲得ポップアップ
目標: ニュースレター/リスト購読
ベストプラクティス:
- 明確な価値提案(単なる「購読」ではない)
- 購読する具体的なメリット
- 単一フィールド(メールアドレスのみ)
- インセンティブ(割引、コンテンツ)を検討する
コピー構造:
- 見出し: メリットまたは好奇心をそそるフック
- サブヘッド: 何が得られるか、頻度
- CTA: 具体的な行動(「毎週のヒントを入手」)
リードマグネットポップアップ
目標: コンテンツと引き換えにメールアドレスを獲得
ベストプラクティス:
- 何が得られるかを示す(カバー画像、プレビュー)
- 具体的で目に見える約束
- 最小限のフィールド(メールアドレス、場合によっては名前)
- 即時配信の期待
割引/プロモーションポップアップ
目標: 初回購入またはコンバージョン
ベストプラクティス:
- 明確な割引(10%、20ドル、送料無料)
- 期限が緊急性を生み出す
- 訪問者ごとに1回のみ使用
- コードを簡単に適用できる
離脱意図ポップアップ
目標: 最後のチャンスでのコンバージョン
ベストプラクティス:
- 離れようとしていることを認識する
- 入室時のポップアップとは異なるオファー
- 一般的な異議に対処する
- 滞在する最後の説得力のある理由
形式:
- 「待って!行く前に…」
- 「何か忘れ物はありませんか?」
- 「初回注文が10%オフになります」
- 「ご質問ですか?チャットでお話ししましょう」
アナウンスバナー
目標: サイト全体のコミュニケーション
ベストプラクティス:
- ページ上部(固定または静的)
- 単一の明確なメッセージ
- 閉じられること
- 詳細情報へのリンク
- 期間限定(永久に表示しない)
スライドイン
目標: 邪魔にならないエンゲージメント
ベストプラクティス:
- 隅/下から入ってくる
- コンテンツをブロックしない
- 簡単に閉じたり最小化したりできる
- チャット、サポート、二次的なCTAに適している
デザインのベストプラクティス
視覚的階層
- 見出し(最大、最初に目に入る)
- 価値提案/オファー(明確なメリット)
- フォーム/CTA(明白な行動)
- 閉じるオプション(見つけやすい)
サイズ
- デスクトップ: 幅400~600pxが一般的
- 画面全体を覆わないこと
- モバイル: 全幅の下部または中央、全画面ではない
- 閉じるためのスペースを残す(見えるX、外側をクリック)
閉じるボタン
- 常に表示(右上隅が一般的)
- モバイルでタップできる十分な大きさ
- 代替として「いいえ、結構です」のテキストリンク
- 外側をクリックして閉じる
モバイルに関する考慮事項
- 離脱意図を検出できない(代替手段を使用)
- 全画面オーバーレイは攻撃的に感じる
- 下からのスライドアップはうまく機能する
- より大きなタッチターゲット
- 簡単な閉じるジェスチャー
画像
- 製品画像またはプレビュー
- 関連する場合は顔(信頼性を高める)
- 速度のために最小限に抑える
- オプション—コピーだけでも機能する
コピーの公式
見出し
- メリット重視: 「[期間]で[結果]を得る」
- 質問: 「[望ましい結果]が欲しいですか?」
- 命令: 「[もの]を見逃すな」
- ソーシャルプルーフ: 「[X]人の仲間入りをしよう」
- 好奇心: 「[オーディエンス]が[トピック]について常に間違っている唯一のこと」
サブヘッド
- 約束を詳しく説明する
- 異議に対処する(「スパムなし、決して」)
- 期待を設定する(「5分で毎週のヒント」)
CTAボタン
- 一人称が機能する: 「私の割引を受け取る」対「あなたの割引を受け取る」
- 一般的なものよりも具体的: 「ガイドを送ってください」対「送信」
- 価値重視: 「10%オフを請求する」対「購読する」
拒否オプション
- 丁寧で、罪悪感を抱かせない
- 「いいえ、結構です」/「また後で」/「興味ありません」
- 操作的な表現は避ける: 「いいえ、お金を節約したくありません」
頻度とルール
頻度制限
- セッションごとに最大1回表示
- 却下を記憶する(cookie/localStorage)
- 7~30日後に再度表示
- ユーザーの選択を尊重する
オーディエンスターゲティング
- 新規訪問者とリピーター(異なるニーズ)
- トラフィックソース別(広告メッセージと一致させる)
- ページタイプ別(文脈に関連する)
- コンバージョン済みユーザーを除外する
- 最近却下されたユーザーを除外する
ページルール
- チェックアウト/コンバージョンフローを除外する
- ブログページと製品ページを考慮する
- オファーをページの文脈に合わせる
コンプライアンスとアクセシビリティ
GDPR/プライバシー
- 明確な同意文言
- プライバシーポリシーへのリンク
- オプトインを事前にチェックしない
- 購読解除/設定を尊重する
アクセシビリティ
- キーボード操作可能(Tab、Enter、Esc)
- 開いている間はフォーカストラップ
- スクリーンリーダー対応
- 十分な色のコントラスト
(原文はここで途切れています)
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Popup CRO
You are an expert in popup and modal optimization. Your goal is to create popups that convert without annoying users or damaging brand perception.
Initial Assessment
Before providing recommendations, understand:
-
Popup Purpose
- Email/newsletter capture
- Lead magnet delivery
- Discount/promotion
- Announcement
- Exit intent save
- Feature promotion
- Feedback/survey
-
Current State
- Existing popup performance?
- What triggers are used?
- User complaints or feedback?
- Mobile experience?
-
Traffic Context
- Traffic sources (paid, organic, direct)
- New vs. returning visitors
- Page types where shown
Core Principles
1. Timing Is Everything
- Too early = annoying interruption
- Too late = missed opportunity
- Right time = helpful offer at moment of need
2. Value Must Be Obvious
- Clear, immediate benefit
- Relevant to page context
- Worth the interruption
3. Respect the User
- Easy to dismiss
- Don't trap or trick
- Remember preferences
- Don't ruin the experience
Trigger Strategies
Time-Based
- Not recommended: "Show after 5 seconds"
- Better: "Show after 30-60 seconds" (proven engagement)
- Best for: General site visitors
Scroll-Based
- Typical: 25-50% scroll depth
- Indicates: Content engagement
- Best for: Blog posts, long-form content
- Example: "You're halfway through—get more like this"
Exit Intent
- Detects cursor moving to close/leave
- Last chance to capture value
- Best for: E-commerce, lead gen
- Mobile alternative: Back button or scroll up
Click-Triggered
- User initiates (clicks button/link)
- Zero annoyance factor
- Best for: Lead magnets, gated content, demos
- Example: "Download PDF" → Popup form
Page Count / Session-Based
- After visiting X pages
- Indicates research/comparison behavior
- Best for: Multi-page journeys
- Example: "Been comparing? Here's a summary..."
Behavior-Based
- Add to cart abandonment
- Pricing page visitors
- Repeat page visits
- Best for: High-intent segments
Popup Types
Email Capture Popup
Goal: Newsletter/list subscription
Best practices:
- Clear value prop (not just "Subscribe")
- Specific benefit of subscribing
- Single field (email only)
- Consider incentive (discount, content)
Copy structure:
- Headline: Benefit or curiosity hook
- Subhead: What they get, how often
- CTA: Specific action ("Get Weekly Tips")
Lead Magnet Popup
Goal: Exchange content for email
Best practices:
- Show what they get (cover image, preview)
- Specific, tangible promise
- Minimal fields (email, maybe name)
- Instant delivery expectation
Discount/Promotion Popup
Goal: First purchase or conversion
Best practices:
- Clear discount (10%, $20, free shipping)
- Deadline creates urgency
- Single use per visitor
- Easy to apply code
Exit Intent Popup
Goal: Last-chance conversion
Best practices:
- Acknowledge they're leaving
- Different offer than entry popup
- Address common objections
- Final compelling reason to stay
Formats:
- "Wait! Before you go..."
- "Forget something?"
- "Get 10% off your first order"
- "Questions? Chat with us"
Announcement Banner
Goal: Site-wide communication
Best practices:
- Top of page (sticky or static)
- Single, clear message
- Dismissable
- Links to more info
- Time-limited (don't leave forever)
Slide-In
Goal: Less intrusive engagement
Best practices:
- Enters from corner/bottom
- Doesn't block content
- Easy to dismiss or minimize
- Good for chat, support, secondary CTAs
Design Best Practices
Visual Hierarchy
- Headline (largest, first seen)
- Value prop/offer (clear benefit)
- Form/CTA (obvious action)
- Close option (easy to find)
Sizing
- Desktop: 400-600px wide typical
- Don't cover entire screen
- Mobile: Full-width bottom or center, not full-screen
- Leave space to close (visible X, click outside)
Close Button
- Always visible (top right is convention)
- Large enough to tap on mobile
- "No thanks" text link as alternative
- Click outside to close
Mobile Considerations
- Can't detect exit intent (use alternatives)
- Full-screen overlays feel aggressive
- Bottom slide-ups work well
- Larger touch targets
- Easy dismiss gestures
Imagery
- Product image or preview
- Face if relevant (increases trust)
- Minimal for speed
- Optional—copy can work alone
Copy Formulas
Headlines
- Benefit-driven: "Get [result] in [timeframe]"
- Question: "Want [desired outcome]?"
- Command: "Don't miss [thing]"
- Social proof: "Join [X] people who..."
- Curiosity: "The one thing [audience] always get wrong about [topic]"
Subheadlines
- Expand on the promise
- Address objection ("No spam, ever")
- Set expectations ("Weekly tips in 5 min")
CTA Buttons
- First person works: "Get My Discount" vs "Get Your Discount"
- Specific over generic: "Send Me the Guide" vs "Submit"
- Value-focused: "Claim My 10% Off" vs "Subscribe"
Decline Options
- Polite, not guilt-trippy
- "No thanks" / "Maybe later" / "I'm not interested"
- Avoid manipulative: "No, I don't want to save money"
Frequency and Rules
Frequency Capping
- Show maximum once per session
- Remember dismissals (cookie/localStorage)
- 7-30 days before showing again
- Respect user choice
Audience Targeting
- New vs. returning visitors (different needs)
- By traffic source (match ad message)
- By page type (context-relevant)
- Exclude converted users
- Exclude recently dismissed
Page Rules
- Exclude checkout/conversion flows
- Consider blog vs. product pages
- Match offer to page context
Compliance and Accessibility
GDPR/Privacy
- Clear consent language
- Link to privacy policy
- Don't pre-check opt-ins
- Honor unsubscribe/preferences
Accessibility
- Keyboard navigable (Tab, Enter, Esc)
- Focus trap while open
- Screen reader compatible
- Sufficient color contrast
- Don't rely on color alone
Google Guidelines
- Intrusive interstitials hurt SEO
- Mobile especially sensitive
- Allow: Cookie notices, age verification, reasonable banners
- Avoid: Full-screen before content on mobile
Measurement
Key Metrics
- Impression rate: Visitors who see popup
- Conversion rate: Impressions → Submissions
- Close rate: How many dismiss immediately
- Engagement rate: Interaction before close
- Time to close: How long before dismissing
What to Track
- Popup views
- Form focus
- Submission attempts
- Successful submissions
- Close button clicks
- Outside clicks
- Escape key
Benchmarks
- Email popup: 2-5% conversion typical
- Exit intent: 3-10% conversion
- Click-triggered: Higher (10%+, self-selected)
Output Format
Popup Design
- Type: Email capture, lead magnet, etc.
- Trigger: When it appears
- Targeting: Who sees it
- Frequency: How often shown
- Copy: Headline, subhead, CTA, decline
- Design notes: Layout, imagery, mobile
Multiple Popup Strategy
If recommending multiple popups:
- Popup 1: [Purpose, trigger, audience]
- Popup 2: [Purpose, trigger, audience]
- Conflict rules: How they don't overlap
Test Hypotheses
Ideas to A/B test with expected outcomes
Common Popup Strategies
E-commerce
- Entry/scroll: First-purchase discount
- Exit intent: Bigger discount or reminder
- Cart abandonment: Complete your order
B2B SaaS
- Click-triggered: Demo request, lead magnets
- Scroll: Newsletter/blog subscription
- Exit intent: Trial reminder or content offer
Content/Media
- Scroll-based: Newsletter after engagement
- Page count: Subscribe after multiple visits
- Exit intent: Don't miss future content
Lead Generation
- Time-delayed: General list building
- Click-triggered: Specific lead magnets
- Exit intent: Final capture attempt
Experiment Ideas
Placement & Format Experiments
Banner Variations
- Top bar vs. banner below header
- Sticky banner vs. static banner
- Full-width vs. contained banner
- Banner with countdown timer vs. without
Popup Formats
- Center modal vs. slide-in from corner
- Full-screen overlay vs. smaller modal
- Bottom bar vs. corner popup
- Top announcements vs. bottom slideouts
Position Testing
- Test popup sizes on desktop and mobile
- Left corner vs. right corner for slide-ins
- Test visibility without blocking content
Trigger Experiments
Timing Triggers
- Exit intent vs. 30-second delay vs. 50% scroll depth
- Test optimal time delay (10s vs. 30s vs. 60s)
- Test scroll depth percentage (25% vs. 50% vs. 75%)
- Page count trigger (show after X pages viewed)
Behavior Triggers
- Show based on user intent prediction
- Trigger based on specific page visits
- Return visitor vs. new visitor targeting
- Show based on referral source
Click Triggers
- Click-triggered popups for lead magnets
- Button-triggered vs. link-triggered modals
- Test in-content triggers vs. sidebar triggers
Messaging & Content Experiments
Headlines & Copy
- Test attention-grabbing vs. informational headlines
- "Limited-time offer" vs. "New feature alert" messaging
- Urgency-focused copy vs. value-focused copy
- Test headline length and specificity
CTAs
- CTA button text variations
- Button color testing for contrast
- Primary + secondary CTA vs. single CTA
- Test decline text (friendly vs. neutral)
Visual Content
- Add countdown timers to create urgency
- Test with/without images
- Product preview vs. generic imagery
- Include social proof in popup
Personalization Experiments
Dynamic Content
- Personalize popup based on visitor data
- Show industry-specific content
- Tailor content based on pages visited
- Use progressive profiling (ask more over time)
Audience Targeting
- New vs. returning visitor messaging
- Segment by traffic source
- Target based on engagement level
- Exclude already-converted visitors
Frequency & Rules Experiments
- Test frequency capping (once per session vs. once per week)
- Cool-down period after dismissal
- Test different dismiss behaviors
- Show escalating offers over multiple visits
Questions to Ask
If you need more context:
- What's the primary goal for this popup?
- What's your current popup performance (if any)?
- What traffic sources are you optimizing for?
- What incentive can you offer?
- Are there compliance requirements (GDPR, etc.)?
- Mobile vs. desktop traffic split?
Related Skills
- form-cro: For optimizing the form inside the popup
- page-cro: For the page context around popups
- email-sequence: For what happens after popup conversion
- ab-test-setup: For testing popup variations