Twitchの配信画面にコメントを出す方法について解説していきます。
雑談配信などでコメントを表示しておくと、画面に変化をつけれるので映える配信になりますよ。
この記事だけのオリジナルの方法も紹介するので、ぜひイケてるデザインのコメント欄を作ってみてください。
Twitchのコメント欄を配信画面に表示するには
Twitchのコメント欄を配信画面に表示するには、OBSなどの配信ソフトを使う必要があります。
スマホから配信しているときは、表示できないので注意してください。
配信ソフトを使うと、ゲーム画面やコメントなどの要素を組み合わせて配信画面をカスタマイズすることができます。ここからは、OBSを使うことを前提に説明していきます。
VTubeStudioとOBS Studioをカスタマイズ。アバター表示から配信開始までの全て
コメ欄を表示する2つの方法を紹介します
この記事では、Twitchのコメ欄を配信画面に表示するための２つの方法を紹介します。
- Streamlabsを活用する
- OBSで直接表示する
どちらも操作は難しくなく、この記事通りにすれば簡単に導入できます。
デザインを見比べて、好みで方法を選べば問題ありません。
Streamlabsを活用する
『Streamlabs』は、ライブ配信を拡張するWebサービスです。配信画面に整ったデザインでコメントを表示できるだけでなく、フォローやサブスクの通知を表示することもできます。
無料で使うことができるので、下記を参考に設定してみてください。
まずは、StreamlabsのサイトにアクセスしてTwitchのアカウントでログインします。
ログインするとプランの選択画面に遷移しますが、まずは無料プランで問題ありません。
コメント表示をするだけならば、無料プランで十分です。
コメント欄用のページを開きます。
サイドバーから「すべてのウィジェット」→チャットボックスを選択です。
チャットボックスページにある、「ウィジェットURL」をコピーします。
こちらのURLをOBS（配信ソフト）に貼り付けることでコメントを表示します。
デザインのカスタマイズ方法は後述するので、すぐに知りたい方は下にスクロールしてください。
コメント欄をOBS上に表示する
ここからはOBSを操作して、実際にコメントを表示していきます。
「ソース」の＋ボタンから「ブラウザ」を追加します。
先ほどコピーしたStreamlabsのウィジェットURLを「URL」の欄に貼り付けます。
お好みで幅や高さを変更してもいいですが、特にこだわりがなければ「OK」ボタンを押します。
あとは、ほかのソースと同じように配置を調整すれば完了です。
最後にTwitchのコメント欄にコメントをしてみて動作するか確認しましょう。配信はしていなくても問題ありません。
始めは読み込みに多少の時間がかかるため、いくつか連投してみてチェックしましょう。
【方法1】Streamlabsの細かな設定
Streamlabsで表示するコメント欄は、細かくデザインを調整することができます。
背景画像やあなたの配信スタイルに合ったものに変更してみましょう。
デザインを変更する
Streamlabsのチャットボックスのページを下にスクロールすると、「テーマ」の項目があります。
いくつかのデザインからコメント欄をカスタマイズできる機能です。
上記の画像では「Boxed」というテーマにしています。（個人的には好きです）
文字の大きさや色を変更する
「テキスト色」や「フォントサイズ」を変更できる項目があります。
フォントサイズは、スマホからでもPCからでも見やすいサイズにしましょう。22px~48pxくらいがおすすめです。
あまりにも大きすぎると逆に見づらいので、程よい余白を作ることも大切ですよ。
コメントの表示時間を変更する
Streamlabsで表示するコメントは、時間が経つとフェードアウトしていきます。
コメントが表示されてから消えるまでの時間も調整できます。
設定は「後のメッセージを非表示します」の項目から変更できます。少々日本語訳が変ですので、直感的には分かりづらいかもです。
もし、コメントを時間が経っても消えないようにしたいならば、「Always Show Messages」にチェックを入れます。
【方法2】OBSのブラウザソースで直接表示する
外部ツールを使わずに、OBSの機能のみでコメント欄を表示することもできます。
この方法のメリットは、何より簡単にできるという点と、デザインのカスタマイズ性が高い点です。
Twitchで自分の配信ページを開き、歯車マークから「チャットをポップアウト」を選択します。
コメント欄が別のウィンドウで表示されるので、リンクをコピーします。
OBSのソースにある、＋ボタンから「ブラウザ」を追加します。
URLの欄に、先ほどコピーしてきたTwitchのコメ欄のURLを貼り付けます。
これでコメント欄を配信画面上に表示することができました。
Twitchのコメ欄を映すとログイン画面が表示されてしまう問題について
ブラウザソースでTwitchのコメント欄を取り込むと、ログイン画面が表示されてうまくコメントを表示できない問題が起こってしまう人もいます。全員というわけではないので、発生原因は不明ですが、もしもの対策を下記の記事で紹介しています。
困った際はご覧ください。
【Twitch】ブラウザソースでコメント欄を表示するとログイン画面が表示されてしまう【OBS】
コメント欄のデザインをカスタマイズする
さらに、当サイトの運営する『はいしんツールキット』を使用すれば、コメ欄のデザインをカスタマイズすることができます。
吹き出しのデザインや、好きな色やフォントに変更できるデザインなど複数用意しているので、お試しください。
下記の記事で、細かな設定方法をまとめているので参考にしてください。
【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube･Twitch対応】
YouTubeでも解説中！
ruri.infoではYouTubeチャンネルも運営しています。
映える配信画面が作れる、より実践的なテクニックを紹介しているのでぜひご覧ください！
ライバルと差をつけたいVTuberさん・ライブ配信者さん必見です。
スポンサードリンク
