離脱防止ポップアップの仕組みと出し方|PCとスマホで「帰りそう」の判定はこう違う

商品ページを見ていたお客さまが、何も買わずにタブを閉じようとしている。その瞬間に一度だけ出すのが、離脱防止ポップアップ(離脱時ポップアップ)です。 読んでいる最中の人を邪魔しないので、うまく使えば最も控えめなポップアップになります。一方で、「帰りそう」の判定はPCとスマホでまったく違い、 やり方を間違えると戻るボタンが効かないような迷惑な作りにもなります。この記事では、判定の仕組み、使ってはいけない方法、出す相手とタイミングの決め方、 marketingLABOでの設定手順と効果の測り方を順に説明します。

更新

離脱防止ポップアップとは

ポップアップの多くは「ページを開いて10秒後」「ページの半分までスクロールしたら」のように、時間や位置をきっかけに表示されます。離脱防止ポップアップは、きっかけが違います。訪問者がページを離れそうな動きをしたときに表示します。

このタイミングの良さが一番の利点です。まだ商品説明を読んでいる人に割り込む必要はありません。すでに帰ろうとしている人にとって、短いお知らせを一度見るだけなら負担は小さく、送料や返品の不安に答えるメッセージや、初回限定の特典があれば、何人かは留まってくれます。

ただし、「帰りそう」はあくまで推測です。ブラウザには「この人は帰ります」というイベントはなく、マウスやスクロールの動きから推し量っているだけです。帰るつもりのなかった人にも表示されることがあるので、何を・誰に・何回出すかの設計が、判定方法と同じくらい大切になります。

PCとスマホで「帰りそう」の判定はこう違う

PCとスマホでは操作の道具が違うため、判定に使える手がかりも違います。marketingLABOでは、2026年10月から次のように判定しています。

PC(マウスで操作する端末)スマホ・タブレット(指で操作する端末)
手がかりマウスのカーソルが、ブラウザの表示領域の上端から外へ出たことページをある程度下まで読み進めたあとで、勢いよく上へスクロールして戻したこと
想定している場面タブを切り替える、閉じるボタンやアドレスバーへカーソルを動かす読み終えて上部のメニューやアドレスバーへ戻ろうとしている
精度比較的はっきりした手がかり。タブやアドレスバーはたいてい画面の上にあるためあくまで目安。興味があって読み返すために上へ戻る人も含まれる
表示しない場面左右や下からカーソルが出たときページを開いた直後、ゆっくり上へ戻したとき、少しだけ戻したとき

PCの判定は、マウスがページの外へ出たときにブラウザが発生させるmouseoutというイベントを使います。MDNの説明では、このイベントは「カーソルを移動させ、要素やその子の中からカーソルが出たときに」発生します。そのうち、カーソルが画面の上端から外へ出たものだけを「帰りそう」とみなします。

スマホかどうかは、主な入力が指かどうかで見分けています。CSSのpointerという仕組みで、MDNはcoarseを「指やタッチパネルのように、正確性が限定されています」と説明しています。指で操作する端末にはカーソルがないため、代わりにスクロールの向きと速さを見ます。ページを開いてすぐの上下の動きや、ゆっくり読み返している動きでは表示しません。

スマホの判定は、PCより「誤って出る」ことが多くなります。興味を持って前の段落を読み返したい人にも出る可能性があるので、スマホでは小さめの表示にする、あるいはスマホでは離脱時の表示を使わずスクロールや滞在時間をきっかけにする、という選び方も十分ありです。

戻るボタンを横取りする方式を使わない理由

スマホで「帰りそう」を捉える方法として、ブラウザの履歴をこっそり1つ増やしておき、戻るボタンを押した人に元のページへ戻す代わりにポップアップを見せる、というやり方があります。確実に捉えられるように見えますが、marketingLABOはこの方式を使っていません(2026年10月に、履歴を操作する方式をやめました)。

理由は、Googleのスパムポリシーに当たるおそれがあるからです。Google検索セントラルの「Googleウェブ検索のスパムに関するポリシー」には、「悪意のある行為」の項目に次の説明があります。

「[戻る] ボタンのハイジャックとは、サイトでブラウザの閲覧履歴やその他の機能を操作してユーザーのブラウザ ナビゲーションを妨害し、ユーザーが [戻る] ボタンを使用して元のページにすぐに戻れないようにすることです。」(Google検索セントラル「Googleウェブ検索のスパムに関するポリシー」より)

お客さまの立場で考えても、戻るボタンを押して戻れないサイトは信用を失います。検索結果から来た人ほど、すぐに検索結果へ戻って別のお店と比べたいはずです。離脱防止ポップアップの良さは「邪魔をしない」ことなので、移動そのものを止める方式は目的とも合いません。ほかのツールを使う場合も、戻るボタンを押したときにポップアップが出る作りになっていないか、一度確かめておくと安心です。

