OBSでブラウザが映らず「昨日までは普通に映ってたのに…」「設定は間違ってないはず…」と感じている方もいるでしょう。

OBSでブラウザが表示されない原因はひとつではなく、設定の見落としやPC側の機能とOBSの相性などいくつかのパターンがあります。

この記事では、OBSのブラウザソースが映らない主な原因と対処法を解説します。

OBSの表示トラブルにモヤモヤしている方は、ひとつずつチェックして快適な配信環境を手に入れましょう。

OBSでブラウザが映らないときの主な現象

ブラウザソースに設定したWebページが真っ黒または真っ白なまま映らないのが主な症状です。

コメント表示用のURLや配信ウィジェットをブラウザソースで追加しても、枠だけが表示され中身が空っぽな場合や、音声のみで映像が出ない場合などが該当します。

最新バージョンのOBSでも起こり得る現象で、「以前は映っていたのに急に映らなくなった」「他のソースは映るのにブラウザだけ表示されない」といった現象が多いです。

また、ブラウザの表示問題が発生するとき、OBS自体がエラーを出すことは少ないとされています。一見正常にソースが追加できているように見えるため、考えられる原因を順番に確認することが大切です。

OBSでブラウザが映らない主な原因

OBSでブラウザソースが表示されない場合、考えられる原因は大きく分けて以下の3つです。

• ハードウェアアクセラレーションとGPUの問題
• バージョン・プラグインに関する問題
• ブラウザソースの設定ミス

それぞれ詳しく見ていきましょう。

ハードウェアアクセラレーションとGPUの問題

OBSでブラウザが映らない主な原因のひとつ目は、ブラウザソースの描画に用いられる「ハードウェアアクセラレーション」です。

デュアルGPU搭載のノートPCでは、OBS本体とブラウザ描画プロセスが別々のGPUで動作すると映像共有できず黒画面になることがあります。

実際、公式フォーラムでも「OBS設定の『ブラウザソースのハードウェアアクセラレーションを有効にする』をオフにしたら表示された」との報告も。

参考：OBS Open Broadcaster Software

ハードウェアアクセラレーションをオフにするとブラウザ描画がCPU処理に切り替わるため、一部環境での表示不良が改善します。

ただし、CPU負荷が上がる可能性があるため、普段はオンのままが推奨です。低負荷なページのみ表示する場合や、表示されない問題が起きている場合に限りオフにしましょう。

具体的な設定方法は以下の通りです。

1.「設定」

2.「詳細設定」

3.「ソース」の「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外す

バージョン・プラグインに関する問題

OBS本体やブラウザソースのバージョン不備もブラウザが表示されない原因になり得ます。古いOBSを使用している場合、OSをアップデートした際にOBSが対応できていない場合などが原因です。

実際に、2020年にリリースされたmacOSのオペレーティングシステム「Big Sur」では、古いOBSとの相性問題でブラウザソースを含むシーンが読み込めず、OBS自体が起動しない不具合も報告されました（OBS 26.1.2以降で解決）。

参考：OBS Open Broadcaster Software

OBSは頻繁に更新されています。古いバージョンでは解決済みのバグに遭遇する可能性があるため、まずは公式サイトから最新バージョンにアップデートしましょう。

また、外部ツールのプラグインがブラウザソースと干渉して問題を起こすケースもあります。一度プラグインを無効化して改善するか確認するのもひとつの方法です。

ブラウザソースの設定ミス

OBSでブラウザが映らない原因のなかで、意外と多いのが設定操作の誤りによる表示不良です。

以下に、よくある設定ミスと対処法をまとめました。

設定項目	よくあるミス内容	解決策
URLの指定	・URLの入力ミス ・「https://」が抜けている	正確なURLを入力し、「http://」または「https://」から始まる完全なURLにする
ローカルファイルチェック	チェックを入れたままURLを指定している	用途に応じてチェックのON/OFFを確認する
CSSの影響	・「display: none;」が設定されている ・背景と同色の文字色を使っている	CSSの設定を見直し、表示スタイルに問題がないか確認する
幅・高さの設定	・幅や高さが0pxや1pxになっている ・画面外に要素がはみ出している	十分なサイズ（例：1,280×720など）を設定し、位置調整もする

