配信画面に Web ページを重ねる：OBS Studio のブラウザソースの設定と、つまずいたときの見直し方

ブラウザソースは、OBS の中の小さなブラウザ

ブラウザソース（Browser Source）は、OBS に組み込まれた Web ブラウザです。レイアウトや画像、動画、音を持つ Web ページを、そのままソースとして置けます。Windows・macOS・Linux で使えます。中身は Chromium Embedded Framework（CEF）という、Chrome と同じ系統の仕組みです。ふだん使っているブラウザとは別物で、ログインの状態も別になります（あとの節で触れます）。

ページを映す方法は 2 つあります。インターネット上のページの URL を指定するか、自分のパソコンにある HTML ファイルを「ローカルファイル」として読み込むかです。この記事は主に URL で使う場合を説明します。

追加の手順

1. 1
   ソースを追加するOBS の「ソース」欄の下にある「+」を押し、一覧から「ブラウザ」を選びます。名前を付けて「OK」を押すと、プロパティの画面が開きます。
2. 2
   URL を貼る「URL」の欄に、映したいページの URL を貼ります。初期状態では OBS 公式のページの URL が入っているので、上書きします。ローカルファイルを使うなら「ローカルファイル」にチェックを入れ、ファイルを選びます。
3. 3
   幅と高さを決める初期値は幅 800・高さ 600 です。配信画面いっぱいに映すなら、OBS の映像設定の「基本 (キャンバス) 解像度」と同じ値（たとえば 1920×1080）にします。理由は「大きさと解像度」の節で説明します。
4. 4
   必要なら音の設定をして「OK」ページが音を鳴らすなら「OBSで音声を制御する」にチェックを入れます（「音」の節）。ほかの項目は初期値のままで始められます。「OK」を押すと、プレビューに映ります。
5. 5
   位置と大きさを整えるプレビューで赤い枠をドラッグして動かします。ぴったり合わせたいときは、ソースを右クリックして「変換」から「変換の編集」を開くと、位置と大きさを数字で決められます。「画面に合わせる」（Ctrl+F）で画面いっぱいにもできます。

各項目の意味と初期値

プロパティに並ぶ項目と初期値は次のとおりです。初期値は公式の資料と、OBS のブラウザソースのソースコードで確かめました。

英語版の名前は、順に Local file / URL / Width・Height / Use custom frame rate・FPS / Custom CSS / Shutdown source when not visible / Refresh browser when scene becomes active / Control audio via OBS / Page permissions / Refresh cache of current page です。お使いの OBS の版によって、日本語の言い回しが少し違うことがあります。

ページ権限は、むやみに上げない

ページ権限は 6 段階あり、いちばん上は「OBSへのフルアクセス (警告なしで配信を開始/停止するなど。)」です。ページ側のプログラムが OBS を操作できる設定なので、作者が分かっていて、その機能が必要なページ以外は、初期値のままにしておきます。

シャットダウンと更新は、使い分ける

• 表示されていないときにシャットダウンする：映っていないあいだはページが動かないので、軽くなります。音も止まります。そのかわり、映したときにページが最初から始まるので、カウントや途中の状態は消えます。
• シーンがアクティブになったときに更新する：シーンを切り替えるたびにページを読み込み直します。毎回、最初の状態から見せたいアニメーションに向いています。

背景が透けないときの見直し

透過のための専用の項目はありません。透けるのは、「カスタム CSS」の初期値が背景を透明にしているからです。初期値は次のとおりです。

背景を透明にし、ページの余白を消し、ページが領域より大きいときにスクロールバーを出さない、という 3 つの指定です。背景が透けないときは、次の順に見直します。

1. 1
   カスタム CSS を消していないか消したり書き換えたりした場合は、初期値に戻します。消すと余白やスクロールバーも出ることがあります。
2. 2
   ページ自身が背景色を持っていないかページが自分で背景色を塗っていると、透けません。ページが透過に対応していない（白い背景が付いている）なら、そのページでは透けません。ページの作者が透過用の設定や URL を用意していないか、確かめます。
3. 3
   CSS で上書きする背景を指定しているのが body だけなら、カスタム CSS の指定に !important を付けると、上書きできることがあります。例：body { background-color: rgba(0, 0, 0, 0) !important; }。ページ内の別の要素（枠や帯）が背景を持っているときは、その要素の名前を調べて同じように指定します。
4. 4
   そもそも透けるページか全画面の背景を持つ設計のページは、透かす前提で作られていません。透かして使うページか、画面いっぱいに映すページかは、作者の説明で確かめます。

