滞在時間が10秒伸びる！時間差バナーのかんたん実装

株式会社ファストコーディングのWebディレクタの働くおかんです。今回は前回から少し内容を変えて、ページの中でポップアップのバナー広告を”自然と出す”方法をご紹介します。

時間差で表示するメリット

バナー広告やポップアップは、ユーザーの視線を引きつける良い方法ですが、タイミングを間違えると逆効果です。無作為に表示されるとうるさいだけで、かえってそれが印象を悪くして離脱につながることもあります。

そこで「時間差ポップアップ」の登場です！実際これを取り入れたことで、ユーザーの滞在時間が平均10秒以上も延びたケースがあります。Webディレクターやプロジェクトマネージャーの皆さん、ユーザー体験を向上させるための一つの施策として、時間差バナーの導入を考えてみてください。

利用する際のコツ

この問題を解決するために重要なのは、ユーザーの興味が高まったタイミングでコンテンツを提示することです。時間差ポップアップは、ちょうど良いタイミングで現れることで、コンバージョンに自然につながります。あとは「邪魔になった時に消せる」ことも大事です。具体的な実装例を掲載してご案内します。

基本構造とアニメーションの実装

まず、バナーを時間差で表示するための基本構造を確認します。これは数行のCSSとJavaScriptで実現できます。

<div class="time-banner" id="timeBanner">
  <p>今なら10%OFFキャンペーン実施中！</p>
  <button class="close-btn" id="closeBanner">×</button>
</div>

.time-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #0078d7;
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.time-banner.visible {
  opacity: 1;
  transform: translateY(0);
}
.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin-left: 12px;
}

// ページ読み込み後、5秒経ったら表示
setTimeout(() => {
  document.getElementById('timeBanner').classList.add('visible');
}, 5000);

上記では、ページ読み込みから5秒後にバナーが滑らかにフェードインします。ユーザーが本文を読み始めた頃に現れる自然なタイミングです。
このような「少し遅らせてから表示」は、広告臭を感じさせず、離脱率を下げる効果があります。

実務での工夫：「閉じたら次回は出さない」

実際の案件では、単にバナーを出すだけでなく、「ユーザーが不要と判断したら次回は出さない」こともとても大事です。
また、一度閉じたにもかかわらず、ページを変えるたびに再表示されるとユーザーは不快感を覚えます。UXを壊さずに再訪問時の体験を最適化するには、閉じた情報をlocalStorageに保持するのが一番簡単かなと思います。Cookieほど永続的でなくてもいいけど、ページを見てもらっている間、数日間ぐらいは保持したい、というレベルにはぴったりです。

const banner = document.getElementById('timeBanner');
const closeBtn = document.getElementById('closeBanner');

// すでに閉じた履歴がない場合のみ表示
if (!localStorage.getItem('bannerClosed')) {
  setTimeout(() => banner.classList.add('visible'), 5000);
}

// バツボタンで閉じる動作
closeBtn.addEventListener('click', () => {
  banner.classList.remove('visible');
  localStorage.setItem('bannerClosed', 'true');
});

この実装では、ユーザーが一度バナーを閉じると、その情報がlocalStorageに保存されます。以降のページでは再表示されず、ユーザーは快適な閲覧体験を維持できます。

特にリピーターが多いサイトでは、「出しすぎないこと」もデザインの一部です。常に出し続けることは一時的なクリックを増やしても、長期的には信頼を損ねます。

UXを高めるための「再表示のルール」

場合によっては、「閉じたら完全に出さない」のではなく、一定期間後に再表示する設計も有効です。
キャンペーンやお知らせが頻繁に更新される場合、翌日や数日後に再度見せたいこともあります。その場合、保存時にタイムスタンプを記録しておき、一定期間が過ぎたら再表示するようにします。

const now = Date.now();
const lastClosed = localStorage.getItem('bannerClosedAt');
const oneDay = 24 * 60 * 60 * 1000; // 1日

if (!lastClosed || now - lastClosed > oneDay) {
  setTimeout(() => banner.classList.add('visible'), 5000);
}

closeBtn.addEventListener('click', () => {
  banner.classList.remove('visible');
  localStorage.setItem('bannerClosedAt', Date.now());
});

この方法なら、「昨日閉じた人には今日は出さないが、翌日以降には再度表示」という自然な再通知が可能です。localStorageはブラウザに依存しますが、Cookieよりも柔軟で、データの有効期限を自由に設定できます。UIとしての「控えめなリマインダー」を作るには最適な方法です。