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（フリップ時計）： パタパタとパネルがめくれるアニメーション。アナログ感のある落ち着いた雰囲気に。

2. 耐久配信・RTA・イベント告知に便利な3つの動作モード

Stream Clockは、用途に応じて3つの動作モードを切り替えられます。

• 現在時刻モード：現在時刻を表示。配信開始・終了予定の目安提示にも便利です。
• カウントアップ（耐久）：いわゆる「〇〇時間耐久」「クリアまで終われません」系に。秒表示／ミリ秒表示（選択可）に対応しています。
• カウントダウン：イベント開始まで、またはRTAの制限時間などに。残り時間がゼロになるとパーティクル演出が発生し、区切りを分かりやすく演出できます。

※ミリ秒表示は可能ですが、見え方（更新の滑らかさ）はPC性能やOBSの状況によって変わる場合があります。

3. 【実践】OBS Studioへの導入・取り込み手順

OBSへの導入はシンプルです。

1. Stream ClockのページURLをコピー
2. OBSの「ソース」欄の「＋」→「ブラウザ」を選択
3. URL欄に貼り付け
4. 幅：1200、高さ：800 程度に設定（あとでトリミングする前提で余裕を持たせる）
5. 「対話（Interact）」を開いて、テーマや色などを設定

4. OBSでの「トリミング」活用術（設定パネルを映さない）

「時計だけを表示したいのに、下の設定エリアまで映ってしまう」場合は、OBSのトリミングが便利です。

Windows：Alt＋ドラッグ
macOS：Option（⌥）＋ドラッグ

【手順】

1. OBS上でブラウザソースの枠を、上記キーを押しながらドラッグして不要部分を切り取る
2. 時計部分だけになったら、キーを離して通常ドラッグで位置調整
3. 設定を変えたいときは「対話（Interact）」からいつでも操作可能

5. 背景透過（クロマキー前提）と色設定

Stream Clockはクロマキー合成前提で、配信画面に馴染ませられるようにしています。

• クロマキー合成（グリーンバック）： ステージ背景（背景色）を「緑」に設定し、OBS側でフィルタ「クロマキー」を適用すると背景を抜けます。
  ※設定次第では輪郭ににじみが出ることがあるため、クロマキーの類似度・滑らかさ等を調整してください。
• 時計内背景の透過： 時計パネル自体の不透明度を調整できるため、ゲーム画面を邪魔したくないときに便利です。

6. Webツールならではのメリット

• 導入が簡単：インストール不要で、URLをOBSに貼るだけで使えます。
• 更新を届けやすい：Webツールのため、同じURLのまま機能追加や調整を反映できます。
  ※OBSのキャッシュで反映が遅れる場合は、ブラウザソースの「再読み込み」をお試しください。
• 設定を保持できる：localStorageによる保存に対応しているため、同じ端末・同じブラウザ環境なら前回の設定を呼び出しやすい設計です。

まとめ：小さな情報が“見やすさ”を作る

視聴者は画面の隅にある情報も意外と見ています。時刻やタイマーが見やすく整っていると、配信全体の印象や安心感にも繋がります。
「Stream Clock」で配信の雰囲気に合った時計・タイマーを作って、画面の完成度を一段上げてみてください。