【Twitch配信者必見】OBSでコメントを表示させる4つの方法

Index

Twitch配信で「コメントをおしゃれに表示したいけれど、OBSやCSSの設定が難しい」と悩んでいませんか?

結論から言うと、初心者でも手軽にTwitchコメントをデザインして配信画面に表示できます。

本記事では、OBSを使ったTwitchコメント表示の基本から、かわいくカスタマイズする方法、さらには便利なツールを活用した設定手順までを詳しく解説します。

この記事を読めば、Twitchのコメントを視聴者にとって見やすく、かわいくおしゃれに表示する方法がわかり、すぐに実践できるようになるでしょう。

ぜひ最後までご覧ください。

OBSでTwichのコメントを表示させる4つの方法

Twitch配信でコメントを画面に表示することは、視聴者とのリアルタイムな交流を深めるために欠かせません。

OBS Studioでは、以下の4つの方法でコメントを表示できます。

  • ブラウザソース
  • Streamlabs
  • CastCraft
  • Twitch Studio

自分に合ったTwitch配信方法を選ぶことで、視聴者ともっと近い距離感で交流でき、配信をさらに楽しめるでしょう。

なお、OBS Studioの使い方がわからない初心者の方は、以下の記事を先に読むことをおすすめします。

≫OBS Studioの使い方超入門ガイド!初心者向けに基本操作から配信・録画方法まで解説!

OBSのブラウザ機能を使ったTwitchのコメント表示|透過&かわいいデザインが可能

OBS Studioのブラウザ機能を使えば、Twitchのコメント表示を画面に手軽に追加できます。

さらに、透過やかわいいデザインにカスタマイズすることで、配信画面をより魅力的に演出することが可能です。

具体的な手順は、以下のとおりです。

  • Twitchのチャットをポップアウト表示する
  • OBSでブラウザソースを設定する
  • カスタムCSSでデザインを変更する

それぞれ見ていきましょう。

Twitchのチャットをポップアウト表示する

まず、Twitchのコメント欄をポップアウトさせ、専用URLを取得します。

専用URLを使うことで、OBSに気軽にコメント表示を設定できるため、準備がスムーズです。

OBSでブラウザソースを設定する

OBS Studioを立ち上げ、コメントを表示したいシーンを選びます。まずは、ソース欄の下にある「+」ボタンをクリックしましょう。

OBSでブラウザソースを設定する①

リストからブラウザを選択して新しいソースを作成してください。

OBSでブラウザソースを設定する②

設定画面が表示されたら、コピーしておいたTwitchのコメントポップアウトURLをURL欄に貼り付けてください。

OBSでブラウザソースを設定する③

プレビュー画面で位置と大きさを確認しながら、配信画面に合うように微調整を行いましょう。

OBSでブラウザソースを設定する④

カスタムCSSでデザインを変更する

OBS Studioのブラウザソースを使うと、CSSを利用してコメント欄を透過やかわいいデザインに変更できます。

吹き出し型など、さまざまなスタイルにカスタマイズ可能です。

テンプレートを活用すれば、初心者でも手軽に設定できるでしょう。

なお、当サイトでは、配信画面におけるデザインの基本や視聴者を惹きつける魅力的な画面作りのコツを紹介しています。

視聴者の満足度を高め、配信を盛り上げたい方は、ぜひ参考にしてください。

≫VTuberの配信画面の作り方|デザインの基本と魅力的に設定するコツ

OBSのStreamlabsを使ったTwitchのコメント表示

Streamlabsは、Twitchのコメント表示だけでなく、フォロワーやサブスクリプション通知の表示もできる多機能なWebサービスです。

Streamlabsを使うと、コメント欄のデザインをカスタマイズし、視聴者にとってわかりやすくおしゃれな表示を作れます。

以下の手順で設定を進めていきましょう。

  • Streamlabsにログインする
  • チャットボックスを編集する
  • OBSをブラウザソースで表示する