大きさと解像度：拡大すると文字がぼやける

ブラウザソースは、ページを「幅 × 高さ」のピクセルの絵として描き、その絵を OBS の画面（キャンバス）に置きます。プレビューで赤い枠をドラッグして大きくすると、その絵を引き伸ばすだけなので、文字や線がぼやけます。小さくすれば、逆につぶれて粗く見えることがあります。

• 大きさは、プロパティの幅と高さで決める。画面に映したい大きさ（ピクセル）を、そのまま入れます。全画面なら、キャンバスと同じ 1920×1080 などです。
• プレビューでは、枠の角を引っぱらない。位置を動かすだけにします。「変換の編集」で、大きさがプロパティの幅と高さと同じ数字のままかを確かめます。
• 幅を変えると、ページの見え方も変わる。多くのページは幅に合わせて並びを変えます（スマホ向けの並びになるなど）。狭くしすぎると、思っていない並びになります。

キャンバスと出力の関係も押さえておきます。映像設定の「基本 (キャンバス) 解像度」は、ソースを並べる場所の広さです。「出力 (スケーリング) 解像度」は、配信や録画で出す大きさで、キャンバスから縮めて出します。キャンバスを変えるとソースの配置と大きさを直す必要が出ますが、出力を変えても出ません。ブラウザソースの幅と高さは、キャンバスの側に合わせます。

音が出ない・二重になるとき

「OBSで音声を制御する」がオフの初期状態では、ページの音は OBS の音声ミキサーに出てきません。配信に音を乗せたいページでは、オンにします。オンにすると、ミキサーにそのソースの音量の棒が出て、音量やミュートをほかのソースと同じように扱えます。

音が出ないとき

• 「OBSで音声を制御する」がオフになっていないか。
• ミキサーでミュートされていないか。音量の棒が動いているのに配信で聞こえないなら、次の「音声モニタリング」の設定も見ます。
• ページ側で音が止まっていないか。ページによっては、いちど操作しないと鳴らないものがあります。「対話」の画面で押して確かめます。
• シーンの切り替えのあと鳴らないなら、「シーンがアクティブになったときに更新する」で読み込み直すと直ることがあります。

二重に聞こえる・別のシーンでも鳴り続けるとき

• 同じ音を 2 つの経路で拾っていないか。たとえばデスクトップ音声（パソコン全体の音を拾うソース）と、ブラウザソースの両方に同じ音が入っていないかを、ミキサーで 1 つずつミュートして確かめます。OBS の公式の資料にも、同じ機器を重ねて拾うとエコーのようになるという注意があります。
• ミキサーの歯車から開く「オーディオの詳細プロパティ」の「音声モニタリング」を見ます。「モニターオフ」「モニターのみ (出力はミュート)」「モニタリング有効」から選べます。聞きながら確かめたいときだけ有効にし、配信に乗せたくない音は「モニターのみ」にします。
• 別のシーンにいるのに音が鳴り続けるのは、ページが裏で動き続けているからです。「表示されていないときにソースをシャットダウンする」をオンにすると、止まります。

更新・対話・ログインが要るページ

更新したのに古い表示のまま

ページ側を直したのに配信の表示が変わらないときは、ソースのプロパティを開き、「現在のページのキャッシュを更新」を押します。ページの中身を読み込み直します。設定を変えたあとにも、いちど押すと確実です。

対話：ブラウザソースの中を、自分で操作する

ソースを右クリックして「対話 (操作)」を選ぶ（プロパティの画面にも同じボタンがあります）と、そのソースの専用のウィンドウが開き、ふつうのブラウザのようにクリックや入力ができます。ボタンを押す、設定を入れる、ログインするといった作業はここでします。

ログインが要るページは、別扱いになる

ブラウザソースは、ふだん使っている Chrome や Edge とは別のブラウザです。そちらでログインしていても、ブラウザソースでは未ログインの状態から始まります。ページの表示にログインが要るなら、「対話」の画面でログインします。

• OBS を閉じるとログインが切れる、という報告があります。毎回ログインが要るページは、配信の前に「対話」で確かめます。
• Google などのログインは、組み込みブラウザからだと断られることがあります（OBS のフォーラムの報告）。回避策は公式のものではないので、ここでは勧めません。
• ログインなしで映せるページ（秘密の URL を貼れば表示されるもの）が用意されているなら、それを使うのがいちばん安定します。その URL は鍵と同じなので、配信に映したり、人に見せたりしないでください。OBS のプロパティの画面を画面共有するときも、URL の欄が映らないように気をつけます。

映らないとき：エラーの文面を読む

