カウントダウンウィジェットは、ビューを数えるかどうかで分かれる

動く部品はこれで全部

締め切りが固定のカウントダウンは、紙に印刷できるほど小さいものです。下のコードは目標を読み、1秒に一度動き、残りを日・時・分・秒で書き、0 になれば文言を残して自分で止まります。お金を取るウィジェットでもこれ以上うまくは数えられません。これ以上うまく数える方法がないからです。

const end = Date.parse("2026-12-31T23:59:59+09:00"); // offset on purpose, see below
const el = document.getElementById("countdown");

function tick() {
  const left = end - Date.now();
  if (left <= 0) {
    el.textContent = "The sale has ended!";
    return;
  }
  const s = Math.floor(left / 1000);
  const parts = [Math.floor(s / 86400), Math.floor(s / 3600) % 24, Math.floor(s / 60) % 60, s % 60];
  el.textContent = parts.map((n) => String(n).padStart(2, "0")).join(":");
  setTimeout(tick, 1000);
}

tick();

罠が入っている行は最初の一行だけです。あの文字列にはオフセットが付いているので、どの訪問者も同じ瞬間が来るのを見ます。オフセットを外すとブラウザはそれを訪問者自身の時計の時刻として読むので、新年セールがソウルとロンドンで九時間ずれて終わっても、誰もバグとして報告しません。それぞれの画面では正しく見えていたからです。

四十行では足りなくなる瞬間が三つある

自分で書くのは潔癖さの証明ではなく、有効期限のある判断です。ひっくり返る場所はこの三つです。

• 日付を握るのが、デプロイしない人になる。 発売を二日ずらすマーケターに、pull request とビルドとキャッシュ削除を通らせる理由はありません。コードより日付のほうが頻繁に変わり始めた時点で、保守しているのは管理画面です。そこがカウントダウン製品で値の張るほうの半分です。
• 十二のページに載せる必要が出てくる。 一ページならスクリプトタグで済みます。締め切りが十二種類あるページ十二枚はデータモデルで、ベンダーがすでに作ったものより出来の悪いものを自分で発明することになります。
• テーマの更新を越えなければならない。 Shopify では、テーマファイルに入れた修正はテーマが上がるたびに自分で入れ直す分です。Wix や Squarespace のようなビルダーでは、ページ内の HTML 埋め込みがサンドボックスに入ることが多く、スクリプトはそもそも自分のドメインで動いていません。テンプレートに貼ったコードは、あとでもう一度貼るコードです。

もう一つ、静かなものがあります。数えること以外にカウントダウンがしている仕事の全部です。繰り返し、訪問者ごとのタイマー、対象の絞り込み、0 のあとに内容を差し替えること、誰が見たのかを知ること。一つずつは小さいのですが、合わさるとそれが製品です。

請求書を決める問い：このベンダーはビューを数えるか

Elfsight がいちばん分かりやすい例です。仕組みを隠さず文書に書いているからです。ヘルプセンターが単位をこう定義しています。"A view is counted each time someone loads the page with your widget." 操作でもなく、画面に入った表示回数でもありません。ページの読み込みです。サイト共通のヘッダーにタイマーを一つ置けば、サイトが受け取るすべてのページビューに料金が乗ります。

壊れ方も文書にあり、この軸がどんな機能より重い理由がそこです。"If you exceed the view limit, the widget on your website will be deactivated. It will no longer be visible to your site visitors, appearing as though it was never installed." この一文を、自分が本当に望んでいる状況の隣に置いて読んでみてください。予測よりはるかに多いトラフィックが来た発売ページです。枠はそのアプリのウィジェット全部と自分のウェブサイト全部で分け合い、一つのページに二つ置けば二回数えられます。ランディングページで跳ねたカウントダウンは、ビューで課金される物としては最悪に近いものです。効き始めた瞬間に高くなり、上限が土曜日に来れば、そのページを支えていた時計が静かに消えます。

確認した時点の Elfsight の Single App の階段は、無料枠のビュー 200 から始まり、5,000、50,000、150,000、300,000、600,000、1.2 million を経て、最上位の Enterprise で無制限になっていました。Essential の Shopify アプリも数えます（無料 1,000、そのあと 10,000、50,000、最上位は無制限）。Common Ninja の Shopify 出品も数えます（無料 300、そのあと 2,000、100,000、3 million）。この二つは上限に達したときどうなるかを書いていないので、Elfsight と同じように振る舞うと決めつけることも、そうではないと決めつけることもできません。

反対側には Hextom の出品と Common Ninja の直販プランがあります。ビューの上限をそもそも公開していません。Common Ninja は文字で言い切っています。"Unlimited monthly pageviews on every paid plan, no view caps or throttling." 同じ一文に正反対の採算が付いている形で、Common Ninja がどの入口から入るかによって二つのモデルを売り分けているという事実は、知っておく価値があります。

POWR は例外で、一段落必要です。自社のカウントダウンアプリのページと料金ページで売っているプランには、ビューや表示回数の数字がどこにもありません。下の表のその行がああ書かれているのは、そのためです。ただし POWR のヘルプセンターの記事は、二つ目のモデルをページビューで値付けして売っています。月 250 が無料、そこから 2,500 から 50,000 までの帯が続き、結末はこう書かれています。"If you reach your pageviews limit, your app will be hidden on your website." このモデルには注意が三つ付いてきて、その記事にたどり着いたページビュー上限の比較ページが三つとも抱えています。このモデルの一次情報はその記事だけであること、POWR の生きた料金データにページビューの帯がないこと、そして新規の顧客が今もそのプランを買えるのかが確認できていないこと。それでもはっきりすることが一つあります。二つのモデルのどちらに乗るのかを訊かずに、POWR を定額として分類することはできません。

