OBSのブラウザソース機能を使うと、WebページをOBSに直接取り込んでオーバーレイとして表示できます。HTMLとCSSで作ったコンテンツをリアルタイムに配信画面に重ねられるため、プロの配信者から初心者まで広く活用されています。
ブラウザソースでできること
ブラウザソースは、OBSのソース追加で「ブラウザ」を選ぶだけで使えます。URLを入力するだけでWebコンテンツを配信画面に表示できます。具体的には以下のような用途に使われています。
- 配信開始前のカウントダウン画面（Starting Soon）：ファンに待ち時間を楽しんでもらうための演出
- ローワーサード（名前テロップ）：ゲスト出演者や自分の名前・SNSアカウントを画面下部に表示
- アクションオーバーレイ：フォロー・サブスクライブ通知のアニメーション
- プログレスバー：達成したいゴールまでの進捗をリアルタイム表示
- 音楽ビジュアライザー：BGMに合わせて動くグラフィックを画面に重ねる
ブラウザソースの設定手順
OBSでブラウザソースを追加する手順は非常にシンプルです。次のステップで設定できます。
- OBSを起動し、シーン内の「ソース」パネルで「＋」ボタンをクリック
- 「ブラウザ」を選択し、新しいソース名を入力して「OK」
- プロパティウィンドウでURLを入力（例：Snap Kit LabのツールURL）
- 幅・高さを1920×1080に設定（フルHDの場合）
- 「シャットダウン状態でソースを停止」のチェックを外すと常時更新される
- 「OK」をクリックして設定完了。シーン上で位置を調整する
URLパラメータで設定を渡す仕組み
Snap Kit Labのツールは、URLパラメータで設定を渡す仕組みを採用しています。たとえばStarting Soonツールでは、タイトル・カウントダウン時間・テーマ・フォントなどの設定が全てURLに含まれます。
具体的には次のような形式のURLになります：
https://snap-kit-lab.com/tools/starting-soon/preview?title=Starting+Soon&minutes=5&theme=dark&font=Poppins
このURLをそのままOBSのブラウザソースに貼り付けるだけで、カスタマイズされたStarting Soon画面が表示されます。設定を変更したいときは、ツールページで調整して「URLをコピー」ボタンを押すだけです。
ローカルHTMLファイルとの違い
ブラウザソースにはURLを指定する方法と、ローカルのHTMLファイルを読み込む方法があります。それぞれの特徴を比較します。
| 方法 | メリット | デメリット |
|---|---|---|
| URLを指定 | 設定が簡単・更新が自動反映 | インターネット接続が必要 |
| ローカルHTMLファイル | オフラインで動作 | HTMLの知識が必要・更新が手動 |
Snap Kit Labのようなオンラインツールを活用する場合は、URLを指定する方法が手軽でおすすめです。ツール側でアップデートがあれば自動で反映されます。
まとめ
ブラウザソースはOBSの強力な機能のひとつです。HTML/CSSの知識がなくても、オンラインツールを活用することでプロ品質の配信画面を手軽に作れます。まずはSnap Kit LabのStarting SoonツールやローワーサードツールのURLをOBSに設定して、配信画面のクオリティを上げてみましょう。