Webサイト用カウントダウンタイマー作成ツール
カウントダウンタイマー作成ツール
カウントダウンタイマー作成ツール：無料のHTMLとReactコード、登録不要 | We.Inc
Webサイトに置くカウントダウンタイマーを作成できます。日付とタイムゾーンを設定してスタイルを選び、シンプルなHTMLかReactのコンポーネントをコピーするだけです。アカウントも、追跡用のウィジェットも、外部のスクリプトも必要ありません。
Webサイトのカウントダウンタイマーは、決められた期限と訪問者の時計を1秒ごとに比較し、残りの日数、時間、分、秒を表示します。下で日付、時刻、タイムゾーンを設定してスタイルを選び、それだけで動くHTMLかReactのコンポーネントをコピーしてください。コードはあなたのページ上で動作し、外部のスクリプトやアカウントは一切必要ありません。
2種類のカウントダウン
- 日時を固定
- すべての人に同じ瞬間
- 実際の時刻に終わる発売、イベント、セール
- 訪問者ごと
- 各訪問者が最初に見てから決まった時間後
- その人にとって本当に期限が切れる歓迎特典
日付と、その期限が属するタイムゾーンを選び、3つのスタイルとアクセントカラーから好きなものを選ぶと、下に実際に動く結果が表示されます。出力されるのは、HTML、CSS、JavaScriptをまとめた1つのブロックか、Tailwindのクラスを使ったReactのコンポーネントです。
- 期限の日付と時刻を選び、次にそれがどのタイムゾーンの時刻かを選びます。コードは正確な瞬間をUTCで保存するので、ほかのタイムゾーンにいる訪問者にも正しい残り時間が表示されます。
- または、訪問者ごとのカウントダウンに切り替えて、各訪問者に与える時間数を入力します。
- スタイルとアクセントカラーを選び、見出しと、時間切れになったときに表示するメッセージを編集します。
- HTMLの埋め込みコードかReactのコンポーネントをコピーし、タイマーを表示したい場所に貼り付けます。
- カウントダウンは、本当に期限がある場合にだけ表示しましょう。リセットされたり終わらなかったりするタイマーは訪問者を欺くものであり、米国連邦取引委員会も、偽のカウントダウンを欺瞞的なデザイン手法の一つに挙げています。
- 終了時のメッセージでは、ゼロになったら何が起きるのかを伝えましょう。たとえば、セールが終わったことやイベントが始まったことを、次の行動へのリンクと一緒に表示します。
- タイマーは訪問者の端末の時計を使います。その時計がずれていればカウントダウンもずれるので、本当の締め切りを判定する唯一の手段としては使わないでください。期限はサーバー側でも必ず確認しましょう。
- 1秒ごとの更新は、スクリーンリーダーに読み上げさせないようにしましょう。コードではタイマーにrole timerとaria-live offを指定しているので、毎秒読み上げられることはありません。
よくある質問
Webサイトにカウントダウンタイマーを追加するには？
HTMLの埋め込みコードをコピーし、ページ内のタイマーを置きたい場所に貼り付けます。ほとんどのサイトビルダーには、そのためのHTMLブロックや埋め込みブロックがあります。サイトをReactで作っている場合は、代わりにコンポーネントをコピーし、ほかのコンポーネントと同じように描画してください。
ほかのタイムゾーンにいる訪問者にも、タイマーは正しく表示されますか？
はい。このツールは、指定した日付とタイムゾーンをUTCの正確な1つの瞬間に変換し、その数値をコードに書き込みます。訪問者の現地時刻がどうであっても、すべてのブラウザーが同じ瞬間に向かってカウントダウンします。
訪問者ごとのオプションは何をするものですか？
各訪問者が初めてページを見た時点でカウントダウンを開始し、その瞬間を訪問者のブラウザーに保存します。そのため、ページを再読み込みしても最初からやり直しにはなりません。ただし、サイトのデータを消去したり端末を変えたりすると新しいカウントダウンが始まるので、そうした場合でも喜んで応じられる特典にだけ使ってください。
このカウントダウンをメールに入れられますか？
いいえ。メールソフトはJavaScriptを実行しません。メールのカウントダウンは、メールが開かれた瞬間にサーバーが生成するアニメーション画像で、静的なページでは用意できません。
コードがUTCで保存する理由
- 12月1日9:00という日時は、トロントとカラチではまったく別の瞬間を指します。期限をUTCのタイムスタンプとして保存すればこのあいまいさがなくなり、夏時間の切り替えにも対応できます。変換には、選んだタイムゾーンでのその日付のルールが使われるからです。
- スクリプトは、更新のたびに期限から現在時刻を引き、その差を日、時間、分、秒に分けて表示します。
タイマーを正確かつ軽く保つ
- ブラウザーは、バックグラウンドのタブにあるタイマーの動きを遅くします。そのため、更新のたびに単純に1秒ずつ引いていくカウントダウンは、だんだんずれていきます。このコードは毎回時計から計算し直し、次の更新を次の秒の始まりに予約するので、タブに戻ってきたときにも正しい値を保ちます。
- ライブラリも外部へのリクエストも使っていないので、ページの表示は速いままで、訪問者のデータがウィジェットの提供元に送られることもありません。
オープンまであと
オープンしました。どうぞお入りください。
カウントダウンを設定する
カウントダウンの種類
日時を固定
訪問者ごと
期限（そのタイムゾーンの現地時刻）
タイムゾーン
正確な瞬間：
日付を入力してください
各訪問者に与える時間数
スタイル
カード
ミニマル
ダークパネル
アクセント
見出し
ゼロになったときのメッセージ
カウントダウンのライブプレビュー
コードの形式
HTMLの埋め込み
Reactのコンポーネント
コードをコピー
ダウンロード
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る