こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
サイトを見ていると、ページ下部に「ご相談はこちら」や「LINEで予約できます」などの案内バナーが数秒後にふわっと表示されるUIをよく見かけませんか？
ユーザーがある程度スクロールして「このサイト、いいかも」と思い始めたタイミングで、
自然にバナーを表示することで、押しつけ感なくアクションを促すことができるんです。
今回は、そんな「スクロール後、さらに数秒経過してから表示される案内バナー」をJavaScriptでシンプルに実装する方法をご紹介します。
ライブラリ不要で、コピペでも導入しやすいコード付きです！
完成イメージと使いどころ
まずはこんなケースに活用できます！
- ページ下部で「LINE予約バナー」を表示
- 資料請求・お問い合わせの導線を表示
- キャンペーンバナーをさりげなく案内
ユーザーが「読み進めている＝関心がある」という前提でバナーを出すことで、離脱防止にも繋がります。
HTML：バナーの構造を用意
まず、HTMLに案内バナーを仕込んでおきます。
最初は非表示にしておき、JavaScriptでタイミングを見て表示します。
CSSで .show クラスを付与すると、バナーがふわっと上がってくる仕組みです。
JavaScriptで下記を設定します。
「ページを200px以上スクロールしてから、3秒後にバナーを表示」します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードは、一度だけ表示されるようにフラグ管理しているので、ユーザーの邪魔になりません。
応用アイデア：閉じるボタンやリセット機能も
もう少し丁寧にするなら、以下のような追加要素も考えられます。
- ✖ボタンでバナーを閉じる
- スクロールが戻ったら再非表示にする
- 表示回数を1日に1回だけに制限（localStorage）
ユーザー体験を壊さない範囲で、効果的な演出に仕上げていきましょう！
まとめ：タイミングを見極めたバナーがCV率を上げる
バナーって、見せ方を間違えると「うっとうしい」「邪魔」と思われてしまいがちです。
でも、「読んでいる」「興味を持ってくれている」タイミングで出せば、むしろ背中を押してくれる存在になります。
今回ご紹介した方法なら、JavaScriptとCSSだけで誰でも簡単に実装可能。
スマートな案内で、コンバージョンアップにもつながるはずです!
ぜひあなたのWebサイトにも、自然に表示される気の利いた案内バナーを取り入れてみてくださいね。
satokotadesignキャンペーン実施中！
