YouTubeLiveのコメントを透過、配信画面に表示させる方法。動画に直接残るのでアーカイブとリプレイ用に

お役に立てましたか? 良かったらこの記事をシェアしてください!

Youtubeライブで配信を行うとき、視聴者からのコメントを透過して直接配信画面に表示させるやり方をみていきます。簡単設定で画面が賑やかに!

スポンサーリンク

YouTubeライブのコメントを透過、配信画面に取り込むやり方。個性を出せて、リスナーと一緒に配信映像作りができる

2018_03_23_1_1

Youtube Liveを使ってゲームプレイの様子などを配信していると、視聴しているユーザーからコメントをもらうことがあります。

最近になってYoutubeLiveにもチャットのリプレイ機能が付いたので、配信動画で投稿されたコメントを再生することができるようになりました。

通常Youtubeライブのコメントはコメント欄に表示されるので、ニコニコ生放送のように画面に直接コメントを表示することはできません。

でもちょっとした設定で上記画像のように、投稿されたコメントと同じ内容を配信画面にも透過して映し出すことができるようになります。

これだと、例えばフルスクリーンで視聴する人にもコメントを読んでもらえますし、配信画面にも変化がでるので、配信者としても個性を出すことができます。

今回はそのやり方を見ていきましょう。

OBS Studioの機能だけで簡単にチャット表示!CSSでデザインを変えられる

2018_03_23_1_3

Youtube Liveのコメントを配信画面に映し出すのは、配信ソフトウェアとして有名な「OBS Studio」を使っていれば簡単にすることができます。

以下はOBS Studioを使っての解説となります。

まず自分のYoutubeアカウントのダッシュボードへアクセスしてください。
https://www.youtube.com/dashboard

ダッシュボードから【ライブストリーミング】へ進み、チャットの【…】という部分をクリックします。

上記画像のようにメニューが表示されますので、そこにある【チャットをポップアウト】を選んでください。

2018_03_23_1_4

そうするとコメントチャット部分だけが別のウィンドウで表示されますので、ここで出てきたコメントウィンドウのURLをコピーします。

必要なのはこのURLだけですので、ポップアウトされたウィンドウは消して大丈夫です。

2018_03_23_1_2

次にOBS側の設定です。

まずソース部分で右クリックから、

【追加】→【BrowserSource】→【新規作成】

を選択してください。名前は自分のわかりやすいものにしましょう。ここでは「YoutubeLiveコメント」としてみました。

2018_03_23_1_5

次にプロパティ画面が開きますので、ここのURLという部分に先ほどコピーしたYouTubeライブコメントのURLを貼り付けてください。

Width(幅)とHeight(高さ)は好きな大きさに設定しましょう。

2018_03_23_1_6

【OK】を押すと配信プレビュー画面にポップアウトしたコメント欄と同じものが表示されると思います。試しにYoutubeLiveで何かコメントをしてみましょう。

上記画像のようにプレビュー画面にも同じコメントが映るはずです。

これでリアルタイムにチャット部分を表示させることができるようになりましたが、このままだとコメント画面が目立ちすぎてせっかくの配信が台無しです!

そこで先ほどのプロパティ画面にあった【CSS】という項目の出番です。

CSSは「カスケーディング・スタイル・シート」の略称で、HTMLと組み合わせて使用する言語のことを言います。

要するにデザインのコードを記述すれば自分好みに自由に外見を変えることができるわけですね。

もちろん自分で全部書いても良いのですが、「面倒くさい!」「難しいことはわからない!」という方が大半のはずなので、便利なツールを使わせてもらいましょう。

Chat v2.0 Style Generator : https://chatv2.septapus.com/

2018_03_23_1_7

この「Chat v2.0 Style Generator」はフォントやカラー、アニメーションなどの設定を選んでいくだけで、自動でCSSを生成してくれるとても便利なサイトです。

一通り設定項目を弄ったら、一番下にある「CSS」の部分をすべてコピーして、先ほどOBSに追加したソースプロパティのCSSへ貼り付けてください。

2018_03_23_1_8

OKを押すと、コメントチャット部分の枠が透過されて、テキストとアイコン部分だけが設定したとおりに表示されているはずです。

これなら配信画面に溶け込んでくれますね。

画像などを組み合わせてオリジナリティを出そう!チャットコメント部分もひとつの映像コンテンツになる

2018_03_23_1_9

チャットコメントを配信映像に取り込んで表示させると、リスナーさんのコメント自体がひとつの映像コンテンツになるのが面白いです。

具体例として、上記画像は私がFF14というゲームをプレイしているときのYoutubeLive映像です。リスナーさんのコメントが左下に表示されているのがわかりますね。

本来はゲーム内のチャット欄が左下にあるのですが、そこに背景画像とYoutubeLiveのコメントを重ねて表示させることで、コメントを動画化すると共にゲーム内チャットを隠す役割を持たせています。(PT参加者のプライバシー保護の観点などから)

コメントが映像に合わせて更新されていくので、チャットリプレイと違って動画だけでどのような反応があったのかわかるようになるのがメリットですね!

また、あわせてYoutubeLiveのコメント読み上げなどを導入するとさらにリッチなコンテンツ化を図れます。

YouTubeLiveで配信しているとやはり欲しくなるのがコメント読み上げ機能。棒読みちゃんを使って音声読み上げをするやり方についてです。 ...

CSSを弄れば大きさやフォント、カラーなどを自由に変えられるので、背景画像を合わせれば自分だけのコメント表示部を作ることができます。

一目で「あの配信者さんだ!」とわかるように個性を出すこともできますから、色々組み合わせてデザインしてみましょう!

スポンサーリンク