OBSブラウザソースの使い方｜URL・画面サイズ・更新設定

まず押さえたいこと

ブラウザソースはWebページをOBSシーンに置く機能です。URLを入れるだけで終わらせず、表示サイズとシーン切り替え後の状態をテストします。

ソースを追加する

OBSの「ソース」で「＋」からブラウザを選び、表示したいページのURLを入力します。幅と高さはWebページの見える範囲を決める値です。OBS公式のブラウザソース説明でもURL、幅、高さ、カスタムCSSなどが設定項目として案内されています。

VToolDockのOBS用カウントダウンタイマーは開始・一時停止・リセット・全画面表示を備えます。OBSブラウザソースにページを置く場合、操作ボタンも映るため、配信画面への見せ方を実際のシーンで確認してください。専用の透明オーバーレイ機能はありません。

状態が消える場合

ブラウザソースの「非表示時にソースを終了」「シーンがアクティブになったら更新」はページの再読み込みに影響します。カウントダウンの途中でシーンを変えるなら、事前にその設定でどう動くか試します。

OBSテキスト装飾ジェネレーターは見本の文字をプレビューしCSSをコピーします。コピーしたCSSは適切なブラウザソースやWebページで利用できますが、OBSのテキストソースへ自動適用する機能ではありません。

幅・高さとソースの重なり

ブラウザソースの幅・高さは読み込むページの表示領域です。シーン上の四隅を引いて縮小する操作とは別なので、文字が途中で切れていたらソースのプロパティで表示領域を広げてからシーン上の大きさを調整します。ページの余白や操作ボタンまで映る場合は、配信プレビューで見せたい範囲を確認し、必要ならOBS側で切り抜きます。

OBSのソース一覧では上にあるソースが手前に表示されます。ゲーム画面やアバターの後ろに隠れたら、ブラウザソースを適切な位置へ移動します。背景が透過するかどうかはページ自身の見た目にも左右されるため、OBSのカスタムCSSだけで任意のページを透明なオーバーレイにできるとは限りません。

更新・操作がうまくいかないとき

表示が古いままならURLを確かめ、OBSのブラウザソースのプロパティから現在ページのキャッシュ更新を試します。シーンを切り替えるとタイマーが最初に戻る場合は、非表示時の終了とシーン復帰時の更新設定を一つずつ変えて再現を確認します。常時同じ状態を共有する必要があるなら、ソースを置くシーンの構成自体も見直します。

ブラウザの通常タブで操作している状態がOBS側へ自動同期するとは限りません。操作が必要なWebページは、OBSのブラウザソース操作画面で試すか、画面キャプチャで通常のブラウザを見せる方法も検討してください。後者はブラウザのタブや通知が映るため、配信前にキャプチャ範囲を確認します。