ポップアップの表示タイミング最適化ガイド｜スクロール率・滞在時間・離脱検知の設計パターン【データ付き】

「ポップアップの表示タイミング、なんとなく設定していませんか？」――同じデザイン・同じオファーでも、表示タイミングを変えるだけでCVRが2倍以上変わるケースは珍しくありません。しかし、最適なタイミングの設計方法をまとめた情報は意外と少ないのが現状です。本記事では、スクロール率・滞在時間・離脱検知など6つのトリガーの仕組みと使い分け、業種別の設計パターン、JavaScript・GTMでの実装方法、さらにA/Bテスト設計まで、データと実例を交えて完全解説します。この記事を読めば、あなたのサイトに最適なポップアップ表示タイミングを見つけ、CVRを最大化できるはずです。

※ツール選びから始めたい方は「離脱防止ポップアップツール21選比較【2026年最新】」をご覧ください。

なぜ表示タイミングがポップアップの成否を決めるのか

タイミングがCVRに与える影響（データで検証）

結論として、ポップアップは「何を表示するか」と同じくらい「いつ表示するか」がCVRを左右します。まったく同じデザイン・同じオファー内容のポップアップでも、表示タイミングを変えるだけでCVRに数倍の差が出ることが、多くの検証データで明らかになっています。

以下の表は、あるECサイトで同一のクーポンポップアップを異なるタイミングで表示した際のCVR比較データです。

このデータからわかるとおり、即時表示のCVR 0.8%に対して離脱検知時のCVRは3.4%と、約4.3倍もの差があります。即時表示はユーザーがまだ何も読んでいない段階で表示されるため、「邪魔なもの」として閉じられやすい傾向にあります。一方で、スクロール率や離脱検知をトリガーにした表示は、ユーザーの関心や行動フェーズに合致しているため、受け入れられやすくなります。

Sprocket社の検証事例でも、同一シナリオのポップアップで遅延秒数を20秒から10秒に変更しただけで、CTRが1.5倍以上に向上したケースが報告されています（参考：Sprocket社ブログ）。わずか数秒の違いが成果を大きく変えるという事実は、タイミング最適化の重要性を端的に示しています。

Googleポリシーとの関係（モバイルインタースティシャル規制）

結論として、ポップアップの表示タイミングはCVRだけでなく、SEO評価にも影響を及ぼします。Googleは2017年1月からモバイル検索において「煩わしいインタースティシャル」を使用しているページの検索順位を下げるアルゴリズムを導入しています。

Googleが検索順位に悪影響を与えると明示しているポップアップの条件は以下のとおりです。

ここで重要なポイントは、離脱時に表示されるポップアップはペナルティの対象外であるという点です。Googleのポリシーが問題視しているのは「コンテンツへのアクセスを妨げる表示」であり、ユーザーがすでにコンテンツを読み終えて離脱しようとしているタイミングでの表示は、コンテンツへのアクセスを妨害するものではないと解釈されています（参考：Google検索セントラル）。

つまり、SEOの観点からも「即時表示のフルスクリーンポップアップ」は避け、「スクロール後」や「離脱検知時」にトリガーを設定する方が安全です。表示タイミングの最適化は、CVR向上とSEOリスク回避の両方を同時に実現できる施策なのです。

ユーザー心理から見る「受け入れられるタイミング」とは

結論として、ポップアップが受け入れられるかどうかは、ユーザーの心理フェーズと表示タイミングの一致度で決まります。ユーザーがWebサイトを訪問してから離脱するまでの心理は「認知→興味→検討→離脱」の4段階に分けられ、各フェーズごとに有効なトリガーが異なります。

認知フェーズ（到着直後）はユーザーがまだページの内容を理解しておらず、ポップアップが表示されると「読みたいのに邪魔された」という不快感に直結します。ある米国ECサイトの調査では、ページ訪問直後のポップアップに対して73%のユーザーが否定的な印象を持つと回答しています。

一方で、検討フェーズや離脱フェーズではユーザーの心理が「迷い」や「比較」に移っているため、背中を押すようなポップアップが歓迎される傾向にあります。コンテンツを十分に読んだあとの「もう一つだけ提案させてください」という声かけは、ユーザーにとって有益な情報として受け入れられやすいのです。

