Webflow にカウントダウンを置くなら、最後に残る仕事は日時の書き方

カスタムコードは Webflow の有料機能

Webflow は関連するヘルプ記事2本を、同じ条件から書き始めています。Core・Growth・Agency・Freelancer のいずれかの Workspace を使っているか、サイトに有効な Site plan が付いていれば、Site managers と Designers がカスタムコードとスクリプトを追加できる、という一文です。Code Embed 要素のドキュメントにも同じ文がそのまま置かれています。pricing の比較表は同じことを裏側から言います。Custom code の行が無料の Starter site plan と無料の Starter Workspace では外れていて、Basic site plan と Core Workspace から入ります。

つまり鍵を開ける道は2つです。いま公開しようとしているサイトひとつに有料の Site plan を付けるか、これから作るものまで覆う有料の Workspace を取るか。どちらも BootSignal が受け取るお金ではありませんし、Starter のサイトで試しに触ってみる道はありません。入力欄が薄く表示されているのではなく、画面に存在しないからです。

貼る前に、数字が減るところを見る

描画は shadow root の中で起きます。手作りのサイトより Webflow でこの点が効いてきます。サイト全体のスタイルが中まで流れ込んで数字の見た目を変えることがなく、ウィジェット側の CSS もレイアウトへ漏れません。背後の背景を読んで明るいパレットと暗いパレットのどちらかを選び、数字をブランドカラーにしたければ data-accent に CSS の色を入れれば済みます。

ローダーは Footer code、時計は Code Embed

1. 登録していないホスト名では何も描かれない

   Webflow の公開先は2種類あり、Publish のダイアログでも別々に並びます。プロジェクトを作った日に一緒に配られる your-project.webflow.io のステージングアドレスと、接続済みのカスタムドメインです。カウントダウンは数字をひとつ描く前に location.hostname を読み、そのホスト名が登録されていなければそこで止まります。どちらへ公開するにせよ、そのアドレスが先にダッシュボードに入っている必要があります。まずはステージングから登録してください。お客さんより先にしばらく眺めていたいウィジェットが、まさにタイマーです。本番のホスト名はドメインを立てる日に足せば足ります。ドメインを保存すると site id が出ます。サイト内のすべてのウィジェットがこの短い文字列ひとつを共有し、その値を入れる場所が手順2です。

2. ローダーを Site settings の Footer code に貼る

   Site settings を開き、Custom code タブに移り、Footer code の欄にローダーを入れて Save changes を押します。Webflow は読み込み速度を理由に、スクリプトタグは閉じる body タグの直前、つまりこの欄に置くよう勧めています。設置に要るスクリプトはこれだけです。カウントダウンの振る舞いは、次の手順で要素に書く属性がすべて決めます。

   コードコピー

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>

3. タイマーを置きたい位置に Code Embed を落とす

   Add パネルを開き、タイマーを出したい地点へ Code Embed をドラッグして、マウント用の要素を貼り、保存してモーダルを閉じます。あとで開き直すときは要素をダブルクリックします。時計がゼロに届いたあとページが何を言うかも、ここで一緒に決めておきます。

   コードコピー

   <div data-bootsignal="countdown"
        data-target="2026-12-31T23:59:59"
        data-expired="The sale has ended!"></div>

4. publish してから、公開されたアドレスで確かめる

   Webflow はカスタムコードの効果が preview モードで見えると案内していますが、preview で開いたページは自分が登録したドメインではなく Webflow のアドレスから配信されます。そこではタイマーが描かれません。ステージングか本番ドメインへ publish して、そのアドレスを開いてください。

狙った瞬間に終わる日時を書く

実際に間違ったまま公開されるのはここです。data-target はブラウザの日付パーサーが読みますが、あまり知られていない規則がひとつあります。末尾にタイムゾーンの付いていないタイムスタンプは、自分の時計ではなく訪問者の時計の時刻です。素直に書くと、年越しのカウントダウンはソウルで 23:59:59 にゼロになり、その九時間後にロンドンでもう一度ゼロになります。

<!-- Local: 23:59:59 on whatever clock the visitor is using -->
<div data-bootsignal="countdown" data-target="2026-12-31T23:59:59"></div>

<!-- Fixed: one instant for everyone, written in UTC -->
<div data-bootsignal="countdown" data-target="2026-12-31T23:59:59Z"></div>

<!-- Fixed: the same instant as the line above, written in Seoul time -->
<div data-bootsignal="countdown" data-target="2027-01-01T08:59:59+09:00"></div>

締め切りが実際に何を意味するかで選びます。買い手がどこに住んでいても、その土地の真夜中に閉まる店ならローカル形式で合っています。製品の公開やチケット販売、ウェビナーのように全員が同じ瞬間にゼロを見るべきなら、タイムゾーンを明示します。ここでは地域名よりオフセットが向いています。サマータイムをまたいでも壊れないからです。今日効いているオフセットではなく、その日付に効いているオフセットを書いてください。

小さな落とし穴が2つあります。2026-12-31 のように日付だけの値は、見た目に反してその土地の真夜中ではありません。時刻がなければパーサーは UTC の真夜中として読むので、訪問者の居場所によって当日の午後や前日の夜に落ちます。もうひとつ、数字は端末の時計を基準に減ります。ノートパソコンの時計が二日進んでいる訪問者には、残り時間もその分だけ短く見えます。ブラウザで動くタイマーではこれを直せません。

ゼロになっても消えない

