OBS のブラウザソースの使い方｜URL・幅と高さ・透過・ページが読み込み直されるとき
OBS Studio の「ブラウザソース」は、ウェブページを、そのまま配信画面の部品として置ける機能です。カウンターやタイマーのような、HTML で作った表示部品を使うときの、基本の設定を整理します。
出典: OBS Project 公式ナレッジベース「Browser Source」（https://obsproject.com/kb/browser-source。2026-11-14 に確認。公式の表の内容を、短くまとめ直しています）。設定項目の日本語の名称は、お使いの OBS のバージョンで確認してください。
ブラウザソースとは
公式の説明では、ブラウザソースは、OBS に直接追加できるウェブブラウザです（Chrome Embedded Framework がもとです）。ふつうのブラウザで動くものなら（「無理のない範囲で」と公式にあります）、OBS に追加できます。
主な設定（公式の説明より）
| ローカルファイル | オフ（既定）のとき、URL からページを読み込みます。オンにすると、パソコンの中のページを読み込みます |
| URL | ローカルファイルがオフのときに読み込むページ |
| 幅・高さ | ページを表示する枠の大きさ。既定は 800 × 600 |
| カスタム CSS | 既定で、背景を透明にして、余白を消し、スクロールバーを隠します |
| 見えなくなったときにソースを停止する | オンにすると、目のアイコンで隠したときや、使っていないシーンのときに、ページを読み込み解除します（既定: オフ） |
| シーンが有効になったときにブラウザを更新する | シーンを切り替えて、このソースが有効になったときに、ページを更新します（既定: オフ） |
配信画面に出す部品を作るときの、ポイント
- 背景が透過のページを選ぶ（または作る）: カスタム CSS の既定で背景が透明になるので、背景を指定していないページは、配信画面に重ねられます
- 幅・高さを、部品の大きさに合わせる: 既定の 800 × 600 のままだと、部品の大きさに対して、枠が大きくなります（背景が透過なら、余白は見えません）
- ページが読み込み直されても、数字が消えない作りにする: 上の 2 つの設定（見えなくなったときの停止・シーンが有効になったときの更新）をオンにすると、ページが読み込み直されます。カウンターのように値を持つ部品は、値をブラウザの中（localStorage など）に保存して、読み込み直しのあとに復元する作りが必要です
- 設定を URL に持たせる: 「?」のあとに値（例: タイトル・目標・テーマ）を付けられるページなら、1 つのファイルで、ソースごとに違う表示にできます
例: このサイトの無料ツール
使い方の手順は、note の記事「配信用の目標カウンターを、OBS のブラウザソースで出す方法」にもまとめています。
OBS 本体での動作は、まだ確認できていません（作成環境に OBS がないため。Chrome 157 で確認）。大切な配信の前に、必ず事前にお試しください。OBS・Streamlabs などは、それぞれの提供元の商標・製品で、この商品は、それらの公式のものではありません。
よくある疑問
「ローカルファイル」と「URL」は、どちらがよいですか？
公式の説明では、ローカルファイルは「パソコンの中のページを読み込む」、URL は「指定した URL のページを読み込む」です。「?」のあとに設定を付ける使い方は、ローカルファイルで通るかどうかを、当方は OBS で確認できていません。確認できていない間は、URL 欄に貼る方法をおすすめします。
インタラクト（ボタンやキーを押す操作）は、どうやりますか？
OBS には、ブラウザソースの画面を操作するための「インタラクト」があります（公式のこのページには載っていません）。ボタン・キーボードで操作するカウンターやタイマーは、これを使う想定です。当方は OBS で確認できていないので、お使いの OBS で、事前にお試しください。