カウントダウンタイマー(ブログパーツ)とは?
カウントダウンタイマーは、選んだ日時まで「あと何日・何時間」かをサイト上に表示する小さなボックスです。セールの終了、新商品の発売日、ウェビナー、結婚式、年越しなど、数字がリアルタイムで減っていくので、訪問者は残り日数・時間・分・秒をひと目で確認できます。
WebToolsMe のカウントダウンタイマーは、日付・時刻・タイムゾーンを決め、見出しを書き、サイトに合う色を選んで、HTMLコードを1行コピーするだけ。プラグインもアカウント登録も不要で、WordPress、はてなブログ、Wix、Shopify など、JavaScript を含む HTML を貼れる場所ならどこでも使える無料のブログパーツです。
サイトでのカウントダウンの使い道
期限が目に見えると、人は決断や準備がしやすくなります。よく使われる場面:
- セール・キャンペーン:ブラックフライデー、初売り、決算セール、期間限定クーポンなど。
- 季節の行事:お正月、クリスマス、バレンタイン、ゴールデンウィーク、夏休み。
- 試験・締め切り:共通テスト、資格試験、応募や申し込みの締め切り。
- 発売・公開:新商品の発売日、新作の公開、サイトのオープン、「近日公開」ページ。
- イベント・ライブ配信:コンサート、セミナー、配信の開始やチケット販売の終了。
- 結婚式・記念日:結婚式、誕生日、卒業式までのカウントダウン。
カウントダウンをサイトに貼る方法(HTMLコード)
上で日時とデザインを設定し、コードをコピーを押してください。短い HTML コードが手に入るので、タイマーを表示したい場所に貼り付け、お使いのサービスの手順に従ってください。
- ページまたは投稿のエディターでカスタム HTMLブロックを追加します。
- ブロックにコードを貼り付けます。
- ページを更新または公開します。
- ページの HTML ファイルを開きます。
- ウィジェットを表示したい場所にコードを貼り付けます。
- ファイルを保存してサーバーにアップロードします。
- 追加 › 埋め込みコード › HTML を埋め込むを選びます。
- コードを貼り付け、ボックスをページに配置します。
- サイトを公開します。
- レイアウト › ガジェットを追加 › HTML/JavaScriptを開きます。
- コードを貼り付けます。
- 保存します。
主な機能
タイムゾーン:全員同じ瞬間か、現地時刻か
ほとんどの締め切りは「ひとつの瞬間」です。日本時間 0 時に終わるセールなら、ハワイの訪問者には現地時刻の前日 5 時にゼロになるべきで、ハワイの深夜 0 時ではありません。この場合は締め切りの基準となるタイムゾーン(例:Asia/Tokyo)を選びます。すべての訪問者が同じ瞬間に向けてカウントダウンします。
一方、元日のように各地の現地時刻で迎える瞬間もあります。その場合は各訪問者の現地時刻を選ぶと、訪問者の端末の時計を使ってカウントします。
効果的なカウントダウンのコツ
- ゼロになると何が起きるかを見出しで伝えましょう:「セール終了まで」「発売まで」「受付締め切りまで」。
- 実在する日時を使いましょう。訪問のたびにリセットされる偽のタイマーは信頼を損ない、景品表示法などで問題になる不当表示にあたるおそれもあります。
- 数週間にわたるカウントダウンでは秒を隠し、最終日だけ表示すると盛り上がります。
- 「今すぐ購入」「申し込む」ボタンの近くにタイマーを置きましょう。
- 終了メッセージを設定しておくと、期限後もウィジェットが役立ちます。
軽量でプライバシーにも配慮
カウントダウンタイマーは小さなスクリプト1つだけです。読み込み後はサーバーに接続せず、残り時間は訪問者のブラウザで毎秒計算されます。Cookie は使わず、データも収集しません。独立した枠の中で動くため、テーマを崩したりサイトを重くしたりしません。
よくある質問
カウントダウンタイマーは無料ですか?
はい。完全に無料で、登録不要、設置できるサイト数にも制限はありません。小さな出典リンクが表示されるだけです。
プラグインなしでブログに貼れますか?
はい。HTMLコードをコピーして、WordPress の「カスタム HTML」ブロック、はてなブログの HTML 編集、または任意のページの HTML に貼り付けてください。
カウントダウンが終わるとどうなりますか?
ゼロで止まり、設定した終了メッセージを表示します。空欄の場合は「終了しました!」と表示されます。
全員に同じ残り時間が表示されますか?
特定のタイムゾーンを選べば、全員同じです。「各訪問者の現地時刻」を選ぶと、各国で同じ現地時刻にゼロになります。
訪問者ごとにリセットされるタイマーは作れますか?
いいえ。実在する日時までのみカウントするため、キャンペーンの信頼性を保てます。
あとから日付を変えるには?
このページで新しい日付を設定し、古いコードを新しいコードに置き換えてください。