【OBS】YouTubeライブのコメントをおしゃれに表示する方法

YouTubeライブを見ると、配信画面にコメント欄を表示しているのをよく見ます。

この記事では、YouTubeで生配信をするときにコメント欄を表示する具体的な方法と、おしゃれなデザインに変更するテクニックまで網羅的に解説します。

ぜひ真似してみてくださいね。

目次

YouTubeライブのコメント欄は配信ソフトで表示する

YouTubeライブの配信画面にコメント欄を表示するには、OBS等の配信ソフトを使う必要があります。

スマホやゲーム機などから直接配信している方は、表示することができません。

OBS等の配信ソフトを使うと、カメラの映像やゲーム画面・コメントなどの要素を組み合わせて配信画面をカスタマイズすることができます。

ここからはOBSを使用することを前提に解説していきますが、「OBSってどうやって使うの?」という方は、下記の記事からご覧ください。

大きく4種類の方法で表示できる

OBSでYouTubeライブのコメント欄を表示する方法は大きく4つあります。

  • 直接キャプチャーする方法
  • ブラウザを読み込む方法
  • Streamlabsを使う方法
  • コメントビューアーを使う方法

どの方法にもメリット・デメリットがあるので、あなたの完成イメージに合わせて方法を選択してください。

では、それぞれ詳しく紹介します。

直接キャプチャーする

まずは最もシンプルな方法です。ブラウザに表示したコメント欄をキャプチャーします。

ウィンドウキャプチャで表示
コメントをウィンドウキャプチャ

OBSの「ウィンドウキャプチャ」や「画面キャプチャ」を使用します。ブラウザをOBS上に表示した後は、Altを押しながらサイズ調整するとトリミングができるので、コメント欄の部分のみを見せることができます。

この方法は最も簡単ですが、背景色を変えたりデザイン全体を変えることはできません。

ブラウザを読み込む

OBSには、ブラウザページをソースとして追加できる機能があります。

この方法の最大のメリットは、コメント欄のデザインを自由にカスタマイズできる点。吹き出しの形にしたり、色を変えたりと自由自在です。

STEP
チャットをポップアウトする

配信ページを開き、コメント欄にある三点リーダから「チャットをポップアウト」を選択します。

STEP
コメント欄のURLをコピーする

別のウィンドウでコメント欄が表示されるので、URLをコピーします。

上記の画像のオレンジ部分です。

STEP
OBSのソースにブラウザを追加する

OBSのソースに『ブラウザ』を追加します。

STEP
ソース「ブラウザ」の設定を行う

ソースにブラウザを追加すると、上記のような設定画面が開きます。

URLの欄にSTEP2でコピーしたURLを貼り付けます。

もしデザインを変更したい場合は、「カスタムCSS」にコードを入力する必要があります。

 コメ欄をおしゃれにデザインしたいなら

YouTubeのコメントをカスタマイズする「カスタムCSS」が欲しいときは、当サイトが運営する『はいしんツールキット』がおすすめ。

複数のデザインと、色やフォントを選べる機能があります。カスタムCSSを自動的に生成してくれるので、OBSにコピペするだけで簡単に使えるのも特徴です。

詳しい使い方は、下記の記事にまとめています。要チェックです!

Streamlabsを使う

『Streamlabs』というwebサービスを使ってコメントを表示する方法もあります。

streamlabsの例

ユーザー名とコメントが表示されるシンプルな構成で、色は自由に変えれます。また、ミュートキーワードとして表示させない言葉も設定できたりします。

Streamlabsには、スパチャ(投げ銭)やチャンネル登録が来た時に画面にアニメーションを表示するなど、ほかにも機能がたくさんあります。いろんな機能を一括して使いたい方へはおすすめです。

STEP
Streamlabsにログインする

まずは、Streamlabsのページにアクセスします。YouTubeアカウントでログインしましょう。

Streamlabsには、web版の他にPCアプリ版もありますが、一旦はweb版で問題ありません。

ログインすると、プランを選ぶ画面に遷移します。無料プランで先に進みます。

STEP
ChatBoxのページを開く

サイドバーから「すべてのウィジェット」を選択し、ページ中央付近の「チャットボックス」を開きます。

STEP
コメント用のURLをコピーする

ウィジェットURLをコピーします。

また画面をスクロールすると、コメント欄の色や文字サイズ、ミュートワードの設定などを行うことができます。

STEP
OBSにコメントを表示する

OBSのソースから「ブラウザ」を追加します。

URLの欄にSTEP3でコピーしたURLを貼り付けます。

これでOBSの画面上にコメント欄の表示がされるようになります。お好みで場所やサイズを調整してください。

STEP
テストを行う

実際にコメントの表示を確認するには、YouTubeライブのコメント欄にコメントをしてみます。

配信を開始しなくても管理画面からコメントしてみてください。実際に表示されるはずです。

もしかしたら最初の読み込みに時間がかかるかもしれませんが、数十秒後には流れ始めるかと思います。

コメントビューアーを使う

『コメントビューアー』とはコメントを閲覧するためのアプリのことです。マルチコメントビューアが人気でよく使われています。

コメントビューアーを使うと、コメントを表示できるだけでなく、コメントを読み上げる『棒読みちゃん』と組み合わせることができるのがメリットです。

デザイン面では別の方法の方が優れているので、コメントを表示したいだけならば別の方法を選択し、読み上げもしてほしいならばコメントビューアーを検討するのがよいかと思います。

使い方については、別途記事を作成します!

コメント欄を好みのデザインにカスタマイズする

YouTubeライブの配信画面にコメントを出す際は、デザインも大切です。自分の配信に合ったデザインは、より見やすく、映える配信画面になります。

当サイトの運営する『はいしんツールキット』を使えば、だれでも簡単にコメント欄をカスタマイズできますよ

吹き出しをはじめ、数種類のデザインから好きに選べ、フォントや色も自由に変更することができます。

カスタムCSSを自動で生成してくれるので、あとはOBSに貼り付けるだけですぐにデザインを変更でき、簡単です。

詳しくは、下記の記事にまとめているのでぜひご覧ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

VTuberをはじめとしたライブ配信者のためのブログメディア。初心者向けの記事や便利なツールを用意しています。

コメント

コメントする

目次