離脱時の表示が向いている場面・向いていない場面

迷ったときは「このお知らせを、読んでいる最中の人に出しても役に立つか」を考えます。役に立つなら、離脱時ではなくスクロールや滞在時間で出すか、ページの中に書きます。読んでいる最中には邪魔になるが、帰る直前なら意味がある、というものが離脱時に向いています。

場面離脱時の表示は理由
初めての人が商品ページから帰ろうとしている向いている気になる商品はあったが決めきれなかった人。初回特典やメール登録で次につなげられる
カートページから帰ろうとしている向いている(安心させる内容で)送料・返品・支払い方法の不安に答えるだけで十分なことがある
読みもの・特集ページから帰ろうとしている場合によるメルマガ登録は合うが、強い値引きは合わないことが多い
購入完了ページ向いていない買ったばかりの人に「待って」は不自然で、次回から値引き待ちを招く
広告から、決まった特典を目当てに来た人たいてい向いていない広告で約束した特典は、最初から見せるほうが誠実

帰ろうとしている人に出す内容

離脱時のポップアップは、一瞬で読まれて判断されます。内容は1つに絞り、すぐ受け取れるものにします。

  1. 初回限定のクーポン。最もよく使われる内容です。対象商品・最低金額・有効期限を短い言葉で書きます。全ページ・全員に出し続けると、常連のお客さまがクーポン待ちになるので、初めての人に絞ります。
  2. 送料無料の条件。「○円以上で送料無料」を知らずに帰る人もいます。カート画面と同じ金額・同じ言い方で書きます。
  3. メール登録。今買ってもらうのではなく、次に連絡してよいかを聞きます。比べている最中の人に向いています(メール登録ポップアップの作り方で詳しく説明しています)。
  4. 不安への答え。返品の条件、届く日数、問い合わせ先。カートページではこれが値引きより効くことがあります。
  5. ほかの入り口。新着商品やランキングなど、探しものが見つからなかった人向けの案内です。

カウントダウンを付けるなら、本当の締め切りがあるキャンペーンにだけ使います。開くたびに最初から始まるタイマーは、お店への信頼を損ないます。

文言の組み立て方

部分役割例
見出し得られるものを短く初めての方は送料無料
補足の1行条件や不安への答え全商品が対象です。到着から7日以内なら返品できます
ボタン押すと何が起きるかクーポンを受け取る/買い物を続ける
断る手段はっきり見える閉じるボタン右上の「×」

上の例の条件は架空のものです。実際の条件に合わせて書き換えてください。ポップアップに書いたことと、カートや注文確認で表示されることが食い違わないようにします。断るボタンに「いいえ、定価で買います」のような、断る人を責める言い方を使うのは避けましょう。

出す相手を絞る

離脱時という「いつ」が決まったら、次は「誰に」を決めます。品質の大部分はここで決まります。

  1. どのページで出すか。商品ページとカートページが中心です。会員ページ・購入手続き・購入完了ページでは出しません。
  2. 何回目の訪問か。初めての人には登録特典、何度も来ている人には新商品の案内、と内容を変えます。
  3. 何を見たか・見ていないか。「カートを見たが購入完了ページは見ていない人」と「読みものを1本読んだだけの人」は、別の相手です。
  4. どこから来たか。広告やメルマガから来た人には、そちらで約束した内容を優先します。
  5. どの端末か。PCだけ離脱時に出し、スマホは別のきっかけにする、という分け方もできます。

marketingLABOでの設定手順

marketingLABOでは、計測タグ1行でサイトにポップアップバナーを出せます。表示のきっかけは、すぐに表示する、ページの○%までスクロールしたら表示する、ページの滞在時間が○秒を超えたら表示する、「ユーザ離脱時にモーダルで表示」の4つから選べ、離脱時を選ぶとモーダル(画面中央の小窓)で表示されます。

  1. テンプレートを選びます。EC向けのテンプレートは55種類あり、「離脱防止」「クーポン・割引」「送料無料」などの分類から選んで、文言と色を直します。
  2. 形を選びます。画像だけ、画像・キャッチコピー・ボタン、カウントダウン付き、メール登録フォーム付きの4つです。
  3. 表示のきっかけを「ユーザ離脱時にモーダルで表示」にします。
  4. 表示するページのURLを入れます。商品ページの共通部分(例:/products/)までを入れて前方一致にすると、配下のページすべてが対象になります。
  5. 条件を足します。「サイト訪問頻度=初回」「閲覧ページ=カート」「未閲覧ページ=購入完了」のように組み合わせられます。
  6. 出す端末を選びます。すべての端末・スマホだけ・PCだけ・PCとスマホで画像を分ける、の4つです。
  7. 公開したら、自分の端末で実際にサイトを開き、どの動きで出るか、どう閉じられるかを確かめます。