ポップアップの設計では、「自社のユーザーが今どのフェーズにいるか」を意識し、そのフェーズに合ったトリガーとメッセージを設定することが成功のカギです。

6つの表示トリガーの仕組みと使い分け

トリガー① ─ 滞在時間ベース（Time-based）

結論として、滞在時間ベースのトリガーは最もシンプルに実装でき、初めてポップアップを導入するサイトに適した方法です。「ページを開いてから○秒後に表示する」というルールで動作し、JavaScriptのsetTimeout関数とイベントリスナーの組み合わせで実現できます。

仕組みはシンプルで、ユーザーがページを読み込んだ時点からタイマーがスタートし、指定した秒数が経過するとポップアップが表示されます。設定が容易で、どのCMSやWebサイトでも導入しやすい点がメリットです。

ただし、滞在時間だけではユーザーがページを実際に読んでいるのか、別のタブを開いて放置しているのかを正確に判断できない点がデメリットです。そのため、後述するスクロール率トリガーとの組み合わせが推奨されます。

業種別の推奨設定値は以下のとおりです。

Sprocket社のECサイト事例では、カートページの中央値滞在時間が20秒であったため、当初の10秒・20秒設定では効果が出ず、5秒に変更したところ離脱防止効果が現れました。このように、滞在時間トリガーの最適値はページの平均滞在時間に大きく依存するため、GA4などでページ別の滞在時間データを事前に確認し、中央値の30〜50%を目安に設定するのがベストプラクティスです。

トリガー② ─ スクロール率ベース（Scroll-depth）

結論として、スクロール率トリガーはユーザーの閲覧度合いを直接的に反映するため、6つのトリガーの中で最もバランスが良い手法です。「ページ全体のうち何%までスクロールしたか」を基準にポップアップの表示を制御します。

仕組みとしては、window.scrollY（現在のスクロール位置）をdocument.documentElement.scrollHeight（ページ全体の高さ）で割ることでスクロール率を算出します。ユーザーがどこまでコンテンツを読み進めたかをリアルタイムで把握できるため、滞在時間トリガーよりも「関心度の高さ」を正確に測定できる点が強みです。

ページ種別ごとの推奨スクロール率と、実測データの比較を以下にまとめます。

このデータが示すように、スクロール率が深くなるほどCTR・CVRは向上します。ただし、表示回数は当然減少するため、「表示回数 × CVR」のトータルCV数で最適値を判断する必要があります。

推奨設定値の目安は、記事型コンテンツでは50〜70%、商品一覧型ページでは30〜50%です。記事型の場合、70%到達はユーザーが記事の大部分を読み終えた段階であり、「この情報が役に立ったなら、さらに詳しい資料もあります」という提案が自然に受け入れられるタイミングです。

トリガー③ ─ 離脱検知（Exit-intent）

結論として、離脱検知トリガーはCVRが最も高くなる傾向にあり、離脱防止施策の中核となる手法です。ユーザーがページを離れようとする「意図」を検知してポップアップを表示するため、コンテンツ閲覧を妨げるリスクが最も低い点が特徴です。

PCとモバイルでは離脱検知の仕組みが大きく異なります。

PCの場合、マウスカーソルの動きを監視し、mouseleaveイベントとclientY < 0（カーソルがブラウザウィンドウの上部を超えた）の条件を組み合わせることで、ユーザーがタブを閉じようとしている、または別のサイトに移動しようとしていることを検知します。PCでの離脱検知は精度が高く、誤検知が少ないため安定した成果が得られます。

モバイルの場合、マウスカーソルが存在しないため、以下のような代替手法で離脱の兆候を捉えます。

モバイルの離脱検知はPCほど精度が高くないため、複数の手法を組み合わせて精度を補うか、スクロール率トリガーとの併用が推奨されます。なお、Googleのインタースティシャルポリシーにおいて、離脱時のポップアップ表示はペナルティ対象外とされているため、モバイルでも離脱検知トリガーは安心して活用できます。

トリガー④ ─ ページ遷移回数ベース（Page-view count）

