離脱ポップアップ設置方法｜検索の評価を損ねにくい出し方とコピペコード

「ポップアップを入れたいけど、SEOに悪い影響が出ないか心配」「設置したものの、煩わしいだけでコンバージョン（問い合わせや登録などの成果）が増えない」。離脱ポップアップで、こんな迷いを抱えていませんか。

結論から言うと、離脱ポップアップは、本文の閲覧を妨げない出し方にすれば、検索の評価を損ねにくく、CVにもつなげられます。逆に、ページ全体を覆うような出し方をすると、読み手の邪魔になるうえ、検索の評価を損ねるおそれもあります。この記事では、コピペで動くサンプルコードと具体的な設定値、文面のテンプレート、そして現場でやりがちな失敗の防ぎ方まで、実際に手を動かせるレベルでお伝えします。

Contents / 目次

1. 結論。検索の評価を損ねにくい離脱ポップアップの「出し方」
2. 離脱ポップアップの設置方法。コピペで動く手順とテンプレート
3. 正しく設置すると何が変わるか。期待できる効果の現実的なイメージ
4. よくある失敗と回避法。やりがちな3つのミス
5. 現場で見えた落とし穴と妥協点。導入前に知っておきたい本音
6. よくある質問（FAQ）

結論。検索の評価を損ねにくい離脱ポップアップの「出し方」

離脱ポップアップとは、サイトから離れようとしているユーザーの動きを検知して、その瞬間にだけ表示する案内のことです。検索の評価を損ねにくく、CVにもつなげる出し方のポイントは、突き詰めると3つです。

• 表示タイミング：ページを開いた直後ではなく「離れようとした瞬間」に出す
• オファーと文面：ユーザーが離脱する理由を解決する内容を、1つだけ提示する
• 表示頻度と閉じやすさ：同じ人に何度も出さず、閉じるボタンを大きく分かりやすく置く

この3つを守れば、SEOへの悪影響を抑えられます。なぜなら、Googleが問題視しているのは、主にプロモーション目的で、ユーザーのコンテンツ閲覧を妨害する表示だからです。Googleはこれを煩わしいインタースティシャルやダイアログと呼んでいます。インタースティシャルはページ全体を覆う表示、ダイアログはページの一部を覆う表示のことです。こうした表示があると検索のパフォーマンスが低下する可能性がある、とGoogleは説明しています（Google 検索セントラル「煩わしいインタースティシャルやダイアログを避ける」）。この説明は、PCとスマホで分けていません。

離脱ポップアップは、PCでは「ユーザーが本文を読み終えて、出ていこうとした時」に出すものです。閲覧を妨げにくい出し方ですが、Googleが離脱時の表示を対象外と明言しているわけではありません。スマホの無操作検知は、読んでいる途中に表示されることがあるので、画面を覆わない下部のバナーにするなど、閲覧を妨げない形にしてください。ここが「ポップアップ＝SEOに悪い」という思い込みと、実際の線引きが分かれるところです。

まず、閲覧を妨げにくい離脱ポップアップと、検索の評価を損ねるおそれがある表示の違いを一覧にします。

比較する点	閲覧を妨げにくい離脱ポップアップ	検索の評価を損ねるおそれがある表示
表示するタイミング	離脱しようとした瞬間や、十分に読んだ後	ページを開いた直後・読み始める前
画面の覆い方	中央に小窓、または下部にバナー	画面全体を覆い隠す（PCでもスマホでも）
閉じやすさ	大きな×ボタンが右上にすぐ見える	閉じるボタンが小さい・見つけにくい
表示頻度	1人につき一定期間に1回まで	ページ遷移のたびに何度も出る
狙う成果	問い合わせ・資料請求・メール登録	とにかくクリックさせる広告誘導

表の右側に1つでも当てはまるなら、CV以前にユーザー体験を壊しています。アクセスはあるのにCVが伸びない原因の整理はアクセスはあるのにCVが増えない｜原因の切り分けと診断5ステップでも触れていますが、ポップアップはあくまで「最後の一押し」です。導線やフォームそのものに問題があると、ポップアップを足しても効果は出にくい点は先に押さえておきましょう。

離脱ポップアップの設置方法。コピペで動く手順とテンプレート

離脱ポップアップの設置は、大きく分けて「いつ出すか（トリガー）」「何を見せるか（中身）」「どう作るか（実装）」の3ステップで進めます。順番に、そのまま使える設定値とコードで解説します。

ステップ1。トリガー（表示のきっかけ）を決める

