カウントダウンタイマー作成(埋め込み対応)
タイトルと目標日時を入れるだけで、キャンペーン終了・イベント開始・提出締切までのカウントダウンタイマーを作成できる無料ツール。iframeの埋め込みコードで自社サイト・ブログ・社内ポータルにそのまま設置できます。
- 登録・ログイン不要
- 無料
- 入力値をサーバーに送信しません
目標の日時を入れると、埋め込めるタイマーができます。
—
残り時間は閲覧者の端末の時計で計算されます(端末の時計がずれていれば表示もずれます)。タイトルと日時は共有URLに含まれるため、社外秘の情報は書かないでください。埋め込みページはnoindexで、アクセス解析タグを含みません。
入力内容はブラウザ内だけで計算・保存され、サーバーには送信されません。「条件のURL」も入力値を#以降に載せるためサーバーへは送られませんが、URLを共有した相手は入力値を見られます。無料・登録不要で使えます。
使い方
- タイトルと目標の日時を入力する
- プレビューで表示を確認し、必要ならテーマ(ライト/ダーク)を切り替える
- 共有URLまたはiframe埋め込みコードをコピーして、サイトや社内ページに貼る
USE CASESこんな場面で使える
- キャンペーンLP「終了まであと◯日」を埋め込んで訴求力を上げる
- ウェビナー・展示会の告知ページ開始までのカウントダウンで参加を後押しする
- 社内の締切共有ポータルやNotionに埋め込んで提出期限を意識づける
FORMULA計算式・仕組みと根拠
- 残り時間 = 目標日時 − 現在時刻(閲覧者の端末の時計基準。1秒ごとに自動更新)
- 埋め込みコード = iframeタグ+パラメータ(タイトル・日時・テーマ)つきURL
- 根拠: タイマーはブラウザ内のJavaScriptだけで動作します。埋め込みページはサーバーへのデータ送信・閲覧データの収集を行いません。
EXAMPLE入力例と結果の読み方
タイトル「夏季キャンペーン終了まで」・目標2026年8月31日23:59と設定すると、プレビューに残り日数・時間・分・秒のカウントダウンが表示され、コピー用のiframe埋め込みコードが生成されます。これをLPやブログのHTML編集画面に貼ると、訪問者の画面でリアルタイムに残り時間が減っていきます。締切訴求はCVRに直結するため、キャンペーンLPの定番パーツとして使えます。
PITFALLSよくある間違い
- 過去の日時を設定してしまう(「終了しました」と表示されます)
- 海外ユーザーも見るページで使う(表示は閲覧者の端末時刻基準のため、日本時間の締切とはずれて見える場合があります)
- 埋め込み先で高さを詰めすぎて表示が切れる(コードのheightを調整してください)
NOTES境界条件・注意点
- カウントダウンは閲覧者の端末の時計に依存します(端末の時計がずれていれば表示もずれます)
- タイトルと日時はURLパラメータに含まれるため、社外秘の情報は書かないでください
- 埋め込みページは検索エンジンに登録されないよう設定(noindex)しており、アクセス解析タグも含みません
使いどころ別のおすすめ設定(日時・サイズ・テーマ)
カウントダウンタイマーは「いつまでか」を一目で伝えるための部品です。 締切が近いほど効果が出るため、キャンペーンLPでは終了日時、告知ページでは開始日時を目標にします。 サイズは貼り先の横幅に合わせて選び、記事本文の途中に置くならカード、ページ上部の帯に置くなら標準バナーが扱いやすい形です。
| 使いどころ | 目標日時の例 | サイズ | テーマ | |
|---|---|---|---|---|
| キャンペーンLPの終了訴求 | 30日後 23:59 | カード(420×150) | ライト | |
| ウェビナー・セミナー告知 | 7日後 14:00 | 標準バナー(600×120) | ライト | |
| 社内ポータルの提出締切 | 3日後 18:00 | バナー小(320×80) | ライト | |
| 年末セール・決算セール | 今年の年末 23:59 | 大バナー(800×160) | ダーク | |
| 展示会・イベント開催 | 60日後 10:00 | 標準バナー(600×120) | ダーク |
「この条件で試す」を押すと、上のツールに日時・サイズ・テーマが入り、プレビューと埋め込みコードが作り直されます。 日付は押した日を基準に計算されるため、そのままコピーして使えます。
FAQよくある質問
カウントダウンタイマーはどういう仕組みで動いていますか？
URLパラメータに埋め込んだ目標日時と、閲覧者の端末時刻との差を1秒ごとに計算して表示しています。サーバーとの通信は発生せず、登録も不要です。
ブログやLPに埋め込むにはどうすればいいですか？
生成されたiframeコードをコピーして、HTML編集画面に貼り付けるだけです。WordPressなら「カスタムHTML」ブロック、Notionなら「埋め込み」に共有URLを貼ると表示できます。
商用サイトでも無料で使えますか？
無料で、商用サイトでも利用できます。タイマー下部の「Digital Sales」クレジット表記は外さずにご利用ください。改変せずそのまま埋め込む限り、リンク許可の連絡は不要です。