OBSで配信画面に時計を常時表示｜無料オーバーレイの作り方【2026】

配信画面に「今の時刻」を出したいなら、OBSのブラウザソースにWeb時計のURLを入れるのが最短です。プラグインのインストールも、HTMLファイルの自作も要りません。OBS公式ドキュメントによれば、ブラウザソースは初期値が幅800×高さ600・FPS 30で、カスタムCSSの初期値は body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }。つまりページ側さえ透過なら背景は最初から透明という設計です。

この記事は「配信中ずっと出しっぱなしにする常時表示の時計」に絞って書きます。開始まであと何分といったカウントダウンの作り方は別記事にまとめてあるので、目的が違う場合はそちらへどうぞ。

結論：ブラウザソース＋Web時計ページの3ステップで終わる

やることは3つだけです。

1. ソース → ブラウザを追加し、URLにWeb時計のアドレスを入れる
2. ソースを右クリック →「対話（Interact）」で、時計の見た目（秒表示・書体・文字色・背景色）を配信用に整える
3. 背景色をキーカラーにしておき、クロマキーなどのフィルタで背景だけ抜いて、配信画面の隅に置く

所要時間は初回でも5分ほど。ここから、なぜこの手順になるのかを含めて具体的に見ていきます。

OBSでブラウザソースを追加して時計を表示する手順

1. ブラウザソースを追加してURLとサイズを決める

ソース欄の「＋」からブラウザを選び、URLに使いたいWeb時計のアドレスを入力します。OBS公式のプロパティ説明どおり、ここで指定する幅・高さはブラウザの表示領域（ビューポート）で、初期値は800×600です。配信画面に対して小さく置きたいからといって幅を200pxなどに絞ると、時計ページ側がスマホ表示に切り替わってレイアウトが変わることがあります。

実務ではビューポートは大きめ（1280×720など）に取り、OBS側の拡大縮小で小さくする方が失敗しません。デザインの縮尺だけが変わり、要素の配置は崩れないためです。仕上げに、はみ出た余白はバウンディングボックスの端をAlt（macOSはOption）を押しながらドラッグしてクロップすれば、時計の数字だけを切り出せます。

2.「対話」で配信用に見た目を整える

ここが一番見落とされる工程です。ブラウザソースはOBSに内蔵された別のブラウザなので、普段お使いのChromeで設定した内容は引き継がれません。Web時計の設定はたいていブラウザのローカルストレージに保存されるため、OBSの中で一度設定し直す必要があります。ソースを右クリックして「対話」を開き、OBSの中のブラウザで直接操作してください。

Mihataが公開している無料のWeb時計「集中時計」を例にすると、対話画面で次の項目を配信向けに調整できます（いずれも実装済みの設定項目です）。

もうひとつ配信向きな挙動があります。集中時計の操作ボタンは画面下部にマウスカーソルが入ったときだけ表示される実装なので、対話ウィンドウを閉じてしまえば操作UIは映り込みません。設定さえ終われば、あとは数字だけが残ります。

3. 背景を抜いて画面の隅に重ねる

ここが「配信のオーバーレイ」にするための肝です。OBSのカスタムCSSは初期値でbodyを透明にしますが、Webページ側が自前で背景を描いている場合、それでは透明になりません。集中時計も背景色や背景写真を専用のレイヤーで描画しているため、そのまま置くと時計の背景板ごと配信画面に乗ります。

確実な解決策は、背景色をキーカラーにしてOBSのフィルタで抜くことです。集中時計には背景パレットの「カスタム」があり、背景色・文字色・アクセント色をカラーピッカーで自由に指定できます。ここで背景を #00FF00 のような純色にし、OBSのソースにフィルタ →「クロマキー」（緑・青の定番色向け）または「カラーキー」（任意の色を抜く用途）を追加すれば、数字だけが浮いた状態になります。文字色に緑系を使わないことだけ気をつけてください。