最初に決めるのは「どの動きを離脱のサインと見なすか」です。これはPCとスマホで分けて考えるのが正解です。同じ仕組みを両方に使うと、スマホで誤作動して邪魔者になります。

• PCの場合：マウスカーソルが画面の上端（ブラウザのタブや×ボタンの方向）へ素早く抜ける動きを検知する
• スマホの場合：離脱意図は取りにくいので、一定時間（例として15秒）操作が止まったとき、または急なスクロールアップを検知する
• 共通で使える代替案：記事の80%以上までスクロールした、料金ページに一定時間滞在した、というタイミングで出す

スマホでPCと同じ「マウスが上に抜けたら」を使えないのは、そもそもスマホにマウスの動きがないからです。だから「無操作の時間」や「スクロールの向き」で代用します。

ステップ2。オファーと文面のテンプレートを用意する

次に中身です。ここで一番大事なのは「オファーは1つに絞る」「入力させる項目はできるだけ少なく」という原則です。選択肢が多いほど人は迷って離れます。BtoBサイトなら、割引よりも「役立つ資料」「無料相談」のほうが相性が良いです。

そのまま流用できる文面の型を載せます。自社の言葉に置き換えて使ってください。

【見出し】
お帰りの前に、1つだけ。

【本文】
このページの内容を、チェックリスト1枚にまとめた資料をご用意しました。
導入前の社内検討にそのまま使えます。

【入力項目】
メールアドレス（1つだけ）

【ボタン文言】
無料でチェックリストを受け取る

【補足の小さい文字】
登録は30秒で完了。不要になればいつでも配信停止できます。

ポイントは、見出しで「待って」「お帰りの前に」と一瞬だけ手を止めさせ、本文で「あなたの離脱理由を解決するもの」を提示することです。入力欄をメール1つに絞るのは、項目が増えるほど完了率が落ちるからです。

ステップ3。実装する（コピペで動くサンプルコード）

専用ツールを使わずに自分で設置する場合の、ライブラリ不要のサンプルコードです。PCはマウスの離脱検知、スマホは無操作検知に自動で切り替わり、同じ人には一定期間1回しか出さないようにしてあります。変更すべき箇所にはコメントで印を付けています。

<!-- (1) ポップアップ本体のHTML。</body> の直前あたりに置く -->
<div id="exit-popup" style="display:none;">
  <div class="exit-popup__inner">
    <button class="exit-popup__close" data-close aria-label="閉じる">×</button>
    <h2>お帰りの前に、1つだけ。</h2>
    <p>このページの要点をまとめたチェックリストを無料でお渡しします。</p>
    <!-- ★ action= の送信先は自社のフォームURLに変える -->
    <form action="/contact" method="post">
      <input type="email" name="email" placeholder="メールアドレス" required>
      <button type="submit">無料で受け取る</button>
    </form>
  </div>
</div>

/* (2) 見た目のCSS。PCは中央に小窓を出して背景を軽く暗くし、スマホは画面下部のバナーにする */
#exit-popup{
  position:fixed; inset:0; display:flex;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:9999;
}
.exit-popup__inner{
  position:relative; background:#fff; max-width:440px;
  width:90%; padding:28px; border-radius:12px;
}
.exit-popup__close{
  position:absolute; top:8px; right:12px; /* 右上に大きく */
  font-size:28px; line-height:1; background:none; border:none; cursor:pointer;
}
/* スマホ（幅768px以下）は背景を暗くせず、画面下部のバナーとして出す */
@media (max-width:768px){
  #exit-popup{ inset:auto 0 0 0; align-items:flex-end; background:none; }
  .exit-popup__inner{
    width:100%; max-width:none; border-radius:12px 12px 0 0;
    box-shadow:0 -2px 12px rgba(0,0,0,.2);
  }
}