各設定項目は後述しますが、まずは設定ミスを疑ってみましょう。

OBSのブラウザソースが映らない場合の設定見直し箇所

OBSのブラウザソースが映らない場合に見直すべき設定箇所は以下の3つです。

• 基本的な追加手順を見直す
• 「表示されていない時にソースをシャットダウンする」の項目を見直す
• カスタムCSSや幅・高さを見直す

画面キャプチャが映らない場合の対処法を知りたい方は以下の記事も参考にしてください。

>>OBSでの画面キャプチャを徹底解説！映らないときの対処法も紹介

基本的な追加手順を見直す

まずはブラウザソースの追加手順自体が正しいか確認しましょう。「対話型のページ」や「音声を含むコンテンツ」を表示したい場合、設定ミスによってうまく再生されないことがあります。

具体的な手順は以下のとおりです。

1.OBS画面下部の「+」ボタンから「ブラウザ」を選択し新規作成

2.プロパティ画面で表示したいページのURLを「URL」欄に入力
　⇒「ローカルファイル」はウェブではなくPC内のHTMLファイルを表示する場合のみオンにします。誤ってチェック状態のままURLを指定すると空白になるので注意してください。

3.ブラウザ表示領域の幅(Width)と高さ(Height)を適切に設定
　⇒初期値は800×600ピクセルです。配信画面全体に表示したいならキャンバス解像度（例:1,920×1,080）に合わせます。小さすぎるとコンテンツが切れて見えなくなる可能性があります。

4.「OK」を押してプロパティを閉じる

「表示されていない時にソースをシャットダウンする」の項目を見直す

ブラウザソースのプロパティ内「表示されていない時にソースをシャットダウンする」を見直しましょう。

同オプションを有効にすると、該当ソースがシーン上で非表示（目のアイコンオフ、または別シーンに切り替え）になったときにブラウザページをアンロード（シャットダウン）するからです。

たとえば、ブラウザ経由の通知ウィジェットは、一度シャットダウンすると再読み込みしない限り表示されません。

どうしてもリソース負荷が気になる場合のみオンにしますが、その場合はシーンに戻るたびにページが再読み込みされる点を理解しておきましょう。

カスタムCSSや幅・高さを見直す

次にプロパティ内の「カスタムCSS」と「幅・高さ」をチェックしましょう。

カスタムCSSに記述したコードはページに追加で適用されます。デフォルトでは背景を透明にしスクロールバーを非表示にするCSSが入っているので、変更したことがある場合は一度すべて削除しましょう。

実際にフォーラムでも「カスタムCSS欄の内容を消したら表示された」との報告があります。

参考：OBS Open Broadcaster Software

また、「幅・高さ」は表示領域の解像度に合わせましょう。サイズが合っていないとコンテンツが大きくはみ出して見切れたり、小さく余白だらけになったりします。

Chrome画面だけがOBSのブラウザに映らない場合の対処法

「他のサイトはブラウザソースで表示できるのに、Google Chromeの画面だけがOBSに映らない」という場合は、以下を試してみましょう。

• Chromeのハードウェアアクセラレーションをオフにする
• Chromeのキャッシュを削除する

それぞれ詳しく解説します。

Chromeのハードウェアアクセラレーションをオフにする

Chromeは表示パフォーマンス向上のためハードウェアアクセラレーションを利用しますが、OBSのウィンドウキャプチャと相性が悪く画面が映らない場合があります。OBS Studio 25以降ではある程度改善されたものの、環境によっては依然として発生します。

Chromeのハードウェアアクセラレーションをオフにする方法は以下のとおりです。

1.Chromeを起動し、右上の「︙」メニューから「設定」を開く

2.「システム」を選択

3.「グラフィック アクセラレーションが使用可能な場合は使用する」をオフにする