以下でそれぞれ見ていきます。

Streamlabsにログインする

最初に、Streamlabsの公式サイトを開き、Twitchアカウントでサインインします。

無料プランを選択するだけで、コメント欄の表示機能や基本的な設定をすぐに利用可能です。

アカウントの連携が完了すると、必要な機能が有効になり、次のステップに進めます。

チャットボックスを編集する

Streamlabsのメニューから「すべてのウィジェット」を選び「チャットボックス」を開きましょう。

Twitchのコメント欄のデザイン・フォント・色・アニメーションなどを自由にカスタマイズできます。

設定を終えたら、配信画面に表示するためのウィジェットURLをコピーし次の手順に進んでください。

OBSをブラウザソースで表示する

OBS Studioを起動し、使用するシーンを選択します。ソースパネルの「+」ボタンをクリックしましょう。

OBSをブラウザソースで表示する①

「ブラウザ」を追加して新しいソースを作成します。

OBSをブラウザソースで表示する②

コピーしたウィジェットURLを貼り付けてください。

OBSをブラウザソースで表示する③

幅や高さを調整することで、Twitchのコメントを配信画面に適切に表示できます。

OBSをブラウザソースで表示する④

CastCraftを使ったOBSでのTwitchコメント表示

CastCraftは、オーバーレイ機能とScreen機能の2種類を活用することで、コメントを表示できます。

具体的には、以下に沿って解説していきます。

  • CastCraftをセットアップする
  • オーバーレイ機能を使ってコメントを表示する方法
  • Screen機能を使ってコメントを表示する方法
  • ポップアップ型のコメントを表示する方法
  • コメントを横流しで表示する方法(ニコニコ風スタイル)
  • コメントに反応してエフェクトを追加する方法

それぞれ見ていきましょう。

CastCraftをセットアップする

CastCraftを使用するための初期設定は、以下の手順で行います。

  • CastCraftアプリをダウンロードしてインストール
  • アカウントにログインする
  • モデレータ権限を付与する

CastCraftアプリをダウンロードしてインストール

公式サイトからCastCraftアプリをダウンロードしましょう。

ダウンロードが終わったら、ダウンロードしたファイルを開き、画面の案内に従って操作すればインストールが完了します。

アカウントにログインする

CastCraftを起動後「ログイン」ボタンをクリックし、Twitchの配信に使用するアカウント情報を入力後、ログインしましょう。

モデレータ権限を付与する

Twitchアカウントの配信マネージャーを開き「自分のチャット」欄に「/mod castcraftbot」と入力して送信してください。

これで、CastCraft Botにモデレータ権限を付与できます。

オーバーレイ機能を使ってコメントを表示する方法

オーバーレイ機能を利用したコメント表示は、以下の手順で進めましょう。

  • コメントボックスの設定をカスタマイズ
  • URLをコピーしてOBSに設定する
  • コメントをLive Dashboardで同期させる

コメントボックスの設定をカスタマイズ

まずは、CastCraftで「オーバーレイを作成」を選び、チャットボックスを追加します。

フォントや色、背景デザインを自分好みに調整し、変更内容を保存しましょう。

URLをコピーしてOBSに設定する

オーバーレイの設定が完了したら、生成されたURLをコピーします。

次に、OBSを起動し、画面左下の「+」ボタンをクリックしてソースを追加。

リストから「ブラウザ」を選択し、新しいソースとして作成してください。

ソース設定のウィンドウが開いたら、URL欄に先ほどコピーしたオーバーレイURLを貼り付けます。

コメントボックスの幅や高さを調整し、自分の配信画面に最適なサイズに設定してください。

「OK」をクリックすると、コメント欄が配信画面に表示されます。

URLをコピーしてOBSに設定する

コメントをLive Dashboardで同期させる

CastCraftのLive Dashboardを起動し、配信データとコメントを同期させると、リアルタイムでコメントが配信画面に反映されるようになります。

