タイムセール時に劇的な効果?カウントダウンタイマーの設置方法

公開日: 

楽天ってセール多いですよね。

スーパーSALE。お買い物マラソン。お買い物駅伝。優勝セール。6時間タイムセール。などなど、数えきれない程のセールが行われています。

「嘘の2重価格」で問題になったりしましたが、リアルの店舗・ネットショップ問わず、セールは今も昔も有効な販促手段であることは間違いない様です。

「今、この時間しかその値段で買えない」と言う事実は、「今買う理由」につながり、よく検討した人も勢いで買ってしまう人も、タイムセールと言う言葉は大好きなはず。

count

セールを頻発すると、自分の首を締める事に?

ただ、人は一度安い価格を見てしまうと、それ以上の価格では買う気になれません。人は「得をしたい気持ち」より「損をしたくない」気持ちのほうが強いものだそうです。

主力商品を値下げすると、お客様が「セール待ち」状態になり、通常の価格で販売していても「あの時○○円だったから、今はそれより○○円高い」ってなってしまうと、なかなか「買おう」という気持ちにはなれず、結果主力商品が全く売れないなんて事も。

さらに、実際にセールを行って販売価格を下げると、「私が買った時より○○円も安い!どういう事?!」と言ったクレームが入る場合も結構あります・・・。

「スーパーの特売卵が買えなかった!」と言ってクレームを入れる人もいるらしいので、当たり前の事なのかもしれません。(個人的には釈然としませんが・・・)

それでも僕らはセールをする!場合もある・・・

しかし!どうしても売上を作りたい。在庫処分などで価格を下げてでも売り切りたい。など、様々な理由でタイムセールを行う事があると思います。

そんな時、「今買う理由」を強く訴求するのに有効なのが、
カウントダウンタイマー

過ぎ去って行く「時間」「可視化(見えるように)」する魔法のツールです。

タイムセールが始まる前にカウントダウンを行って、期待感を高めるも良し。タイムセールの最中にカウントダウンを行って、限定感をさらに訴求するも良し。ほらほら、「何か急がなきゃ」って気持ちになりませんか?

ただ、やり過ぎると「お客様を焦らせて買わせる」という状態になり、説明をよく読まずに買われたお客様のクレームなどにもつながりかねませんので注意が必要です。本当にお得な商品だったり、数が少ない商品の場合に使うのが無難です。

「カウントダウンタイマー」導入方法の流れ

今回は2パターン用意しました。

どちらもjQueryを使っていないので、コピペでお手軽に実装出来ますが、JavaScriptを使っていますので、楽天ショップで使うなら当然、楽天GOLDでしか動きません。

なのでHTMLファイルを楽天GOLDにアップして、店舗のページではiframeを使って読み込む事になります。

  1. HTMLファイル作成
  2. 楽天GOLDにアップ
  3. カテゴリページ・商品ページでiframeを使って読み込む

カウントダウンタイマー初級編-テキストでカウント

「JavaScript カウントダウン」で検索すれば、色んなパターンが出てきますが、カスタマイズが楽なこちらのものが個人的に良かったので、使わせて頂きます。

コピペでサクッと導入できるライブラリ非依存のJavascriptカウントダウン | plusblog

「カウントダウンタイマー」初級編見本



デモページ
ソースファイルダウンロード

ソースファイルをダウンロードして、下記部分の日付を書き換えて、楽天GOLDにアップして、コードをページに記述すればすぐ動きます。

書き換える部分(カウントの終了日時)

 var tl = new Date('2014/07/24 01:00:00');

iframeを読み込むタグ

<iframe src="カウントダウンタイマーのURL" frameborder="0" width="600" height="40" scrolling="no"></iframe>