ページを読み込めないと、ソースに「そのページを読み込めませんでした！」と出て、原因の目安が添えられます。「サーバーのIPアドレスが見つかりません」なら URL の打ち間違いやネットワークを、「サーバーのSSL証明書が古くなっているかコンピュータの時刻が正しくありません」なら、パソコンの時計のずれを見ます。「クリックして再試行」で読み込み直せます。

重いときの見直し

ブラウザソースは、1 つ置くごとに小さなブラウザが 1 つ動きます。アニメーションの多いページを何枚も置くと、パソコンに負担がかかります。効きやすい順に並べます。

1. 1
   映っていないソースは止める「表示されていないときにソースをシャットダウンする」をオンにします。シーンごとに別のページを置いているときに、いちばん効きます。オンにしておけば、ソースの目のマークで隠したときも止まります。
2. 2
   幅と高さを必要なぶんだけにする画面の一角に小さく出すだけなのに、1920×1080 で描かせていないかを見ます。描く面積が大きいほど、負担も大きくなります。
3. 3
   FPS を下げる動きの少ないページ（文字や数字の表示が中心のもの）は、「カスタムフレームレートを使用する」をオンにして FPS を 30 以下にしても、見た目はほとんど変わりません。オフのままだと、OBS の映像設定のフレームレートに合わせて描きます。この項目が選べない版の OBS もあります。
4. 4
   同じページを何枚も置かないソースを別々に追加すると、そのぶん別々のブラウザが動きます。同じものを複数のシーンに出すなら、ソースの追加画面で「既存」の側から選んで、同じソースを使い回します。
5. 5
   ハードウェアアクセラレーションを切り替えるOBS の「設定」の「詳細設定」にある「ソース」の欄に、「ブラウザソースのハードウェアアクセラレーションを有効にする」があります。表示が黒くなる・ちらつくなど、パソコンの GPU との相性が疑わしいときは、オン・オフを切り替えて確かめます。これはコミュニティで試されている対処で、公式の手順ではありません。変えたあとは OBS を開き直して確かめます。

Streamlabs など、ほかの配信ソフトでは

Streamlabs Desktop にも「Browser Source」があり、高さ・幅・FPS・カスタム CSS、「Shutdown source when not visible」「Refresh browser when scene becomes active」、右クリックの「Interact」といった、OBS と同じ名前の項目が使えると、Streamlabs の公式の記事に書かれています。

ただし、日本語の画面での項目名や、音まわりの項目の有無は確かめられていません。OBS 以外のソフトでは、「ブラウザ」「Web ページ」「オーバーレイ」といった名前のソースを探し、この記事の考え方（幅と高さをキャンバスに合わせる、背景は CSS で透かす、音はソフト側の音声の設定に出す）を当てはめてみてください。

例：推しログの寄せ書きの配信画面を映す

推しログのデジタル寄せ書きには、ブラウザソースで映すための表示専用のページがあります。URL は /yosegaki/（寄せ書きの ID）/stage?clean=1 の形で、寄せ書きの参加ページ上端の「共有」にある「OBS 用 URL」でコピーできます。

• アプリのヘッダーや操作ボタン、スクロールバーのない、ボードだけの画面です。ログインしていない OBS でも映るので、ログインの問題は起きません。
• 推奨サイズは 1920×1080 です。この記事の手順どおり、ソースの幅と高さに入れ、キャンバスを 1920×1080 にしておけば、ぼやけません。
• この画面は背景色を持った全画面の表示で、透かして重ねるものではありません。専用のシーンに全面で置く使い方です。
• 読み上げなどの操作は、OBS ではなく、自分のブラウザで開いた参加ページから行います。

詳しい使い方は 配信で集めて、読み上げるデジタル寄せ書き にあります。

確かめた出典

この記事の項目名・初期値・仕様は、2026 年 10 月時点の次の資料で確かめました。

• OBS 公式：Browser Source（項目の説明と初期値）
• obs-browser（ブラウザソースのソースコード）（幅・高さ・FPS の範囲、カスタム CSS の初期値、日本語の項目名）
• OBS 公式：OBS Studio Overview Guide（キャンバス解像度と出力解像度、ソースの大きさ）
• OBS 公式：Sources Guide（変換の編集・画面に合わせる）
• Streamlabs：Browser Source の Interact
• OBS 公式：Audio Sources（同じ機器を重ねて拾うとエコーになる、という注意）
• VDO.Ninja：Enabling WebRTC sources in OBS（ハードウェアアクセラレーションを切る対処の例。公式の手順ではありません）