Screen機能を使ってコメントを表示する方法

Screen機能は、OBSでTwitchコメントを表示するための便利な手段で、デザインのカスタマイズ性が高いのが特徴です。

以下の手順に沿って設定しましょう。

  • Screenをインストールする
  • ScreenをOBSに取り込む
  • 試運転モードで確認する
  • デザインを細かく調整する
  • 「Screen」を起動後、コメントをLive Dashboardで同期させる

Screenをインストールする

Screen機能を使うには、まずCastCraftアプリ内のScreenタブから事前にインストールが必須です。

ダウンロードしたファイルを開き、画面の指示に従ってセットアップを進めましょう。

セットアップが完了したら、Screenタブを起動して機能が正しく動作していることを確認します。

初回の起動時には多少時間がかかる場合があるので、焦らず待ちましょう。

ScreenをOBSに取り込む

OBSを起動し、ソースを追加する際に「映像キャプチャデバイス」を選択します。

次に、表示されるデバイスリストから「CastCraft Screen」を選び、画面への表示を設定してください。

ScreenをOBSに取り込む

試運転モードで確認する

Screenの「キャストモード」を選び、デモメッセージを表示する設定を「オン」にしましょう。

画面上のコメントをクリックすると、別の位置にピックアップして表示できます。

コメントの見え方や動作を事前に確認しておいてください。

デザインを細かく調整する

画面上部にある「クラフトモード」を選択すると、コメントボックスやピックアップエリアのサイズ、位置、デザインを自由に編集できます。

コメントが流れるエリアを指定するのが「チャットボックス」、選択したコメントを固定表示する場所を示すのが「ピックアップ出現エリア」です。

プレビュー画面では、緑色の枠をドラッグして、ウィジェットの大きさや配置を直感的に調整できます。

さらに、「ウィジェット設定」タブの「+」ボタンをクリックして新しいウィジェットを追加可能です。

各ウィジェットの設定画面では、テンプレートを活用したり、細かいデザインを自分で作成できます。

「デモメッセージを流す」機能をオンにすることで、デザインを確認しながら調整を進められます。

調整が完了したら、プリセットとして保存可能です。

「Screen」を起動後、コメントをLive Dashboardで同期させる

配信前にCastCraftのScreenタブを開いてScreen機能を起動します。

その後、Live Dashboardを立ち上げ、配信データとコメントを同期させましょう。

この設定を行うことで、リアルタイムでTwitchのコメントが配信画面に反映されるようになります。

ポップアップ型のコメントを表示する方法

クラフトモードを利用して「チャットポップアップ」ウィジェットを設定することで、特定の場所にポップアップ形式でコメントを表示できます。

「チャットポップアップ」を使えば、視聴者のコメントを強調したり、配信イベントに合わせて目立つ演出を加えることが可能です。

ウィジェットのサイズや配置は調整可能なので、配信のレイアウトに合わせてカスタマイズしましょう。

コメントを横流しで表示する方法(ニコニコ風スタイル)

CastCraftを使えば、ニコニコ動画のようにコメントが画面上を横に流れるスタイルを設定することが可能です。

具体的な手順は、以下のとおりです。

  • 流れる文字を設定する
  • 条件に応じたコメントを表示する
  • 「Screen」を起動後、コメントをLive Dashboardで同期させる

流れる文字を設定する

まずは、CastCraftのScreenタブから「流れる文字」ウィジェットを追加しましょう。

ウィジェットを利用すると、コメントが横に流れるように表示され、ニコニコ風の演出を実現できます。

条件に応じたコメントを表示する

インタラクション設定を活用し、特定の条件を満たすコメントだけを横流しにする設定が可能です。

例えば、すべてのコメントを流す、または特定のキーワードを含むコメントのみを流すようにカスタマイズできます。

「Screen」を起動後、コメントをLive Dashboardで同期させる

