【OBS】YouTube Liveのコメントを表示しかわいいデザインにカスタマイズする方法

OBSStudioを使って、YouTube Liveのコメントを表示する方法を紹介します。
VTuberさんを中心に、配信者さんがよく行なっている手順を丁寧に説明するので、初心者でも安心です。

この記事を参考にかわいいコメント欄を作っていきましょう。

また、設定するうえでトラブルが出たときや、Twitchでの設定方法についても知りたいときは以下の記事をご覧ください。

目次

配信画面にYouTubeのコメント表示をするには

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

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

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

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

方法1:チャットをブラウザソースに取り込む

OBSには、ブラウザページを取り込み、配信画面に表示する機能があります。
YouTubeで活動している配信者さんは、この方法をとっていることが多い印象があります。

この方法のメリットは、簡単である点とデザインを自由にカスタマイズできる点
背景透過したり、枠を吹き出しにしたり、色を変えたりと自由自在です。

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

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

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

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

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

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

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

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

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

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

コメ欄をかわいいデザインにしたいなら

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

カスタムCSSの例

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

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

方法2:Streamlabsのウィジェット機能を使用する

Streamlabs』というWebサービスを使ってコメントを表示する方法もあります。
基本無料で使えて、ブラウザだけで使えるダウンロード不要のサービスです。

streamlabsの例

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

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

STEP
Streamlabsにログインする

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

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

STEP
ChatBoxのページを開く

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

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

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

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

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

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

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

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

STEP
テストを行う

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

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

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

方法3:コメントビューアーを使う

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

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

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

【おすすめ】カスタムCSSの生成ツールを無料公開中

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

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

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

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

ここで紹介したデザイン以外にも使いやすいデザインをたくさん用意しました
詳しくは、下記の記事にまとめているのでぜひご覧ください。

【まとめ】配信画面にYouTubeのコメントを表示する

今回は、OBSStudioを使ってYouTubeのコメント欄を表示する方法をまとめました。

どの方法でもコメント表示は可能ですが、機能や実現可能なデザインに違いがあります
あなたに合った方法を検討してみてくださいね。

また、設定で困ったときやデザインの探し方を知りたいときは下記の記事をご覧ください。

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

この記事を書いた人

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

コメント

コメントする

目次