数えきれない程のセールが行われています。「嘘の2重価格」で問題になったりしましたが、リアルの店舗・ネットショップ問わず、セールは今も昔も有効な販促手段であることは間違いない様です。「今、この時間しかその値段で買えない」と言う事実は、「今買う理由」につながり、よく検討した人も勢いで買ってしまう人も、タイムセールと言う言葉は大好きなはず。セールを頻発すると、自分の首を締める事に?ただ、人は一度安い価格を見てしまうと、それ以上の価格では買う気になれません。人は「得をしたい気持ち」より「損をしたくない」気持ちのほうが強いものだそうです。主力商品を値下げすると、お客様が「セール待ち」状態になり、通常の価格で販売していても「あの時○○円だったから、今はそれより○○円高い」ってなってしまうと、なかなか「買おう」という気持ちにはなれず、結果主力商品が全く売れないなんて事も。実際にセールを行って販売価格を下げると、「私が買った時より○○円も安い!どういう事?!」と言ったクレームが入る場合も結構あります・・・。「スーパーの特売卵が買えなかった!」と言ってクレームを入れる人もいるらしいので、当たり前の事なのかもしれません。(個人的には釈然としませんが・・・)それでも僕らはセールをする!場合もある・・・しかし!どうしても売上を作りたい。在庫処分などで価格を下げてでも売り切りたい。様々な理由でタイムセールを行う事があると思います。そんな時、「今買う理由」を強く訴求するのに有効なのが、カウントダウンタイマー。過ぎ去って行く「時間」を「可視化(見えるように)」する魔法のツールです。タイムセールが始まる前にカウントダウンを行って、期待感を高めるも良し。タイムセールの最中にカウントダウンを行って、限定感をさらに訴求するも良し。ほらほら、「何か急がなきゃ」って気持ちになりませんか?ただ、やり過ぎると「お客様を焦らせて買わせる」という状態になり、説明をよく読まずに買われたお客様のクレームなどにもつながりかねませんので注意が必要です。本当にお得な商品だったり、数が少ない商品の場合に使うのが無難です。「カウントダウンタイマー」導入方法の流れ今回は2パターン用意しました。どちらもjQueryを使っていないので、コピペでお手軽に実装出来ますが、JavaScriptを使っていますので、楽天ショップで使うなら当然、楽天GOLDでしか動きません。HTMLファイルを楽天GOLDにアップして、店舗のページではiframeを使って読み込む事になります。カウントダウン」で検索すれば、色んなパターンが出てきますが、カスタマイズが楽なこちらのものが個人的に良かったので、使わせて頂きます。plusblog「カウントダウンタイマー」初級編見本デモページソースファイルダウンロードソースファイルをダウンロードして、下記部分の日付を書き換えて、楽天GOLDにアップして、コードをページに記述すればすぐ動きます。scrolling="no"></iframe>ソースのJavaScriptはこんな感じです。countdown();}</script>CSSのクラスが既に指定してあるので、文字の大きさや色など自由にカスタマイズ出来るのが魅力です。背景に画像を使用したりフォントの色や配置を変えるなど、ご自由にカスタマイズしてみて下さい。countdownと言うIDのdiv要素が全体の入れ物。ミリ秒の数字になり、span要素に入って出力されます。cssで位置や文字の大きさなどを調整し、背景画像などと併せて使用すれば、オリジナルのカウントダウンタイマーが作れます。JavaScriptが良くわかんなくて、varとか見るだけで眠くなる僕のような人でも大丈夫です。plusblogさんに感謝。カウントダウンタイマー上級編-数字を画像にする。ここからは結構面倒臭いので、HTMLやCSSが良くわからない人はやめたほうが無難です。僕もJavaScriptよく分かってないのに力技で実現してます。詳しい人が見たら穴だらけだと思いますが、自己責任で参考にして下さい。こちらもCSSで位置調整などが出来るようにIDを付与しています。(何故Classじゃないのかってツッコミは無しの方向で・・・)「カウントダウンタイマー」上級編見本デモページソースファイルダウンロードこちらのパターンは画像を読み込んで表示させていますので、0から9までの数字の画像が必要になります。画像にしていますので、こちらも準備が必要です。ファイル名を“●.png”にして同じディレクトリに保存して下さい。背景を活かすデザインであれば、見本の様に透過pngで保存して、楽天GOLDにアップする必要があります。(R-cabinetはpng形式に対応していないため)見本では画像を配置して、カウントダウンの領域を重ねて表示していますが、背景画像などを使えば、もっと柔軟なデザインも可能です。腕に自信のある方は是非チャレンジしてみて下さい。人気(ひとけ)の演出にも効果あり?いかがでしょうか。ハードルは高めですが、実装出来れば効果はある程度見込めそう?ですし、一度作れば次回のセール時にもカンタンに再利用出来ますので、SALEを開催する事が多い店舗さんであれば、チャレンジする価値はあると思います。jQueryなどで動くバナーを作るのもそうですが、ページ上に動くコンテンツがあると、ネットショップで重要と言われる「人気」(にんきでは無く、ひとけと読みます)の演出にも効果があります。ネットショップの人気(ひとけ)演出用のツールは各社色々提供していますが、まずは自社で出来る事を試してみてはいかがでしょう。【楽天】TOPページ(GOLD)にレビューを表示させる方法これからネットショップを始める人へネットショップで商品を売るためにHTMLの知識やデザインの能力は「必須」では無い件。14:35YOSIO様コメントありがとうございます。2つ目のカウントダウンですが、正直言ってワタクシJavaScriptの事がビタイチ分かっておりません・・・。力技で実装しておりますので、現在のところ不具合ありまくりと思われます。目下お勉強中ですので、後日修正版をアップしたいと思っております。期待せずにお待ちください。12:57ハカセさま、いつも拝見させていただいております。ハカセさまのカウントダウンタイマーそのままコピペでいただきました。ありがとうございます。今回、js(Jqueryも少し)で「今ご注文いただくと何時出荷します」というのを作ってみました。楽天カレンダーのソースを丸ごと読み込めるようにしており、RMSでの店舗休日設定が反映される形になります。GOLDサーバにはカレンダーが設置できない為、もう少し工夫が必要になるかもしれません。Jquery・Ajaxをもう少し理解できれば、Itemサーバ側のカレンダーを読み込んで実装できるのかもしれませんね。今はカレンダー付きのhtmlを自社のサーバにてタイマー機能を使いFTPでUPし出荷時間目安だけをIframeでheightを絞り込んで写しています(時間の増減はjs側で1分毎に更新していますが、カレンダーの中身の更新ができない為、毎月FTPで上げ直ししています。)よろしければ、ご意見・ご指南ください。13){//当日出荷締め切り後。12:14ハカセさまカウントダウンを検索して、このサイトに辿りつきました!わかりやすい解説ありがとうございました。カウントダウンについて、在庫のカウントダウンはどのように実装したらよいのでしょうか?例えば、限定100個プレゼントとして、申し込みがあるとカウントが1減るようなものです。お知恵(ソースコード・・・)をいただけますと幸いです。JavaScriptで在庫のカウントダウンを行うのであれば、在庫の情報をどこからか取得する必要があります。情報のやりとりには制限があります。ハードルが高くて私の知識ではちょっと・・・。CSSで在庫表示の部分の位置や見た目を、無理やり調整するって手も無くは無いですが・・・。お役に立てずにスミマセン。14:16ハカセ様カウントダウンタイマーの検索でたどり着きました。非常にわかりやすく、さっそく使用させていただきます。ところで、複数の商品ページそれぞれことなるカウントダウンを設定したいのですが、どのように設定すればよろしいでしょうか。勉強不足で申し訳ございません。ご教授いただければ幸いです。上記コメントさせていただきましたnoriと申します。自己解決いたしました。お騒がせいたしました。コメントをキャンセルメールアドレスが公開されることはありません。ハカセの研究室ページ先頭に戻る。