離脱直前ポップアップの仕組み
ユーザーがページを離れようとした瞬間（マウスが上部に移動）に表示します。 ※スマホは別ロジックが必要なので後半で補足します。ページの下部までスクロールしてください。下部に来るとポップアップが表示されます。
お問い合わせはこちら
無料相談する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回のみご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
