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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コピペでサクッと導入できるライブラリ非依存のJavascriptカウントダウン | plusblog
[browser-shot width=”600″ url=”http://plusblog.jp/3719/”]

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

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

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

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

iframeを読み込むタグ

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

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

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