離脱直前に表示するポップアップで問い合わせを増やす方法 ユーザーが離れようとした瞬間に自然にアプローチする実装と活用法



この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。

ホームページ制作の流れを初心者向けにわかりやすく解説

離脱直前ポップアップの仕組み

ユーザーがページを離れようとした瞬間（マウスが上部に移動）に表示します。 ※スマホは別ロジックが必要なので後半で補足します。

ページの下部までスクロールしてください。下部に来るとポップアップが表示されます。

お問い合わせはこちら

無料相談する 閉じる

HTML（ポップアップ本体）

ページのどこか（footer付近推奨）に追加します。

<div class="popup" id="popup">
<div class="popup-inner">
<p>お問い合わせはこちら</p>
<a href="/contact" class="popup-btn">無料相談する</a>
<button class="popup-close" id="popupClose">閉じる</button>
</div>
</div>

CSS（ポップアップデザイン）

画面中央にふわっと出す設計です。

JavaScript（離脱検知）

スマホ対応（重要）

スマホはマウスがないので「離脱検知」が効きません。代わりにこれを使います。

スクロール深度で表示

例：70%スクロールしたら表示

運用のポイント（超重要）

① 1回だけ表示にする

何度も出すと離脱率が上がります。

② すぐ閉じられるようにする

閉じにくいポップアップは逆効果です。

③ 文言は「圧」を弱くする

NG：今すぐ問い合わせ！ OK：まずは無料でご相談ください

結論

今回の仕組みはこうです。 ・PC → マウス離脱検知 ・スマホ → スクロール70% ・表示は1回のみ 

今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。

ホームページ制作の流れを初心者向けにわかりやすく解説