// (3) 表示ロジック。バニラJS・ライブラリ不要
// </body> 直前に <script> で読み込む
(function () {
  var STORAGE_KEY = 'exitPopupShown';
  var COOLDOWN_DAYS = 7;            // ★同じ人に再表示しない日数
  var INACTIVE_MS = 15000;          // ★スマホで無操作とみなす時間(ミリ秒)

  // 一定期間内に表示済みなら何もしない（出しすぎ防止）
  var last = localStorage.getItem(STORAGE_KEY);
  if (last && (Date.now() - Number(last)) < COOLDOWN_DAYS * 86400000) return;

  var popup = document.getElementById('exit-popup');
  if (!popup) return;
  var shown = false;

  function showPopup() {
    if (shown) return;
    shown = true;
    popup.style.display = 'flex';
    localStorage.setItem(STORAGE_KEY, String(Date.now()));
  }
  // ×ボタン・背景クリックで閉じる
  popup.addEventListener('click', function (e) {
    if (e.target.dataset.close !== undefined || e.target.id === 'exit-popup') {
      popup.style.display = 'none';
    }
  });

  var isMobile = window.matchMedia('(max-width: 768px)').matches;
  if (!isMobile) {
    // PC: カーソルが画面の上端へ抜けたら離脱とみなす
    document.addEventListener('mouseout', function (e) {
      if (!e.relatedTarget && e.clientY <= 0) showPopup();
    });
  } else {
    // スマホ: 一定時間操作がなければ表示（リセット式タイマー）
    var timer;
    function reset() { clearTimeout(timer); timer = setTimeout(showPopup, INACTIVE_MS); }
    ['scroll','touchstart','click'].forEach(function (ev) {
      window.addEventListener(ev, reset, { passive: true });
    });
    reset();
  }
})();

このコードは、HTML・CSS・JavaScriptの標準的な機能だけで動きます。プラグインやフレームワークは不要です。WordPressなら、テーマのフッター直前に貼るか、カスタムHTMLを差し込めるプラグインで設置できます。なお、表示回数や成果をきちんと測りたい場合は、計測タグの設定を合わせて行うのがおすすめです。フォーム送信の計測方法はContact Form 7の送信をGTMでGA4計測する手順｜二重計測も防ぐも参考にしてください。

設置前チェックリスト。①離脱の瞬間に出る設定になっているか ②閉じる×ボタンは右上に大きく置いたか ③入力はメール1項目だけか ④同じ人に何度も出ない設定か ⑤スマホで画面全体をふさいでいないか。この5つを公開前に必ず指差し確認しましょう。

正しく設置すると何が変わるか。期待できる効果の現実的なイメージ

離脱ポップアップを正しく設置すると、これまで「読んだだけで去っていた人」の一部を、メール登録や問い合わせにつなげられます。今まで取りこぼしていた層に最後の声かけをするわけです。

効果を具体的にイメージするために、計算例を1つ挙げます。あくまで仮の数字での例示です。月に1万人が訪れるサイトで、離脱しようとした人の何割かにポップアップが表示され、そのうちごく一部がメール登録すると考えてみます。仮に、離脱直前の表示に対して登録率が数%だとすると、これまでゼロだったメール登録が月に数十件単位で積み上がる計算になります。業種やオファーの魅力で大きく変動するため断定はできませんが、「今まで完全に逃していた人を拾い直す」という性質上、追加コストのわりにリターンが見込みやすい施策です。

ポップアップは、単体では成果につながりにくい施策です。本文の質、ページの表示速度、フォームの入力しやすさといった土台が整っていて、その上で最後の一押しとしてポップアップを置いている。逆に、土台がガタガタのままポップアップだけ盛っても、数字はほとんど動きません。

現場の原則。ポップアップはCVを生む魔法ではなく、すでにある興味を取りこぼさないための網です。網を仕掛ける前に、そもそも魚（興味を持った読者）が来ているか、逃げ道（離脱原因）はどこかを先に見極めるほうが、結果的に近道になります。

もう一つ、SEOの観点では、Googleは「集約、匿名化したインタラクション データ」を検索結果の関連性の評価に使うと説明していますが、直帰率や滞在時間をどう使うかは公表していません（Google 検索の仕組み「Google によるランキング結果の決定方法」）。ですから「ポップアップで回遊が増えたから順位が上がる」とは言えません。正しくは「SEO評価を損なわずに、CVや回遊を増やせる」と理解しておくのが正確です。

よくある失敗と回避法。やりがちな3つのミス

離脱ポップアップは、設定を一歩間違えると「邪魔なだけの存在」に転落します。起きやすい失敗を、起きる状況・結果・防ぎ方のセットで3つ紹介します。

失敗1。ページを開いた瞬間に画面全体をふさぐ

これが最も危険な失敗です。「とにかく見せたい」という気持ちから、訪問直後に画面いっぱいのポップアップを出してしまう。すると、ユーザーは本文を一文字も読まないうちに「×」を探すことになり、不快感だけが残って即離脱します。さらに、PCでもスマホでも、ページ全体を覆う表示は、Googleが避けるよう説明している「煩わしいインタースティシャル」に当たり、検索のパフォーマンスが低下する可能性があります。防ぐには、表示のきっかけを「開いた直後」ではなく「離れようとした瞬間」か「十分に読んだ後」に限定することです。前述のサンプルコードのように、離脱検知を条件にすれば自然と回避できます。

