作業配信のカウントダウンを画面に出す｜無料オーバーレイとOBS設定【2026】

作業配信・もくもく会・勉強配信で「あと何分で休憩」「開始まであと◯分」を画面に出したい。この記事は、その残り時間表示を無料・インストール不要で作り、OBS の配信画面に載せるまでを手順で解説します。

結論：ブラウザで開いたタイマーを OBS のブラウザソースで読み込むのが最短

配信画面のカウントダウンは、専用ソフトを買わなくても作れます。OBS Studio のブラウザソースは「文字どおり OBS に直接組み込まれた Web ブラウザ」で、URL を入れるだけでその Web ページを 1 つのソースとして配信画面に重ねられます（OBS 公式ナレッジベース）。つまりブラウザで動く無料タイマーの URL を貼るだけで、残り時間のオーバーレイになります。

ブラウザソースの初期サイズは幅 800 × 高さ 600 ピクセルで、必要に応じて変更できます。また既定のカスタム CSS が背景を rgba(0, 0, 0, 0) の透明にし、body の余白とスクロールバーを消すため、「ページ側が透過に対応していれば」文字だけを浮かせられるのがポイントです。逆にページ側が背景色や背景写真を持っている場合は透過されません。この違いを最初に押さえておくと、あとで「透けない」と悩まずに済みます。

配信画面に残り時間を出す3パターンと選び方

やり方は大きく3つあります。作業配信で実際に使いやすいのは、透過が要るかどうかと、配信中に自分で操作したいかどうかで決まります。

ウィンドウキャプチャは「ディスプレイ上の単一のウィンドウを取り込む」ソース、ディスプレイキャプチャは「ディスプレイ全体を取り込む」ソースです（OBS Sources Guide）。作業配信では画面全体を映さずタイマーのウィンドウだけを映すほうが、通知やタブの中身が映り込む事故を減らせます。

OBS のブラウザソースでカウントダウンを載せる手順

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

シーンの「ソース」で「＋」→「ブラウザ」を追加し、URL 欄にタイマーページのアドレスを入れます。幅・高さは既定の 800×600 のままでも動きますが、置きたい場所の比率に合わせて先に数値で決めておくと、あとから枠を引き伸ばして文字がぼやけるのを防げます。画面の隅に小さく置くなら 480×160 前後、待機画面の主役にするなら 1280×720 が扱いやすいサイズです。

2. 背景が透けないときの対処

タイマーページが自前の背景を持っていると、四角い板がそのまま配信画面に乗ります。対処は2つです。ひとつはページ側で背景を単色にして、OBS のクロマキーで抜く方法。クロマキーは「指定した色をソースから取り除く」フィルタで、既定の緑のほか任意の色を指定できます（OBS Chroma Key Filter）。もうひとつは、透過を諦めて意図的に“パネル”として見せる方法で、角に丸みのある枠として配置すれば違和感なく馴染みます。作業配信では後者のほうが失敗しにくく、視認性も上がります。

3. シーンを切り替えてもリセットさせない設定

ここが一番の落とし穴です。ブラウザソースには「表示されていないときにソースをシャットダウン」（非表示・非アクティブなシーンでページを破棄する）と「シーンがアクティブになったときにブラウザの表示を更新する」という設定があります。この2つが有効だと、シーンを行き来するたびにカウントダウンが最初からやり直しになります。作業配信のように長時間ひとつのタイマーを回す用途では、両方をオフにしてください。

なお、配信ソフト側ではなくPC の時計そのものがずれていると、日時基準で計算するタイプのカウントダウンは残り時間もずれます。配信前に OS の時刻同期を確認しておくと安心です。

作業配信での「残り時間」の設計（3つの使い分け）

開始まで：待機画面のカウントダウン

配信開始前の待機画面に「開始まであと 10:00」を出すと、視聴者が離脱せずに待ってくれます。ここは大きく1つだけ。曲や BGM と合わせて、数字は画面中央〜やや上に、他の情報を減らして置くのが定石です。

作業中：作業と休憩のサイクル表示

もくもく会・作業配信の本体はここです。25分作業＋5分休憩のようなサイクルを画面に出しておくと、視聴者が同じリズムで作業に参加できます。「今は作業中か休憩中か」が一目で分かることが、残り時間の数字そのものより効きます。色や文言で状態を出せるタイマーを選んでください。

終了予告：この配信は何時まで

「今日はあと 40 分で終わります」を出しておくと、視聴者がコメントを投げるタイミングを判断できます。配信終了時刻の予告は、残り時間表示のなかで最もコメント数に効きやすい使い方です。

私たちは無料の Web 時計「集中時計」も運営しています。記事の途中で恐縮ですが、この用途にそのまま使えるものなので、よろしければあわせてご覧いただけたら嬉しいです。

集中時計のタイマーを配信画面に載せる

Mihata のブラウザで開くだけで使える無料タイマー（/clock/timer）は、インストール・登録なしで開けるため、OBS のブラウザソースにそのまま URL を入れられます。作業配信で効いてくるのは次の点です。

• 1〜60分のプリセットと時分秒の直接入力で、配信中でも数秒でセットし直せる
• 複数タイマーの同時実行とピン留めができるので、「休憩まで」と「配信終了まで」を並べて出せる
• ポモドーロ／ストップウォッチへのモード切替があり、作業⇄休憩のサイクルは 集中時計のポモドーロモードに切り替えるだけで作れる
• 配色を自分で決められるため、背景を単色にしてクロマキーで抜く運用にも寄せられる

実務でオーバーレイを組むときは、まず OBS のプレビューに置いて、配信解像度のまま数字が読めるかを確認してください。手元の大きなモニタでは読めても、視聴者のスマホでは潰れることがよくあります。配信解像度に対して数字が小さいと感じたら、迷わず大きくしてください。オーバーレイは「大きすぎるかな」と思うくらいがちょうど読める、というのが実務での感覚です。

配信事故を防ぐ、よくある失敗

• ブラウザの通知ポップアップが映る：タイマー用のブラウザは通知を切るか、専用のプロファイル／ウィンドウで開く
• タブやブックマークが映る：ウィンドウキャプチャで取り込むなら全画面表示にしてから取り込む
• タイマーの通知音が配信に乗って割れる：音量を絞るか、視覚だけで知らせる設定にする
• スリープで画面が消える：長時間配信では OS の省電力設定を先に見直す
• シーン切替でリセット：前述の2つの設定をオフにする

似ているけれど役割が違う表示との使い分け

「残り時間」と言っても、配信画面に出したいものは場面によって別物です。分単位・秒単位で締め切りに向かって減っていく表示がこの記事の対象ですが、次の2つは目的が違います。

• 日単位で先の予定を数えたいとき：発売日や開催日まで何日あるかを見せたいなら、日付を指定して残り日数を数える無料Webカウントダウンのほうが適しています。秒読みではなくカレンダー基準の表示です。
• 経過時間を積み上げたいとき：「今日はもう何時間作業したか」を見せたいなら、0から時間を積み上げるカウントアップタイマーを使います。ゴールを決めずに実績を伸ばす配信と相性が良い表示です。
• 自分の手元でも大きく見たいとき：ブラウザのタイマーを全画面にして大きく表示する方法を使うと、サブモニタに出したまま配信にはウィンドウキャプチャで取り込めます。

配信の見せ方だけでなく、告知ページや作品を置く場所を整えたい方は、下からお気軽にご相談ください。