【Twitch】コメントを配信画面に表示する方法。Streamlabsなら簡単

この記事をシェアする

Twitchでコメント(チャット欄)を配信画面に重ねて表示するには、どうしたらよいのでしょうか。

Streamlabsを利用しよう

画面にコメントを表示する方法は、さまざまなやり方があります。細かいものも含めると5~10種類はあるでしょう。

【YouTube Live】全5種類、コメントを配信画面に表示する方法 。透過も可能
YouTube Liveで、視聴者のコメント(チャット)を配信画面に重ねて表示するためには、どうしたらよいのでしょうか。 今回...

今回は、StreamlabsというWebサービスを使います。特長は以下のとおりです。

  • 簡単で、すぐに設定できる。
  • 多くの配信者が使う定番サービス。
  • コメントの背景を透明にして(透過)、美しくコメントを表示できる。

Streamlabs

Streamlabsがどれだけ簡単かというと、WebサイトにアクセスしてURLをコピペするだけでよいのです。めんどうな設定は必要ありません。

また、Streamlabsを使えば、チャンネルがフォローされたときにその通知を画面に表示することもできます。

【Twitch・YouTube Live】フォロー・チャンネル登録の通知を表示する方法
フォロー、またはチャンネル登録の通知を配信画面に表示するには、どうしたらよいのでしょうか。 このページでは、 ...

配信ソフトを用意しよう

Streamlabsを利用するには配信ソフトが必要です。たとえば、

のいずれかを使いましょう。

配信ソフト

これ以降の解説は、配信ソフトの基本的な使い方を理解しているものとして進めていきます。あらかじめ配信ソフトをインストールしておいてください。

なお、SLOBSはSteamlabsが開発したOBSで、Streamlabsにアクセスせずに設定できます。今回は解説の対象ではありません。

全体的な流れ

おおよその流れを確認しておきましょう。

  1. Streamlabsにアクセスし、URLをコピーする。
  2. 配信ソフトにURLをペーストする。
  3. 配信ソフトの画面にコメントが表示される。

コメントの大きさ・色などの変更は、Streamlabsで行います。

Streamlabsにアクセスしよう

  1. まずは、Streamlabsにアクセスします。
  2. Streamlabs

  1. 画面右上の「Login」をクリックし、Twitchアカウントでログインします。ソフトをダウンロードするわけではありません。
  2. ログイン

  3. 左メニューの「Widgets」にある「CHAT BOX」をクリックします。
  4. CHAT BOX

  5. 「COPY」をクリックします。すると、URLをコピーできます。このURLをあとで配信ソフトにペーストすることになります。
  6. URLをコピー

  7. Streamlabsは日本語化することもできます。ただ、2018年7月時点では日本語として不自然な部分が多いため、今回は英語のままで解説します。

OBSでの設定方法

  1. 「+」をクリックし、「ブラウザ」を選択します。「ブラウザ」がない場合は、OBSインストール時に「ブラウザ」をインストールしない設定にした可能性があります。OBSを再インストールしてください。
  2. ブラウザソースを追加

  1. 適当な名前をつけて「OK」をクリックします。
  2. 「OK」をクリック

  3. さきほどコピーしたURLを「URL」にペーストしましょう。
  4. URLをコピペ

  5. 「幅」と「高さ」を任意の数字にします。どのくらいの幅が適切なのかというのは、Streamlabs側の設定(後述するテーマ、文字の大きさ)によっても異なってきます。
  6. 幅・高さ

  7. 配信は開始しなくてよいので、試しに自分のチャンネルにアクセスして文字を入力してみましょう。OBSの画面にコメントが反映されるはずです。
  8. テストを行う

  9. OBSの画面上でコメントのサイズ・位置を調整します。
  10. ソースの位置・サイズを調整

  11. ソースの順序に注意してください。「ブラウザ」ソースをいちばん上にします。これをまちがえると、コメントがゲーム画面に隠れてしまいます。
  12. ソースの順序

XSplitでの設定方法

XSplitの場合も、OBSと同じように設定できます。

  1. 「ソースの追加」をクリックする。
  2. 「ウェブページ...」を選択する。
  3. さきほどコピーしたURLを「URL」にペーストする。
  4. XSplitの画面上でコメントのサイズ・位置を調整する。

なお、XSplitには「Twitch Chat Viewer via HTML5」というプラグインがあり、このプラグインでもコメントを画面に表示できます。

参考 Twitch配信でチャットやフォロワー通知を表示する方法

Streamlabsで細かい設定をしよう

設定を保存・反映させたい

設定変更後は、「SAVE SETTINGS」をクリックするのを忘れないようにしましょう。そうしないと設定が反映されません。

設定の保存

文字の大きさ・色を変えたい

「Font Size」と「Text Color」で変更できます。前者は24~48pxがよいでしょう。

「Font Size」と「Text Color」

文字をあまり大きくしすぎると、表示が窮屈になります。また、ユーザー名が欠けて見えなくなります。

コメントの表示時間を変えたい

画面に表示されているコメントは、一定時間が経過すると自動的に消えます。この設定を「Hide Message After」で変更できます。

「Hide Message After」の設定

コメントが消えないようにしたい場合は、「Always Show Messages」にチェックを入れてください。

デザイン・アニメーションを変えたい

「Theme」を変更します。

コメントを表示できないときに確認すべき点

ログインしているアカウントが適切か

TwitchアカウントでStreamlabsにログインできているか確認しましょう。YouTubeのGoogleアカウントでログインしている可能性があります。

もしこれをまちがえた場合は、画面右上のアカウント名から「Logout」を選択してログインしなおします。

ソースの順番が適切か

「ブラウザ」ソースがほかのソースより下の順位だと、コメントが隠れてしまいます。「ブラウザ」ソースを最上位にしましょう。

コメントがバウンディングボックスの範囲外にないか

「ブラウザ」ソースの幅・高さが小さい場合は、コメントがバウンディングボックス(罫線)の範囲外にあるかもしれません。同ソースの設定画面を開いて、幅・高さを設定の大きくしてください。

ソースの幅・高さを変えなかったか

もし「ブラウザ」ソースの幅・高さを変えた場合、それまで映っていたコメントは消えます。Twitchにて再度コメントを入力してください。

セキュリティソフトの影響ではないか

カスペルスキーやAvastなどのセキュリティソフト(アンチウィルスソフト)をインストールしている場合は、セキュリティソフトを終了するか、またはアンインストールし、問題を切り分けてみましょう。

スポンサーリンク
レクタングル(大)
レクタングル(大)

この記事をシェアする

Twitterで最新情報をツイートしています!フォローお願いします。

スポンサーリンク
レクタングル(大)