OBS「ブラウザ」ソースの使い方｜コメント・登録通知・時計の映し方まとめ

OBS Studio（以下OBS）の「ブラウザ」は、Webページを画面に映せる機能です。

説明を一瞬読んだ感じだと、意味がよくわからないかもしれません。

しかし、さまざまな場面で活用される機能です。

コメント欄・チャット欄を映したいとき
通知（フォロー・登録）を映したいとき
時計を映したいとき
Discordアイコンを映したいとき

ふだん特別意識しないかもしれませんが、使う人は使う機能です。

ブラウザーソースの使い方について見ていきましょう。

1 どんな機能か
- 1.1 OBS内でWebページを閲覧できる
- 1.2 コメント欄などを映せる
2 ブラウザーソースの使い方
3 実践的な活用方法
4 こんなときは
5 備考 : YouTube動画を視聴者に見せたいときは
6 まとめ

どんな機能か

ブラウザーソースでできるのはどんなことでしょうか。具体的な活用方法です。

OBS内でWebページを閲覧できる

ブラウザーソースは、ネットで見ている画面を視聴者に見せたいときに使います。

イメージとしては、OBS内でネットをしているところを想像してください。Chromeの代わりにOBSでWebページを閲覧する感じです。

やろうと思えば、ブラウザーソースでOBSにYouTube動画を映すこともできます。

「ココフォリア」のルームも同様です。

コメント欄などを映せる

ただ、実際はブラウザーソースを使ってYouTubeを映す人は多くないかもしれません。後述しますが、不便だからです。

では、どのような用途で使うのかというと、下表をご覧ください。

	説明
コメント欄を映す	・視聴者のコメントを画面に入れる・背景を透明にできる
フォロー通知・登録通知を映す	・チャンネルをフォローされたことが瞬時にわかる・アニメーションさせたり通知音も出せる
デジタル時計を映す	・リアルタイム感が出る・タイムコード代わりに使える
Discordアイコンを映す	・Discordで会話するときに・ピョコピョコできる

VTuberのような配信画面というのは、一部ブラウザーソースを使って実現しています。

ブラウザーソースの使い方

「ブラウザ」を追加する

さっそくブラウザーソースを使ってみましょう。まずは「ブラウザ」を追加します。

OBSの「ソース」にある「+」をクリックする。
「ブラウザ」をクリックする。
「新規作成」が選ばれていることを確認する。
適当な名前をつける（例 : 「アラート」）。
「OK」をクリックする。

すると、設定画面が開きました。

多くの場合、この「URL」の部分に「http://」で始まる文字列をコピー＆ペーストします。

URL自体は、各Webサービスから発行されているものを使います。いまは気にする必要はありません。

もし「URL」という表示がない場合は、「ローカルファイル」のチェックを外してください。

「幅」「高さ」で調整

設定画面で重要な項目は、「URL」以外だと「幅」と「高さ」です。

これも現時点ではまだ気にする必要はありませんが、Webページを表示する領域を設定できます。

たとえば、コメント欄を映したときにコメントが横に長すぎたり、逆に短すぎる場合、「幅」を調整しましょう。

▲「幅」が200の場合（左画像）と、400の場合（右画像）の比較。見え方が大きく異なります。

「OBSで音声を制御する」はOFFのままで

「OBSで音声を制御する」は、最初の慣れないうちはOFFにしておきます。

ここをONにして「OK」をクリックすると、自分にはブラウザーソースの音が聞こえません。

YouTubeの動画の音 → 聞こえない
アラートの音 → 聞こえない

自分でも音を聞きたいなら、別途設定を変更する必要があります（後述）。

ただ、ONにするメリットのひとつとして、「音声ミキサー」に「ブラウザ」が表示され、OBSで音量調節しやすくなる点があります。

いったんOFFのままにしておいてください。混乱せずにすみます。

実践的な活用方法

ここまでは抽象的な話が続きました。

いよいよ実践でブラウザーソースを活用してみましょう。

コメント欄

視聴者のコメントを画面に映す方法は、多岐にわたります。

そのなかで、筆者がおすすめするのは「わんコメ」というコメントビューアーを使うやり方です。

