離脱ポップアップ設置方法｜SEOを落とさずCVを増やすコツ

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

結論から言うと、離脱ポップアップは「出し方」さえ間違えなければ、検索順位を落とさずにCVを増やせます。むしろ逆で、雑に出すと体験を壊して両方を失います。この記事では、コピペで動くサンプルコードと具体的な設定値、文面のテンプレート、そして現場でやりがちな失敗の防ぎ方まで、実際に手を動かせるレベルでお伝えします。

Contents / 目次

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

結論。離脱ポップアップは「出し方」次第でSEOもCVも両立できる

離脱ポップアップとは、サイトから離れようとしているユーザーの動きを検知して、その瞬間にだけ表示する案内のことです。SEOを下げずにCVを増やすために押さえるべきポイントは、突き詰めると3つしかありません。

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

この3つが守れていれば、SEOへの悪影響はほぼ心配いりません。なぜなら、Googleが問題視しているのは「ページを開いた瞬間にコンテンツ全体を覆い隠す邪魔な表示」だからです。これを専門用語でインタースティシャル広告と呼びます。かんたんに言うと「本文を読む前に画面いっぱいをふさぐ割り込み」のことです。とくにスマホでこれをやると、検索評価にマイナスが出る可能性があります。

逆に言えば、離脱ポップアップは「ユーザーが本文を読み終えて、出ていこうとした後」に出るものです。コンテンツの閲覧を邪魔していないので、Googleが問題視する割り込みには当たりません。ここが「ポップアップ＝SEOに悪い」という思い込みと、実際の線引きが分かれるところです。

まず、SEOを守れるポップアップと、順位を落とすリスクがあるポップアップの違いを一覧で整理します。

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

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

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

離脱ポップアップの設置は、大きく分けて「いつ出すか（トリガー）」「何を見せるか（中身）」「どう作るか（実装）」の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。中央に小窓を出し、背景を軽く暗くするだけ */
#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;
}

// (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を差し込めるプラグインで設置できます。なお、表示回数や成果をきちんと測りたい場合は、計測タグの設定を合わせて行うのがおすすめです。フォーム送信の計測方法はGoogleタグマネージャーでContact Form 7を測定する完全ガイドも参考にしてください。

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

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

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

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

成果が出ているサイトには、共通点があります。それは「ポップアップ単体で頑張っていない」ことです。本文の質、ページの表示速度、フォームの入力しやすさといった土台が整っていて、その上で最後の一押しとしてポップアップを置いている。逆に、土台がガタガタのままポップアップだけ盛っても、数字はほとんど動きません。

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

もう一つ、SEOの観点で安心してほしいのは、滞在時間や直帰率といったユーザー行動の指標は、Googleの検索順位を直接決める要因ではないという点です。ですから「ポップアップで回遊が増えたから順位が上がる」とは言えません。正しくは「SEO評価を損なわずに、CVや回遊を増やせる」と理解しておくのが正確です。

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

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

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

これが最も多く、最も危険な失敗です。「とにかく見せたい」という気持ちから、訪問直後に画面いっぱいのポップアップを出してしまう。すると、ユーザーは本文を一文字も読まないうちに「×」を探すことになり、不快感だけが残って即離脱します。さらにスマホでこれをやると、Googleが問題視する邪魔な割り込みに該当し、検索評価を下げるリスクが生まれます。防ぐには、表示のきっかけを「開いた直後」ではなく「離れようとした瞬間」か「十分に読んだ後」に限定することです。前述のサンプルコードのように、離脱検知を条件にすれば自然と回避できます。

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

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

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

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

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

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

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

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

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

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

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

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

よくある質問（FAQ）

ここまで読んで「設置はできそうだけど、刺さるオファー設計や改善の運用まで自社で回しきるのは大変そう」と感じた方もいるはずです。コレットラボでは、CVを取りこぼさないサイト改善やAIを使った運用効率化のご相談を承っています。まずは現状を一緒に整理するだけでも大丈夫です。AI業務システム化の詳細はこちらから、気軽にお声がけください。