表示のされ方について、知っておくと迷わない点をまとめます。

項目動き
1ページで出る回数離脱時のポップアップは、1回のページ表示につき1回まで
閉じたあと「×」やキーボードのEscキーで閉じたバナーは、同じタブで見ているあいだは再び表示されない
条件に合うバナーが複数あるとき離脱時のバナーは、そのうち1つだけが選ばれて表示される
キーボード・読み上げポップアップが開くと操作の対象がポップアップの中に移り、Tabキーで中の項目を順に選べる。読み上げソフトにも対応

公開できるバナーの数は、フリープランで1つ、ライトプランで3つ、スタンダードプランで無制限です(料金)。なお、marketingLABOにはバナーのA/Bテストや、表示回数の上限を決める設定はありません。カートの中身や金額も読み取らないので、「あと○円で送料無料」のような金額に応じた表示はできません。

効果の測り方

離脱防止ポップアップは、出すのは簡単でも、効果の判断を誤りやすい施策です。クリック率が高くても、もともと買うつもりだった人がクーポンを使っただけかもしれません。

  1. 目的を1つ決める。メール登録数、クーポンの利用数、購入数のどれを増やしたいのかを先に書き出します。
  2. 公開前の数字を残す。対象ページのコンバージョン率や登録数を、公開前の数週間分メモしておきます。
  3. 一度に1つだけ変える。A/Bテストの機能がないので、案Aを一定期間出したら案Bを同じ長さだけ出し、大きなセールや季節の山と重ならない時期で比べます。
  4. クリックではなく利用を見る。クーポンなら、クリックした人数と、実際に使われた注文の数を並べます。
  5. 副作用も見る。対象ページの滞在時間や回遊の変化をレポートで確かめ、何人かの行動履歴を開いて、ポップアップが実際の訪問のどこで出ているかを見ます。

よくある失敗

  1. 全ページ・全員に出す。見慣れて無視され、常連はクーポン待ちになります。
  2. 閉じるボタンが小さい・薄い。親切なお知らせが、閉じられない罠に変わります。
  3. スマホで画面をほとんど覆う。Googleは「画面のほんの一部だけを覆うバナー」を勧めています。
  4. 移動を止める。リンクのクリックや戻るボタンを止めてポップアップを出すのは、離脱防止の考え方と逆です。
  5. 入力項目を増やす。帰り際に名前・電話番号まで聞くと、まず入力されません。

よくある質問

離脱防止ポップアップはSEOに悪影響がありますか?

Google検索セントラルの「煩わしいインタースティシャルやダイアログを避ける」では、煩わしいダイアログが表示されると「Googleや他の検索エンジンがコンテンツを把握することが困難になり、検索のパフォーマンスが低下する可能性があります」と説明しています。離脱時のポップアップは、ページを開いた直後に本文を覆うものではありませんが、小さく、すぐ閉じられる作りにしておくのが安全です。

スマホでもPCと同じように効きますか?

いいえ。スマホの判定はスクロールの動きからの推測なので、PCより誤って出る場面が増えます。スマホでは小さい表示にする、別のきっかけにする、ページの中に案内を書く、のどれかを選ぶのがおすすめです。

離脱防止ポップアップはいくつ作ればよいですか?

まずは1つ、迷いが出やすい商品ページかカートページに作ります。2つ目は、リピーター向けなど相手がはっきり違う場合だけにします。

フリープランでも使えますか?

使えます。フリープランでは、離脱時の表示を含むポップアップバナーを1つ公開できます。無料で登録して、計測タグをサイトに貼れば始められます。

まとめ

離脱防止ポップアップは「いつ出すか」の道具です。PCではカーソルが画面の上端から出たとき、スマホでは読み進めたあとの素早い上スクロールを手がかりにしますが、スマホのほうが推測の幅は大きくなります。戻るボタンを横取りする方式は使わず、出すページと相手を絞り、内容は1つ、閉じるボタンははっきりと。効果はクリックではなく、決めた目的の数字で確かめましょう。

参考にした資料

Google検索セントラル「Googleウェブ検索のスパムに関するポリシー」(最終更新2026年9月2日、2026年10月12日閲覧)

Google検索セントラル「煩わしいインタースティシャルやダイアログを避ける」(最終更新2025年12月18日、2026年10月12日閲覧)

MDN「Element: mouseout イベント」(2026年10月12日閲覧)

MDN「pointer」(CSSのメディア特性)(2026年10月12日閲覧)

フリープランは期限なしで無料。クレジットカードの登録は不要です

無料で始める

ほかの記事