Twitchでコメント（チャット欄）を配信画面に重ねて表示するには、どうしたらよいのでしょうか。
目次
Streamlabsを利用しよう
画面にコメントを表示する方法は、さまざまなやり方があります。細かいものも含めると5～10種類はあるでしょう。
今回は、StreamlabsというWebサービスを使います。
特長は以下のとおりです。
- 簡単で、すぐに設定できる
- 多くの配信者が使う定番サービス
- コメントの背景を透明にして（透過）、美しくコメントを表示できる
また、Streamlabsを使えば、チャンネルがフォローされたときにその通知を画面に表示することもできます。つまり、一石二鳥なのです。
配信ソフトを用意しよう
Streamlabsを利用するには配信ソフトが必要です。たとえば、
- OBS Studio（以下OBS）
- XSplit
- Streamlabs Desktop
のいずれかを使いましょう。
SLOBSは、Streamlabsにアクセスせずに設定できます。そのため、OBSを使う場合よりもさらに簡単です。詳細は、下記ページをご覧ください。
これ以降の解説は、OBSまたはXSplitを使用していることを前提として進めていきます。
Streamlabsにアクセスしよう
- Streamlabsにアクセスし、Twitchアカウントでログインします。画面を順に進めていってください。
- 左メニューの「All Widgets」をクリックし、「Chat Box」をクリックします。
- 「COPY」をクリックします。すると、URLをコピーできます。このURLをあとで配信ソフトにペーストすることになります。
- Streamlabsは日本語化することもできます。ただ、日本語として不自然な部分が多いため、今回は英語のままで解説します。
OBSでの設定方法
つぎはOBSの設定をしていきましょう。
- 「+」をクリックし、「ブラウザ」を選択します。
- 適当な名前をつけて「OK」をクリックします。
- さきほどコピーしたURLを「URL」にペーストしましょう。
- 「幅」と「高さ」を任意の数字にします。どのくらいの幅が適切なのかというのは、Streamlabs側の設定（後述するテーマ、文字の大きさ）によっても異なってきます。
- 配信は開始しなくてもよい（開始してもよい）ので、試しに自分のチャンネルにアクセスして文字を入力してみましょう。OBSの画面にコメントが反映されるはずです。
- OBSの画面上でコメントのサイズ・位置を調整します。
- ソースの順序に注意してください。「ブラウザ」ソースをいちばん上にします。これをまちがえると、コメントがゲーム画面に隠れてしまいます。
XSplitでの設定方法
XSplitの場合も、OBSと同じように設定できます。
- 「ソースの追加」をクリックする。
- 「ウェブページ...」を選択する。
- さきほどコピーしたURLを「URL」にペーストする。
- XSplitの画面上でコメントのサイズ・位置を調整する。
なお、XSplitには「Twitch Chat Viewer via HTML5」というプラグインがあり、このプラグインでもコメントを画面に表示できます。
参考 Twitch配信でチャットやフォロワー通知を表示する方法
Streamlabsで細かい設定をしよう
設定を保存・反映させたい
設定変更後は、「SAVE SETTINGS」をクリックするのを忘れないようにしましょう。そうしないと設定が反映されません。
文字の大きさ・色を変えたい
「Font Size」と「Text Color」で変更できます。前者は24～48pxがよいでしょう。
文字をあまり大きくしすぎると、表示が窮屈になります。また、ユーザー名が欠けて見えなくなります。
コメントの表示時間を変えたい
画面に表示されているコメントは、一定時間が経過すると自動的に消えます。この設定を「Hide Message After」で変更できます。
コメントが消えないようにしたい場合は、「Always Show Messages」にチェックを入れてください。
デザイン・アニメーションを変えたい
「Theme」を変更します。
コメントを表示できないときに確認すべき点
ログインしているアカウントが適切か
TwitchアカウントでStreamlabsにログインできているか確認しましょう。YouTubeのGoogleアカウントでログインしている可能性があります。
もしこれをまちがえた場合は、画面右上のアカウント名から「Logout」を選択してログインしなおします。
ソースの順番が適切か
「ブラウザ」ソースがほかのソースより下の順位だと、コメントが隠れてしまいます。「ブラウザ」ソースを最上位にしましょう。
コメントがバウンディングボックスの範囲外にないか
「ブラウザ」ソースの幅・高さが小さい場合は、コメントがバウンディングボックス（罫線）の範囲外にあるかもしれません。同ソースの設定画面を開いて、幅・高さを設定の大きくしてください。
ソースの幅・高さを変えなかったか
もし「ブラウザ」ソースの幅・高さを変えた場合、それまで映っていたコメントは消えます。Twitchにて再度コメントを入力してください。
セキュリティソフトの影響ではないか
カスペルスキーやAvastなどのセキュリティソフト（アンチウイルスソフト）をインストールしている場合は、セキュリティソフトを終了するか、またはアンインストールし、問題を切り分けてみましょう。
別の方法もある
今回は、Streamlabsを使った方法を解説しました。しかし、ほかにもコメントを画面に重ねる方法があります。
たとえば、マルチコメントビューア + HTML5コメントジェネレーターというソフトを使った方法です。コメントがニョキニョキと表示されます。
また、「ニコニコのようにコメントを流したい」「もっと簡単にやりたい」ということであれば、Twitch内の機能を使ってコメントを表示する方法もよいでしょう。
