OBSに視聴者コメント を表示させる方法｜YouTube/Twichの配信でコメント欄を画面に表示
OBS Studioを用いた配信で、コメント欄を画面に表示させる方法を解説します。
コメントを画面に表示するなら、CastCraftのような外部ツールの利用がおすすめです。
ブラウザソースでコメントを直接表示させる方法も併せて解説するので、任意の方法を選びましょう。
本記事を読めば、YouTubeとTwitchのどちらでもコメントを表示させる方法がわかるので、ぜひ参考にしてください。
目次
Table of Contents
OBS Studioにコメントを表示する方法【5種類を比較】
OBSに配信コメントを表示する方法は、大きく5種類あります。
ツールの使いやすさやデザインの自由度、対応プラットフォームはそれぞれ異なるため、自分の配信スタイルに合った方法を選びましょう。
5種類の方法を比較すると、次のような形になります。
| 方法 | 難易度 | デザイン自由度 | 対応プラットフォーム |
|---|---|---|---|
| CastCraft チャットボックス＋OBS | 簡単 | 高 | YouTube・Twitchほか複数 |
| YouTubeポップアウト＋ブラウザソース | 簡単 | 中（CSS拡張可） | YouTube |
| CastCraft Screen | 普通 | 高 | YouTube・Twitchほか複数 |
| ウィンドウキャプチャ | 簡単 | 低 | YouTubeなど |
| Streamlabs / XSplit 等 | 普通 | 中〜高 | YouTube・Twitchほか複数 |
配信初心者の方には、手順が少なくデザイン自由度も高いCastCraftが最もおすすめです。
【最もおすすめ】CastCraftを使ってOBSにコメント表示
まずは最も手軽でカスタマイズ性も高い、CastCraft使った方法を解説します。
YouTubeとTwitchをはじめ複数のプラットフォームに対応しており、初心者から上級者まで幅広く活用可能です。
インストールからOBSへの表示設定までの手順は、次のとおりです。
- CastCraftのインストール
- LiveDashboard下部で「チャットボックス」を配信に表示
- デザインを選択
- チャットボックスを作成
- URLをコピー
- OBSにブラウザソースを追加
- コピーしたURLを貼り付け
- チャット欄の位置を調整
- CastCraftを配信に接続
それぞれの手順を順番に確認し、コメントを表示させてみましょう。
0.CastCraftのインストール
まずはCastCraftをインストールしましょう。下記のリンクからアプリケーションをダウンロードしてください。
ダウンロードが完了したらインストールし、CastCraftを起動しましょう。
起動したら、配信するYouTubeまたはTwitchのアカウントでログインを済ませてください。
1.LiveDashboard下部で「チャットボックス」を配信に表示
LiveDashboard下部にある「チャットボックス」の欄で 「配信に表示する」ボタンを押します。
ボタンを押すとデザインの選択画面が表示されるので、任意のものを選びましょう。
2.デザインを選択
表示するチャットボックスの基礎デザインを選びます。
デザインは、選ぶだけでなくカスタマイズも可能です。ペンマークをクリックすればエディターが表示されるので、任意のデザインに編集しましょう。
文字サイズや色、出現アニメーションなどを選択できます。
3.チャットボックスを作成
「チャットボックスを作成」ボタンを押します。
作成されたチャットボックスは、左側のメニューにある「オーバーレイ」からいつでも編集、設定可能です。
4.URLをコピー
生成されたチャットボックスのURLをコピーします。
生成されたチャットボックスのURLは、第三者に共有しないよう注意してください。
直接的な被害は少ないものの、悪用されると自分の配信のコメントが知らない誰かの配信で表示されかねません。
5.OBSにブラウザソースを追加
OBSで 「ソース」→「+」→「ブラウザ」 を選びます。
ブラウザソースを追加すると名前を決めるウィンドウが表示されるので、「コメント欄」や「チャットボックス」のようなわかりやすい名前を付けておきましょう。
6.コピーしたURLを貼り付け
OBSの「ブラウザ」ソース設定画面で、先ほどコピーしたURLを貼り付けます。
幅と高さを調整し、「OK」ボタンを押します。
推奨サイズ：幅480〜640px / 高さ1080px
設定幅は配信画面のレイアウトに合わせて設定しましょう。見やすさとメインコンテンツの邪魔にならないちょうどいいサイズを設定してください。
7.チャット欄の位置を調整
OBSのプレビュー画面で、チャット欄の表示位置を自由に調整します。
コメントは縦に流れていくので、右端か左端のどちらかがおすすめです。
8.CastCraftを配信に接続
OBSやYouTube/Twitch管理画面から配信を開始した後、LiveDashboardの「配信に接続」ボタンを押すとコメントの取得を開始します。
配信する前にテスト配信をおこない、問題なく表示されるか確認してみてください。パソコンで見ると適切な文字サイズがわかりにくいので、スマホで視聴して問題ないかどうかを確認しましょう。
9.デザインをカスタマイズ（任意）
より自分好みにデザインを変更したい場合は、CastCraftのチャットボックス作成画面で鉛筆アイコン（編集ボタン）をクリックします。
フォント、色、アニメーションを編集後、「保存する」ボタンを押すと変更が反映されます。
テンプレートではなく、オリジナルデザインにこだわりたい方におすすめです。
YouTubeのコメントをOBSで表示する方法
YouTubeの配信コメントをOBSに表示するには、上記のCastCraftを使ったやり方以外にも、 チャット欄をポップアウトしてブラウザソースとして読み込む方法がございます。
チャット欄をポップアウトしてブラウザソースで表示する
YouTubeのチャット欄をポップアウトして、OBS Studioのブラウザソースで表示する方法は、次のとおりです。
- YouTubeの配信ページでコメント欄を開く
- 三点メニューをクリックして「チャットをポップアウト」をクリック
- 表示されたポップアウト画面のURLをコピー
- OBSの「ブラウザ」ソースにURLを貼り付け
- 幅・高さを調整して「OK」を押す
ただし、この方法では配信のたびに新しいURLを貼り直す必要がある点に注意してください。
URLを固定して運用したい場合は、冒頭で解説したCastCraftチャットボックスの利用がおすすめです。
メンバー限定配信のコメントをOBSで表示する
メンバー限定配信のコメントを取得するには、前章のCastCraftを使ったコメント表示方法において、配信に接続する際にLiveDashboard右下のメニューボタンを押し、「非公開またはメンバー限定配信に接続」というメニューをクリックすると取得・コメント表示が可能です。
TwitchのコメントをOBSで表示する方法
TwitchのチャットをOBSに表示するには、CastCraftを使う方法とブラウザソースを直接設定する方法の2種類があります。
それぞれの手順を解説するので、参考にしてください。
CastCraftでTwitchのコメントを表示する
CastCraftはTwitchに対応しており、YouTubeと同じ手順でコメントをOBSに表示できます。
- CastCraftのインストール
- LiveDashboard下部で「チャットボックス」を配信に表示
- デザインを選択
- チャットボックスを作成
- URLをコピー
- OBSにブラウザソースを追加
- コピーしたURLを貼り付け
- チャット欄の位置を調整
- CastCraftを配信に接続
CastCraftへのログインをTwitchでおこない、配信開始後に「配信に接続」ボタンをクリックすれば、コメントを取得できます。
下記の記事でもTwitchとCastCraftとの連携方法を解説しているので、併せて読んでみてください。
ブラウザソースで直接Twitchチャットを表示する
TwitchのチャットURLを直接OBSのブラウザソースに設定する際は、「https://www.twitch.tv/popout/チャンネル名/chat?popout=」の 「チャンネル名」 部分を自分のチャンネル名に書き換えて、OBSのブラウザソースに貼り付けます。
ツールのインストール不要で表示できますが、デザインの変更にはカスタムCSSの知識が必要です。
YouTubeのときと同じく、チャットをそのまま表示するのみの簡単な方法なので、パソコンの知識がない方や初めてのコメント表示に活用してみてください。
Twitchコメントを透過表示させる
OBSのブラウザソース設定でカスタムCSSを使うと、Twitchチャットの背景を透過できます。
しかし、CSSの編集はある程度の知識が必要になるので、外部ツールを活用しましょう。
さまざまなツールがあるものの、Chat v2.0 Style Generator 日本語版がおすすめです。
コメントの設定欄にある「背景色」のスライダーを左にいっぱいまでスライドすれば、透明で表示できます。
設定したら、サイトの一番下にあるCSSを丸ごとコピーして、OBSのブラウザソースのCSSに全部上書きして貼り付けてください。
コメントに反応する画面演出と一緒にOBSにコメント表示
CastCraft Screenを使えば、コメント欄だけでなく、視聴者のコメントに反応する様々な演出をOBSに表示できます。
- CastCraft Screenを起動
CastCraftを開き、Screenタブを選択しましょう。初めて利用する場合はインストールが必要です。
- チャットボックスを作成
クラフトモードを選び、「ウィジェット設定」→「+」→「チャットボックス」を追加し、位置やデザインを調整。
プレビューにはデモメッセージを流せます。
- OBSで表示
「映像キャプチャデバイス」を追加し、デバイスに「CastCraftScreen」を選択。
- Live Dashboardで配信接続
コメント取得を有効にすると表示されます。
コメント欄だけでなく、視聴者と双方向な画面遊びを取り入れたい方はCastCraft Screenを検討しましょう。
（非推奨）ウィンドウキャプチャによる表示
YouTubeの配信管理画面を開き、OBSの「ウィンドウキャプチャ」でコメント欄を切り抜く方法です。
トリミングにはAltキー+ドラッグを使用します。
ただし、背景透過や細かいデザイン変更はできません。
OBSを使わないコメント表示方法
- Streamlabs Desktop：OBSと同様の手順でコメント表示可能。有料会員ならオーバーレイDL可。
- Xsplit：有料機能あり。OBSと同様の操作感です。
- Twitch Studio：Twitch配信に特化。少ない手順でコメント表示やレイアウト設定が可能でしたが、2024年5月30日をもってサポートが終了しています。
OBSのコメント欄をおしゃれ・かわいくカスタマイズする方法
OBSのコメント欄は、テンプレートやカスタムCSSを活用すると、配信のデザインに合わせた見た目に変更できます。
ここで解説するカスタマイズする方法は、次のとおりです。
- テンプレートでデザインを変更する【CastCraft】
- カスタムCSSで細かくデザインを調整する
CastCraftなら、豊富なテンプレートからデザインを自分好みに直感操作で変えられます。
CSSに慣れるまでは、CastCraftでの利用がおすすめです。
テンプレートでデザインを変更する【CastCraft】
CastCraftには、次のような公式テンプレートが用意されています。配信のテイストに合わせて選ぶことで、手軽にコメント欄の見た目を整えられます。
Basic - Light： シンプルな一行表示
Box- Transparent Dark： ボックス内に表示
Block - Red： ブロック調
Retro - Blue： レトロゲーム風
Sweet - Pink： 柔らかい雰囲気
Speech-Balloon - Cake： 吹き出し調のコメント
テンプレートをベースに、色やフォント、出現アニメーションをカスタマイズできます。デザイン一覧から好みのテンプレートを選んで、コメント欄のビジュアルを整えてみましょう。
カスタムCSSで細かくデザインを調整する
CastCraftのテンプレートだけでなく、カスタムCSSを使うとさらに細かいデザイン変更が可能です。 Chat v2.0 Style Generator 日本語版を使えば、CSSの知識がなくても背景透過やフォント変更のコードを自動生成できます。
生成されたCSSコードをコピーし、OBSのブラウザソース設定画面にある「カスタムCSS」欄に貼り付けることで反映可能です。カスタムCSSのより詳しい使い方は、下記の記事を参照してください。
OBSにコメントが表示されないときの対処法
OBSへのコメント表示がうまくいかない場合、原因はプラットフォームや設定により異なるので、該当する原因から探りましょう。
多くのケースは「OBSブラウザソースのキャッシュ更新」で解決します。
OBSの「ブラウザ」ソースの最下部の「現在のページのキャッシュを更新」をクリックしてください。
そのほかの対処法には、下記のようなものがございます。
| チェック項目 | 対処法 |
|---|---|
| ハードウェアアクセラレーション無効化 | OBS設定→詳細設定→チェックを外してOBS再起動 |
| ブラウザソースの削除・再作成 | 一度削除して新規作成するのが最も確実な方法 |
自分に合ったOBSへのコメント表示方法を見つけよう
OBSにコメントを表示する方法は、ツールの選択からデザイン・トラブル対応まで、選択肢が多岐にわたります。
迷ったときは「CastCraftチャットボックス+OBS」がおすすめの方法です。手順が少なく、YouTube・Twitchどちらにも対応しており、デザイン変更も後から自由におこなえます。
まずは1つの方法を試して配信に慣れてから、演出や細かいカスタマイズに挑戦するのが、着実に配信クオリティを高める近道です。
さまざまなコメントの表示方法を試し、自分やチャンネルの方針に合うコメント欄を見つけてみてください。
OBSコメント表示のよくある質問
OBSでコメントを表示するにはどうすればいいですか？
CastCraftで作成したチャットボックスのURLを、OBSのブラウザソースに貼り付けます。
YouTubeやTwitchのコメントも表示できますか？
はい。対応する配信プラットフォームのコメントをOBS上に表示できます。
チャットボックスのURLは共有しても大丈夫ですか？
いいえ。第三者に共有すると、自分のコメント表示が別の配信で使われる可能性があります。
コメント表示のデザインは変更できますか？
はい。CastCraftでデザインや表示設定を変更できます。
OBSでコメントが表示されないときは何を確認すればいいですか？
URL設定、チャットボックス作成状況、OBS上の表示位置とサイズを確認してください。
OBSでのコメント表示におすすめのCastCraft
OBSでYouTubeやTwitchなどの配信コメント表示を行う際のツールとして、CastCraftをおすすめします。
CastCraftを使えば、配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 配信コメントをニコニコ風にOBS画面に横流しできる
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- 設定した画像やGIFで自由に画面演出が作れる
いつでも投げ銭（収益化）機能
- 配信者に9割還元できる
- 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで260万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。