結論として、ページ遷移回数トリガーはユーザーの「サイトへの興味の深さ」を判定する手法であり、初回訪問者への不要な表示を避けたい場合に有効です。sessionStorageを使用してセッション内のPV数をカウントし、指定した閲覧ページ数に達した時点でポップアップを表示する仕組みです。

推奨設定は「2〜3ページ閲覧後に表示」です。1ページ目で離脱するユーザーはサイトへの関心が低い可能性が高いため、ポップアップを表示しても効果は限定的です。2ページ以上閲覧しているユーザーは、サイトの複数コンテンツに興味を持っている証拠であり、メルマガ登録や資料請求などの提案を受け入れやすい状態にあります。

この手法のメリットは、初回訪問の直帰ユーザーにポップアップを表示せずに済むため、ユーザー体験を損なうリスクが低い点です。メディア・ブログサイトでは特に有効で、「2ページ目以降の訪問で初めてメルマガ登録ポップアップを表示する」という設計パターンは、多くのメディアサイトで実績が報告されています。

デメリットとしては、セッション内のPV数しかカウントできないため、再訪問ユーザーの前回セッションの行動を考慮できない点があります。より精緻な判定を行う場合は、localStorageやCookieを活用してセッションをまたいだ累計PV数をトラッキングする方法もあります。

トリガー⑤ ─ タブ非アクティブ検知（Visibility change）

結論として、タブ非アクティブ検知は「他サイトとの比較検討中のユーザー」に再エンゲージするためのニッチながら効果的なトリガーです。ブラウザのvisibilitychangeイベントを利用し、ユーザーが別のタブに移動してから自サイトのタブに戻ってきたタイミングでポップアップを表示します。

活用場面としては、ECサイトで価格を比較検討しているユーザーや、BtoBサイトで複数のサービスを比較しているユーザーへのアプローチが考えられます。「他社と比較中ですか？当社だけの特典をご確認ください」「迷っている方へ：無料相談を受け付けています」といったメッセージは、比較検討フェーズのユーザーに対して高い訴求力を持ちます。

実装は非常にシンプルで、document.addEventListener('visibilitychange', callback)の1行で検知が可能です。ただし、ユーザーが単に別のタブでメールを確認していただけの場合にも発火してしまうため、「タブ非アクティブ時間が30秒以上」「非アクティブ後に戻ってきた際にのみ1回だけ表示」などの条件を加えることが推奨されます。

トリガー⑥ ─ AI行動スコアリング（複合トリガー）

結論として、AI行動スコアリングは2025年以降急速に普及している最先端のトリガー方式であり、単一のトリガーでは実現できない高精度なタイミング判定を可能にします。マウスの軌跡、クリック頻度、スクロール速度、滞在時間などの複数の行動シグナルをMLモデルで統合的に分析し、「このユーザーは今コンバージョンしやすい状態か」をスコアリングした上でポップアップを表示します。

従来の単一トリガーでは「スクロール70%に到達したがすでに離脱意図がある」「滞在時間は長いがページを放置しているだけ」といった誤判定が避けられませんでした。AI行動スコアリングは複数の行動データを掛け合わせて総合的に判断するため、より適切なタイミングでポップアップを出し分けられます。

この方式に対応している主なツールは以下のとおりです。

参考：KARTE公式サイト ／ AiDeal（BOXIL記事） ／ DataPush公式サイト

AI行動スコアリングは導入コストが高い場合もありますが、手動でのA/Bテスト工数を大幅に削減できるため、長期的に見ると費用対効果が高い手法です。まずは無料プランのあるツールで試し、効果が実証できてから本格導入を検討するのがよいでしょう。

タイミングの最適値をデータで見つける方法は「ポップアップA/Bテスト完全ガイド」で詳しく解説しています。

【業種別】最適な表示タイミング設計パターン

ECサイト（商品ページ・カートページ・決済ページ）

結論として、ECサイトでは「ページ種別ごとに異なるトリガーを設定する」ことが最も効果的です。商品ページ、カートページ、決済ページではユーザーの心理状態が大きく異なるため、一律のタイミング設定では最大の効果を引き出せません。

特にカートページでの離脱検知は、ECサイトにおけるポップアップ施策の中で最も効果が大きいパターンです。カゴ落ち率は世界平均で約70%とされており（出典：Baymard Institute）、購入意欲の高いユーザーを最後の接点で引き留める価値は非常に大きいといえます。

