配信をしている際に視聴者からいただいたコメントを自分の配信画面でも表示したいと思う方も多いのではないでしょうか？

視聴者とのリアルタイムなコミュニケーションは配信を盛り上げる重要な要素です。しかし、コメント欄を別ウィンドウで確認しながら配信するのは、操作が煩雑になりがちです。

そこで本記事では、OBS Studioを用いて、コメントを配信画面に直接表示する方法を分かりやすく解説します。様々なカスタマイズ方法も紹介することで、あなただけの配信画面を実現するお手伝いをします。

OBS Studio単体で配信画面にコメントを表示させる方法

OBS Studio単体でも、配信画面にコメントを表示させることが可能です。設定は比較的簡単で、ブラウザソースを利用する方法が便利です。

OBS Studioにはブラウザソースという機能が備わっており、これを使用することでWebページの内容を配信画面に表示できます。ここでは、YouTube Liveのコメント表示方法を中心に解説します。

YouTube Liveのコメントの表示方法

OBS Studio単体でYouTube Liveのコメントを表示させるためには、YouTube LiveのコメントもWebページとして表示できるので、この方法を利用すればOBS Studio単体でコメントを表示できます。

具体的な手順は以下の通りです。

1. YouTube Liveの配信画面を開き、チャットをポップアウトします。
2. ポップアウトしたチャットのURLをコピーします。
3. OBS Studioのソースに追加ボタンをクリックし、「ブラウザ」を選択します。
4. 表示されたウィンドウにコピーしたURLを貼り付けます。
5. 幅と高さを調整し、配信画面にコメントを表示させます。

項目	説明
URL	コピーしたチャットのURL
幅	配信画面に表示するコメント欄の幅
高さ	配信画面に表示するコメント欄の高さ
カスタム CSS	コメント欄のデザインを変更する場合にCSSを記述

上記の設定を行うことで、YouTube LiveのコメントをOBS Studioの配信画面に表示できます。表示位置やサイズも自由に調整可能です。さらに、カスタムCSSを利用することでコメント欄のデザインをカスタマイズすることもできますので、続けて解説していきます。

コメントの表示位置やサイズをCSSでカスタマイズしよう

OBS StudioでYouTube Liveのコメントを表示する際、単に表示するだけでなく、配信画面の見栄えを良くするために、コメントの表示位置やサイズ、CSSでのカスタマイズが重要になります。

• 表示位置とサイズ調整の基本
  :まず、OBS Studioのソースに追加した「ブラウザ」ソースを選択し、配信画面上でドラッグ＆ドロップすることで、コメント表示位置を自由に調整できます。また、ソースのプロパティにある「幅」と「高さ」の数値を変更することで、表示サイズを調整できます。配信画面のレイアウトや他の要素とのバランスを見ながら、最適な位置とサイズを見つけましょう。

• カスタムCSSで高度なカスタマイズをしよう
  :さらに、カスタムCSSを利用することで、フォントの種類、サイズ、色、背景色、コメントの枠線など、より細かいカスタマイズが可能です。

項目	説明
フォント	コメントのフォントの種類、サイズ、色などを変更できます。
背景	コメント欄全体の背景色や透明度を調整できます。
枠線	コメントの周りの枠線の有無、色、太さを設定できます。

カスタムCSSは、インターネット上で公開されているジェネレーターサイトを利用することで、簡単に作成できます。これらのサイトでは、視覚的に設定を変更しながら、リアルタイムでCSSコードが生成されるため、プログラミングの知識がなくても利用できます。

カスタムCSSを適用するには、ブラウザソースのプロパティにある「カスタムCSS」欄に、生成されたコードを貼り付けましょう。これらのカスタマイズを駆使することで、配信画面全体の雰囲気に合わせた、見やすく魅力的なコメント欄が作成できます。

ただし、OBS Studio単体でのコメント表示は、機能が限定的である点に注意が必要です。高度なカスタマイズやコメントの管理機能を求める場合は、後述するChat Style Generatorなどの外部ツールとの連携を検討してみてください。

OBS StudioとChat v2.0 Style Generatorを使って配信画面にコメントを表示させる方法

OBS Studio単体でのコメント表示よりもさらに高度なカスタマイズをしたい方は、外部ツールと連携させてコメントを表示させましょう。ここでは、OBS StudioとChat v2.0 Style Generatorを組み合わせて配信画面にコメントを表示させる方法を解説します。

