この記事ではYouTubeやTwitchで配信をしている方へ向け、OBSにライブ配信のコメントを表示する方法を解説します。コメントを配信画面に表示する基本知識から、かっこいい・かわいいデザインに変更する方法、うまく表示できないときの問題解決方法までまとめた丁寧な内容です。
【基本】OBSにコメントを表示する方法
いろいろな配信を見ていると、上の画像のように配信画面上にコメント欄を表示していることがあります。
ここからは、配信者さんがどうやってコメントを表示しているのか、ノウハウやツールをざっくりまとめます。方法はいくつかありますが、ここで紹介するのは3つです。
それぞれの特徴を解説するので、あなたに合った方法を選んでみてください。
【方法1】ブラウザソースにコメント欄を直接追加する
まずはスタンダードな方法です。多くの配信者さんがこのやり方をとっているかと思います。
YouTube・Twitchに限らず、ライブ配信のチャットは「ポップアウト」できるようになっています。
ポップアウトするとコメント欄のURLを取得できるようになるので、こちらをOBSのブラウザソースに追加します。
ブラウザソースにはコメントのURLを入力するだけでなく、カスタムCSSの機能を活用することでデザインを上書きすることもできます。
この方法で使えるデザイン（カスタムCSSのコード）を配布しているクリエイターさんも多く、自分のイメージカラーやオーバーレイにあったものが見つかりやすい特徴があります。もちろん無料配布も豊富です。
配信サイト別の詳しい設定方法や、おすすめのデザインはこの記事でまとめるので各項目をご覧ください！
【方法2】Streamlabsを使う
海外製のコメントビューアとして人気なのが『Streamlabs』です。
OBSのような配信機能やオーバレイ作成といった、配信に便利な機能を豊富にそろえたサービスで、とくに人気なのが下記の機能です。
- フォローや投げ銭通知を配信画面に出す「アラート機能」
- コメントを魅力的なデザインで表示する「チャットウィジェット」
日本だとTwitchで配信活動をしている人がよく使っている印象です。
デフォルトで用意されているデザインテンプレートがシンプルで使いやすく、独自のデザインにカスタマイズもできますがデフォルトのままで使っている方が多い気がします。
カスタム用のデザインを販売しているのが、海外クリエイター中心で購入しづらいのも理由の一つかもしれません。
余談ですが、似たサービスにStreamElementsというのもあり、そちらも人気です。
【方法3】わんコメを使う
『わんコメ』は日本の開発者が作ったコメントビューアです。
コメントのデザインや演出の設定、音声読み上げ、特定のコメントをしたユーザを抽出（参加型向きの機能）などコメントを活用した機能が充実しているサービスです。
デザインをカスタマイズできるテンプレートも用意されています。
YouTubeで活動しているVTuberさんがよく使っている印象です。
どの方法がおすすめなの？
ここまで3つの方法を紹介しましたが、どれを使うべきか決める軸をまとめます。
- どんな機能を使いたいか
- 好きなデザインはあるか
どんな機能を使いたいか
ただコメントを表示するだけでよいなら【方法1】ブラウザソースにコメント欄を直接追加する がおすすめです。設定がシンプルですし、会員登録やサービスページにわざわざアクセスする手間もありません。
一方でフォローやサブスクのアラートを設定する・コメントを参加型に活用する・特別な演出をつけたいなど、コメントビューアでしかできない凝った設定をしたい方は、Streamlabsやわんコメを検討してもよいかと思います。
好きなデザインはあるか
好みのコメントデザインがあるかによって決めるのも重要です。
色を変えたり吹き出し風にしたりと、デザインを変更するにはカスタムCSSを活用します。
ただし、各方法ごとに使えるCSSは別のものです。
「ブラウザソース用」のCSSは「わんコメ」では使えないといった、それぞれ専用のものがあります。
デザインについては次の項目でまとめるので、ここでは各方法のデザインの特徴を紹介します。
- 【方法1】ブラウザソースにコメント欄を直接追加
- デザインが最も豊富
- 日本のクリエイターがたくさんいるので好みのデザインが見つかりやすいはず
- 無料素材の配布・有料素材がたくさんある
- 【方法2】Streamlabs
- 公式で用意されているデザインがシンプルで使いやすい
- 有料素材は海外クリエイターが多いため、デザインも海外向きが多い
- 海外サイトで素材は購入することになり、相場高め。
- 【方法3】わんコメ
- 公式で複数のデザインテンプレートが用意されている
- 無料素材・有料素材はあるが【方法1】よりは少ない（それでも数はある）
コメントをかっこいい/かわいいデザインにカスタマイズするには
いろんな配信を見てみるとコメント欄がかっこいいもの、かわいいもの、おしゃれなものとたくさんのデザインを見かけます。
あのデザインはどうやって設定しているのか仕組みを解説します。
なお、ここからは上記の項目で紹介した「ブラウザソースにコメント欄を直接追加する」方法をベースとなります。
そもそもどうやってデザインを変更するの？
コメント欄のデザインを変更するにはOBSのカスタムCSS機能を活用します。
CSSとは、Webサイト制作などに使われるコードのことです。
Webデザインを設定するのに利用されます。
OBSにおいては、このCSSをつかって既存のデザインを上書きすることで、魅力的なデザインに仕上げます。
既存のコメント欄に対して、配置やサイズ・色などを細かく設定するため、YouTube用・Twitch用など配信サイトごとにCSSは異なるので注意が必要です。
配布されているCSSを使うときは、自分の配信サイト用のものなのか必ずチェックしましょう。
コメントを吹き出し風にカスタムする
コメントのデザインを変更するにはCSSを記述する必要がありますが、いちから勉強するにはハードルが高いです。
なので、ここではCSSジェネレータとして、当サイトが運営している『はいしんツールキット』を紹介します。
定番の吹き出し風をはじめとしたデザインを、無料版・有料版でそろえています。
YouTube・Twitchの両対応。色やフォントなど好みのデザインにカスタマイズ可能です。
コピペするだけで使えるシンプルなツールなので、初心者の方へもおすすめです。
どんなデザインがあるかは下記の記事で紹介しています。
詳しい設定方法は、配信サイト別に後述します！
コメントデザインの探し方
『はいしんツールキット』のほかにもコメントデザインを配布・販売しているクリエイターはたくさんいます。
ここではデザインの探し方を紹介します。
Boothで検索する
有料素材を販売するとしたら、日本のクリエイターなら『Booth』を活用しています。
「コメントCSS」「youtube コメント カスタムCSS」などで検索するとたくさん出てくると思います。
ただし、検索で出てくるのは「ブラウザソースにコメント欄を直接追加する」方法で使う用のCSSが主です。
Etsyで検索する
海外クリエイターの素材を見つけるにはいくつかのサイトがありますが、『Etsy』が一番見つけやすいです。
海外では「Chat widget」と検索するとたくさん出てきます。
ただし、StreamlabsもしくはStreamElementsで使用するものがほとんどなので、注意が必要です。
CSSを購入・使用する際の注意点
CSSは既存のデザインを上書きするものです。なので、導入する方法ごとに使用できるコードは異なります。
- ブラウザソースに追加する方法
- YouTube用
- Twitch用
- Streamlabs
- StreamElements
- わんコメ
デザインが気に入って購入したとしても、対応していないCSSだと全くデザインが反映されません。
しっかり商品説明や導入手順を読み、自分の使う予定のツール用のものか確認しましょう。
配信サイト別設定ガイド
コメントを配信画面に表示するには、配信サイトごとに操作が異なります。
ここではYouTube・Twitchで手順をまとめます。
YouTubeで配信をしているなら
YouTubeは配信枠ごとにコメント欄のURLが異なります。
配信を始めたらコメント欄のURLを毎回コピーしてくる必要があるので、下記の記事を参考に操作手順を確認しましょう。
Twitchで配信しているなら
Twitchはユーザごとにコメント欄のURLが固定です。
さらに配信をしていなくてもコメント欄のURLを確認できるので、事前の準備も簡単です。
下記の記事をもとに、デザインをカスタマイズしてみてください。
よくある質問やトラブル
コメント欄のデザインをカスタマイズするには、意外とトラブルがつきものです。
ここでは、よくある質問やトラブルをまとめます。
コメントが表示されない
そもそもOBSにコメントが表示されないことがあります。
主な原因は下記です。
- URLを間違っている
- 管理画面のURLを使用している
- 間違ったカスタムCSSを貼り付けている
URLを間違っている
こちらはシンプルです。
まずはリンクの確認から試してみてください。
管理画面のURLを使用している
YouTubeもTwitchも実際の配信ページと管理ページの二か所でコメントを確認できます。
実際の配信ページのコメント欄からURLを取得しないと、うまくOBSに表示できないことがあります。
例えば、Twitchの管理ページにあるコメント欄をOBSのブラウザソースに追加すると上記のような状態になります。
管理ページには本人しかアクセスできないので、コメント欄においてもログインを求められます。
URLを追加する際は、管理ページではなく配信ページのものを使用しましょう。
間違ったカスタムCSSを貼り付けている
使うCSSのバージョンが間違っていることも考えられます。
YouTube用、Twtich用、Streamlabs用…など使うべきバージョンがあっているか、いま一度確認してみてください。
CSSが適用されない
ブラウザソースのカスタムCSSの欄に追加してもデザインが反映されないことがあります。
前述の「間違ったカスタムCSSを貼り付けている」の内容のほかには下記の内容が考えられます。
- 以前のキャッシュが残っている
- コピペミス
- 配信サイトのアップデートの影響
以前のキャッシュが残っている
OBSには自動保存機能があり、そのデータの影響でCSSが反映されないケースが考えられます。その際は下記の手順を試してみてください。
- 該当のブラウザソースを削除する
- OBSを再起動する
- ブラウザソースを再度作成し、URLとカスタムCSSを入力する
こちらで大抵は解決するはずですが、それでもダメな場合はOBSのキャッシュクリアを検討してみてください。
CSSのコピペミス
CSSのコピペミスも考えられます。しっかりと配布サイトから直接コピーし、OBSに貼り付けてください。
まれにあるのが、Discordなど別のソフトに一度貼り付けてからOBSにコピペするパターンです。
CSSに「”」の記号が含まれている場合、別のソフトに貼り付けると半角記号のはずが全角記号に自動変換されることがあります。
このような仕様は、なかなか自身では気づきにくいので注意が必要です。
配信サイトのアップデートの影響
YouTubeやTwitchのアップデートにより以前のCSSが適用できなくなることがあります。
これはCSSの作成者が対応できることもありますが、OBS自体のアップデートを待たないと解決しないこともあります。
疑いがある際はTwitterをチェックすればだれかが発信してくれているかもしれません。
一部の装飾が崩れる
デザインは一部にしか反映されないケースも考えられます。
- 配信サイトの新機能がある
- 管理ページのコメント欄を活用している
配信サイトの新機能がある
YouTubeやTwitchには新機能が実装されることがあります。
CSSではひとつひとつの場所に対して表示の有無やデザインを設定していきます。
なので、新機能にCSSが対応できていないことがあります。
その際は作成者に連絡してみましょう。作成者も気づいていないことがあります。
管理ページのコメント欄を活用している
前述した内容で、管理ページのコメント欄は使用しないようにと記載しました。
管理ページのコメント欄であっても、OBS上でログインしておけばブラウザソースに表示はできます。
しかし、配信ページと管理ページのコメント欄では表示内容が異なるはずです。
管理ページのものだと、 管理者（配信者）しか見れないメッセージが表示されたりします。
その影響でデザインが崩れることがあります。配信ページのコメントURLを活用しましょう。
まとめ
OBSにコメント欄を表示してデザインを変更する方法についてをまとめました。
いま配信している配信者さんは、この記事の内容のいずれかをとっていることがほとんどです。
この記事をもとに設定し、あなたに合ったデザインを探してみてください。
『はいしんツールキット』もぜひ活用していただけると嬉しいです。
コメント