Chapilab
「配信開始まであと5分」のカウントダウン、作業配信の休憩タイマー、耐久配信の経過時間──。 配信画面にタイマーを出したい場面は意外と多いのに、いざやろうとすると「どのソフトを入れればいいの？」と手が止まりがちです。
結論から言うと、追加ソフトは不要です。OBS に最初から入っている「ブラウザソース」という機能に、タイマーのURLを1本貼るだけで完成します。
この記事では、ブラウザソースの基本から、タイマーを実際に配信画面に載せるまでの手順を、OBS 初心者の方向けに順番に解説します。
ブラウザソースとは？
ブラウザソースは、Webページをそのまま配信画面のパーツとして表示できる OBS の標準機能です。
コメント欄の表示（わんコメや Chat v2.0 Style など）を使ったことがある方なら、実はもう使っています。あの仕組みと同じで、「タイマーが動いているWebページ」を画面に重ねれば、それがそのまま配信用タイマーになります。
ブラウザソース方式のメリットは3つあります。
- インストール不要: ソフトを増やさないので、PCが重くならずトラブルも減る
- 見た目がきれい: Webページなのでデザインの自由度が高く、背景透過もできる
- 使い回せる: URLさえ控えておけば、次の配信でも同じ設定がすぐ出せる
手順1: タイマーのURLを用意する
まず、表示したいタイマーのURLを用意します。
Chapilab の 配信タイマー は、この用途のために作った無料ツールです。会員登録なしで、次の4種類から選べます。
- カウントダウン: 「配信開始まであと◯分」の定番。終了時のメッセージも設定可能
- ポモドーロ: 作業◯分＋休憩◯分を自動で繰り返す。作業配信のお供に
- ストップウォッチ: 耐久配信・チャレンジ企画の経過時間表示に
- 待機画面: 開始前の画面をタイマー付きでまるごと作れる
ページ上のビルダーで時間や文言を設定すると、下に OBS 用のURLが自動生成されます。「プレビューを開く」で表示を確認したら、「URLをコピー」を押してください。
手順2: OBSにブラウザソースを追加する
- OBS の「ソース」パネルで 「＋」→「ブラウザ」 を選択
- 名前を「タイマー」など分かりやすいものにして「OK」
- URL欄に、先ほどコピーしたURLを貼り付け
- 幅 800 × 高さ 450 くらいで「OK」（あとから画面上でドラッグして自由に拡縮できます）
これで配信画面にタイマーが表示されます。ここまで5分もかかりません。
手順3: 配信中にタイマーを操作する
「開始ボタンってどこから押すの？」というのがブラウザソース初心者の最初のつまずきポイントです。
OBS では、ソースを右クリック→ 「対話」 を選ぶと、そのWebページを操作できるウィンドウが開きます。ここから開始・一時停止・リセットのボタンを押せます。
視聴者にボタンを見せたくない場合は、ビルダー側で「操作ボタンを隠す」をONにしてURLを作り直せばOKです。
よくあるトラブルと対処
背景が黒くて邪魔
ブラウザソースのプロパティにある「カスタムCSS」欄に、次の1行を追加すると背景を透過できます。
body { background: rgba(0,0,0,0) !important; }
タイマーが動かない・表示されない
ブラウザソースのプロパティで「表示されていないときにソースをシャットダウン」にチェックが入っていると、シーン切替のたびにページが読み込み直されることがあります。挙動が不安定なときはチェックを外してみてください。
それでも解決しないときは、症状から原因を絞り込める 配信トラブル診断 も用意しています。Yes/No で答えていくだけで対処法にたどり着けます。
まとめ
- OBS にタイマーを出すのに追加ソフトは不要。ブラウザソースにURLを貼るだけ
- 配信タイマー ならカウントダウン・ポモドーロ・ストップウォッチ・待機画面を無料で発行できる
- 操作は右クリック→「対話」から。背景はカスタムCSSで透過できる
配信の見た目がちょっと整うだけで、視聴者の安心感はかなり変わります。まずはカウントダウンから試してみてください。