商品一覧ページでは、スクロール50%と滞在15秒の複合条件がおすすめです。単一トリガーよりも「実際に商品を見比べている」ユーザーに絞り込めるため、ポップアップの表示精度が向上します。

BtoBサイト（サービスページ・料金ページ・ブログ記事）

結論として、BtoBサイトでは「ユーザーの検討度合い」に応じたトリガー設定が重要であり、特に料金ページと記事ページでは効果的なトリガーが大きく異なります。

BtoBサイトの特徴は、購買サイクルが長く、初回訪問で即座にコンバージョン（問い合わせ・資料請求）に至るユーザーが少ない点です。そのため、ポップアップの目的は「リードの獲得」と「次回接点の確保」が中心となります。

料金ページでの離脱検知は、BtoBサイトにおいて最も高い効果が期待できるパターンです。料金ページを見ているユーザーは、すでにサービスへの関心が高く、具体的な検討段階に入っています。このタイミングで「無料相談」を提案すると、CVRが+40%改善した事例も報告されています。

BtoBサイトにおけるポップアップ設計の詳細は、関連記事「BtoB離脱ポップアップでCVR改善｜設計から運用まで完全ガイド」でも詳しく解説しています。

メディア・ブログサイト

結論として、メディア・ブログサイトでは「読了を推定するスクロール率」と「リピーター判定」の2つを軸にタイミングを設計するのが最も効果的です。

メディアサイトの主なコンバージョンはメルマガ登録やLINE友だち追加などの「リード獲得」です。広告ではなくコンテンツの質で集客しているため、ポップアップがコンテンツ体験を阻害しないよう、特に慎重な設計が必要になります。

推奨パターンは以下の2つです。

1つ目は、スクロール80%で記事読了を推定し、メルマガ登録ポップアップを表示するパターンです。記事の80%を読んだユーザーは、そのテーマに強い関心を持っている可能性が高く、「今後も同じテーマの情報を受け取りませんか？」という提案は自然に受け入れられます。

2つ目は、初回訪問ではポップアップを表示せず、2ページ目以降の訪問で表示するパターンです。初回訪問ユーザーはまだサイトへの信頼関係が構築されていないため、ポップアップが出ると「このサイトは広告ばかりだ」と感じて離脱されるリスクがあります。2ページ以上閲覧しているユーザーはサイトのファンになりかけている段階であり、登録を促す効果が高まります。

メディアサイトでは「ユーザー体験を最優先にする」姿勢がコンテンツの信頼性に直結するため、控えめな表示頻度を維持することが長期的なメディア価値の向上につながります。

不動産・人材ポータルサイト

結論として、不動産・人材ポータルサイトでは「物件/求人詳細ページ」と「一覧ページ」で異なるトリガー設計が求められ、ユーザーの検索行動特性に合わせたタイミング設定がCVR向上のカギとなります。

不動産や人材ポータルサイトは、ユーザーが複数の物件や求人を比較検討する「回遊型」の行動パターンが特徴です。この行動特性に最適化したポップアップ設計が重要です。

詳細ページでの「滞在30秒 + スクロール60%」の複合条件は、ユーザーが物件や求人情報を本気で検討している段階を捉えるのに最適です。一方、一覧ページでは離脱検知で「条件保存 + メール通知」を訴求し、ユーザーとの接点を確保することが、コンバージョンへの重要なステップとなります。

不動産・人材サイトの表示タイミング設計をさらに深掘りした内容は「不動産・人材業界向けポップアップ活用ガイド」をご覧ください。

表示タイミングの実装方法（コード付き）

JavaScript基本実装（バニラJS・コピペOK）

結論として、ポップアップの表示タイミング制御は、基本的なJavaScriptの知識があれば、外部ツールなしでも実装可能です。以下に、3つの主要トリガーのコード例を掲載します。

滞在時間トリガー（30秒後に表示）

// 滞在時間トリガー：ページ読み込みから30秒後にポップアップを表示
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    // ポップアップ要素を表示
    document.getElementById('popup').style.display = 'block';
    // 背景のオーバーレイを表示
    document.getElementById('overlay').style.display = 'block';
  }, 30000); // 30000ミリ秒 = 30秒
});