Chat v2.0 Style Generatorとは？

Chat v2.0 Style Generatorは、YouTube Liveのチャット欄をカスタマイズするためのツールです。配信画面に表示するチャットの見栄えを、自分の好みに合わせて細かく調整することができます。難しいプログラミングの知識は不要で、Webサイト上で設定を行うだけで、CSSと呼ばれるスタイルシートを自動生成してくれます。

このツールを使用することで、以下のようなカスタマイズが可能です。

カスタマイズ項目	説明
背景の透明化	チャット欄の背景を透明にすることで、配信画面の映像を邪魔することなくコメントを表示できます。
フォント変更	コメントのフォントの種類やサイズを変更できます。配信の雰囲気に合わせて、見やすいフォントを選ぶことができます。
アイコン・バッジの非表示	ユーザーアイコンやメンバーシップバッジなどを非表示にすることで、チャット欄をシンプルに表示できます。
ユーザー名の非表示	コメント投稿者のユーザー名を非表示にすることができます。
チャット欄のサイズ調整	チャット欄の幅や高さを調整することで、配信画面に最適なサイズで表示できます。

これらの設定項目を自由に組み合わせることで、配信画面に最適なチャット表示を実現できます。使い方はシンプルで、Webサイト上で設定を行い、生成されたCSSをOBS Studioなどの配信ソフトウェアにコピー＆ペーストするだけで適用されます。

OBS StudioとChat v2.0 Style Generatorの連携方法

OBS StudioとChat v2.0 Style Generatorの連携は、以下の手順で行います。

1.Chat v2.0 Style Generator をWebブラウザで開きます。

2.サイト上で、コメント表示のデザインを設定します。

• フォント：種類、サイズ、色、太さなどを変更できます。
• 背景：色、透明度、画像を設定できます。
• アイコン：ユーザーアイコンの表示/非表示、種類を選択できます。
• アニメーション：コメント表示時のアニメーション効果を設定できます。
• その他：コメントの表示位置、パディング、マージンなどを調整できます。 設定画面右側にはプレビューが表示されるので、リアルタイムで変更を確認しながら調整できます。

3.デザイン設定が完了したら、ページ下部に表示される「CSS」と書かれたボタンをクリックして、CSSコードをコピーします。

4.OBS Studioを開き、ソースに追加ボタン(+)をクリックし、「ブラウザ」を選択します。新しいウィンドウが開きますので、「URL」の項目は空欄のまま、「カスタムCSS」欄にコピーしたCSSコードを貼り付けます。「OK」をクリックしてウィンドウを閉じます。

5.OBS Studioの配信画面に、カスタマイズしたデザインのコメントが表示されます。表示されない場合は、ブラウザソースのプロパティを確認し、CSSが正しく適用されているか確認してください。

Chat v2.0 Style Generatorは、ブラウザソースでCSSを適用するだけなので、導入が簡単です。OBS Studioと連携させることで、視聴者にとって見やすく、配信の雰囲気に合ったコメント欄を作成できます。

Chat v2.0 Style Generatorのデザイン設定

Chat v2.0 Style Generatorでは、配信画面に表示するコメントのデザインを細かく設定できます。具体的には、以下のような項目を調整可能です。

• フォントの種類、サイズ、色
• 背景色、透過率
• コメントの表示位置、アニメーション
• ユーザー名、タイムスタンプの表示形式
• 絵文字の表示/非表示

これらの設定項目は、CSSという言語で記述されています。CSSの知識があれば、さらに高度なカスタマイズも可能です。

Chat v2.0 Style Generatorでは、設定項目を調整することで、配信画面の雰囲気に合わせて自由にコメントデザインを変更できます。例えば、以下のようなデザインを作成できます。

• シンプルで見やすいデザイン
• アニメーションでコメントを目立たせるデザイン
• 配信画面のテーマカラーに合わせたデザイン

設定項目の変更はリアルタイムでプレビューに反映されるため、手軽にデザインを確認しながら調整できます。作成したデザインは、CSSコードとしてコピーし、OBS Studioに貼り付けることで利用できます。

項目	説明
フォント	コメントのフォントの種類、サイズ、色などを設定できます。
背景	コメントの背景色、透過率などを設定できます。
アニメーション	コメントの表示アニメーションを設定できます。
レイアウト	コメントの表示位置などを設定できます。
名前/タイムスタンプ	ユーザー名、タイムスタンプの表示形式を設定できます。
絵文字	絵文字の表示/非表示を設定できます。

