【YouTube Live】全5種類、コメントを配信画面に表示する方法。透過も可能

この記事をシェアする

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

チャットを配信画面に重ねて表示

今回は、5種類のやり方をご紹介します。画面をクールにカスタマイズして、ほかの配信者と差をつけましょう。

関連 配信画面の「枠」はどうやって付ける?オーバーレイで画面を作る方法

【スポンサーリンク】

配信ソフトが必要

まず前提として配信ソフトが必要です。たとえば、

のいずれかを使います。

配信ソフト

これ以降の解説は、配信ソフトの基本的な使い方を理解しているものとして進めていきます。

大きく5種類のやり方がある

細かいことを抜きにして、5種類の方法があると思ってください。

  • 通常どおりキャプチャーする方法
  • Webページをキャプチャーする方法(お薦め
  • Streamlabsを使う方法(お薦め
  • HTML5コメントジェネレーターを使う方法
  • XSplit、またはSLOBSの専用機能を使う方法
聞き慣れない用語があるかもしれませんが、心配いりません。

どの方法も一長一短あります。お薦めを書くとすれば、2番めと3番めです。見栄えがよく、しかも定番の方法だからです。

注意点

基本的に、ライブ ダッシュボード「プライバシー」は「公開」に設定してください。

プライバシーを公開に

どの方法でやるかにもよりますが、「非公開」になっているとコメントを配信画面に乗せられない場合があるからです。「限定公開」についても同様です。

通常どおりキャプチャーする方法

Webブラウザに表示されているコメント、またはコメントビューアーに表示されているコメントを、配信ソフトでキャプチャーする方法です。

コメント画面をキャプチャー
▲コメントをウィンドウキャプチャーで取り込んだところです。この方法は、コメントの背景をきれいに透明にしたい場合には向きません。

たとえばOBSの場合は、画面キャプチャー、またはウィンドウキャプチャーを使います。

OBS Studioに画面を映したい。頻繁に使う4つのキャプチャー方法
OBS Studio(以下OBS)に画面を映すためには、まず「+」をクリックしてソースを追加します。そして、視聴者に画面を見せるための設定を...

Webページをキャプチャーする方法

これは配信ソフトのブラウザ機能を使い、コメント画面をキャプチャーする方法です。

  1. 放送ページを開いてください。練習として他人の放送ページでもかまいません。
  1. 縦に並んだ3点リーダーをクリックし、「チャットをポップアウト」を選択します。
  2. チャットをポップアウト

  3. すると、コメント専用のウィンドウ画面が表示されるので、URLをコピーします。URLの「www」の部分が「studio」になっている場合は、「www」に書き換えたうえでコピーしてください。
  4. URLをコピー

  5. OBSの場合は、「ソース」の「+」をクリックして「ブラウザ」を選択します。XSplitの場合は、「ソースの追加」→「ウェブページ...」です。
  6. ブラウザソースの追加

  7. さきほどコピーしたURLをペーストします。コメントのウィンドウ画面は、閉じてもかまいません。これで完成です。
  8. コメントの背景を消すなどのカスタマイズをしたい場合は、Chat v2.0 Style Generator 日本語版を使いましょう。
  9. 任意の設定にしたら、「CSS」の部分をすべて、さきほど追加したソースにコピー&ペーストします(上書き)。
  10. CSSをコピペ

  11. 「OK」をクリックして完成です。
  12. Webページをキャプチャー

  13. 詳しい設定方法については、「Chat v2.0 Style Generatorの使い方・設定方法。YouTubeでコメント背景を透明に」をご覧ください。

Streamlabsを使う方法

Streamlabsは、ライブ配信を補助してくれるWebサービスです。この方法も簡単にできます。

  1. Streamlabs公式サイトにアクセスし、画面右上の「Login」からGoogle アカウントでログインします。画面を順に進めていってください。
  2. Streamlabs

  1. 左メニューの「All Widgets」という部分にある「CHAT BOX」をクリックします。
  2. Chat Box

  3. 「Widget URL」の部分にある「COPY」をクリックします。これでURLがコピーされました。
  4. URLをコピー

  5. OBSの場合は、「ソース」の「+」をクリックして「ブラウザ」を選択します。XSplitの場合は、「ソースの追加」→「ウェブページ...」です。
  6. ブラウザソースの追加

  7. さきほどコピーしたURLをペーストしましょう。
  8. URLのコピペ

  9. 完成です。細かい設定は、さきほどのStreamlabsのWebページで行ってください。ページ下の「SAVE SETTINGS」ボタンで設定が反映されます。
  10. Streamlabs

  11. 詳しいやり方については、「Streamlabsで、YouTube Liveのコメント・チャットを配信画面に表示する方法」をご覧ください。

HTML5コメントジェネレーターを使う方法

この方法は、HTML5コメントジェネレーターを使って、配信画面にコメントをニョキニョキと表示させる方法です。ユーザーアイコンやバッジは表示されません。

HTML5コメントジェネレーター

いろいろなバリエーションが考えられますが、今回は以下のものを使います。

詳細については、下記ページをご覧ください。

コメジェネ + マルチコメビュでコメントを表示する方法。ニコ生以外もOK
HTML5コメントジェネレーター(以下、コメジェネ)を使うと、配信画面上にコメントをニョキニョキと表示できます。 ライブ配信...

XSplit、またはSLOBSの専用機能を使う方法

XSplit、およびSLOBSには、コメントを配信画面に重ねて表示する機能が搭載されています。そのため、まったく手間がかかりません。

XSplit、またはStreamlabs OBSの専用機能

SLOBSは、上述のStreamlabsの機能をOBSに組み込んだ配信ソフトです。Streamlabsが開発しました。

XSplitの場合

XSplitの場合は、最初にプラグインをインストールします。

  1. 「ツール」→「プラグインストア」→「SOURCES」の順にクリックする。
  2. YouTube Live Chat Viewer via HTML5」を選択する。
  3. 「INSTALL」をクリックする。

つぎに、ソースを追加して設定を行います。

  1. 「ソースの追加」→「YouTube Widgets」→「Live チャットビューアー HTML5」の順に選択する。
  2. 追加したソース上で右クリックし、配信URLの「v=」より右の文字列を「Video ID」に入力する(例 : LSrxeZAdIMk)
  3. 「Connect」をクリックする。

XSplitの場合
▲ビデオIDについては、ライブ ダッシュボードにある縦の3点リーダーをクリックし、「チャットをポップアウト」で表示されるURLでわかります。「v=」の部分、「&」の手前までがビデオIDです。

SLOBSの場合

SLOBSの場合は、以下のように設定します。

  1. SLOBSの画面右上からログインする。
  2. 「ソース」のところにある「+」をクリックする。
  3. チャットボックス」を選択する。
  4. 「ソースを追加します。」→「新しいソースを追加します。」→「完成」の順にクリックする。

Streamlabs OBSの場合

詳細については、下記ページをご覧ください。

簡単!Streamlabs OBSのウィジェットの使い方。コメントや通知を表示する方法
Streamlabs OBS(以下SLOBS)の大きな特長のひとつに、ウィジェットを使えるという点があります。 ウィジェットと...
スポンサーリンク
レクタングル(大)
レクタングル(大)

この記事をシェアする

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

関連コンテンツ



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