カウントダウン タイマー CTA
「カウントダウン タイマー CTA」は、締め切りまでの残り時間を 日・時・分・秒で刻みながら表示する訴求バナー です。JavaScript が終了時刻と現在時刻の差を1秒ごとに計算し、各桁を更新します。
このパーツの使いどころと実装ポイント
「カウントダウン タイマー CTA」は、締め切りまでの残り時間を日・時・分・秒で刻みながら表示する訴求バナーです。JavaScript が終了時刻と現在時刻の差を1秒ごとに計算し、各桁を更新します。左にキャッチコピーとボタン、右にタイマーを置く2カラム構成で、濃い紺〜青のグラデーション背景が時間の緊張感を引き立てます。
向いている場面
- 期間限定キャンペーンやセールの告知
- 先着・数量限定の申し込み受付
- セミナーやウェビナーの締切リマインド
カスタマイズの勘所は終了時刻の指定方法です。サンプルは「現在から数日後」を基準にしていますが、実際のキャンペーンでは固定の日時を指定し直さないと、再読み込みのたびに期限がずれてしまいます。0になったら「終了しました」に切り替わるので、終了後の表示も確認しておきましょう。
実装上の注意
数字が毎秒書き換わるため、桁数が変わると横幅が揺れて見えることがあります。数値部分に固定幅や等幅フォントを当てるとガタつきを抑えられます。煽りすぎは逆効果なので、実在しない締め切りや虚偽の在庫数を出さないことが信頼維持の前提です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
終了日時を実際のキャンペーンに合わせるには
JavaScriptで終了時刻を計算している箇所を、固定の日時指定に書き換えてください。サンプルは現在時刻からの相対指定なのでリロードのたびにずれます。実際の締切日時を直接指定すれば、いつ開いても同じゴールに向かってカウントダウンします。
カウントが0になったらどうなりますか
残り時間が0以下になるとタイマー部分が「終了しました」という表示に切り替わります。キャンペーン終了後も誤って受付に見えないよう、ボタンの文言やリンク先も終了状態に合わせて差し替えておくと安全です。