スクロール率トリガー（70%到達で表示）

// スクロール率トリガー：ページの70%までスクロールしたらポップアップを表示
let popupShown = false; // 1回だけ表示するためのフラグ

window.addEventListener('scroll', function() {
  if (popupShown) return; // すでに表示済みなら処理を中断

  // 現在のスクロール率を計算
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;

  // 70%に到達したらポップアップを表示
  if (scrollPercent >= 70) {
    document.getElementById('popup').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
    popupShown = true; // フラグを立てて再表示を防止
  }
});

離脱検知トリガー（PC向け）

// 離脱検知トリガー：マウスがブラウザ上部に移動したらポップアップを表示
let exitPopupShown = false;

document.addEventListener('mouseleave', function(e) {
  // カーソルがブラウザウィンドウの上部から出た場合のみ発火
  if (e.clientY < 0 && !exitPopupShown) {
    document.getElementById('popup').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
    exitPopupShown = true;
  }
});

各コードは、HTMLにid="popup"とid="overlay"を持つ要素を用意すれば、そのままコピー&ペーストで動作します。ポップアップのHTML/CSSの作り方については、関連記事「HTML・CSS・JavaScriptでポップアップを作る方法」で詳しく解説しています。

GTM（Googleタグマネージャー）での設定方法

結論として、GTMを使えばコードを直接編集せずにポップアップの表示トリガーを設定でき、GA4との連動によって効果測定まで一気通貫で管理できます。

GTMでの設定手順は以下のとおりです。

スクロール深度トリガーの作成手順：

まず、GTMの管理画面で「トリガー」→「新規」をクリックし、トリガータイプで「スクロール深度」を選択します。次に、「縦方向スクロール深度」にチェックを入れ、「割合」を選択して「70」と入力します。発火条件として対象ページのURLを指定し、保存すればスクロール深度トリガーの完成です。

タイマートリガー（滞在時間）の作成手順：

トリガータイプで「タイマー」を選択し、間隔を「30000」（ミリ秒）、制限を「1」（1回だけ発火）に設定します。このトリガーで発火するタグにポップアップ表示用のカスタムHTMLを設定すれば、30秒後にポップアップを表示できます。

GA4イベントとの連動：

ポップアップの効果を正しく計測するために、ポップアップが表示された時点でGA4にカスタムイベントを送信する設定も合わせて行いましょう。GTMで新しいタグを作成し、GA4イベントタグとしてpopup_viewというイベント名を設定します。イベントパラメータにtrigger_type（例：scroll_70、timer_30s、exit_intentなど）を付与すれば、どのトリガーで表示されたポップアップが最もCVRが高いかをGA4のレポートで分析できます。

GA4でのポップアップ計測設定の詳細は、関連記事「GA4でポップアップの効果を正しく計測する方法」をご参照ください。

DataPushでのタイミング設定手順

結論として、DataPushを使えばコードの記述やGTMの設定なしで、管理画面上の操作だけでポップアップの表示タイミングを設定・変更できます。専門的な技術知識がなくても、マーケティング担当者自身で運用を完結できる点が大きなメリットです。

DataPushでの設定フローは以下の5ステップです。

DataPushの複合条件設定は、AND条件とOR条件を柔軟に組み合わせられるため、業種やページ特性に応じた高度なタイミング制御が可能です。たとえば「スクロール率60% AND 滞在20秒」という複合条件を設定すれば、「ページを読み進めている かつ 一定時間滞在している」という、より確度の高いユーザーだけにポップアップを表示できます。

DataPushは無料プランから利用開始でき、タグを1行設置するだけで導入が完了します。まずは無料プランで表示タイミングの効果を検証してみることをおすすめします。

→ DataPush無料プランの詳細はこちら：https://data-push.jp/

タイミング最適化のためのA/Bテスト設計

テストすべきタイミングの優先順位

結論として、A/Bテストの優先順位は「最もCVRへのインパクトが大きいトリガーの比較」から始めるべきです。限られたリソースで最大の成果を得るためには、テスト項目の優先順位を正しく設定することが重要です。

推奨するテスト優先順位は以下のとおりです。

優先順位1：離脱検知 vs スクロール率の比較

