OBSで配信画面にコメントを表示する方法【2026年版】YouTubeのチャット欄を画面に重ねる手順

配信中のコメントを、配信画面にも出したい。視聴者のコメントが画面に流れると、にぎやかに見えます。OBSでコメントを表示する方法は、チャット欄のURLを手に入れて、OBSの「ブラウザ」ソースに貼ることです。この記事では、押すボタンと入れる項目つきで説明します。

🔀 コメントを表示する方法は2つ：視聴者にも見せる／自分だけが見る

この記事は、OBS Studio 32.0.4（2026年10月14日に確認）の日本語の画面をもとにしています。新しい版では表示が変わっている場合があります。まず、2つの置き方の違いを整理します。

OBS公式ナレッジベースに、ドックの内容が配信に映らないと明記した文はありません。OBS 32.0.4 の動きから確かめた範囲では、ドックは操作画面のパネルで、シーンに置くソースとは別の仕組みです。また、公式ナレッジベース「How do I add my chat to my stream?」には、OBS自身にはチャットを配信画面に出す機能は直接なく、外部のアラート提供サービスが作るチャット表示（オーバーレイ）を、ブラウザソースで埋め込む形になる、とあります。このページはYouTubeのチャット欄をポップアウトして貼る方法には触れていません。この記事では、同じブラウザソースに、ポップアウトしたYouTubeのチャット欄のURLを入れる方法で説明します。

🔗 チャット欄のURLを手に入れる

YouTubeヘルプに手順の説明はありませんが、2026年10月14日に実際の画面で確かめました。配信中の動画の視聴ページを、ログインしていない状態で開いて見ています。

• YouTubeで、配信中の動画の視聴ページを開く
• チャット欄の上の見出し（「トップチャット」と表示）の右にある「︙」のボタンを押す。ボタンの名前は「その他のオプション」
• 出てきたメニューから「チャットをポップアウト」を選ぶ（同じメニューには「参加者」の項目もあります）
• ポップアウトで開く先のURLには、is_popout=1 が入っています。開いたウィンドウのURLをコピーする。形は https://www.youtube.com/live_chat?is_popout=1&v=（動画のID） です

⚠️ この手順は、視聴ページで確かめたものです。配信者用のライブ管理画面（YouTube Studio）のチャット欄のメニューは確かめていません。URLには動画ごとのIDが入っています。公式ヘルプ「ライブ配信またはプレミア公開中にチャットを使用する」の「チャットを埋め込む」には、動画のIDを使ってチャットのURLを作る説明があります。ただし、これは自分のサイトに埋め込む用のURLで、OBSのブラウザソースに貼る手順ではありません。配信の枠が変わったら、URLを確かめてください。

➕ コメントを表示する方法：「ブラウザ」ソースを足して位置を決める

OBSの画面で、「ブラウザ」ソースを足します。OBS公式ナレッジベースの手順にそっています。

• 「シーン」ドックで、コメントを重ねたいシーンをクリックして選ぶ
• 「ソース」ドックの「＋」を押し、「ブラウザ」を選ぶ（「ソース」ドックを右クリックして足してもよい）。「ソースを作成/選択」の画面が出たら、名前（例：コメント）を入れて「OK」を押す。新しいブラウザソースのプロパティの画面が開く
• 「URL」欄に、コピーしたURLを貼り付ける。最初に入っている https://obsproject.com/browser-source は上書きする
• 「幅」「高さ」を決める。初期値は800と600で、入れられる数字は1〜8192
• 「カスタム CSS」は、最初は初期値のままにする（次の見出し）
• 「OK」を押して保存する。新しいソースがシーンに入る

これらの初期値は、公式ナレッジベース「Browser Source」の表と同じです。「URL」と「FPS」は、日本語の画面でも英語のまま表示されます。

位置と大きさは、プレビューに出たチャットを動かして決めます。使えるキーを、公式ナレッジベース「Sources Guide」の表から書きます。

🪟 背景が透けるしくみ：既定のカスタム CSS

「カスタム CSS」の欄には、最初から次の文が入っています。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

公式ナレッジベース「Browser Source」の説明では、初期状態でページの背景を透明にし、余白をなくし、ページが表示領域より大きい時のスクロールバーを隠します。見た目は、この欄で変えられます。YouTubeのチャット欄向けの書き方の例は、公式にないので、この記事では扱いません。OBSのリリースノート（31.0.0）には、YouTubeのチャットなど一部のサイトで、ブラウザソースのカスタム CSS が効かなくなる不具合を直した、という記録があります。

🖥️ 自分だけが見る「カスタムブラウザドック」の作り方

配信画面ではなく、自分の確認用にコメントを見たい時の手順です。

• OBSのメニューバーで「ドック」→「カスタムブラウザドック」を選ぶ。「カスタムブラウザドック」という題の画面が開く
• 表の空の行に、「ドック名」（好きな名前）と「URL」（ポップアウトのチャットのURL）を入れる。OBS 32.0.4 の動きから確かめた範囲では、どちらかが空だと行は追加されない
• 「適用」または「閉じる」を押す。ドックが開く
• ドックを閉じてしまったら、メニューバーの「ドック」から開く。OBSには「もう一度表示したい場合は、メニューバーのドックメニューを使用してください」という意味のメッセージが出る

OBSにYouTubeアカウントを連携している場合は、専用の「チャット」ドックの仕組みもあります（OBS 31.0以降）。OBS 32.0.4 の動きから確かめた範囲では、このドックのURLは、配信を作成または選択する時に、OBSが自動で設定します。連携の入口には、日本語の画面で「アカウント接続 (推奨)」「アカウントを切断」があり、配信の設定画面には「配信を作成」「配信を選択」のボタンがあります。OBS 31.0.0 のリリースノートには、以前のYouTubeチャットのドックを削除したという記録があります。この見出しの手順の「カスタムブラウザドック」は、自分で作るドックです。

❓ よくある質問

Q. 配信の枠ごとに、URLを入れ直す必要がありますか？

A入れ直しが必要と明記した公式の文は、見つかっていません。URLに動画ごとのIDが入っているので、配信の枠が変わったら、URLを確かめてください。

Q. 文字の大きさや色は変えられますか？

A「カスタム CSS」の欄で、見た目を変えられます。YouTubeのチャット欄向けの具体例は公式にないので、この記事では書き方を扱いません。

Q. コメントを拾えない、返せない時は？

A表示ではなく、コメントを読む側の困りごとなら、VTuberの配信でコメントを拾えない・返せない時の対処を読んでください。

📋 まとめ

• 視聴者にも見せるなら「ブラウザ」ソース、自分だけが見るなら「カスタムブラウザドック」。2つは別のもの
• URLは、視聴ページのチャット欄の「その他のオプション」→「チャットをポップアウト」で開いたウィンドウからコピーする
• 「ブラウザ」ソースの「URL」欄に貼る。「幅」「高さ」の初期値は800と600
• カスタム CSS の既定は、背景を透明にする内容。見た目はこの欄で変えられる
• 配信の枠が変わったら、URLを確かめる

次に読む記事

配信画面の作り方はVTuber配信画面の作り方、OBSとVTube Studioの設定はOBS×VTube Studio設定完全ガイド、開始前の画面はVTuber待機画面の作り方もあわせてご覧ください。