SEO改善に効く！離脱ポップアップの設置方法と効果的な使い方

2025.07.052025.07.06

株式会社コレットラボは、“見つけられ、選ばれ、行動される”までを整える、Webマーケティングの実行支援パートナーです。
SEO・MEO・Web広告・ホームページ改善まで、戦略設計と運用実務の両面から、効果につながる仕組みを一緒につくります。

支援現場で実感される特徴

集客・導線・改善まで、一社ごとに最適化した設計と実行支援
相談しながら進められる、誠実で丁寧な並走スタイル
全施策の品質を担保する独自チェックリスト「T&C Standard」導入

▼無料配布｜整えるべきポイントが見えるT&C Standard（抜粋版）チェックリスト
今のサイトや集客施策で「どこに課題があるか」を見える化できる、コレットラボ独自のチェックシート（全カテゴリ対応）。

ご希望の方は、ご連絡ください。担当よりお送りします。

LINEでチェックリストを受け取る

メールでチェックリストを受け取る

コレットラボSEO&LLMOチーム

このコラムは、「見つけられ、理解され、選ばれる」コンテンツ設計を支援するコレットラボSEO&LLMOチームが執筆しています。「検索に出てこない」「AIに正しく伝わらない」といった課題に向き合い、キーワード戦略、構造改善、情報設計まで一貫してサポート。現場で培ったノウハウをもとに、検索エンジンとAIアシスタントの両方に届く、実践的な改善ヒントをお届けします。

せっかくSEO対策に力を入れて、検索からのアクセスが増えた。よし、これで成果が出るぞ……と思ったのに、「あれ、思ったより反応がないぞ？」とがっかりした経験、ありませんか？

コンテンツも丁寧に書いたし、検索意図も考えた。でも、ユーザーがページに訪れて、何もせずに帰っていってしまう。そんな状況が続いているなら、SEOだけで満足してはいけません。

検索流入はあくまで「スタート地点」。その先、ユーザーに“もう一歩”踏み込んでもらうための「出口の設計」が必要です。

そこで登場するのが「離脱ポップアップ」。

そう、ユーザーがサイトを離れそうになった瞬間に現れる、あの“最後の声かけ”ツールです。「ちょっと待って、見ていって！」というワンメッセージが、コンバージョンに大きく影響することもあるんです。

「でも、あれってうざくない？」「Googleから嫌われるんじゃ？」と心配になる気持ちもわかります。実は、適切に設計すればSEOにも悪影響はなく、むしろユーザーの行動を改善する大きな武器になります。

このコラムでは、離脱ポップアップの正しい考え方と、SEOに配慮しつつ導入する方法を、コードつきでわかりやすく解説していきます。

離脱ポップアップとは？なぜ今SEO担当者が注目しているのか

「離脱ポップアップ」とは、ユーザーがWebサイトから離れようとした瞬間に表示される案内パネルやメッセージのこと。いわゆる“Exit Intent Popup”と呼ばれる施策の一種です。

主にこんなタイミングで表示されます。

マウスがブラウザの上部（閉じるボタン付近）に動いたとき（PC）
戻るボタンが押されたとき（スマホ）
ページのスクロール量が一定以上になったとき
一定時間、操作がない状態が続いたとき（アイドル検知）

ポップアップの内容としては「限定キャンペーン」「無料診断のご案内」「LINE登録」「離脱防止クーポン」などがよく使われます。

つまり、「今ならこんな特典がありますよ」と、ユーザーの背中をそっと押す役割を担っているのです。

この“もう一声”があるかどうかで、ユーザーの行動は大きく変わります。
特にSEOで流入したユーザーは、「すぐに購入・申し込み」というモードではなく、「ちょっと調べておこう」という“比較検討中”が多い。だからこそ、この離脱時の声かけが効いてくるんです。

SEOにどう効くのか？表面的な指標以上の変化が起きる

では、「離脱ポップアップを入れるとSEOに効く」というのは、どういう意味なのか。Googleが「ポップアップがあるから順位を上げる」というわけではありません。実際は、間接的にSEO評価に良い影響を与える施策といえます。

1. 滞在時間が伸びる