ソースのJavaScriptはこんな感じです。
<script language="JavaScript" type="text/javascript">
function CountdownTimer(elm,tl,mes){
 this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
 initialize:function(elm,tl,mes) {
  this.elem = document.getElementById(elm);
  this.tl = tl;
  this.mes = mes;
 },countDown:function(){
  var timer='';
  var today=new Date();
  var day=Math.floor((this.tl-today)/(24*60*60*1000));
  var hou=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
  var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
  var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
  var mil=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
  var me=this;

  if( ( this.tl - today ) > 0 ){
   if (day) timer += '<span class="day">'+day+'</span><span class="moji">日</span>';
   if (hou) timer += '<span class="hou">'+hou+'</span><span class="moji">時間</span>';
   timer += '<span class="min">'+this.addZero(min)+'</span><span class="moji">分</span><span class="sec">'+this.addZero(sec)+'</span><span class="moji">秒</span><span class="mil">'+this.addZero(mil)+'</span>';
   this.elem.innerHTML = timer;
   tid = setTimeout( function(){me.countDown();},10 );
  }else{
   this.elem.innerHTML = this.mes;
   return;
  }
 },addZero:function(num){ return ('0'+num).slice(-2); }
}
function countdown(){
 var tl = new Date('2025/07/04 00:00:00');
 //この上の部分で終了時間を設定するYO!
 var timer = new CountdownTimer('countdown',tl,'終了しました');
 //この上の文は終了した後に表示する文字!
 timer.countDown();
}
window.onload=function(){
 countdown();
}
</script>

CSSのクラスが既に指定してあるので、文字の大きさや色など自由にカスタマイズ出来るのが魅力です。背景に画像を使用したりフォントの色や配置を変えるなど、ご自由にカスタマイズしてみて下さい。

countdownと言うIDのdiv要素が全体の入れ物。「day」「hou」「min」「sec」「mil」のクラスがそれぞれ日数・時間・分・秒・ミリ秒の数字になり、span要素に入って出力されます。

cssで位置や文字の大きさなどを調整し、背景画像などと併せて使用すれば、オリジナルのカウントダウンタイマーが作れます。

JavaScriptが良くわかんなくて、varとか見るだけで眠くなる僕のような人でも大丈夫です。plusblogさんに感謝。

カウントダウンタイマー上級編-数字を画像にする。

ここからは結構面倒臭いので、HTMLやCSSが良くわからない人はやめたほうが無難です。僕もJavaScriptよく分かってないのに力技で実現してます。

多分詳しい人が見たら穴だらけだと思いますが、自己責任で参考にして下さい。 こちらもCSSで位置調整などが出来るようにIDを付与しています。
(何故Classじゃないのかってツッコミは無しの方向で・・・)

「カウントダウンタイマー」上級編見本



デモページ
ソースファイルダウンロード

こちらのパターンは画像を読み込んで表示させていますので、0から9までの数字の画像が必要になります。また、「日」「時間」「分」「秒」なども画像にしていますので、こちらも準備が必要です。ファイル名を“●.png”にして同じディレクトリに保存して下さい。

背景を活かすデザインであれば、見本の様に透過pngで保存して、楽天GOLDにアップする必要があります。(R-cabinetはpng形式に対応していないため)

見本では画像を配置して、カウントダウンの領域を重ねて表示していますが、背景画像などを使えば、もっと柔軟なデザインも可能です。腕に自信のある方は是非チャレンジしてみて下さい。

人気(ひとけ)の演出にも効果あり?

いかがでしょうか。
少しハードルは高めですが、実装出来れば効果はある程度見込めそう?ですし、一度作れば次回のセール時にもカンタンに再利用出来ますので、SALEを開催する事が多い店舗さんであれば、チャレンジする価値はあると思います。

jQueryなどで動くバナーを作るのもそうですが、ページ上に動くコンテンツがあると、ネットショップで重要と言われる「人気」(にんきでは無く、ひとけと読みます)の演出にも効果があります。