背景を黒（#000000）にして「ルマキー」で明度基準に抜く方法もあります。OBS公式のフィルタ一覧でも、クロマキーは「グリーンスクリーンや写真向けの色の除去」、カラーキーは「グラフィックスやウィンドウ向けの色の除去」、ルマキーは「明るさに基づく色の除去」と役割が分けて説明されています。文字が細いフォントだと縁が溶けやすいので、太めの書体と併用するのがコツです。

なお、OBSのカスタムCSS欄にセレクタを書いて背景レイヤーを直接消す方法もありますが、サイト側のクラス名が変われば効かなくなります。長く使う配信レイアウトなら、キーカラー＋フィルタの方が壊れにくい選択です。

私たちはこの集中時計を無料で公開しています。記事の途中で恐縮ですが、配信用としてもそのまま使えるものだと思っていますので、よろしければ実際の画面を見てみてください。

常時表示の時計と、カウントダウンの使い分け

配信でよく混同されますが、この2つは別物です。

待機画面用の残り時間表示を作りたい場合は、無料で配信用カウントダウンを作る手順をまとめた記事に、待機シーンでの置き方まで書いてあります。両方をシーンごとに使い分けると、待機・本編・休憩の切り替えが視聴者に伝わりやすくなります。

実務でハマりやすい5つのポイント

設定が次回起動時に消える・引き継がれない

前述のとおり、ブラウザソースはOBS内蔵の独立したブラウザです。普段のブラウザで整えた設定は反映されないので、必ず「対話」からOBSの中で設定してください。OBSのプロファイルやキャッシュを初期化した場合も設定はやり直しになります。

シーンを切り替えると時計が固まる／再読み込みされる

ブラウザソースのプロパティには「表示されていないときにソースをシャットダウン」（初期値オフ）と「シーンがアクティブになったときにブラウザを更新」（初期値オフ）があります。前者をオンにすると非表示中はページが破棄されるためCPUは軽くなりますが、シーン復帰のたびに読み込み直しが入ります。常時表示の時計ならどちらもオフのままが扱いやすい設定です。

配信が重くなる

ブラウザソースにはFPS設定があり、初期値は30です。秒表示の時計なら毎秒1回変われば十分なので、動作が重いと感じたらここを下げると負荷を抑えられます。時計は動きの少ない素材なので、フレームレートを落としても見た目の劣化がほぼありません。

表示される時刻がずれている

Web時計が表示するのは、基本的に配信PCの時計です。PCの時刻がずれていれば配信画面の時計もずれます。OS側で自動時刻同期が有効になっているかを先に確認してください。集中時計のようにタイムゾーンを明示指定できるツールなら、PCとは別の地域時刻を出すこともできます。

回線が切れると時計が消える

Web時計はページを読み込んで動くため、配信中に回線が不安定になると読み込みに失敗する可能性があります。ネット回線に不安がある環境では、OBSのブラウザソースにある「ローカルファイル」オプションで手元のHTMLを読む構成にしておくと安全側に倒せます。

他の実装方法と比べてどうか

最初の1回は、ブラウザソース＋既存のWeb時計で試すのが確実です。表示位置や書体の好みが固まってから、必要に応じて自作HTMLへ移行すれば無駄がありません。

まとめ

OBSで配信画面に時計を常時表示する要点は、ブラウザソースにWeb時計のURLを入れる、「対話」でOBSの中から見た目を設定する、背景をキーカラーにしてクロマキーで抜くの3つです。ビューポートは大きめに取ってOBS側で縮小する、FPSは下げてよい、時刻はPCの時計に依存する——この3点を押さえておけば、配信中に慌てることもありません。

配信に限らず、Webの仕組みを使って作業画面や社内の掲示を自動化したい場面は多くあります。「こういう表示をブラウザで作れないか」といったご相談も承っておりますので、お気軽にお声がけください。

あわせて、Zoom・Meetの画面共有でタイマーを表示する方法、教室・研修でテストの制限時間を投影するタイマーも参考にしてください。