最初のテストは、離脱検知トリガーとスクロール率トリガーの比較から始めましょう。この2つはCVRへの影響が最も大きいトリガーであり、どちらが自社サイトに適しているかを最初に見極めることで、以降のテスト方針が定まります。

優先順位2：表示秒数の比較（滞在時間トリガー内での最適値検証）

トリガーの種類が確定したら、次は具体的な数値の最適化です。たとえば滞在時間トリガーを採用する場合、15秒・30秒・60秒のどの秒数が最も成果が出るかを検証します。

優先順位3：複合条件の検証

単一トリガーの最適値が判明したら、複合条件（例：スクロール50% AND 滞在15秒）を追加テストし、さらにCVRが向上するかを確認します。

テスト結果の判断基準と改善サイクル

結論として、A/Bテストは「統計的に有意な差が確認できるサンプルサイズ」を確保した上で、明確な判断基準に基づいて勝ちパターンを決定する必要があります。感覚的な判断や少ないデータでの結論は、誤った意思決定につながります。

テストの改善サイクルは「仮説設定 → テスト実行 → データ収集 → 分析 → 次の仮説」の5ステップです。1回のテスト期間は最低2週間を確保し、曜日や時間帯による変動を吸収できるようにしましょう。

ポップアップのA/Bテストの詳細な設計方法については、関連記事「ポップアップA/Bテスト完全ガイド｜設計・実行・分析の全手順【CVR改善事例付き】」で具体的な手順とテンプレートを公開しています。

よくある設定ミスとトラブルシューティング

ミス1 ─ モバイルで即時フルスクリーン表示（Googleペナルティリスク）

結論として、モバイルでの即時フルスクリーンポップアップは、Googleの検索順位に悪影響を及ぼす可能性が高いため、絶対に避けるべき設定ミスです。

Googleは、モバイル検索結果からアクセスした際にコンテンツを覆い隠すインタースティシャルを表示するページの評価を下げると明言しています。対策としては、モバイルでは画面の30%以下を占めるスライドインバナーや、ページ下部の小さなフローティングバナーを使用し、表示タイミングもスクロール率50%以上または離脱検知時に設定することをおすすめします。

ミス2 ─ スクロール率の計算がiframe内で正しく動作しない

結論として、ページ内にiframeが含まれている場合、スクロール率の計算がページ全体の高さを正しく取得できず、意図したタイミングでポップアップが表示されない不具合が発生します。

原因は、document.documentElement.scrollHeightがiframeの内部コンテンツの高さを含まない場合があるためです。解決策としては、iframeのコンテンツ高さを動的に取得して加算するか、IntersectionObserver APIを使用してスクロール率ではなく「特定の要素がビューポートに入ったかどうか」で発火条件を定義する方法が有効です。

// IntersectionObserverを使った代替実装
const target = document.getElementById('trigger-point'); // 表示したい位置の要素
const observer = new IntersectionObserver(function(entries) {
  if (entries[0].isIntersecting) {
    document.getElementById('popup').style.display = 'block';
    observer.disconnect(); // 1回だけ表示
  }
}, { threshold: 0.5 });
observer.observe(target);

ミス3 ─ 離脱検知がSPAサイトで発火しない

結論として、React・Vue.js・Next.jsなどのSPA（シングルページアプリケーション）では、従来のmouseleaveイベントだけでは離脱検知が正しく機能しないケースがあります。

SPAではページ遷移がブラウザの通常のナビゲーションではなく、JavaScriptによるDOM操作で行われます。そのため、beforeunloadイベントが発火しない、あるいはルーティング変更時にイベントリスナーがリセットされることがあります。解決策としては、SPAのルーターのフック（Vue RouterのbeforeRouteLeaveやReact RouterのuseBeforeUnload）にポップアップのトリガーを組み込む方法が推奨されます。

ミス4 ─ Cookie/localStorage未設定で同一ユーザーに何度も表示

結論として、表示制御の状態管理をCookieまたはlocalStorageで行わないと、同一ユーザーに対してページ遷移のたびにポップアップが表示され、ユーザー体験が著しく悪化します。

解決策として、ポップアップを閉じた際にlocalStorageにフラグを保存し、次回以降はフラグの有無をチェックしてから表示判定を行う実装を必ず加えてください。

