※本記事には広告・アフィリエイトリンクが含まれます。
配信画面にアラートやチャット、タイマー、カウントダウンを重ねたいとき、多くの部品はWebページとして用意されています。OBS Studioでは、そのページをシーンの一部として映す機能が「ブラウザソース」です。ふだん使っているChromeやEdgeの画面をそのまま取り込むのではなく、OBSの中に組み込まれた小さなブラウザでページを開き、その描画結果を配信や録画に載せます。
押さえるのは、幅800・高さ600という初期のビューポート、背景を透明にするカスタムCSSの初期値、そして「現在のページのキャッシュを更新」と「表示されていないときにソースをシャットダウンする」の使い分けです。 プレビューで赤い枠を大きくしても、ページを描く解像度そのものは変わりません。文字がぼやけたり、肝心の部品が枠外に出たりするときは、まずプロパティの幅と高さを見直す順番が扱いやすいでしょう。
この記事では、OBS公式のBrowser Source案内とSources Guide、OBS Studio 33.0.0のリリースノートを手がかりに、追加手順・サイズ・透過・更新・非表示時の終了・権限までを6つの設定ポイントで整理します。配信のたびに同じ失敗をくり返さないよう、幅と高さ・CSS・キャッシュ更新の三点を「最初に触る場所」として固定しておくと、現場での判断が速くなるでしょう。同じOBSまわりの基礎として、当サイトの仮想カメラの使い方やアプリケーション音声キャプチャの分け方、配信がカクつくときの統計の見方もあわせて見ると、映像と音声の両面で手順をそろえやすくなります。ページ側の推奨サイズや配信サービスのウィジェットURLは提供元の案内が優先なので、記事の数字は「最初の設定を決める補助線」として使い、最終判断は手元の公式ページとプロパティ表示に合わせてください。
追加の手順と幅・高さの決め方
まずは「どう追加し、どの大きさで描かせるか」です。URLを貼るだけでは終わらず、ビューポートの幅と高さをキャンバスやページの設計に合わせると、あとからの位置合わせが楽になります。
1．ソースの追加とURL・ローカルファイル
OBSのSources Guideでは、ブラウザソースを「Webページをシーンに追加するソース」と位置づけ、配信のアラートオーバーレイやチャット欄に主に使う、と案内しています。追加の流れは次のとおりです。ソースドック下部の「+」を押し、一覧から「ブラウザ」を選びます。新規作成にわかりやすい名前を付けて「OK」を押すと、プロパティが開く画面へ進みます。URL欄には初期状態でOBS公式のデモページが入っているので、映したいページのアドレスへ上書きしてください。パソコン内のHTMLを使う場合は「ローカルファイル」をオンにし、ファイルを指定する手順です。
ブラウザソースは、ふだん使っているブラウザとは別のChromium系統の部品（CEF）で動きます。obs-browserの公式リポジトリでも、CEFベースのブラウザプラグインであること、公式パッケージではWindows・macOS・Linux向けに含まれることが示されています。そのため、Chromeでログイン済みでも、ブラウザソース側では未ログインから始まるのが普通です。配信サービスが用意する「OBS用URL」や、ログイン不要の表示専用ページがあるなら、そちらを使う方が安定しやすいでしょう。秘密のトークン付きURLは、画面共有や録画に映り込まないよう、プロパティ画面の扱いにも注意が必要です。
名前付けは、アラート・チャット・タイマーなど役割が分かる短い語にしておくと、ソースが増えたあとの管理が楽です。同じページを複数シーンで使うときは、毎回新規作成せず、追加ダイアログの「既存」から同じソースを選ぶと、裏で別々のブラウザが二重に動きにくくなります。ページが音を鳴らす場合は、プロパティの「OBSで音声を制御する」をオンにすると、音声ミキサーに棒が出て音量やミュートを扱えます。オフのままだと、音の経路がデスクトップ音声側にだけ乗ったり、逆に配信へ乗らなかったりすることがあるため、音の有無は追加直後に一度確認すると安心です。
追加直後は、プレビューに何も見えないこともあります。アラート系はイベントが来るまで透明なのが正常な場合が多いので、配信サービスのテスト通知で反応を確かめると切り分けが進みやすいでしょう。ソースの目アイコンがオフになっていないか、ゲーム画面などより下に重なって隠れていないかも、最初の30秒で見る価値があります。URLを普通のブラウザで開いて表示できるか、前後に空白や改行が混ざっていないかも、同じタイミングで確かめておくと、OBS側の設定をいじる前に外の問題を切り離せます。配信直前のチェックリストに「普通のブラウザでURL確認→対話でエラー確認→テスト通知」を入れておくと、当日の慌てが減るはずです。
2．幅800・高さ600の初期値とキャンバス合わせ
OBS公式のBrowser Source案内では、幅（Width）の初期値を800、高さ（Height）の初期値を600と示しています。これはプレビュー上の見た目サイズではなく、ページを描画するビューポートのピクセル数です。1920×1080想定のオーバーレイを800×600で開くと、配置が端に寄ったり、肝心の部品が枠外に出たりします。全画面で重ねる素材なら、映像設定の「基本（キャンバス）解像度」と同じ値（たとえば1920と1080）を入れるのが扱いやすいでしょう。配信と同じ解像度で入れておくと位置合わせが楽、という投稿も、同じ考え方と重なります。
プレビューの赤い枠をドラッグして大きくすると、すでに描いた絵を引き伸ばすだけです。文字や細い線はぼやけやすく、逆に小さくするとつぶれて粗く見えることがあります。大きさの本体はプロパティの幅と高さで決め、プレビューでは位置の移動を中心にする方がきれいでしょう。ぴったり合わせたいときは、ソースを選んで変換の編集（WindowsではCtrl+E、macOSではCmd+E）を開き、数字で位置と大きさを確認してください。Sources Guideでも、画面に合わせる（Ctrl+F / Cmd+F）などのホットキーが案内されています。
幅を変えると、ページ側のレスポンシブな並びも変わる点に注意してください。狭くしすぎるとスマホ向けの縦並びになり、想定と違う見た目になることがあります。配信サービスやウィジェット作者が推奨サイズを出しているなら、その数字を優先してください。キャンバス解像度と出力（スケーリング）解像度は別物です。キャンバスはソースを並べる作業面、出力は配信・録画に出すサイズです。ブラウザソースの幅と高さは、キャンバス側に合わせると考え方がぶれにくいでしょう。動きの少ない文字中心のページなら、カスタムフレームレートをオンにしてFPSを30前後に抑える選択肢もあります。公式案内の初期値では、カスタムフレームレートはオフ、FPSは30です。
小さなコーナー表示なのに1920×1080で描かせると、負荷だけが増えることもあります。必要な表示領域に近い幅・高さへ落とし、シーン上の配置で位置を決めると、PCへの負担を抑えやすいです。逆に、全画面の背景付きボードを専用シーンで出すなら、最初からキャンバスと同じ解像度に揃える方が、ぼやけと切れの両方を減らせます。設定を変えたあとは、プレビューと実際の配信確認用ビューの両方で一度見て、文字の輪郭と切れ端がないかを確かめてください。マイクやカメラの前準備と同時にサイズ確認を済ませておくと、配信開始の直前に慌てて枠を引き伸ばす失敗を防げます。
カスタムCSSと背景の透過
次は見た目です。透過用の専用スイッチはなく、カスタムCSSの初期値が背景を透明にしています。ここを消したり、ページ側が不透明な背景を持っていたりすると、白い四角が残ります。
3．初期CSSの3つの役割
公式案内に示されているカスタムCSSの初期値は、body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } です。役割は三つに分かれます。背景色を透明にする、余白を消す、ビューポートよりページが大きいときにスクロールバーを出さない、という指定です。オーバーレイをゲーム画面やカメラ映像の上に重ねる前提なら、この初期値を残したまま始めるのが安全です。背景を透過したいときはカスタムCSSの背景色指定を確認する、という投稿も、白い抜けが起きたときの定番チェックとして同じ方向を指しています。
カスタムCSSは、ページ本体のスタイルに足して効かせる欄です。配信サービスから配布される追加CSSを貼る運用もありますが、貼ったあとに表示が消えた・崩れたときは、いったん初期値へ戻して切り分けると原因が早いでしょう。フォント指定の@importを足す場合は、OBSの版によって解釈が厳しくなることがあり、配信ツール作者の案内では「デフォルトのbody指定より上に置く」といった注意が出ることがあります。版固有の挙動は、手元のOBSのバージョンと、使っているテンプレート作者の最新案内を優先してください。
透過したいのに白い背景が残るときは、CSSを消していないかに加え、ページ自身が背景色を塗っていないかを見ます。全画面の背景付きで使う設計のページは、透かす前提ではないことがあります。作者の説明で「透過用URL」「クリーン表示」などの案内があるかを確認し、透かす用途と全面表示の用途を取り違えないことが大切です。overflow: hiddenがあるため、幅・高さより大きい部分は切れ、スクロールでも見えません。「下が切れる」ときは高さを増やすか、ページ側のサイズ指定を見直す方が先です。
CSSをいじる前に、プレビューでソースの境界と、ページ作者が想定する解像度をメモしておくと戻りやすいです。初期値を残したまま幅と高さだけ合わせ、次に必要最低限の追加指定を足す順番が、失敗を小さくします。透過が成功しても、影や縁取りが薄くて視認しにくい場合は、ページ側のテーマ設定や、別レイヤーの枠画像で視認性を補う方法もあります。ブラウザソースだけで全部を解決しようとせず、画像ソースやテキストソースと役割を分けると、調整の手間が減るでしょう。配信テーマの色が暗い日は、透過後の文字コントラストもプレビューで一度確認する価値があります。明るい背景のゲーム画面では、逆に影付き文字の有無が読みやすさを左右するでしょう。
4．背景が透けない・切れるときの見直し
背景が透けないときの見直しは、順番を決めておくと迷いにくいです。まずカスタムCSSが初期値のままか。次に、普通のブラウザで同じURLを開いたときに不透明な背景が付いていないかを見ます。さらに、body以外の要素が背景を持っていないかも候補です。bodyだけを透明にしても、内側の枠や帯が白いまま残ることがあります。作者が透過用のクラスやクエリを用意しているなら、そちらへ切り替える方が確実です。どうしても上書きが必要なときだけ、!importantを付けた背景指定を試す、という段階に進むと安全側でしょう。
切れや余白の問題は、幅・高さとoverflowの組み合わせで起きやすいです。高さが足りないと下部が消え、幅が狭いと横並びが崩れて縦に伸び、さらに切れる、という連鎖もあります。プレビューで枠を引き伸ばして「見えたつもり」にせず、プロパティの数値をページの設計に戻すことが近道です。ソースの並び順も確認してください。Sources Guideのとおり、ソース一覧の上にあるものほど手前に重なります。チャットやアラートがゲーム画面の下に潜っていると、透過していても見えません。
表示が真っ白・真っ黒のときは、ハードウェアまわりも候補になります。設定の詳細設定にある「ブラウザソースのハードウェアアクセラレーションを有効にする」を切り替えて再起動する、という切り分けがコミュニティでは試されます。効く場合と効かない場合があり、公式の必須手順というより相性確認の一つです。直らなければ元に戻し、URLの再確認・キャッシュ更新・ソースの作り直しへ進む方が全体の時間を短縮できます。Linuxでは、公式案内どおり公式パッケージ経由でないとブラウザソース自体が使えない場合がある点も押さえておくと安心です。
透過と切れの両方が同時に起きているときは、片方ずつ直します。先に幅・高さを正し、次にCSSを初期値へ戻し、最後にページ側の透過対応を確認する、という三段が扱いやすいでしょう。テスト用に公式のデモURLへ一時的に戻し、OBS側の描画が生きているかを確かめる方法も有効です。デモが見えて自分のURLだけが見えないなら、URL・ログイン・ページ側の障害に寄ります。逆にデモも見えないなら、ソースの表示状態やハードウェア設定、OBSの再起動を先に疑うと早いです。当日の配信では、変更履歴を短くメモしておくと、次の枠で同じ罠に落ちにくくなります。
更新・非表示時の動作と権限
最後は、動き続け方と安全側の設定です。キャッシュの手動更新、シーン切替時の再読込、非表示時の終了、ページ権限と対話を区別すると、トラブル時の切り分けが速くなります。
5．キャッシュ更新とシーンがアクティブになったときの再読込
ページ側で色や文言を変えたのにOBSの表示が古いまま、というときは、プロパティ下部の「現在のページのキャッシュを更新」を押してください。公式案内どおり、いまのページをすぐに再読込します。ソースを右クリックして再読込できる版もあるため、手元のメニュー表記に合わせて同じ操作を探しましょう。設定を変えた直後や、ウィジェットの管理画面で保存した直後に一度押す習慣があると、配信開始直前の齟齬を減らせます。
「シーンがアクティブになったときにブラウザの表示を更新する」は、そのシーンへ切り替わるたびにページを読み直す設定です。毎回、最初の状態からアニメーションを見せたいときに向きます。一方で、チャットの履歴やタイマーの途中経過を保ちたいページでは、オンにすると状態が消える原因になります。初期値はオフです。用途ごとにソースを分け、アラート用は常時表示・更新オフ、オープニング演出用は切替時更新オン、のように役割を分けると迷いが減るでしょう。
OBS Studio 33.0では、ブラウザソースとドックの基盤であるCEFが127/6533から150/7871へ更新されています。リリースノートではバックエンドの大きな更新であり、ユーザーからは見えにくい一方、新しい不具合があれば報告してほしい、という案内です。アップデート直後に表示がおかしいときは、キャッシュ更新とソースの作り直しに加え、公式の既知情報やログも確認対象になります。版を上げる前にシーンコレクションのバックアップを取る運用は、ブラウザソースを多く使う配信ほど効果が高いでしょう。
更新系の設定をいじるときは、一度に一つだけ変えて、プレビューで結果を見るのが安全です。キャッシュ更新ボタンは即時、シーン切替時更新は切替のたびに効く、と覚えると、どの操作で状態が消えたかが追いやすくなります。配信中に管理画面だけ直してOBS側を触らないと、視聴者には古いデザインが残り続けます。変更のたびにキャッシュ更新をセットにするチェックリストを、配信前の短い手順へ入れておくと安心です。ウィジェットの色や文言を配信の合間に直す予定がある日は、待機シーンへ戻るタイミングで更新ボタンを押す流れを決めておくと、本番シーンへの反映漏れを防ぎやすくなります。テスト通知やダミーイベントで、更新後の見た目が意図どおりかも一度確認してください。
6．非表示時のシャットダウンとページ権限・対話
「表示されていないときにソースをシャットダウンする」は、目アイコンで隠したときや、そのソースが無いシーンにいるときにページをアンロードします。初期値はオフです。オンにすると、映っていないあいだのCPUや通信を抑えやすく、音も止まります。そのかわり、再び表示したときは最初から読み込み直すため、カウントの途中やチャットの履歴は消えます。コメント欄や通知のように常時動かしたいページではオフ、たまにしか出さない重いページではオン、という使い分けが現実的です。オフのまま多数のブラウザソースを常駐させると、配信が重くなる原因の一つにもなります。重さ対策としては、当サイトのカクつき統計の見分け方でエンコードとレンダリングを切り分ける視点も合わせて持つとよいでしょう。
ページ権限は、ページ側のスクリプトがOBSの情報を読んだり操作したりしてよい範囲です。公式案内の初期値は「OBSのステータス情報への読み取りアクセス」です。むやみに上げると、配信の開始・停止まで操作できる水準まで広がるため、作者が明示し、その機能が必要なページ以外は初期値のままが安全でしょう。信頼できないURLを貼ったまま権限だけ上げる運用は避けてください。
ページ内をクリックしたりログインしたりするときは、ソースの右クリックから「対話（操作）」を開きます。プロパティ画面にも同様の入口がある版があります。対話ウィンドウは補助的なブラウザで、通常のブラウザと同じ快適さはありません。ログインが必要なページは配信前にここで状態を確認し、可能ならログイン不要のOBS用URLへ切り替える方が安定します。Googleなどのログインが組み込みブラウザから断られる、という報告もあるため、依存しすぎない設計が望ましいです。
トラブル時は、普通のブラウザでURLが開くか、対話でエラー文が出ていないか、シャットダウンがオンで読み込み待ちになっていないか、の順に見ると早いです。「そのページを読み込めませんでした」と出るときは、URLの誤り、ネットワーク、証明書やPCの時刻ずれが候補になります。クリックして再試行できる表示もあるので、設定を大きく変える前に一度試してください。音声が二重になるときは、ブラウザソースの「OBSで音声を制御する」とデスクトップ音声の両方で同じ音を拾っていないかを、ミキサーで一つずつミュートして切り分けます。待機シーンと本番シーンで同じブラウザソースを共有している場合は、片方でシャットダウンをオンにすると、もう片方へ戻った瞬間に読み込み待ちが発生することがあるため、シーン設計とセットで見直すと安心です。
権限と対話は、便利さとリスクが隣り合わせです。配信に必要な最小権限で止め、対話は準備時間だけに使い、本番中は誤クリックでログイン画面や管理画面が映らないようソースをロックする、といった運用が安心につながります。ウィジェットURLの漏洩は、なりすまし通知やコメントののぞき見につながることもあるため、プロパティのスクショ共有やサポート依頼の添付にも注意してください。
まとめ
OBSのブラウザソースは、組み込みの小さなブラウザでWebページを描き、アラートやチャットなどのオーバーレイをシーンに載せる機能です。追加後は幅800・高さ600の初期ビューポートをキャンバスやページの推奨サイズへ合わせ、プレビューの引き伸ばしだけで解像度を稼がないことが基本になります。カスタムCSSの初期値は背景透過・余白削除・スクロール抑制の三点セットなので、白い抜けや切れが出たときは初期値と幅高さを先に戻します。表示が古いときはキャッシュ更新、演出のやり直しが必要ならシーン切替時の更新、常時動かしたい部品では非表示時シャットダウンをオフ、と用途で分けると安定しやすいでしょう。ページ権限は初期の読み取りにとどめ、対話は準備用、信頼できるOBS用URLを優先する、という安全側の順番を配信前チェックに入れておくと安心です。