勝負を決める軸に並べた候補

繰り返すタイマー：どこも売っていて、どこも注意書きを付けない

ここに出てくるベンダーは、どこも再び始まるタイマーを売っています。POWR は "Automatically Repeat Timer" と "Countdown Timer per Visitor"、"Countdown Number per Visitor" を有料等級の裏に置きます。Hextom は "one-time, auto-recurring, daily & weekly timer" を掲げ、日次・週次・繰り返しのタイマーを Premium に入れています。Elfsight はそのモードを Personal Countdown と呼び、訪問者ごとに別々に走るタイマーが訪問をまたいでも流れ続けます。テンプレートのページの一つでは、常時の希少感をつくるという話まで出てきます。Essential は予約タイマーと繰り返しタイマーを Starter の等級から使わせます。

判定ではなく観察として書いておきます。見て回ったベンダーのページで、それらの機能の隣に、誤解を招く煽りについての注意や但し書きを置いているところは一つもありませんでした。それが問題かどうかは、読む人の判断と、その人の国の法律の話です。機械の側はもっと単純です。訪問者ごとのタイマーはブラウザの保存領域に住んでいるので、それを消した人やプライベートウィンドウを開いた人には新しい締め切りが出ます。つまり、それは実のところ締め切りではありません。BootSignal のカウントダウンタイマーは時刻を一つ受け取ってそこまで数えるので、そのページを見ている全員が同じ数字を見ます。

定額を設置する側から見ると

あれを出しているのは二行です。ページに一度だけ置いて以後追加するウィジェットを全部動かすローダーと、時計が入る場所のマウント要素です。カウントダウンは thread id を受け取りません。ページごとに保存するものが何もないからです。

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

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

ホスティング型のウィジェットは他社の CDN へ要求を一つ出す行為で、そうでないふりをするのは反則なので、あのローダータグの性質を二つ書いておきます。defer が付いているので描画を止めませんし、ウィジェットをいくつ載せてもスクリプトは1本のままです。ウィジェットごとにタグが増えることはありません。上の四十行は要求そのものを増やさないので、強くチューニングしているランディングページにはあのコードを残しておくほうが理に適う場合もあります。

自分で書けば手で組むことになる装飾は、属性の仕事で片付きます。明暗は data-theme、数字を自分の配色に合わせる強調色は CSS の色を何でも受け取る data-accent、画面の言語は日本語・英語・韓国語・簡体字中国語・繁体字中国語から選ぶ data-lang です。期限が切れたあとの答えは data-expired で、要素が消えてレイアウトが跳ねる代わりに、数字のあった場所がその文言に変わります。料金は登録ドメイン1つにつき月 $20 または年 $200、ウィジェットは全部込みで、ドメインを増やすときはダッシュボードから別に足します。トラフィックが跳ねても請求書には出てきませんし、跳ねたせいで時計が止まることもありません。

Shopify は別の棚で、見た目より狭い

締め切りが商品ページに置かれるものなら、プラットフォームのアプリは時計ではなく置き場所で元を取ります。Essential は商品ページ、上部バー、ランディングページ、カート、メールのタイマーを覆い、中間の等級で地域の絞り込みとタグでの絞り込みを足し、見て回った中では公開された実績がいちばん厚く、レビュー 1,607 件で 5.0 です。Hextom は同じ発想のもっと安い形です。等級は二つ、計量なし、Premium では有効なバーが無制限、そして地域の絞り込みは別のデータベースではなく Shopify Markets に繋がっています。どちらも Shopify を通して請求されるので、二つ目のベンダーのアカウントは増えません。

差し出すものは分かりやすいです。この二つは WordPress、Webflow、Squarespace、素の HTML のサイトには何の助けにもならないので、ストアとマーケティングサイトの両方があるなら二度買うことになります。Essential は最上位の手前までビューを数え、Hextom はまったく数えません。それから、これは総ざらいではなく短い候補リストとして見てください。Shopify のカウントダウンの棚はもっと広く、この二つは生きていてレビューの多い代表として選びました。ストアでの設置手順は Shopify のカウントダウンウィジェット案内に、ビルダー側の対応は Webflow のカウントダウンウィジェット案内にあります。

5分ほどで決める

1. 締め切りは一つ、ページも一つ、そしてデプロイするのは自分。四十行を書いて時刻にオフセットを入れれば終わりで、それは自分のものです。
2. 日付を握る人がほかにいます。買うのはエディタです。お金を払う相手はそれなので、数字ではなく管理画面を天秤に載せてください。
3. どれだけトラフィックが来るか読めません。計量の付いた側を候補から外すか、無制限の等級の金額を今のうちに計算して、安い等級は無いものとして扱ってください。
4. ストアで、商品ページと上部バーの両方に置きたいとき。Shopify のアプリから始めてください。そこでは置き場所こそが製品です。
5. カウントダウンがこのサイトの三つ目か四つ目のウィジェットになるとき。カウントダウンの値段を計算するのはやめて、合計を計算してください。アプリごとの等級は速く積み上がり、まとめ買いや全部入りの購読が存在する理由がそこです。

どちらへ進むにせよ、カードを出す前にベンダーのページで読んでおくものが四つあります。比較表がちょうど潰してしまう項目だからです。そのベンダーがビュー1回をどう定義するか、上限に達すると何が起きるか、画面の金額がキャンペーンかどうか、そしてベンダーのブランディングを消すのが有料機能かどうか。このページの並び順を変えたのは、機能一覧ではなくこの四つの答えでした。