OBSでコメントを画面に表示する方法｜歌枠で読みやすい置き方

歌枠をしていると、「コメントを画面に出したい」と思う場面が出てきます。リスナーさん同士がやり取りを見られるようになり、アーカイブで見返したときにも、その場の雰囲気が伝わりやすくなるからです。

OBSでコメントを画面に出す方法はいくつかありますが、基本の考え方は共通で、コメント欄だけを表示するページを「ブラウザ」ソースで読み込むというものです。この記事では、YouTubeのライブ配信を例に、取り込みの手順、スマホで見ても読める置き方、表示されないときの確認順、荒れたときにすぐ消せるようにしておく準備をまとめます。コメントへの返し方や、YouTube側のコメント設定は別の記事で扱っているので、ここでは「画面にどう出すか」に絞ります。

OBSの項目名は、OBS公式ナレッジベースと、OBS Studioの公式の日本語翻訳ファイル(2026年10月時点)で確認した表記です。

コメント表示までの作業を一覧で

やること	使う機能	ポイント
コメント欄だけのページを用意する	YouTubeのチャットを別ウィンドウで開いたときのURL	配信枠ごとにURLを確かめる
OBSに取り込む	「ブラウザ」ソース	URLを貼り、幅と高さを決める
読みやすく置く	位置・大きさ・表示範囲	スマホで見て読めるかを確かめる
表示されないときに直す	URL・チャットの設定・キャッシュの更新	上から順に確認する
すぐ消せるようにする	目のアイコン・ホットキー	本番前にキーを割り当てておく

まずはブラウザソースを1つ追加し、画面の端に小さく置くところから始めましょう。見た目の作り込みは、配信に慣れてからで十分です。

仕組み:チャット欄だけのページをOBSで読み込む

OBSの「ブラウザ」ソースは、Webページを配信画面の一部として表示する機能です。ここに「コメント欄だけが表示されるページ」のURLを入れると、コメントが流れる様子がそのまま配信画面に映ります。

YouTubeの場合

YouTubeでは、パソコンで配信の視聴ページを開くと、チャット欄のメニューから、チャットだけを別ウィンドウで開けます(一般に「ポップアウト」と呼ばれます)。その別ウィンドウのURLを、OBSのブラウザソースに貼り付けて使います。メニューの名前や位置は変わることがあり、YouTubeヘルプではこの手順の解説を確認できなかったため(2026年10月時点)、実際の画面で確かめてください。

このURLには配信枠ごとの動画のIDが含まれるため、枠を立てるたびにURLを取り直すのが基本です。前回のURLのままだと、前の配信のチャットが表示されたり、何も出なかったりします。

また、YouTubeのチャットには2つの表示があります。YouTubeヘルプによると、「トップチャット」はスパムなどの可能性があるメッセージを除いて読みやすくした表示で、「チャット」(すべてのチャット)は絞り込みをせずに、すべてのメッセージを表示します。画面に出す側をどちらにするかで、映るコメントが変わることを覚えておきましょう。

ほかのサービスや外部ツールの場合

ツイキャスなど、ほかの配信サービスにも、コメントを配信画面に表示するための仕組みが用意されている場合があります。手順や設定の名前はサービスごとに違うため、各サービスの公式ヘルプを確認してください。複数のサービスのコメントをまとめて表示できる外部ツールもありますが、使う場合はそれぞれの配布元の説明と利用規約に沿って設定します。

ブラウザソースで取り込む手順

コメントを出したいシーン(「歌」など)を選ぶ
「ソース」欄の「+」を押し、「ブラウザ」を選ぶ
名前を「コメント」などにして作成する
プロパティの「URL」欄に、チャットだけのページのURLを貼り付ける
「幅」と「高さ」を決めて「OK」を押す
プレビュー上でドラッグして、置きたい場所と大きさに調整する

プレビューで位置を決めるときは、Altキーを押しながら枠の端をドラッグすると、表示する範囲を切り抜けます(公式ナレッジベースより)。チャットのページの上部や入力欄など、配信に映さなくてよい部分を隠すのに使えます。

