ランディングページやセールスページで「今だけ限定」や「あと〇日で終了」などの訴求を行いたい場合に便利なのが、カウントダウンタイマーです。この記事では、JavaScriptとCSSのみで実装できる、「ページを読み込んだ瞬間から自動的にカウントが始まる」シンプルなタイマーの作り方をご紹介します。
このカウントダウンの特徴
ページを開いたタイミングから自動で72時間（3日間）カウントがスタートします。
localStorage を活用することで、同じユーザーが同じブラウザで再訪しても残り時間が維持されます。
タイマーは「日・時間・分・秒」の形式で表示され、期限を過ぎると「終了しました」と表示されます。
CSSで横幅いっぱいにタイマーを表示するデザインにも対応しています。
Html
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
主な利用シーン
オンライン講座の期間限定オファー
ダウンロードコンテンツの無料配布期間
限定セール、先着キャンペーンの演出
特定LPでの「今すぐ行動を促す」ための仕掛け
ご注意：日本の景品表示法との関係
このようなカウントダウンタイマーは、ユーザーに「今だけ」「残りわずか」といった限定感を演出するマーケティング手法として非常に有効ですが、常にリセットされるような仕組みを悪用した場合、日本の「景品表示法（不当表示）」に抵触するリスクがあります。
例えば、毎回同じ期限が自動設定されるのに「今だけ」と表示し続ける場合は、優良誤認表示とみなされる可能性もあります。
このような表示を行う場合は、ユーザーに誤解を与えない設計や、実際の終了日時の明示など、法律に準拠した表現を心がけてください。
このカウントダウンタイマーの導入および運用は、すべてご自身の責任で行ってください。法律に関するご不明点は、専門の法律家へのご相談をおすすめします。
カウントダウン期限を変更する方法
このタイマーでは、初回アクセス時に「現在の時刻＋3日間（=72時間）」をカウントダウンの終了期限として設定しています。もし、表示期間を変更したい場合は、JavaScript内の「時間計算部分」を編集するだけで簡単に対応できます。
// 現在から72時間後を期限として設定 deadline = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
この部分の 3 を希望の期間（日数）に変更すればOKです。
よくある例
| 表示したい期間 | 設定値 |
|---|---|
| 1日（24時間） | 1 * 24 * 60 * 60 * 1000 |
| 2日間 | 2 * 24 * 60 * 60 * 1000 |
| 7日間（1週間） | 7 * 24 * 60 * 60 * 1000 |
| 3時間 | 3 * 60 * 60 * 1000 （←「日」の掛け算不要） |
| 30分 | 30 * 60 * 1000 |
