【配信】現場の計器の時計 10種｜放送スタジオ・発車標・空港の世界時計・管制室｜経過時間/カウントダウンつき・OBS背景透過・設定ボタン(⚙)つき・登録不要・無料版あり

放送スタジオ、駅の発車標、空港ロビーの世界時計、管制室――「その現場で本当に使われている計器」の見た目をそのまま時計にしました。全10種入りです。

絵は画像ではなく、その場で線から描いています（ベクター描画）。どれだけ大きくしてもにじみません。背景は最初から透過なので、OBSのブラウザソースに入れるだけで配信画面に重なります。

単一HTML・インストール不要・アカウント不要・オフライン動作。書体もHTMLに同梱しているので、外部へは一切通信しません。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ 収録している10種

━━━━━━━━━━━━━━━━━━

【放送・映像】

・studio.html … 放送スタジオの時計（秒が外周のリングで1周／ON AIR ランプつき）

・timecode.html … 編集卓のタイムコード（HH:MM:SS:FF。24/25/30/60 fps）

・rack.html … ラックの基準時計（19インチラックのマスタークロック。横長で場所を取りません）

【交通】

・flap.html … 反転フラップ式の発車標（数字が変わるときカードがパタパタめくれます）

・platform.html … 駅のホームの時計（吊り下げの丸時計＋行き先札）

・world.html … 空港ロビーの世界時計（4都市の現地時刻。夏時間は自動）

【計器・管制】

・mission.html … 管制室のミッションクロック（蛍光管＋走査線）

・gauge.html … 航空計器の3連メーター（時・分・秒を3つの針で）

・scope.html … オシロスコープ（波形が秒に合わせて流れます）

・pit.html … サーキットのラップタイマー（スタートシグナル＋ラップ表示）

━━━━━━━━━━━━━━━━━━

◆ 無料版があります（このページの ¥0）

━━━━━━━━━━━━━━━━━━

同じページの ¥0「無料版」からどうぞ。「ラックの基準時計（rack.html）」1種が、製品版とまったく同じ機能で入っています。設定ボタン（⚙）も、経過時間・カウントダウンも使えます。

まずこれで、OBSでの入れ方と ⚙ の使い勝手を確かめてから、10種の製品版をご検討ください。

━━━━━━━━━━━━━━━━━━

◆ この10種だけの機能 ―「サブ表示」

━━━━━━━━━━━━━━━━━━

本物の業務用計器には、時刻のとなりに小さな副表示が必ず付いています。それをそのまま使えるようにしました。10種すべてに入っています。

・?sub=elapsed … 経過時間（「+0:12:34」のように増えていきます）

・?sub=goal … 目標の時刻までのカウントダウン（?goalh=21&goalm=30 で指定。初期値 21:00）

「21時開始まであと◯分」の待機画面が、時計を1つ置くだけで作れます。

※ 経過時間は「その画面を開いた時 ＝ 0」から数え始めます。配信開始からの通算ではありません。シーンを切り替えるたびに0に戻したいときは、OBSのブラウザソースの設定で「表示されていないときにソースをシャットダウンする」にチェックを入れてください。ずっと数え続けたいときは、そのチェックを外してください。

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

URLを書き換えなくても、画面上のボタンから設定できます。

1. ソース一覧の時計を右クリック →「対話」を選ぶ

2. 時計にマウスを乗せると、右上に ⚙ が出ます

3. 変更して「保存して閉じる」

・普段 ⚙ は見えないので、配信画面には映りません

・歯車が見つからないときは、対話ウィンドウ内で S キーを押しても開けます

・設定は保存され、OBSを再起動しても残ります。「設定を初期化」で購入時の状態に戻せます

・?key=a ?key=b を付けると、同じ時計でもシーンごとに別の設定にできます

※ 設定の保存先はブラウザごとに別々です。Chromeで開いて設定してもOBS側には反映されません。OBSで使う時計は、必ずOBSの「対話」画面の中で設定してください。

━━━━━━━━━━━━━━━━━━

◆ 10種すべてに共通の設定

━━━━━━━━━━━━━━━━━━

・?format=12 … 12時間表示（AM/PM）にする ※計器なので初期は24時間

・?seconds=off / ?date=off … 秒・日付を消す

・?datefmt=en … 日付の書きかた（iso=2026-08-27 THU / en=27 AUG 2026 THU / ja=8月27日 (木)）

・?zoom=1.4 … 大きさ（0.3〜3）

・?speed=0.5 … アニメの速さ（0.2〜3）

・?lang=en … 英語表示

・?bg=on … うしろに暗い下地を敷く（確認用。配信では不要です）

・?mode=stream … ⚙を完全に出さない

このほか、10種それぞれに色や表示の選択肢があります（秒のリングの色、タリーランプの文字、蛍光の色、波形、都市の組み合わせ、fps、パネルの質感 など。同梱の説明書に全部書いてあります）。

━━━━━━━━━━━━━━━━━━

◆ OBSへの入れ方

━━━━━━━━━━━━━━━━━━

1. ソース →「＋」→「ブラウザ」

2.「ローカルファイル」にチェック → 使いたい .html を選ぶ

3. 幅・高さは説明書の「目安」を入れる（例: studio.html は 300x350）

※ 大きく見せたいときは、OBSの画面上でドラッグして引き伸ばさないでください（ぼやけます）。ブラウザソースの幅・高さを増やしたうえで ?zoom= を上げてください。

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・効果音はありません（表示のみです）

・発車標に並ぶ「発車時刻」は、いまの時刻から15分刻みで作った飾りです。実在の路線・ダイヤではありません。行が不要なときは ?rows=0 で消せます

・時刻はPCの時計を使います。電波時計のような時刻合わせの機能はありません

・視聴者コメントの集計や、外部アプリ・APIとの連携機能はありません

━━━━━━━━━━━━━━━━━━

◆ 特長

━━━━━━━━━━━━━━━━━━

・画像素材を使わない「コード製」。どの解像度でもにじみません

・外部への通信は一切ありません（ネット接続不要）

・Chrome／Edge で動作確認済み

・配信可・商用利用可（同梱の利用規約参照）

◆ こんな方に

・配信画面に時計を常駐させたいが、よくある時計では画面が締まらない方

・作業配信・ゲーム配信・雑談配信で「経過時間」や「開始までのカウントダウン」も一緒に出したい方

・ニュース風、鉄道風、宇宙・SF風、レース風の画面を作りたい方

万が一素材に不備がありましたらメッセージまでお願いします。

不具合・ご要望は BOOTH のメッセージからどうぞ。