わんコメを推す理由を挙げるとキリがありません。

簡単に使える
カスタマイズも簡単
さまざまな配信サイトに対応
配信サイトの仕様が変わってもアップデートで即対応

わんコメは多機能なアプリなので、いろいろな目的で使えます（例 : コメント読み上げ）。入れておいて損はないでしょう。

わんコメでコメントを映す方法については、下記ページをご覧ください。すぐできます。

フォロー通知、チャンネル登録通知

配信中にアラートを出す方法についてです。

Twitch配信 : フォロー通知
YouTube配信 : チャンネル登録通知

たとえば、ふだん視聴者として配信を見ているときに、画像がアニメーションして効果音が鳴るのを見かけたことはないでしょうか。あれができます。

Twitchの場合は、サイト側の機能としてアラートが用意されています。Twitchで発行されるURLをブラウザーソースにコピー＆ペーストします。

YouTubeの場合は、「Streamlabs」などのWebサービスを使いましょう。これも同サービスでURLが発行されます。

デジタル時計

デジタル時計を表示する方法も複数あります。

たとえば、ネットで配布されている素材をダウンロードして使うやり方があります。

BOOTHにアクセスする。
「無料ダウンロード」をクリックしてZIPファイルをダウンロードする。
ダウロードしたZIPファイルを解凍する。
OBSで「ブラウザ」を追加し、「ローカルファイル」にチェックを入れる。
「参照」から「clock01.html」などを選択する（どれでも）。
「OK」をクリックする。

▲今回は、ダウンロードしたHTMLファイルを使います。そのため、「ローカルファイル」にチェックを入れました。

Discordアイコン

配信中にDiscordで会話する場合、視聴者からするとだれが話しているのかわからないことがあるかもしれません。

このようなときは、Discordのアイコンをピョコピョコさせたり、光らせたりすると効果的です。

やり方ですが、「Discord StreamKit Overlay」などのWebサービスを使います。

URLが掲載されているので、これをブラウザーソースにコピー＆ペーストしてください。

こんなときは

映らない、真っ黒

ブラウザーソースで画面が映らない場合、そのまま少し待ってみてください。いきなりパッと表示されるとは限りません。

筆者も経験したことがありますが、しばらく放置していたらいつのまにか画面が映っていたということが何回かありました。

それでも変化がない場合、手っ取り早いのはOBSの設定を変更することです。

「設定」→「詳細設定」の順にクリックする。
「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外す。
「OK」をクリックする。
OBSを再起動する。

ただし、この設定だとPCの動作が重くなることがあるかもしれません。PCのGPUというパーツを使わなくなるからです。

ブラウザーソースが映らない場合の詳しい対処法については、下記ブログを参照してください。

参考すたいるのOBS情報メモブログ（外部リンク）

音が聞こえない、出ない

自分に音が聞こえない場合、「OBSで音声を制御する」をONにしている可能性があります。

ここをOFFにして「OK」をクリックしましょう。

もしどうしてもOFFにしたくない場合は、OBSのモニタリング機能を使います。

「音声ミキサー」の歯車アイコンをクリックする。
「ブラウザ」の「音声モニタリング」で「モニターと出力」を選択する。
または、「モニターのみ (出力はミュート)」を選択する。

上記設定にすれば、ブラウザーソースの音は少なくとも「自分には」聞こえるようになります。

「モニターと出力」と「モニターのみ (出力はミュート)」のどちらを選ぶべきかは、目的・環境によって異なります。

	どのようなケースで選ぶとよいか
モニターと出力	・「デスクトップ音声」を使っていないとき（ミュート、無効）・「デスクトップ音声」と「モニタリングデバイス」が異なる設定のとき・OBSのバージョンが32.0以降のとき
モニターのみ (出力はミュート)	・「デスクトップ音声」を使っているとき・「デスクトップ音声」と「モニタリングデバイス」が同一設定のとき

「デスクトップ音声」の設定 : 「設定」→「音声」
「モニタリングデバイス」の設定 : 同上（下のほう）

問題が解決しない場合は、下記ページをご覧ください。