ページ読み込み時にスタートする カウントダウンタイマーを実装するためのコード

ランディングページやセールスページで「今だけ限定」や「あと〇日で終了」などの訴求を行いたい場合に便利なのが、カウントダウンタイマーです。この記事では、JavaScriptとCSSのみで実装できる、「ページを読み込んだ瞬間から自動的にカウントが始まる」シンプルなタイマーの作り方をご紹介します。

このカウントダウンの特徴

• ページを開いたタイミングから自動で72時間（3日間）カウントがスタートします。
• localStorage を活用することで、同じユーザーが同じブラウザで再訪しても残り時間が維持されます。
• タイマーは「日・時間・分・秒」の形式で表示され、期限を過ぎると「終了しました」と表示されます。
• CSSで横幅いっぱいにタイマーを表示するデザインにも対応しています。

Html

<div id="countdown-timer">
  <span id="days"></span>日
  <span id="hours"></span>時間
  <span id="minutes"></span>分
  <span id="seconds"></span>秒
</div>

CSS

#countdown-timer {
  width: 100%;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  background: #f0f0f0;
  padding: 20px 0;
  text-align: center;
  box-sizing: border-box;
}

JavaScript

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const countdown = document.getElementById("countdown-timer");

    const storageKey = "countdownDeadline";
    let deadline = localStorage.getItem(storageKey);

    if (!deadline) {
      // 初回訪問：72時間後の日時を保存
      deadline = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString();
      localStorage.setItem(storageKey, deadline);
    }

    deadline = new Date(deadline);

    function updateCountdown() {
      const now = new Date();
      const diff = deadline - now;

      if (diff <= 0) {
        countdown.textContent = "終了しました";
        clearInterval(timerInterval);
        return;
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);

      document.getElementById("days").textContent = days;
      document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
      document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
      document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');
    }

    const timerInterval = setInterval(updateCountdown, 1000);
    updateCountdown();
  });
</script>

主な利用シーン

• オンライン講座の期間限定オファー
• ダウンロードコンテンツの無料配布期間
• 限定セール、先着キャンペーンの演出
• 特定LPでの「今すぐ行動を促す」ための仕掛け

ご注意：日本の景品表示法との関係

このようなカウントダウンタイマーは、ユーザーに「今だけ」「残りわずか」といった限定感を演出するマーケティング手法として非常に有効ですが、常にリセットされるような仕組みを悪用した場合、日本の「景品表示法（不当表示）」に抵触するリスクがあります。

例えば、毎回同じ期限が自動設定されるのに「今だけ」と表示し続ける場合は、優良誤認表示とみなされる可能性もあります。

このような表示を行う場合は、ユーザーに誤解を与えない設計や、実際の終了日時の明示など、法律に準拠した表現を心がけてください。

このカウントダウンタイマーの導入および運用は、すべてご自身の責任で行ってください。法律に関するご不明点は、専門の法律家へのご相談をおすすめします。

カウントダウン期限を変更する方法

このタイマーでは、初回アクセス時に「現在の時刻＋3日間（=72時間）」をカウントダウンの終了期限として設定しています。もし、表示期間を変更したい場合は、JavaScript内の「時間計算部分」を編集するだけで簡単に対応できます。

// 現在から72時間後を期限として設定
deadline = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);

この部分の 3 を希望の期間（日数）に変更すればOKです。

よくある例