// 表示前にlocalStorageのフラグを確認
if (!localStorage.getItem('popup_closed')) {
  // ポップアップを表示する処理
  document.getElementById('popup').style.display = 'block';
}

// ポップアップを閉じた際にフラグを保存（24時間有効）
document.getElementById('close-btn').addEventListener('click', function() {
  localStorage.setItem('popup_closed', Date.now());
  document.getElementById('popup').style.display = 'none';
});

推奨は1セッションあたり最大1回の表示、同一ユーザーへの再表示間隔は24時間以上です。

ミス5 ─ ポップアップ表示がCLS（Cumulative Layout Shift）を悪化させる

結論として、ポップアップの表示によってページのレイアウトが予期せず移動すると、CLS（Cumulative Layout Shift）のスコアが悪化し、Core Web Vitalsの評価が下がるリスクがあります。CLSの許容値は0.1未満であり、これを超えると「不十分」と判定されます。

ポップアップがCLSを悪化させる主なパターンは、ポップアップの表示に伴ってメインコンテンツが押し下げられたり、位置がずれたりするケースです。解決策としては、ポップアップをposition: fixedのオーバーレイとして表示し、既存のDOM構造に影響を与えない設計にすることが最も効果的です。

/* CLS対策：固定位置のオーバーレイでポップアップを表示 */
.popup-overlay {
  position: fixed; /* ページのレイアウトに影響を与えない */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

ポップアップの表示がCLSに影響を与えていないかは、Google PageSpeed InsightsやChrome DevToolsのPerformanceパネルで確認できます。導入後に必ずCLSスコアをチェックする習慣をつけましょう。

関連記事として「嫌われるポップアップの特徴とUI設計の改善策」でも、ユーザー体験を損なわないポップアップ設計のポイントを解説しています。

まとめ｜表示タイミング最適化チェックリスト

ポップアップの成果は「何を表示するか」だけでなく「いつ表示するか」で大きく変わります。本記事で解説した内容を、実務で活用できるチェックリストとしてまとめました。自社サイトのポップアップ設定を見直す際に、ぜひご活用ください。

表示タイミングの最適化は、一度設定して終わりではなく、データに基づいて継続的に改善していくプロセスです。まずはこのチェックリストで現状を確認し、改善の余地がある項目から着手してみてください。

DataPushなら、管理画面からノーコードで表示タイミングの設定・変更・A/Bテストが可能です。無料プランからお試しいただけますので、まずは自社サイトで最適なタイミングを検証してみてください。

→ DataPushで最適なタイミングを無料テスト：https://data-push.jp/

よくある質問（FAQ）

離脱防止ポップアップを無料で試してみませんか？

DataPushなら、最短5分でポップアップを設置。
GA4連携・A/Bテスト・表示タイミング最適化まで無料プランで利用可能です。

6種類のトリガーを自由に設定できるDataPushを試す →

引用元・参考URL一覧

本記事の作成にあたり、参考にした情報源は以下のとおりです。

Sprocket社ブログ（ポップアップ遅延表示のA/Bテスト検証事例）

Google検索セントラル（煩わしいインタースティシャルやダイアログを避ける）

Google検索セントラルブログ（ユーザーがコンテンツに簡単にアクセスできるようにするために）

Baymard Institute（カゴ落ち率調査データ）

web.dev（Cumulative Layout Shiftの最適化）

DataPush公式サイト

関連記事

本記事と合わせて読むことで、ポップアップ施策全体の設計・実装・運用・計測を体系的に理解できます。

• 嫌われるポップアップの特徴とUI設計の改善策 ─ ユーザーに嫌われないポップアップのUI設計パターンを解説
• 離脱防止ポップアップ運用マニュアル ─ 表示条件の設定から運用改善までの全体フロー
• HTML・CSS・JavaScriptでポップアップを作る方法 ─ ゼロからポップアップを自作する手順
• GA4でポップアップの効果を正しく計測する方法 ─ GTMとGA4の連携設定からレポーティングまで
• ポップアップA/Bテスト完全ガイド｜設計・実行・分析の全手順 ─ テスト設計テンプレートとCVR改善事例