配信開始前にScreenを起動し、Live Dashboardを使ってコメントを同期させると、横流し形式のコメントを表示できます。

コメントに反応してエフェクトを追加する方法

CastCraftでは、特定のコメントに反応して画面上にエフェクトを表示する設定が可能です。

以下の手順で設定を進めてください。

  • インタラクションを作成する
  • 条件にもとづいたエフェクト表示を設定する
  • 「Screen」を起動後、コメントをLive Dashboardで同期させる

インタラクションを作成する

まずはScreenタブで「クラフトモード」に切り替え、インタラクション設定を開きます。

ここで、コメントに反応するエフェクト(例:ペンライト)を作成します。

条件にもとづいたエフェクト表示を設定する

インタラクションの条件設定で、特定のチャットメッセージが含まれる場合にエフェクトが出るように設定しましょう。

例として「こんにちは」というメッセージを条件に設定すれば、この言葉に反応してエフェクトが表示されます。

「Screen」を起動後、コメントをLive Dashboardで同期させる

配信開始前にScreenを起動し、Live Dashboardでコメントを同期すると、エフェクト付きのコメント演出をリアルタイムで配信画面に反映できます。

Twitch Studioを活用したOBSでのコメント表示

Twitch Studioは、Twitch専用の配信ツールで、初心者でも気軽にコメント表示や配信設定を行えます。

以下の手順でコメント表示を設定してみましょう。

  • Twitch Studioをダウンロードしてログイン

公式サイトからTwitch Studioをダウンロードし、インストールします。

インストール後、Twitchアカウントでログインしてください。

  • 配信シーンを編集

配信プレビュー画面で、コメントを表示させたいシーンを選びます。

「編集」または「シーンを編集する」を選択して、設定画面を開きましょう。

  • チャットレイヤーをカスタマイズ

レイヤー欄にある「チャット」を選び、サイズや位置、枠の色を調整します。

「テストメッセージを追加」を使うと、プレビューでコメントの見え方を確認しながら調整可能です。

  • 設定を保存して完了

すべての設定を調整したら「保存」をクリックして設定を完了します。配信画面にコメントが表示されるようになります。

Twitch Studioを使えば、シンプルな操作でコメント表示を含めた配信画面のデザインを手軽に設定できるでしょう。

OBSでTwitchコメント表示ができない場合の原因と対処法

OBSでTwitchコメントが表示されない場合、基本的なポイントを確認することで解決できることがあります。

以下に原因と対処法を簡潔にまとめました。

原因対処法
ログインアカウントの問題Twitchアカウントで正しくログインし直す
ソースの順序が不適切OBS内で「ブラウザ」ソースを最上位に配置する
コメントが枠外にある「ブラウザ」ソースの幅と高さを調整する
設定が保存されていないStreamlabsで「SAVE SETTINGS」をクリックする
セキュリティソフトの干渉セキュリティソフトを一時的に無効化する

上記のポイントを順番に確認し、必要な設定を見直すことで、コメント表示のトラブルを解消できる可能性があります。

それでも解決しない場合は、他のツールや設定方法を試すのも有効です。

まとめ

本記事では、OBSを使ったTwitchのコメント表示方法について解説してきました。

TwitchコメントをOBSで表示することで、視聴者とのコミュニケーションを円滑にし、配信画面を個性的にカスタマイズできます。

また、ブラウザソースやStreamlabs、CastCraft、Twitch Studioのようなツールを活用することで、初心者でも気軽に設定が可能です。

本記事を参考に、自分のスタイルに合った方法でコメント表示を設定し、魅力的な配信を始めてみましょう。

この記事を書いた人

               

ストマガ編集部

「ストリーマーマガジン」は、VTuberや配信クリエイターに興味がある方、ご自身でも活動されている方、そしてこれから配信をはじめてみたい方を応援するWebメディアです。 配信初心者さんからベテランさんまで、幅広く楽しめる情報をお届けします。

Share