Twitchの配信画面にコメントを出す方法について解説していきます。
雑談配信などでコメントを表示しておくと、画面に変化をつけれるので映える配信になりますよ。
この記事だけのオリジナルの方法も紹介するので、ぜひイケてるデザインのコメント欄を作ってみてください。
Twitchのコメント欄を配信画面に表示するには
Twitchのコメント欄を配信画面に表示するには、OBSなどの配信ソフトを使う必要があります。
スマホから配信しているときは、表示できないので注意してください。
配信ソフトを使うと、ゲーム画面やコメントなどの要素を組み合わせて配信画面をカスタマイズすることができます。ここからは、OBSを使うことを前提に説明していきます。
![](https://www.ruri.info/wp-content/uploads/2023/01/thomneil_obs-300x158.png)
コメ欄を表示する2つの方法を紹介します
この記事では、Twitchのコメ欄を配信画面に表示するための2つの方法を紹介します。
- OBSで直接表示する
- Streamlabs + OBSで表示する
一つ目の方法として、OBSのブラウザソースを使うことでコメントを表示できます。カスタマイズ機能も用意されているので、デザインの変更も可能です。手っ取り早く設定したい場合やこの記事内で紹介するデザインを気に入れば、この方法を選択して下さい。
次に、Streamlabsとは海外製の外部ツールです。Twitchアカウントと連携することで、コメント表示やフォロー通知など幅広い項目を表示できます。設定の手間さえかければ、一つ目の方法より詳細にカスタマイズができる特徴があります。もしフォロー通知やサブスク通知を表示したいなら、こちらの方法があっているかもしれません。
この記事ではどちらの方法も解説するので、ご自身に合った方法でコメントを表示してみて下さい。
【方法2】OBSのブラウザソースで直接表示する
まずはシンプルにOBSの機能のみでコメント欄を表示してみます。
この方法のメリットは、何より簡単にできるという点と、デザインのカスタマイズ性が高い点です。
![ブラウザソースで表示する例](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-toolkit-1-1024x576.png)
![](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-tw-popout-1.png)
Twitchで自分の配信ページを開き、歯車マークから「チャットをポップアウト」を選択します。
配信ページとは、ダッシュボードのコメ欄ではなく視聴者が見ているコメ欄のことです。
ダッシュボードのコメ欄を使うとOBS上でログインが必要な場合があって、少々面倒になるケースもあります。
![](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-copy-link.png)
コメント欄が別のウィンドウで表示されるので、リンクをコピーします。
![](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-add-browser.png)
OBSのソースにある、+ボタンから「ブラウザ」を追加します。
![](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-add-url.png)
URLの欄に、先ほどコピーしてきたTwitchのコメ欄のURLを貼り付けます。
これでコメント欄を配信画面上に表示することができました。
コメント欄のデザインをカスタマイズする
さらに、当サイトの運営する『はいしんツールキット』を使用すれば、コメ欄のデザインをカスタマイズすることができます。
![はいしんツールキット](https://www.ruri.info/wp-content/uploads/2022/11/ytcomment-design-tool-1024x802.png)
吹き出しのデザインや、好きな色やフォントに変更できるデザインなど複数用意しているので、お試しください。
下記の記事で、細かな設定方法をまとめているので参考にしてください。
![](https://www.ruri.info/wp-content/uploads/2022/08/thumbnail_css_comment-300x158.png)
【方法2】Streamlabsを活用する
『Streamlabs』は、ライブ配信を拡張するWebサービスです。配信画面に整ったデザインでコメントを表示できるだけでなく、フォローやサブスクの通知を表示することもできます。
![streamlabsの例](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-streamlabs-1-1024x576.png)
無料で使うことができるので、下記を参考に設定してみてください。
まずは、StreamlabsのサイトにアクセスしてTwitchのアカウントでログインします。
![](https://www.ruri.info/wp-content/uploads/2022/11/ytcomment-display-streamlabs-1024x595.png)
ログインするとプランの選択画面に遷移しますが、まずは無料プランで問題ありません。
コメント表示をするだけならば、無料プランで十分です。
![](https://www.ruri.info/wp-content/uploads/2022/11/ytcomment-display-streamlabs-top-1024x597.png)
コメント欄用のページを開きます。
サイドバーから「すべてのウィジェット」→チャットボックスを選択です。
![](https://www.ruri.info/wp-content/uploads/2022/11/ytcomment-display-streamlabs-chatbox-1024x599.png)
チャットボックスページにある、「ウィジェットURL」をコピーします。
こちらのURLをOBS(配信ソフト)に貼り付けることでコメントを表示します。
デザインのカスタマイズ方法は後述するので、すぐに知りたい方は下にスクロールしてください。
コメント欄をOBS上に表示する
ここからはOBSを操作して、実際にコメントを表示していきます。
![](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-add-browser.png)
「ソース」の+ボタンから「ブラウザ」を追加します。
![](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-add-url.png)
先ほどコピーしたStreamlabsのウィジェットURLを「URL」の欄に貼り付けます。
お好みで幅や高さを変更してもいいですが、特にこだわりがなければ「OK」ボタンを押します。
確認する
あとは、ほかのソースと同じように配置を調整すれば完了です。
最後にTwitchのコメント欄にコメントをしてみて動作するか確認しましょう。配信はしていなくても問題ありません。
始めは読み込みに多少の時間がかかるため、いくつか連投してみてチェックしましょう。
Streamlabsの細かな設定
Streamlabsで表示するコメント欄は、細かくデザインを調整することができます。
背景画像やあなたの配信スタイルに合ったものに変更してみましょう。
デザインを変更する
![テーマの変更](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-settings-design-1024x296.png)
Streamlabsのチャットボックスのページを下にスクロールすると、「テーマ」の項目があります。
いくつかのデザインからコメント欄をカスタマイズできる機能です。
上記の画像では「Boxed」というテーマにしています。(個人的には好きです)
文字の大きさや色を変更する
![色の変更](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-settings-color-1-1024x423.png)
「テキスト色」や「フォントサイズ」を変更できる項目があります。
フォントサイズは、スマホからでもPCからでも見やすいサイズにしましょう。22px~48pxくらいがおすすめです。
あまりにも大きすぎると逆に見づらいので、程よい余白を作ることも大切ですよ。
コメントの表示時間を変更する
Streamlabsで表示するコメントは、時間が経つとフェードアウトしていきます。
コメントが表示されてから消えるまでの時間も調整できます。
![表示の時間を調整する](https://www.ruri.info/wp-content/uploads/2022/11/twcomment-settings-delay-1024x352.png)
設定は「後のメッセージを非表示します」の項目から変更できます。少々日本語訳が変ですので、直感的には分かりづらいかもです。
もし、コメントを時間が経っても消えないようにしたいならば、「Always Show Messages」にチェックを入れます。
以上がStreamlabsの設定です。
コメント