ブラウザソースは、WebページをOBSの画面内に表示する機能です。URLで動くサービスだけでなく、PC内のHTMLファイルも読み込めます。ゲーム画面の上に重ねるだけで、コメント、通知、アニメーション、立ち絵などを配信演出として追加できます。
URL型とローカル型の違い
| 種類 | 入力するもの | 特徴 |
|---|---|---|
| Web URL | https://... | 外部サービス向け。ネット接続が必要な場合が多い |
| ローカルファイル | PC内の.html | 単体のHTML演出向け |
| ローカルサーバー | http://localhost:... | 設定画面との連携や複数ファイルを使うツール向け |
ツールにstart.batがあり、起動後にURLが表示される場合はローカルサーバー型です。この場合、OBSの「ローカルファイル」ではなくURL欄を使います。
ブラウザソースを追加する手順
表示したいシーンを選ぶ
OBSで対象シーンを開き、ソース欄の「＋」から「ブラウザ」を選びます。
URLまたはローカルファイルを指定する
ツールの案内どおりにURLを貼るか、「ローカルファイル」にチェックしてHTMLを選びます。
幅と高さを入力する
全画面演出なら配信解像度と同じ値、部品なら提供元の推奨サイズを使います。
ソースの上下関係を整える
ゲーム映像より上、顔や重要な文字を隠さない位置へ移動します。必要ならAltを押しながら辺をドラッグして切り抜きます。
幅・高さ・配信解像度をそろえる
ブラウザソースの幅と高さは、Webページが描画される仮想画面の大きさです。OBS上で拡大して見た目を合わせるより、元の縦横比をそろえる方が文字や線をきれいに保てます。
- 1920×1080配信の全画面演出：幅1920、高さ1080
- 1280×720配信の全画面演出：幅1280、高さ720
- 立ち絵などの部品：ツール指定のサイズを起点に調整
無料のサイズ計算ツールで、キャンバス幅と比率から高さを計算できます。
黒い背景を透過する
配信素材側が透過背景を実装していれば、通常はそのまま透明で表示されます。黒くなる場合は次を確認します。
- 素材の説明に「透過対応」とあるか。
- ブラウザソースのカスタムCSSを変更していないか。
- 指定したURLが表示用ページか、設定用ページではないか。
- ローカルHTMLなら背景色がCSSで固定されていないか。
表示されない・更新されない場合
真っ白、または何も出ない
URLを通常のブラウザで開いて表示できるか確認します。ローカルサーバー型は起動用の黒い画面を閉じると表示できません。
設定変更が反映されない
ブラウザソースを右クリックして「更新」を試します。再読み込みで設定が消えるツールもあるため、設定保存の有無を先に確認してください。
マウス操作が必要
ソースを右クリックして「対話」を開くと、OBS内のWebページをクリックできます。設定は通常のブラウザで行い、OBS側は表示専用にする方が安定します。
コメント欄を見やすい配信パネルにする
yuu3 Labのコメントオーバーレイは、コメント表示と配信演出をまとめてOBSへ追加するWindows向けツールです。
自分専用の配信演出・便利機能を追加する
目標ゲージ、配信カウンター、声やキー操作で動く演出などを、配信画面と運用に合わせて制作します。