Chromeのキャッシュを削除する

ハードウェアアクセラレーションを無効にしても症状が変わらない場合、Chromeのキャッシュをクリアしましょう。特定サイトの表示がうまくいかない時によく行う対処法ですが、OBSでのキャプチャにおいてもChrome自体の調子を整える目的で試してみると改善されるかもしれません。

Chromeのキャッシュを削除する方法は以下のとおりです。

1.Chromeの設定メニューから「閲覧履歴データの削除」を選択

2.時間範囲を「全期間」に設定

3.「キャッシュされた画像とファイル」にチェックを入れ、その他削除したくない項目（閲覧履歴やCookieなど）はチェックを外す

4.「データを削除」ボタンを押して実行

SwitchがOBSのブラウザに映らない場合の対処法

Nintendo Switchの映像をOBSに映したい場合、通常はキャプチャーボード（ビデオキャプチャデバイス）を経由してOBSに取り込む形になります。

Switchの映像が映らない場合の対処法は以下のとおりです（※ブラウザソースではなく映像キャプチャデバイス経由での表示方法となります）。

• キャプチャーボードを接続し直す
• 「映像キャプチャデバイス」ソースを選ぶ

キャプチャーボードを接続し直す

まず疑うべきは物理的な接続です。Switch〜キャプチャーボード～PC間の接続が正しくても、機器の認識不良や接触不良で映像が出ないことがあります。

以下に、よくある原因と対処法をまとめました。

原因・状況	症状	対処法
ケーブルの接触不良・抜けかけている	OBSのブラウザに映らない、一瞬映ってすぐ切れる	HDMIやUSBケーブルをすべて一度抜いて、奥までしっかり差し直す
USBポートの規格違い	データ通信が不安定、全く認識されない	USB3.0対応デバイスはUSB3.0ポートに接続する（青色の端子が目印）
ケーブルの断線	物理的に信号が通っていない	予備ケーブルや別のHDMI/USBケーブルに交換してみる

「映像キャプチャデバイス」ソースを選ぶ

Switchの映像を取り込むには「映像キャプチャデバイス」というソースを使用します。もしOBSのブラウザソースやゲームキャプチャを選んでいると映らないので、今一度確認しましょう。

1.OBSのソース一覧で「+」をクリックし、「映像キャプチャデバイス」を選択

2.「デバイス」ドロップダウンからお使いのキャプチャーボードの名前を選択
　⇒この段階でデバイス名が出てこない場合、PCがキャプチャーボードを認識していません。ドライバーや接続を再確認しましょう。

まとめ

OBSでブラウザが映らない原因は「設定のうっかりミス」から「ハードウェアとの相性」までさまざまです。

確認すべき代表的なポイントは以下のとおりです。

• ブラウザソースのハードウェアアクセラレーション設定
• Chrome側のキャッシュや設定状態
• URLやCSS、サイズ指定などの設定ミス

「昨日まで普通に映ってたのに…」と悩んでいる方も、冷静に設定を見直せば改善できる可能性が高いです。

快適な配信を楽しみたい方は、ひとつずつ丁寧に確認して、スムーズに映るブラウザソースを手に入れましょう。

OBSの表示不具合を解決できたら、次は？

OBSのブラウザソースが映らない原因を解消できたら、次は配信画面をもっと自分らしくカスタマイズしてみませんか？
配信画面デザインサービス「Alive Studio」なら、直感的な操作で、あっという間にあなたらしい配信画面が完成します。

• VTuber向け素材制作チーム「うさねこメモリー」提供の背景・小物素材が1,400種類以上使い放題！
• 音楽素材サイト「魔王魂」提供のBGMが100曲以上使い放題！
• お題ルーレット・カウンター機能搭載！
• 全機能使えて、月額980円（税込）！

「配信をもっと個性的にしたい！」「テンプレートに頼らず自分らしい画面を作りたい！」
そんな方は、ぜひ「Alive Studio」をお試しください。

＼ まずは無料お試し7日間！あなたの配信をワンランクアップ！ ／