ターゲットを過ぎると、数字のあった場所が data-expired の文言に置き換わります。要素は自分のボックスを持ったままなので、時計の抜けた穴を埋めようとしてページが流れ直すことはありません。属性を外した場合は、data-lang が指す言語の組み込み文言が出ます。

その文言は誰かがページを直すまで残ります。来週読んでも正しい文を書いてください。「春期の受付は終了しました。次回は3月に開きます。」は一か月後でも読めますが、「お急ぎください、今夜まで！」が凍りついたままだと困ります。見当違いの場所を掘る前に、もうひとつ知っておく振る舞いがあります。ブラウザが data-target をまったく読めないと、ウィジェットは読み込んだ瞬間から終了時の文言を出します。作ったばかりのタイマーが publish した直後に終了文言を出すなら、過ぎた日付ではなく形の壊れたタイムスタンプです。

カウントダウンが読む属性

最後の行が、この設置と Webflow のコメントウィジェット編の違いです。コメント・評価・投票は、1ページ分のデータが隣のページと混ざらないよう data-thread-id を必要とします。カウントダウンにはデータがないので、同じページに複数置くこともターゲットの違うマウント要素を並べるだけのことで、ローダーひとつがその全部を見つけます。

CMS が日付を持てば、公開が Designer を待たない

Collection page のテンプレートでは、ターゲットがリテラルである必要はありません。Code Embed は属性値の中に CMS のフィールド値を受け取れます。テンプレート1枚が、これから出す発売ページも、イベントページも、募集の締め切りページも全部になります。

コレクションにプレーンテキストのフィールドをひとつ足し、名前は Countdown Target あたりにして、タイムゾーンの接尾まで付いた完全な ISO タイムスタンプを入れます。あとはテンプレートの Code Embed を開き、data-target の引用符の中にカーソルを置いて、フィールドを選ぶメニューからその項目を差し込みます。

<div data-bootsignal="countdown"
     data-target="[Countdown Target]"
     data-expired="Enrollment for this session has closed."></div>

Designer は差し込んだフィールドを、上の角括弧の文字ではなく色の付いたトークンとして表示します。角括弧は位置を示すために書いたものです。日付フィールドよりプレーンテキストのフィールドを使ってください。日付フィールドは選んだ表示形式のまま出てきますし、パーサーは人の目より細かいことを言います。どちらを選んだにせよ、公開済みのアイテムをひとつ開いて、終了文言ではなく数字が減っているかを確かめてください。

得られるのは、日付を誰が動かせるかです。フィールドが時計を動かすようにしておけば、公開を一週間ずらす作業は CMS のアイテムをひとつ直すだけになります。Workspace の席を持つ人が Designer を開いて、サイト全体を publish し直す必要はありません。

請求書は2通、うち1通だけがこちら

Webflow はカスタムコードを開くプランに値段を付けます。BootSignal は登録ドメインごとに月 $20 または年 $200 で、そのサブスクリプションひとつがカウントダウンもお知らせバーもカタログ全体も覆います。いま並んでいる有料ウィジェット38個と、あとから足されるもの、そして無料のブラウザツール33個までです。ページビューで課金される項目はどこにもないので、ニュースレターに拾われてアクセスの集まったランディングページも前日と同じ値段です。請求を動かす数字は、登録したままのホスト名の数です。公開後もステージングのアドレスを残したプロジェクトは、2つ分を払っています。

トラフィックやキャンペーンの数で値段が上がるタイマーツールと見比べている最中なら、代替サービスの比較に値段付きの比較があります。

時計はあとどれだけかしか言わない

カウントダウンだけを置くと、文の付いていない数字になります。多くの発売ページでは、それが何なのかを言うバーと組みます。ローダーはもう Footer code にあるので、増えるのは Code Embed ひとつです。

<div data-bootsignal="announce"
     data-message="Early-bird pricing ends Friday"
     data-link="/pricing" data-link-text="See plans"
     data-id="launch-1"></div>

こちらも thread id を取りません。data-id は閉じたことを覚えるためのキーにすぎません。バーを閉じた読者はその選択を自分のブラウザに覚えさせ、id を変えれば次のお知らせでバーがまた出ます。

だいたいはホスト名かタイムスタンプ

• 何も描かれない: ページが登録済みのドメインに載っていません。Designer の preview も Webflow の preview アドレスも自分のドメインではないので、まずステージングか本番へ publish してください。
• publish した瞬間に終了文言が出る: ターゲットを読めていません。日付と時刻のあいだの T まで含めて、ISO の形と合っているか見てください。
• 終了が一時間ずれる: サマータイムです。書いた日に効いているオフセットではなく、ターゲットの日付に効いているオフセットを使ってください。
• Designer のキャンバスにプレースホルダーの箱がある: 正常です。そこでは iframe と style の中身だけが先に見えます。
• ステージングでは動いたのに、カスタムドメインを繋いだら止まった: 新しいホスト名も登録してください。判定は Webflow のサイト単位ではなくホスト名単位です。
• Code Embed が貼り付けを黙って拒む: Webflow はカスタムコード内の html・body・head タグを弾き、欄ごとに 50,000 文字までに制限しています。

ページが何を中心に据えていても、締め切りは属性だけでなく本文にも、タイムゾーンまで言葉で書いてください。「締め切りは金曜の 11:59 PM KST です」は訪問者がカレンダーに写せる部分ですし、時計がゼロに届いたあとも意味の通る唯一の部分です。