OBS時計・配信タイマー「Stream Clock」で配信画面を見やすく、雰囲気よく
YouTube
LiveやTwitch、ミラティブなどのライブ配信では、「現在時刻の表示」や「カウントダウンタイマー」を画面に置いておくと、視聴者が時間を把握しやすくなり、配信の見やすさも上がります。
一方で「デザインが地味」「設定が面倒そう」「できるだけ軽く運用したい」と感じる配信者も少なくありません。
「Stream Clock」は、そうしたニーズに向けて作った、インストール不要・無料のブラウザツールです。OBS
Studio（以下OBS）へブラウザソースとして追加するだけで、配信画面にデザイン性のある時計・タイマーを表示できます。
1. 配信の世界観を壊さない4つのデザインテーマ
Stream Clockは、配信ジャンルを問わず使いやすいよう、4種類のテーマを用意しています。
- ⚡ Cyber Neon（サイバーネオン）：
近未来感のある発光演出。FPSやアクションゲーム、夜間の雑談配信などに。
- 🦄 Yume Kawaii（ゆめかわ）：
パステルカラー＋丸みのあるフォント、ステッチ（縫い目）風の意匠。VTuber雑談や癒やし系配信に。
- 👾 Pixel Retro（ピクセルレトロ）：
8bit風のドット絵フォント。レトロゲームやインディーゲーム配信に。
- 🎞 Flip Clock（フリップ時計）：
パタパタとパネルがめくれるアニメーション。アナログ感のある落ち着いた雰囲気に。
Three.jsで動く「モーショングラフィック」テーマ
従来のテーマ（クラシック）に加えて、3D描画ライブラリ Three.js
を使ったモーショングラフィック時計を15種類用意しています。リングやネオン、吊り札、日付と曜日を組み込んだウィジェットなど、さまざまな演出を選べます。Rev GaugeとTriple
Gaugeは車のメーターを模したデザインです。
- 💻 Glitch Decode：数字が暗号を解読するように確定し、ときどき画面が乱れるサイバー系。FPSやテック系の配信に。
- 🏷 Cozy
Tags：ひもに吊るした札がゆらゆら揺れ、時刻が変わるとくるっと裏返ります。マウスを重ねるとカーソル付近から風が広がり、近くの札が揺れます。雑談や作業配信に合うほんわか系。
- 💧 Aqua Fill：フチだけの数字に、1分かけて水が満ちていきます。水面がゆるやかに揺れ、小さな泡が昇るチル系。作業・睡眠導入の配信に。
- 🪪 Slide Card：白いカードの窓の中で、数字が下から上へすっと入れ替わるミニマル系。雑談・作業配信など、どんな画面にもなじみます。
- 💡 Neon Sign：ネオン管の枠が1分かけて一周ぶん灯っていき、分が変わると数字がちらついて点灯します。ゲーム実況や深夜の雑談に。
- 🎮 Slash Bar：斜めに切った2色のバー。数字は斜めのワイプで切り替わり、分が変わると光の帯が横切ります。FPSや対戦ゲームの実況に。
- 📟 LED Matrix：電光掲示板のような点の集まり。点が上の段から順に入れ替わり、点いた瞬間だけ明るく光ります。告知や待機画面に。
- 🌙
Moonlit：その日の月齢に合わせて満ち欠けする月と、またたく星。数字はふわっと入れ替わり、分が変わると流れ星が走ります。深夜・ASMR配信に。
- 🍬 Jelly Pop：ぷるんと弾むステッカー風の数字とハートのコロン。かわいい系・VTuber配信に。
- ☁️ Puff Cloud：もこもこの雲のプレート。ふくらみがゆっくり呼吸するように動く、ゆるかわ系。朝活や雑談配信に。
- 🎧 Beat Bars：音の波形のようなバーが揺れ、1分をかけて再生位置が左から右へ進みます。歌枠やBGM・作業用配信に。
- 🪐 Orbit Rings：時・分・秒の進み具合を3本のリングで描く、HUD風の時計。
- 🌇 Synth Horizon：流れるグリッドと夕日のシンセウェーブ風。レトロゲームや音楽配信に。
- 🏎 Rev
Gauge：6速マニュアル車の回転計（タコメーター）風。目盛りの1が10秒にあたり、針は勢いをつけて次の目盛りを越えるまで回ってからシフトアップし、10秒ごとにちょうど目盛りを指します。ギアの数字とシフトゲートのノブも連動し、5から先（50秒〜）はレッドゾーンで、60秒で目盛りの端の6に届くと1速へ戻ります。レースゲームやドライブ配信に。
- 🎛 Triple Gauge：時・分・秒を3つの針で指す3連メーター。それぞれの下の窓に数字も表示します。車・バイク系の配信に。
モーショングラフィックの初期配色は、グリーンバック合成で抜けてしまわないよう緑・シアン系を避けています。動きを抑えたいときは「控えめな時計の動き」をONにしてください。
2. 耐久配信・RTA・イベント告知に便利な3つの動作モード
Stream Clockは、用途に応じて3つの動作モードを切り替えられます。
- 現在時刻モード：現在時刻を表示。配信開始・終了予定の目安提示にも便利です。
- カウントアップ（耐久）：いわゆる「〇〇時間耐久」「クリアまで終われません」系に。秒表示／ミリ秒表示（選択可）に対応しています。
- カウントダウン：イベント開始まで、またはRTAの制限時間などに。残り時間がゼロになるとパーティクル演出が発生し、区切りを分かりやすく演出できます。
※ミリ秒表示は可能ですが、見え方（更新の滑らかさ）はPC性能やOBSの状況によって変わる場合があります。
3. 【実践】OBS Studioへの導入・取り込み手順
OBSへの導入はシンプルです。
- このページでモード・テーマ・色などを設定する
- 「OBSURL」タブを開き、表示された専用URLをコピー
- OBSの「ソース」欄の「＋」→「ブラウザ」を選択し、URL欄に貼り付け
- 「OBSURL」タブに表示される推奨サイズ（幅・高さ）を設定
専用URLでは設定パネルやヘッダーが表示されず、設定した背景色と時計だけが表示されます。「背景を透過する」をONにすると透過背景で表示できます。カウントダウン／カウントアップは「タイマーを自動スタート」をONにしておくと、OBSがページを読み込んだ時点から計測を始めます。
通常のページURLをそのまま貼り付けて、「対話（Interact）」から操作する従来の使い方も引き続き可能です。その場合は幅：1200、高さ：800程度に設定し、次項のトリミングで時計部分だけを切り出してください。
4. OBSでの「トリミング」活用術（設定パネルを映さない）
「時計だけを表示したいのに、下の設定エリアまで映ってしまう」場合は、OBSのトリミングが便利です。
Windows：Alt＋ドラッグ
macOS：Option（⌥）＋ドラッグ
【手順】
- OBS上でブラウザソースの枠を、上記キーを押しながらドラッグして不要部分を切り取る
- 時計部分だけになったら、キーを離して通常ドラッグで位置調整
- 設定を変えたいときは「対話（Interact）」からいつでも操作可能
5. 背景透過（クロマキー前提）と色設定
Stream Clockはクロマキー合成前提で、配信画面に馴染ませられるようにしています。
- クロマキー合成（グリーンバック）：
ステージ背景（背景色）を「緑」に設定し、OBS側でフィルタ「クロマキー」を適用すると背景を抜けます。
※設定次第では輪郭ににじみが出ることがあるため、クロマキーの類似度・滑らかさ等を調整してください。
- 時計内背景の透過：
時計パネル自体の不透明度を調整できるため、ゲーム画面を邪魔したくないときに便利です。
6. Webツールならではのメリット
- 導入が簡単：インストール不要で、URLをOBSに貼るだけで使えます。
- 更新を届けやすい：Webツールのため、同じURLのまま機能追加や調整を反映できます。
※OBSのキャッシュで反映が遅れる場合は、ブラウザソースの「再読み込み」をお試しください。
- 設定を保持できる：localStorageによる保存に対応しているため、同じ端末・同じブラウザ環境なら前回の設定を呼び出しやすい設計です。
まとめ：小さな情報が“見やすさ”を作る
視聴者は画面の隅にある情報も意外と見ています。時刻やタイマーが見やすく整っていると、配信全体の印象や安心感にも繋がります。
「Stream Clock」で配信の雰囲気に合った時計・タイマーを作って、画面の完成度を一段上げてみてください。