離脱ポップアップはユーザーの離脱をワンクッション止めるので、ページ滞在時間が伸びる傾向があります。
Googleは明確に「滞在時間」をランキング要因とは明言していませんが、「ユーザーがしっかりコンテンツを読んでいるか」の判断材料の一つにはなっていると考えられています。

2. 直帰率が改善される

ポップアップで他ページへの誘導やアクション（例：LINE登録）を促すと、直帰率が下がる可能性があります。
これは「ユーザーがページを見て、さらに次の行動をした」というサインになり、サイトの質が高いとみなされやすくなります。

3. 成果に繋がると「収益性のあるページ」として評価されやすい

SEOで訪問してきた人が、そのまま資料請求や相談予約をしてくれた。すると、「このページは問い合わせに繋がりやすい＝役に立つコンテンツ」として捉えられます。

コンバージョン率の高いページは、SEO的にも間接的に強くなるのです。

離脱ポップアップの設置方法を実践解説（テーマ非依存）

ここからは実装の話です。WordPressのテーマやCMS機能に依存せず、HTML＋CSS＋JavaScriptだけで構成するシンプルな構造を紹介します。

基本構成は以下の3つ

HTML：ポップアップ本体の構造
CSS：デザインと見た目の調整
JavaScript：表示タイミングとユーザー行動の検知

1. HTML構造（ポップアップ本体）

<div id="popup-overlay" style="display: none;">
  <div class="popup-box">
    <button id="popup-close">×</button>
    <div class="popup-content">
      <h2>今だけ限定キャンペーン！</h2>
      <p>無料相談を受付中です。お気軽にご連絡ください。</p>
      <a href="/contact" class="popup-btn">詳しく見る</a>
    </div>
  </div>
</div>

このHTMLは、ページのフッターや共通レイアウトの末尾に記述します。display: none;で初期は非表示にし、JavaScriptで動的に表示します。

#popup-overlayがオーバーレイ全体、.popup-boxが中の白いボックス、#popup-closeが閉じるボタンです。

2. CSS（デザインと視認性の確保）

#popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.popup-box {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}
#popup-close {
  position: absolute;
  top: 10px; right: 15px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  border: none;
  font-size: 1.4em;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#popup-closeでは背景を白丸にし、影をつけて、バナーの上でも目立つようにしています。スマホでもタップしやすいサイズ（40×40px）を確保。

3. JavaScript（離脱検知＋1回だけ表示）

document.addEventListener("DOMContentLoaded", function () {
  if (!location.pathname.startsWith("/blog")) return; //特定のカテゴリーのみ表示。環境に合わせてblogを変更してください。

  const popup = document.getElementById("popup-overlay");
  const closeBtn = document.getElementById("popup-close");

  if (sessionStorage.getItem("popupAlreadyShown") === "true") return;
  let popupShown = false;

  function showPopup() {
    if (popupShown) return;
    popup.style.display = "flex";
    sessionStorage.setItem("popupAlreadyShown", "true");
    popupShown = true;
  }

  closeBtn.addEventListener("click", function () {
    popup.style.display = "none";
  });

  if (window.innerWidth > 768) {
    document.addEventListener("mouseout", function (e) {
      if (!e.toElement && !e.relatedTarget && e.clientY < 10) {
        showPopup();
      }
    });
  }

  window.addEventListener("scroll", function () {
    const scrollY = window.scrollY || window.pageYOffset;
    const docHeight = document.body.scrollHeight - window.innerHeight;
    if ((scrollY / docHeight) >= 0.5) {
      showPopup();
    }
  });

  if (window.innerWidth <= 768) {
    if (window.history && window.history.pushState) {
      window.history.pushState({page: 1}, "", "");
      window.addEventListener("popstate", function () {
        showPopup();
        window.history.pushState({page: 1}, "", "");
      });
    }

    let idleTimer;
    function resetIdle() {
      clearTimeout(idleTimer);
      idleTimer = setTimeout(() => showPopup(), 5000); //秒数
    }

    ["scroll", "touchstart", "touchmove", "click", "keydown"].forEach(e =>
      document.addEventListener(e, resetIdle, { passive: true }));
    resetIdle();
  }
});