覚えておきたい設定項目

項目	内容(公式ナレッジベースより)	歌枠での使い方
幅・高さ	ページを表示する領域の大きさ。初期値は800と600	小さすぎると新しいコメントが切れることがある
カスタム CSS	ページに見た目の指定を加える。初期状態で背景の透明化、余白の削除、スクロールバーの非表示が入っている	最初は初期値のままでよい
表示されていないときにソースをシャットダウンする	目のアイコンで隠したときや、そのシーンが表示されていないときにページを閉じる	オンだと再表示のたびに読み込み直しになる
シーンがアクティブになったときにブラウザの表示を更新する	そのシーンに切り替えるたびにページを読み込み直す	表示が止まりがちなときに試す
現在のページのキャッシュを更新	押すとすぐにページを読み込み直すボタン	表示がおかしいときの最初の一手

カスタム CSSを書き換えると、文字の色や背景などを細かく変えられます。ただ、読み込むページの作りが変わると指定が効かなくなることもあるため、最初は位置と大きさで読みやすさを整えるのがおすすめです。

読みやすい置き方:スマホで見る人を前提にする

歌枠のリスナーさんには、スマホで聞いている方も多くいます。パソコンのプレビューではちょうどよく見えても、スマホでは文字が小さすぎて読めないことがよくあります。

位置は「重ならない場所」に

立ち絵や顔、曲名テロップと重ならない、画面の左右どちらかの端に置く
画面の下端ぎりぎりは、視聴する側のプレーヤーの表示と重なりやすいので少し内側に寄せる
待機画面や休憩画面には出さず、本編のシーンだけに置くと画面がすっきりする

曲名テロップを出す場合は、コメントと上下で場所を分けておくと、どちらも読みやすくなります。テロップの出し方はOBSで曲名テロップを出す方法で解説しています。

文字の大きさは「表示する範囲を狭めて拡大」で調整する

ブラウザソースの文字を大きくしたいときは、「幅」を小さめにしてページの表示範囲を狭め、プレビュー上でソースを拡大する方法があります。表示される行数は減りますが、1行あたりの文字は大きくなります。歌枠では、歌っている間にコメントを読み続けることは少ないので、数行が読めれば十分という考え方でかまいません。

スマホで実際に見て確かめる

置き方を決めたら、限定公開のテスト配信をして、自分のスマホで配信を開いてみましょう。コメントを何件か書き込んでみて、文字が読めるか、新しいコメントが切れずに表示されるかを確認します。ここで読めなければ、もう少し大きくするか、表示する範囲を狭めます。

自分が読むためだけなら、画面に出さない選択肢も

「自分がコメントを見やすくしたい」だけが目的なら、配信画面に出す必要はありません。OBSのメニューの「ドック」にある「カスタムブラウザドック」に同じURLを登録すると、OBSの画面の中でコメントを読めます。画面に出すかどうかは、リスナーさんに見せたいかどうかで決めましょう。

表示されないときの確認順

コメントが映らないときは、次の順番で確認すると原因を見つけやすくなります。

チャットが使える状態か:YouTubeヘルプによると、チャットは子ども向けに設定されていない限り、初期状態で有効です。配信の設定で子ども向けにしていないか、チャットを無効にしていないかを確認します
URLが今回の配信のものか:前回のURLを使い回していないかを見ます。配信枠を立て直した場合も取り直します
ソースが隠れていないか:目のアイコンがオフになっていないか、上にある別のソースに隠れていないかを見ます。ソース欄では上にあるものほど手前に表示されます(公式ナレッジベースより)
幅・高さが小さすぎないか:表示領域が狭いと、新しいコメントが表示範囲の外にはみ出すことがあります。高さを大きくするか、切り抜きを見直します
読み込み直す:プロパティの「現在のページのキャッシュを更新」を押します。それでも直らなければ、ソースを作り直します

表示されないまま本番を迎えないように、配信開始直後の待機画面の間に、コメントが映るかを確認する習慣を付けておくと安心です。待機画面の作り方は歌枠の待機画面の作り方をご覧ください。