配信中に「あと何分で終わりか」を視聴者に見せたい、開始までのカウントダウンを出したい、コーナーの持ち時間を画面に出したい——。結論から言うと、OBS Studio のブラウザソースに全画面タイマーのURLを入れるのが最短で、追加のプラグインもインストールも不要です。ブラウザソースの初期設定にはすでに背景を透過するCSSが入っているため、配信画面の上に数字だけを重ねられます。設定にかかる時間はおよそ3分です。
この記事では、ライブ配信で残り時間を表示する方法を「何の残り時間か」で3つに整理し、OBS での具体的な設定手順、配信そのものを自動停止させる方法、視聴者に伝わる見せ方、つまずきやすい箇所までを順に解説します。
まず「どの残り時間か」を決める
ライブ配信で言う「残り時間」には3種類あり、使う道具が変わります。ここを混ぜたまま設定を探すと遠回りになります。
出したい残り時間 | 典型的な場面 | 使う道具 |
|---|---|---|
配信開始までのカウントダウン | 待機画面・開始前の待ち時間 | ブラウザソース＋カウントダウンタイマー |
配信終了までの残り時間 | 「あと30分で終わります」を明示する | ブラウザソース＋カウントダウンタイマー |
コーナー・企画ごとの持ち時間 | 質問コーナー、対戦、作業配信の1セット | 同上。シーンごとに別ソースを持たせる |
いずれもやることは同じで、ブラウザで開ける全画面タイマーのURLを OBS に読み込ませるだけです。逆に、経過時間のほうを見せたい場合はカウントアップが必要になるため、ブラウザで開くだけの無料カウントアップタイマーを使い分けてください。
OBSで残り時間を表示する最短手順
OBS Studio を使う場合の手順です。Windows・Mac 共通で、無料の範囲で完結します。
- 残り時間を出したいシーンを選び、「ソース」欄の＋をクリックして「ブラウザ」を追加する
- 名前を付けて「OK」。URL 欄に、全画面表示できるタイマーサイトのアドレスを貼る
- 幅・高さを配信解像度に合わせる（初期値は 800×600。フルHDに重ねるなら 1920×1080 にしておくと位置合わせが楽です）
- 「OK」を押し、プレビュー上でドラッグして表示位置とサイズを整える
この時点で、配信画面の上に数字が重なった状態になります。タイマーの開始・停止はブラウザソースを右クリックして「操作」（Interact）を開き、その中で操作します。配信画面を触らずにタイマーだけ操作できるので、進行中でも安全です。
背景を透過させる
OBS のブラウザソースは、追加した時点で背景が透過するようになっています。プロパティのカスタムCSS欄に初期値として次の内容が入っているためです。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
もし背景が白や黒のまま乗ってしまう場合は、この初期CSSを消してしまっていないか、あるいはタイマーサイト側が独自に背景色を指定していないかを疑ってください。前者ならカスタムCSS欄に上の1行を書き戻せば透過します。後者の場合は、CSS欄に背景を上書きする指定を足すか、背景色を変更できるタイマーサイトに変えるのが早い解決です。
シーンを切り替えるとリセットされる場合
シーンを行き来したときにタイマーが最初に戻ってしまうときは、ブラウザソースのプロパティにある「表示されていないときにソースをシャットダウン」と「シーンがアクティブになったときにブラウザを更新」を確認してください。これらがオンだと、シーン切替のたびにページが読み直されて時間が巻き戻ります。配信中ずっと同じ残り時間を出し続けたいなら、どちらもオフにします。
方法別の比較
残り時間の出し方はいくつかあります。手軽さと確実性で選んでください。
方法 | 費用 | 手間 | 向いている場面 |
|---|---|---|---|
ブラウザソース＋タイマーサイト | 無料 | 3分 | ほぼすべての配信。まず最初に試す方法 |
OBSの「出力タイマー」 | 無料 | 1分 | 画面に出さず、配信自体を時間で自動停止したいとき |
テキストソース＋外部ツールの書き出し | 無料 | やや多い | フォントや装飾を細かく作り込みたいとき |
配信プラットフォーム側の予約・プレミア公開 | 無料 | 1分 | 配信「開始」までのカウントダウンだけでよいとき |
配信そのものを時間で止める（出力タイマー）
「見せる」のではなく「時間が来たら確実に終わらせたい」場合は、OBS 標準の出力タイマーが使えます。メニューバーの「ツール」→「出力タイマー」を開き、配信停止までの時間を入力して「開始」を押すと、指定時間の経過後に配信（または録画）が自動で停止します。
枠の時間が決まっているイベント配信や、深夜に無人で流す配信では、画面上のカウントダウンと出力タイマーを併用しておくと安心です。視聴者には残り時間が見え、こちら側は止め忘れを防げます。
視聴者に伝わる見せ方
残り時間は、出しさえすれば伝わるわけではありません。配信を見ている側は画面全体を注視していないため、次の点を整えると読み取り率が上がります。
- 桁は用途に合わせる：30分以上の枠で秒まで動かすと、数字がうるさく感じられます。残り10分を切ってから秒を出す運用が扱いやすいです
- 位置は四隅のどれかに固定する：コーナーごとに位置が変わると、視聴者が毎回探すことになります
- サイズはスマホ視聴を基準にする：配信の視聴はスマホが多く、PCのプレビューで「ちょうどよい」サイズは小さすぎることがあります。プレビューを縮小して確認してください
- 終盤は色を変える：残り5分で色が変わる設定にしておくと、コメント欄が「もう終わり？」で埋まりにくくなります
- 音は基本オフ：配信中のアラーム音は音声にも乗ります。音を出さないタイマーを選ぶか、通知をオフにしておきます
音を鳴らさずに時間を管理したい場面については、音が鳴らない無料の無音タイマーで選び方をまとめています。
配信画面に重ねる残り時間の表示先をお探しなら、Mihata が無料公開しているタイマーもそのまま使えます。ブラウザで開くだけで全画面表示に対応しており、OBSのブラウザソースに読み込ませて使えます。よろしければ試してみてください。
つまずきやすい箇所
- ブラウザソースが真っ白のまま：URLの打ち間違いか、幅・高さが小さすぎて表示領域の外に出ています。まず幅1920・高さ1080で読み込み直してください
- 数字が小さすぎる：ブラウザソースのサイズを引き伸ばすとぼやけます。幅・高さを大きい値で作り直したうえで、OBS上で縮小するほうがきれいです
- 時間がズレる：PCがスリープや高負荷になると、ブラウザ内の時間処理が遅れることがあります。長時間配信では、電源設定をスリープなしにしておきます
- 配信ソフト側で操作できない：ブラウザソースを右クリックして「操作」を開くと、OBSの中でタイマーを操作できます
関連記事
- タイマーそのものを画面いっぱいに出したいときは、無料で使える全画面タイマーにまとめています
- 配信画面に時刻を常時表示したい場合は、OBSで配信画面に時計を常時表示する方法が参考になります
配信や社内イベントの運営まわりで、表示や進行の仕組みを内製したいというご相談があれば、Mihata でも承っています。貴社の運用に合わせた最小構成からご提案します。
よくある質問
ライブ配信で残り時間を表示するいちばん簡単な方法は？
OBS Studio のソース欄で「ブラウザ」を追加し、全画面表示できるカウントダウンタイマーのURLを読み込ませる方法です。追加のプラグインもインストールも不要で、設定は3分ほどで終わります。
タイマーの背景を透過させるにはどうしますか？
OBSのブラウザソースは初期状態で背景が透過します。プロパティのカスタムCSS欄に body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } が初期値として入っているためです。背景が乗ってしまう場合は、このCSSが消えていないかを確認してください。
シーンを切り替えるとタイマーが最初に戻ってしまいます。
ブラウザソースのプロパティにある「表示されていないときにソースをシャットダウン」と「シーンがアクティブになったときにブラウザを更新」がオンになっていると、切替のたびにページが読み直されます。どちらもオフにしてください。
時間が来たら配信を自動で止められますか？
できます。OBSのメニューバーから「ツール」→「出力タイマー」を開き、配信停止までの時間を設定して開始すると、指定時間の経過後に配信や録画が自動的に停止します。
残り時間は秒まで出したほうがいいですか？
30分以上の枠で最初から秒を動かすと数字がうるさく感じられます。残り10分を切ってから秒を表示する運用のほうが見やすく、終盤で色が変わる設定にしておくと視聴者に伝わりやすくなります。