失敗2。同じ人に何度も繰り返し表示する

表示頻度を制御していないと、ページを移動するたびに同じポップアップが出続けます。一度「いらない」と閉じた人に何度も同じものを突きつければ、感じるのはストレスだけです。サイト全体の印象まで悪くします。防ぎ方は、表示履歴をブラウザに記録して「一定期間に1回まで」と制限することです。サンプルコードでは localStorage を使い、7日間は再表示しない設定にしています。この日数は、扱う商材の検討期間に合わせて調整してください。

失敗3。オファーが弱く、入力項目が多すぎる

「メルマガ登録しませんか」とだけ書かれた、メリットの見えないポップアップ。あるいは、名前・会社名・電話番号・メールと入力欄がずらりと並んだフォーム。どちらも「わざわざ入力する理由がない」状態で、表示はされてもCVにはつながりません。防ぐには、ユーザーの離脱理由を解決する具体的なオファー（チェックリスト、比較資料、無料相談など）を1つだけ提示し、入力はメール1項目に絞ることです。情報は登録後の自動返信や次のステップで少しずつもらえば十分です。

これらの失敗は、いずれも「サイト側の都合」を優先したときに起きます。SEOで成果が出ない原因の多くも同じで、検索意図とのズレが根っこにあります。この考え方はブログが伸びない原因は検索意図のズレ｜直す手順とチェックリストでも詳しく解説しています。

現場で見えた落とし穴と妥協点。導入前に知っておきたい本音

ここからは、教科書的な解説には載りにくい「使う側のリアル」を率直にお伝えします。離脱ポップアップは便利な反面、現場では妥協が必要な場面も多いからです。

まず、割引クーポンの乱用には注意が必要です。EC系の事例では「離脱時に割引」が定番ですが、これを常時出していると「待っていれば値引きされるサイト」と学習され、ブランド価値も利益率も削られます。BtoBで安易に値引きを餌にすると、価格でしか選ばれない商談ばかりが増える、という逆効果もあります。割引は「在庫処分」「期間限定」など理由がはっきりするときだけに留めるのが現実的な落とし所です。

次に、ツールを入れれば解決するわけではない、という点です。高機能なWeb接客ツールはたくさんありますが、AIによる自動最適化やパーソナライズをうたう機能も、結局は「誰に・何を・どう見せるか」というシナリオ設計ができていないと宝の持ち腐れです。ツールは表示の仕組みを提供してくれますが、刺さるオファーと文面は人が考える必要があります。ここはAIに丸投げできず、自社の顧客理解がそのまま成果に直結する部分です。

内製と外注の切り分けも悩みどころです。表示だけなら、この記事のサンプルコードで十分自前で作れます。一方で、A/Bテストで文面を比較し、データを見て改善を回し続ける運用フェーズは、片手間だと続きません。「最初の設置は自分で、改善の伴走はプロと」という分け方が、コストと効果のバランスが取りやすいパターンです。

見落としがちなコストとして、ポップアップを足したことでページの読み込みが重くなる、スマホで意図せず本文をふさいでいた、という品質の劣化があります。設置後は必ず実機（とくにスマホ）で表示を確認し、表示速度への影響もチェックしてください。CVを取りに行った結果、SEOの土台を崩しては本末転倒です。

最後に向き不向きの本音です。月間の訪問数がまだ少ないサイトでは、ポップアップで拾える絶対数も小さく、効果を実感しにくいのが正直なところです。その段階では、まず検索流入を増やす土台づくりを優先したほうが、投資対効果は高くなります。ポップアップは「ある程度人が来ているのにCVが取りきれていない」サイトでこそ、真価を発揮します。

よくある質問（FAQ）

ここまで読んで「設置はできそうだけど、刺さるオファー設計や改善の運用まで自社で回しきるのは大変そう」と感じた方もいるはずです。コレットラボの定額制マーケティング支援（マーケの右腕）では、問い合わせまでの流れ、ボタンの位置、スマートフォンでの表示、フォームの項目を確認して修正します。ポップアップを置いたページも、GA4の数字を毎月確認し、翌月に修正する箇所を貴社と決めます。3か月ごとに、続けるかどうかをお決めいただけます。