OBSのコメント表示方法や外部ツールの選択基準について気になる方は次の記事も参考にしてください。

【配信者必見】OBSのコメント表示方法｜外部ツールの選択基準も

また、OBSと連携して利用できるAlive Studioでは、コメント表示を含む配信画面を簡単にデザインすることができます。気になる方はこちらもチェックしてみてください。

Alive Studio | 豊富な素材で配信画面をお手軽・簡単デザイン

コメント表示が遅延してしまう時の対策

配信にコメントを取り入れることは、視聴者との一体感を高め、インタラクティブな配信を実現できます。しかし、コメント表示に遅延が発生すると、せっかくの視聴者のリアルタイムな反応を拾えず、配信のテンポが悪くなってしまう可能性があります。

コメント表示の遅延は、主に以下の３つの原因が考えられます。

1. ネットワークの遅延：配信プラットフォームのサーバーとの通信遅延、視聴者のインターネット環境など、ネットワークの遅延がコメント表示の遅延に影響します。
2. 配信ソフトウェアの設定：OBS Studioなどの配信ソフトウェアの設定によっては、コメントの受信や表示に遅延が発生する場合があります。
3. コメント処理ツールの負荷：Chat Style Generatorのような外部ツールを使用する場合、ツールの処理能力が追いつかず、コメント表示が遅延することがあります。

これらの遅延を最小限に抑えるために、以下の対策を参考にしてみてください。

対策	説明
ネットワーク環境の改善	安定した高速インターネット回線を使用する。有線接続を優先し、Wi-Fiを使用する場合は電波干渉の少ない環境を確保する。
配信ソフトウェアの設定見直し	OBS Studioの設定で、ビットレートやエンコーダーを適切に設定し、PCへの負荷を軽減する。低遅延配信モードを利用する。
コメント処理ツールの最適化	Chat Style Generatorの設定を見直し、必要最低限の機能のみを使用する。PCのスペックに余裕がある場合は、より高性能なPCへの乗り換えを検討する。

OBS Studioでのコメント表示に関する注意点

OBS Studioでコメントを表示する際に、遅延以外にもいくつかの気をつけておきたい注意点があります。快適な配信環境を維持し、視聴者も配信者も楽しめる配信にするために、以下の点に気をつけましょう。

• 配信画面の視認性
  ：コメントを画面に表示する際は、ゲーム画面や配信者の映像を遮らないように配置やサイズに配慮する必要があります。コメントで画面が見づらくなってしまうと、視聴体験を損ね、配信本来の目的が達成できなくなってしまいます。視認性を確保するために、コメント表示エリアの調整や透過度の設定などを活用しましょう。

• 適切なコメントモデレーション
  :不適切なコメントは配信の雰囲気を壊し、他の視聴者の不快感につながる可能性があります。配信を円滑に進めるためには、不適切なコメントを削除したり、特定のユーザーをブロックするなど、適切なコメントモデレーションを行うことが重要です。

• CPU負荷の管理
  ：OBS Studioでコメントを表示する機能は、PCに一定の負荷をかけます。PCのスペックが低い場合、コメント表示機能によって配信が不安定になる可能性があります。配信が遅延したり、画質が低下するといった問題を防ぐために、PCの負荷状況を常に監視し、必要に応じて設定を調整しましょう。

快適な配信環境を維持するために、これらの注意点に留意し、視聴者も配信者も楽しめる配信を目指しましょう。

コメント表示ができたら、次は？

コメント表示ができたら、次は配信画面全体のデザインにもこだわってみませんか？
配信画面デザインサービス「Alive Studio」なら、直感的な操作で、あっという間にあなたらしい配信画面が完成します。

• VTuber向け素材制作チーム「うさねこメモリー」提供の背景・小物素材が1,000種類以上使い放題！
• 音楽素材サイト「魔王魂」提供のBGMが100曲以上使い放題！
• お題ルーレット・カウンター機能搭載！
• 全機能使えて、月額980円（税込）！

「配信をもっと個性的にしたい！」「見やすく整った配信画面にしたい！」
そんな方は、ぜひ「Alive Studio」をお試しください。

＼ まずは無料お試し7日間！あなたの配信をワンランクアップ！ ／