ブラウザソースとは
配信画面にバナーやチャット欄を重ねるときは、OBSの「ブラウザ」ソースを使うのが一般的です。指定したURLのページを、配信の画面に重ねて表示できます。ページの背景が透明なら、下にあるゲーム画面の上にバナーの部分だけが重なります。
追加する手順
- OBSの「ソース」の欄にある「＋」を押す
- 「ブラウザ」を選び、分かりやすい名前を付けて「OK」を押す
- 「URL」に、表示したいページのURLを貼り付ける
- 「幅」と「高さ」を、配信の解像度に合わせる（1920×1080の配信なら、幅1920、高さ1080）
- 「OK」を押し、画面の中に表示されることを確認する
幅と高さは、配信の解像度と同じ数字にしておくと、ページの中の位置がずれにくくなります。
表示されないときに確認すること
表示されないときは、次の表の上から順に確認してください。
| 確認すること | 直し方 |
|---|---|
| URLが途中で切れていないか | 前後の空白を消して、もう一度貼り付ける |
| 目のマークが消えていないか | ソースの一覧で、目のマークを押して表示する |
| ソースの順番 | バナーをゲーム画面より上に動かす |
| 幅と高さが小さすぎないか | 配信の解像度に合わせる |
| 古い内容が残っていないか | プロパティの「現在のページのキャッシュを更新」を押す |
ソースの順番に注意する
一番多い原因が順番です。ソースの一覧では、上にあるものほど手前に表示されます。バナーがゲーム画面より下にあると、隠れて見えません。
バナーの置き場所
- 顔のカメラに重ねない
- ゲームの体力やミニマップなど、大事な表示に重ねない
- プレイの中心を空けておく
- スマートフォンの小さな画面でも読める大きさにする
視聴者にとって邪魔なバナーは、配信者の評判にも、広告の印象にも悪く影響します。録画で確認して、見やすい位置を探しましょう。
配信の前に確認したいこと
- 録画やテスト配信で、バナーの見え方を確認する
- スマートフォンの画面でも読めるか確認する
- バナーが顔やゲームの大事な表示に重なっていないか確認する
- 配信の画面にURLが映っていないか確認する
ブラウザソースのURLには、その配信者専用の情報が含まれていることがあります。配信の画面に映らないように、また第三者に共有しないように注意してください。
バナーの大きさの決め方
決まった大きさはありませんが、1920×1080の配信なら、幅480〜640ピクセルくらいを目安に試してみましょう。文字が入るバナーは、小さくしすぎると読めません。
大きさを決めるときは、配信者本人がPCで見るのではなく、スマートフォンで配信を開いて確認するのが確実です。
配信が重くなったとき
ブラウザソースは、中でブラウザを動かしているので、数が増えるとPCに負担がかかります。映像がカクつくときは、次の順番で試してください。
- OBSの「表示」メニューから「統計」を開き、CPU使用率とフレームの落ち方を確認する
- 使っていないブラウザソースを削除する
- 非表示のシーンにあるソースを整理する
- ブラウザソースのFPSを、必要な範囲で下げる
配信前に別のシーンで試す
テスト用のシーンを作ってバナーを置くと、本番のシーンを崩さずに確認できます。問題がなければ、ソースをコピーして本番のシーンに貼り付けましょう。
配信の解像度が違うとき
ブラウザソースの幅と高さは、OBSの「設定」の「映像」にある基本（キャンバス）解像度に合わせます。1280×720で配信しているなら、幅1280、高さ720です。
解像度を変えたあとにバナーの位置がずれたら、ソースのサイズを画面全体に合わせ直してください。
配信中に困ったとき
配信を止めなくても対応できます。あわてて設定を変える前に、次の順番で試してください。
| 困りごと | 対応 |
|---|---|
| 今すぐバナーを消したい | ソースの一覧で、目のマークを押して非表示にする |
| バナーが古いまま変わらない | プロパティの「現在のページのキャッシュを更新」を押す |
| バナーの見え方を確かめたい | スマートフォンなど別の端末で、自分の配信を開く |
自分の配信を別の端末で開くと、音が重なることがあります。確認するときは、その端末の音を消しておくと安心です。
広告のバナーを表示するとき
企業から依頼を受けたバナーを表示するときは、広告であることが分かるようにします。「PR」の表示とTwitchのBranded Contentについては、配信のPR表記の解説で説明しています。
よくある質問
バナーから音は出ますか？
音のないページなら音は出ません。音が出るページを使うときは、OBSの音声ミキサーで音量を確認しましょう。
シーンを切り替えるとバナーが消えます
ソースはシーンごとに設定されています。別のシーンでも表示したいときは、そのシーンにも同じソースを追加してください。
表示が止まって見えます
ソースを右クリックして「プロパティ」を開き、「現在のページのキャッシュを更新」を押すと直ることがあります。
まとめ
- 「ブラウザ」ソースにURLを貼ると、バナーを重ねられる
- 幅と高さは配信の解像度に合わせる
- 表示されないときは、ソースの順番とURLを確認する
- URLは第三者に見せない