カウントダウンタイマーで告知の終了時間を表示したい時

時間限定のセールやイベントなどを告知する場合用いられる「カウントダウンタイマー」

Javascriptとiframeで簡単に実装できるのでご紹介したいと思います。

最近お気に入りのショップでセールのタイミングを逃してしまった時の事。

「欲しい時が買い時」とはいえ、買おうかどうか迷っていた物、ほしい物リストに入っていたものがセール対象になっていてタイミングを逃してしまったのは残念です。

セール時間はカウントダウンで表示されていたのにもかかわらず、その時は手が外せなく後回しにしていたのですが、その後セールのことをすっかり忘れていて気づいたらセール時間終了になってしまったと・・・。

ん～実に口惜しい。

まぁまたセールになる時を待つか、購入のタイミングが合うまで、という事で諦めました。

 

カウントダウンタイマーに関しては「無用に煽られる感じがして気分が良くない」と思われる方も少なく無いと思います。

二重価格問題や閉店セールと言った錯誤を狙った一部の誤った施策と同様、受け手側（お客様）も騙されないための知識を持たれています。

しかし、使い方次第では見込み客へ視覚的な訴求が出来る良いアイデアだと思います。

画像の中に終了日時を埋め込んでも認識していただけなければ意味がありませんからね。

 

という訳で、以下がカウントダウンタイマーのサンプル表示と、ソース（HTML）のリンクです。

 

サンプル表示。日が大きすぎて見きれてますがご容赦ください

リンク（HTML）

 

HTMLは右クリックで保存するか、ソース表示などでコピペして使用してください。

 

終了日時を変更したい場合はJavascriptソースの以下の箇所を変更します。

上の例では、２０２０年７月２４日０時にタイマーが切れる、といった設定になります。

２０１４年７月１日２４時にタイマーが切れるように設定したい場合は次のように記述します。

０時と２４時は一緒のことですが、人間が見た時分かりやすいかなと思います。

 

サマーセール等の文言を変更したい場合は以下の箇所を変更します。

まずは上記のサンプル表示のソース。

こちらを「ウィンターセール」、ミリ秒を表示しない、といった表示に変更する場合。

といったように変更します。

 

テキストのカラーやサイズ等の表示を変更したい場合

IPUT内に記述されたCSSを変更してください。

フォントサイズを大きくしたい場合は、「font-size: 20pt」を「font-size: 24pt」などへ。

フォントカラーを変更したい場合は「color: red」を「color: blue」などへ変更します。

 

 

表示の仕方

楽天の場合はJavascriptの記述を許可されていないので、楽天GOLD内に先ほどのcountdown.htmlをアップロードし、iframeで表示させます。

先ほどのサンプル表示の例で言うと、

「http://salestips.biz/free/」以下にファイルをアップロードし、記事内にHTMLで以下の記述を行います。

※リンク先はご自身でアップロードされたファイルに書き換えてください。
※＜＞は全角で記述してあります。実際は半角に直してください。

 

あとは、好きなところにiframeを記述して表示するだけです。

当然のことながら、自社の顧客層に合わないようであればこの表示は逆効果、大きなマイナス効果になりえます。

十分なマーケティングを行った上で活用してください。

楽天GOLD、FTP、iframe、Javascript、その他、良く分からないことがあればお問い合わせからどうぞ。