ネットショップの人気(ひとけ)演出用のツールは各社色々提供していますが、まずは自社で出来る事を試してみてはいかがでしょう。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. YOSIO より:

    2つ目のカウントダウンなんですがカウントの終了と同時に新たなカウントが始まってしまうんですがなんかいい方法ないですか…(´・ω・`)

    • ハカセ より:

      YOSIO様
      コメントありがとうございます。

      2つ目のカウントダウンですが、正直言ってワタクシJavaScriptの事がビタイチ分かっておりません・・・。力技で実装しておりますので、現在のところ不具合ありまくりと思われます。

      目下お勉強中ですので、後日修正版をアップしたいと思っております。
      期待せずにお待ちください。

      よろしくお願い致します。

  2. めェめ より:

    ハカセさま、いつも拝見させていただいております。
    ハカセさまのカウントダウンタイマーそのままコピペでいただきました。
    ありがとうございます。

    今回、js(Jqueryも少し)で「今ご注文いただくと何時出荷します」というのを作ってみました。

    楽天カレンダーのソースを丸ごと読み込めるようにしており、RMSでの店舗休日設定が反映される形になります。

    ただ、GOLDサーバにはカレンダーが設置できない為、もう少し工夫が必要になるかもしれません。Jquery・Ajaxをもう少し理解できれば、Itemサーバ側のカレンダーを読み込んで実装できるのかもしれませんね。

    今はカレンダー付きのhtmlを自社のサーバにてタイマー機能を使いFTPでUPし出荷時間目安だけをIframeでheightを絞り込んで写しています(時間の増減はjs側で1分毎に更新していますが、カレンダーの中身の更新ができない為、毎月FTPで上げ直ししています。)
    よろしければ、ご意見・ご指南ください。

    ご注文商品の出荷日ご案内

    #inv {
    margin-top:500px;
    font-size:0.1px;
    }

    body{
    margin-top:0;
    margin-left:0;
    margin-right:0;
    margin-bottom:0;
    }

    setTimeout(“location.reload()”,60000);
    window.onload = function tes(){
    /*—カレンダーより店舗定休日一覧を取得処理ココカラ—*/
    bbb = Number($(“th”).eq(0).text().replace(‘年’,”).replace(‘月’,”).substr(4));//上段月取得
    ccc = Number($(“th”).eq(8).text().replace(‘年’,”).replace(‘月’,”).substr(4));//下段月取得
    ddd = $(“th”).eq(0).text().replace(‘年’,”).replace(‘月’,”).substr(0,4);//上段西暦取得
    eee = $(“th”).eq(8).text().replace(‘年’,”).replace(‘月’,”).substr(0,4);//下段西暦取得

    var num = $(‘.calframe_rakuten’).find(‘td.event1day_rakuten’).length;//上下カレンダーの中の休日数を取得(ループEND)
    //     ↑カレンダーのテーブルClass ↑休日時のClass Class名が変更になった場合は編集してください

    var holiday = [];//休日保存用配列
    var aaa = [];//定休日取得用仮配列

    for (i = 0; i aaa){//次月になったかを比較

    for(j = i; j = 13){//当日出荷締め切り後。当日出荷時間の制御はここの数値を変える

    d.setDate(day + z);//日付を1日プラス
    day = d.getDate();//日を再セット
    dow = d.getDay();//曜日を再セット
    month = d.getMonth()+1;
    year = d.getFullYear();
    zzz = year + “/” + month + “/” + day;// 翌日が休日かをチェック用

    //明日は定休日?
    $.each(holiday,function(key,value){
    if(zzz == value){
    s_k = key;
    return false;
    }
    });

    //定休日かどうかの分岐
    if(typeof s_k == “undefined”){//該当無し

    //日数が確定した為、出荷日までのカウントダウンを算出
    var now = new Date(); //現在を再取得
    var t_d = new Date(zzz); //発送日をセット
    t_d.setHours(13,00); //13時00分をセット
    t_sec = t_d.getTime() – now.getTime();
    myNextHour = Math.floor ( t_sec / (1000*60*60) ); // ‘時’ を計算
    t_sec -= ( myNextHour * (1000*60*60) ); // 経過秒から ‘時’ を引く
    myNextMin = Math.floor ( t_sec / (1000*60) ); // ‘分’ を計算
    t_sec -= ( myNextMin * (1000*60) ); // 経過秒から ‘分’ を引く
    myNextSec = Math.floor ( t_sec / 1000 ); // ‘秒’ を計算
    myDisp = “”; // 文字クリア
    if ( myNextHour != 0 ) myDisp += myNextHour + “時間 “; // 0時間なら表示しない
    if ( myNextMin != 0 ) myDisp += myNextMin + “分以内に “; // 0分なら表示しない

    //ここから書き出し
    document.getElementById(“ship_date”).innerHTML = month + “月” + day + “日” + “(” + week[dow] + “)”;//出荷日書き出し
    document.getElementById(“load_time”).innerHTML = myDisp;//時間書き出し

    }else{//定休日でしたよね^^;で、いつ出荷するの?

    //休日数より連休が上回る事がない為、ループ上限は休日数で
    for(i = 0; i < num; i++){//明日も定休日?連休が途切れた瞬間ループ終了
    s_k++;
    d.setDate(day + z);
    month = d.getMonth()+1;
    year = d.getFullYear();
    day = d.getDate();
    dow = d.getDay();
    mmm = year + "/" + month + "/" + day;// 本日が休日かをチェック用

    //連休終了日決定
    if(mmm != holiday[s_k]){

    //日数が確定した為、出荷日までのカウントダウンを算出
    var now = new Date(); //現在を再取得
    var t_d = new Date(mmm); //発送日をセット
    t_d.setHours(13,00); //13時00分をセット
    t_sec = t_d.getTime() – now.getTime(); //次の発送日までを演算
    myNextHour = Math.floor ( t_sec / (1000*60*60) ); // '時' を計算
    t_sec -= ( myNextHour * (1000*60*60) ); // 経過秒から '時' を引く
    myNextMin = Math.floor ( t_sec / (1000*60) ); // '分' を計算
    t_sec -= ( myNextMin * (1000*60) ); // 経過秒から '分' を引く
    myNextSec = Math.floor ( t_sec / 1000 ); // '秒' を計算
    myDisp = ""; // 文字クリア

    if ( myNextHour != 0 ) myDisp += myNextHour + "時間 "; // 0時間なら表示しない
    if ( myNextMin != 0 ) myDisp += myNextMin + "分以内に "; // 0分なら表示しない

    //ここで書き出し
    document.getElementById("ship_date").innerHTML = month + "月" + day + "日" + "(" + week[dow] + ")";//出荷日書き出し
    document.getElementById("load_time").innerHTML = myDisp;//時間書き出し
    return;
    break;
    }
    }
    }

    }else{//当日出荷締め切り前

    hhh = year + "/" + month + "/" + day;// 本日が休日かをチェック用
    $.each(holiday,function(key,value){
    if(hhh == value){
    s_k = key;
    return false;
    }
    });

    if(typeof s_k == "undefined"){//該当無し

    //日数が確定した為、出荷日までのカウントダウンを算出
    var now = new Date(); //現在を再取得
    var t_d = new Date(hhh); //発送日をセット
    t_d.setHours(13,00); //13時00分をセット
    t_sec = t_d.getTime() – now.getTime();
    myNextHour = Math.floor ( t_sec / (1000*60*60) ); // '時' を計算
    t_sec -= ( myNextHour * (1000*60*60) ); // 経過秒から '時' を引く
    myNextMin = Math.floor ( t_sec / (1000*60) ); // '分' を計算
    t_sec -= ( myNextMin * (1000*60) ); // 経過秒から '分' を引く
    myNextSec = Math.floor ( t_sec / 1000 ); // '秒' を計算
    myDisp = ""; // 文字クリア
    if ( myNextHour != 0 ) myDisp += myNextHour + "時間 "; // 0時間なら表示しない
    if ( myNextMin != 0 ) myDisp += myNextMin + "分以内に "; // 0分なら表示しない

    //ここから書き出し
    document.getElementById("ship_date").innerHTML = month + "月" + day + "日(本日)";//出荷日書き出し
    document.getElementById("load_time").innerHTML = myDisp ;//時間書き出し

    }else{//定休日でしたよね^^;

    //休日数より連休が上回る事がない為、ループ上限は休日数で
    for(i = 0; i < num; i++){//明日も定休日?連休が途切れた瞬間ループ終了
    s_k++;
    d.setDate(day + z);
    month = d.getMonth()+1;
    year = d.getFullYear();
    day = d.getDate();
    dow = d.getDay();
    mmm = year + "/" + month + "/" + day;// 本日が休日かをチェック用

    //連休終了日決定
    if(mmm != holiday[s_k]){

    //日数が確定した為、出荷日までのカウントダウンを算出
    var now = new Date(); //現在を再取得
    var t_d = new Date(mmm); //発送日をセット
    t_d.setHours(13,00); //13時00分をセット
    t_sec = t_d.getTime() – now.getTime();
    myNextHour = Math.floor ( t_sec / (1000*60*60) ); // '時' を計算
    t_sec -= ( myNextHour * (1000*60*60) ); // 経過秒から '時' を引く
    myNextMin = Math.floor ( t_sec / (1000*60) ); // '分' を計算
    t_sec -= ( myNextMin * (1000*60) ); // 経過秒から '分' を引く
    myNextSec = Math.floor ( t_sec / 1000 ); // '秒' を計算
    myDisp = ""; // 文字クリア
    if ( myNextHour != 0 ) myDisp += myNextHour + "時間 "; // 0時間なら表示しない
    if ( myNextMin != 0 ) myDisp += myNextMin + "分以内に "; // 0分なら表示しない

    //ここから書き出し
    document.getElementById("ship_date").innerHTML = month + "月" + day + "日" + "(" + week[dow] + ")";//出荷日書き出し
    document.getElementById("load_time").innerHTML = myDisp ;//時間書き出し
    return;
    break;
    }
    }
    }
    }
    }

    今から **** ご注文頂きますと に出荷いたします。

    2014年10月
    日月火水木金土
       1234
    567891011
    12131415161718
    19202122232425
    262728293031 

    2014年11月
    日月火水木金土
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30      

  3. razu より:

    ハカセさま

    カウントダウンを検索して、このサイトに辿りつきました!わかりやすい解説ありがとうございました。

    さて、カウントダウンについて、在庫のカウントダウンはどのように実装したらよいのでしょうか?

    例えば、限定100個プレゼントとして、申し込みがあるとカウントが1減るようなものです。

    お知恵(ソースコード・・・)をいただけますと幸いです。

    • ハカセ より:

      razu様
      返信遅くなりました。
      JavaScriptで在庫のカウントダウンを行うのであれば、在庫の情報をどこからか取得する必要があります。
      しかし、RMSで生成されるページとJavaScriptが動くGOLDのページはドメインが違うため、
      情報のやりとりには制限があります。なので結構ハードルが高くて私の知識ではちょっと・・・。
      CSSで在庫表示の部分の位置や見た目を、無理やり調整するって手も無くは無いですが・・・。
      お役に立てずにスミマセン。

  4. nori より:

    ハカセ様

    カウントダウンタイマーの検索でたどり着きました。
    非常にわかりやすく、さっそく使用させていただきます。
    ところで、複数の商品ページそれぞれことなるカウントダウンを
    設定したいのですが、どのように設定すればよろしいでしょうか。
    勉強不足で申し訳ございません。
    ご教授いただければ幸いです。

  5. nori より:

    ハカセ様

    上記コメントさせていただきましたnoriと申します。
    自己解決いたしました。
    お騒がせいたしました。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る