キャンペーン終了までの時間を視覚的に表現するカウントダウンタイマーは、訪問者の行動を喚起し、コンバージョンにつながる強力なツールとなり得ます。
少しベタで古臭い気もしますが、カウントダウンを表示することで「カウントダウン効果」という、期限を知らせると人はつい行動してしまうという心理効果が期待できます。
マーケティングではよく使用される手法なので、ぜひ試してみてください。
今回の記事では、jQueryを使って簡単にカウントダウンタイマーを作成する方法について解説します。
サンプル
まずHTML部分では、各種情報（日数、時間、分、秒）を表示するための空の
タグを作成します。
<div id="countdown">
<p id="days"></p>
<p id="hours"></p>
<p id="minutes"></p>
<p id="seconds"></p>
</div>次に、JavaScriptコードの一部であるjQueryは、$(document).ready(function(){…})内で実行されます。この関数は、全てのHTML文書が読み込まれてから実行されます。
$(document).ready(function() {
// キャンペーン終了日時をセット
var endDate = new Date("2023-07-23T00:00:00");
// 毎秒実行される関数
setInterval(function() {
// 現在の日時を取得
var now = new Date();
// 終了までの時間差をミリ秒で計算
var remainingTime = endDate - now;
// 時間差を使って残りの日、時間、分、秒を計算
var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// 結果をHTMLに出力
$('#days').text(days + "日");
$('#hours').text(hours + "時間");
$('#minutes').text(minutes + "分");
$('#seconds').text(seconds + "秒");
}, 1000);
});キャンペーンの終了日時はnew Date(“2023-07-23T00:00:00”)として定義されています。ここでは、日時は「年-月-日T時間:分:秒」の形式で指定されています。
setInterval関数は、指定した時間ごと（ここでは1000ミリ秒＝1秒ごと）にコードを実行します。その中で現在の日時を取得し、それと終了日時との間の差（ミリ秒単位）を計算しています。
次に、ミリ秒単位の差を日数、時間、分、秒に変換します。これは、適切な単位で割り算を行うことによって実現されます。例えば、1日は24時間、1時間は60分、1分は60秒、1秒は1000ミリ秒であることを利用しています。
最後に、計算した日数、時間、分、秒をHTML要素に挿入して表示します。これは$(‘#days’).text(days + “日”)のような形で行われます。ここで$(‘#days’)はidが’days’のHTML要素を指し、text()関数はその要素のテキストを変更します。
まとめ
以上の方法で、あなたのウェブサイトにカウントダウンタイマーを簡単に組み込むことができます。jQueryを使用することで、日、時間、分、そして秒単位でリアルタイムにタイマーを更新することが可能となります。特定のキャンペーンやイベントに対するユーザーの緊張感や期待感を高め、結果的にはより高いエンゲージメントを生むことが期待できます。
この手法は簡単で直感的なものなので、自由にカスタマイズして、自分だけのユニークなカウントダウンタイマーを作成してみてください。デザインやレイアウト、終了日時の設定など、あなたのニーズに最適な形に調整することが可能です。
これでウェブサイトのキャンペーンが終わるまでの時間を、訪問者にわかりやすく伝えることができると同時にコンバージョンを上げる効果も期待できます。幅広い応用が可能なこの機能をうまく活用してみてください！
