OBS StudioでTwitchのコメントを表示させる方法を解説!カスタマイズ方法も紹介

最終更新 2024-04-22
OBSでTwitch配信のコメント表示

目次

OBS StudioでTwitchのコメント欄を表示する方法一覧

OBS Studioを利用し、コメント欄を表示させる方法は複数あり、どれにしようか悩みますよね。
OBS StudioでTwitchのコメント欄を、配信画面に表示させる方法は主に4つあります。
1. CastCraftを利用する
2. OBSにて直接表示させる
3. Streamlabsを利用する
4. Twitch Studioを利用する
本記事では、コメント欄を表示させる4つの方法について徹底解説します。

また、ニコニコ動画のように画面上にコメントを流すなど、カスタマイズしたコメント表示方法もあわせて解説します。

本記事の内容を踏まえて自分好みの配信を目指しましょう。

方法①:CastCraftでTwitchのコメントをOBSに表示する

Twitchに対応したコメント管理ツールのCastCraftを導入することで、さまざまな見た目のコメント欄を作ってOBSに表示することができます。

CastCraftには、OBSに何かを出力する方法として

  • オーバーレイ(Win/Mac共に対応)
  • Screen(Winのみに対応)

という二つの機能があります。

二つに共通した導入方法を解説した後、それぞれの設定方法について詳しく解説していきます。

0. CastCraftの導入

0-1.CastCraftデスクトップ版をインストール

まずはCastCraft公式サイトにアクセスし、CastCraftのデスクトップアプリをダウンロードしてください。

CastCraftをダウンロード

ダウンロードしたファイルをダブルクリックすると、インストールがはじまります。

0-2.ログイン

CastCraftを起動したら、「CastCraftにログイン」ボタンを選択してログインしましょう。
Twitchで配信を行うアカウントでログインしてください。

ログイン時に「不明なエラー」等が表示されてログインできない場合  

0-3.モデレータ追加

CastCraftの「Twitch」タブに切り替えて、お使いのTwitchアカウントの配信マネージャーが表示されていることを確認しましょう。
配信マネージャー右側の 「自分のチャット」という欄に下記のチャットを打ち込んで送信しましょう。

/mod castcraftbot

これにより、CastCraftのbotがTwitchのモデレータに設定されます。

1.CastCraftのオーバーレイでコメント欄を出力する方法

1-1.「オーバーレイ」からチャットボックスを選択し、フォント等を設定

右上の「+オーバーレイを作成する」をクリックし、「チャットボックス」を選択します。 一番上にプレビューが表示されます。テーマ・文字の設定等を完了して右上の「保存する」をクリックすると、オーバーレイ一覧に保存されます。
⑬CastCraft操作

1-2.オーバーレイURLをコピーしてOBSにペースト

設定が完了したらオーバーレイURLをコピーします。
プレビュー用URLを使用することで実際に配信をしなくてもコメントが流れていくので、配信前に確認したい場合はこちらを使用しましょう。
⑭CastCraftコメント

OBSを開き、ソース左下の+から「ブラウザ」を選択します。
⑮CastCraftOBSプロパティ

ブラウザのプロパティの「URL」にCastCraftでコピーしたURLを貼り付け、OKを押します。

CastCraftで設定したコメント欄が表示されたら設定完了です。 高さや幅はブラウザのプロパティで後からでも変更可能です。
変更したら再読み込みをすると設定が反映されます。

OBSにコメントを表示する方法|YouTube/Twichの配信画面にコメント欄を表示させる

1-3.Live Dashboardで配信に接続

「Live Dashboard」タブでコメントを取得することで、OBSにコメントが表示されます。

初めの一歩:YouTube/Twitch用のコメビュでデータ蓄積

2.CastCraftのScreenでコメント欄を出力する方法

次に、Screen機能でコメント表示する方法を解説します。
触れるコメビュ

2-1.Screen機能のインストール

Screen機能を使うには追加のインストールが必要です。 CastCraftのScreenタブからダウンロード後、ダウンロードフォルダ内のインストーラをダブルクリックして導入してください。

その後、CastCraftのScreenタブにてScreen機能が正常に起動したらインストール成功です。
(※初回の起動には時間がかかります)

2-2.ScreenをOBS等に追加

OBS等にて「映像キャプチャデバイス」(もしくは「ビデオキャプチャデバイス」)ソース を追加し、デバイス選択で「CastCraft Screen」を選択(下図)
OBS_video_capture_device

映像キャプチャデバイスに「CastCraft Screen」の表示がされない方は、NDI経由でOBSに出力する方法をお試しください。

2-3.キャストモードで試運転

上部のバーを「キャストモード」にします。
キャストモード

「デモメッセージを流す」と言うトグルをONにしてみてください。配信中のコメントが画面上にどのように表示されるかが見られます。
デモメッセージを流す   

流れているコメントをScreen上でクリックしてみましょう。そのコメントが画面上の別の場所にピックアップ表示されます  

2-4.クラフトモード

上部のバーを「クラフトモード」にすれば、「チャットボックス」「ピックアップ」ウィジェットの大きさや位置、デザインのカスタマイズができます。
クラフトモード

  • 「チャットボックス」はコメントが流れる場所を示します
  • 「ピックアップ出現エリア」はチャットボックス内でコメントをクリックしたときに、そのコメントが固定表示される場所を示します

プレビュー表示の緑色の囲い枠を使って、各ウィジェットの位置と大きさを調整します。
ウィジェットの位置と大きさ   

ウィジェットが無い場合「ウィジェット設定」タブの「+」ボタンからウィジェットを追加できます

ウィジェット設定

2-5.ウィジェットのデザイン

「ウィジェット設定」タブを選択します。
ウイジェット設定

各ウィジェットの「設定」ボタンを押すとデザインが詳細に設定できます
ウィジェット一覧‗設定   

自分で一からデザインすることもできますし、「プリセット選択」というドロップダウンメニューを押すと既存のいくつかのデザインを選択することも可能です。
プリセット選択

「チャットボックス」ウィジェットの「チャットアイテム設定」をカスタマイズするときは、「デモメッセージを流す」をONにしておくとデザインを反映させながら設定を作れます
チャットアイテム設定

左側のプレビューを見ながら設定をカスタマイズし、自分なりのデザインが完成したら、新しいプリセットとして保存できます。
プリセット保存

2-6.配信前にScreenを起動

配信前には、CastCraftのScreenタブをクリックして起動を完了させましょう。

2-7.Live Dashboardで配信に接続

「Live Dashboard」タブでコメントを取得することで、OBSにコメントが表示されます。

Screenでコメント表示を設定|「触れるコメビュ」を実現する

3.ポップアップする見た目を実現する方法

CastCraft Screenの「チャットポップアップ」ウィジェットを使えば、特定の位置でポップアップする見た目のコメント欄を表示させることも可能です。
チャットポップアップ・イメージ

チャットポップアップ

4.ニコニコ風にコメントを流す方法

CastCraft Screenの「流れる文字」ウィジェットを使えば、ニコニコ風に流れるコメント弾幕を作ることも可能です。

Twitchでニコニコ風にコメントを表示させる方法!アーカイブでの表示方法も解説

4-1.「流れる文字」のインタラクション設定

CastCraftのアプリ内で「Screen」タブをクリックし、Screenを起動します。
(※初回の起動には時間がかかります)
起動が完了したら、上部のバーを「クラフトモード」にします。
クラフトモード

「インタラクション設定」タブを選択します。
インタラクション設定

「インタラクション設定」から「流れる文字」をの設定画面を開きます。

4-2.チャットに反応する条件を設定

「チャットに反応する条件」を「総チャット回数が1以上のとき」にすると、投稿されたコメントすべてが横流し表示になります。

6-流れる文字 条件設定

この際、条件設定をカスタマイズすることで、好きな条件のコメントのみ横流しにすることも可能です。

※本機能は既存のコメントの位置を判定部から次のコメントの位置を算出するような仕組みは利用しておらず、株式会社ドワンゴの特許権を侵害するものではありません。

4-3.配信前にScreenを起動

配信前には、CastCraftのScreenタブをクリックして起動を完了させましょう。

4-4.Live Dashboardで配信に接続

「Live Dashboard」タブでコメントを取得することで、OBSにコメントが表示されます。

【Twitch】チャットを弾幕表示させる方法を解説!

5.コメントと一緒にエフェクトを発生させる方法【応用】

Screen機能では、特定のコメントに反応してエフェクトを発生させることができます。今回は例として、「こんにちは」というコメントが投稿されたときにペンライトのエフェクトを発生させる方法を説明します。

5-1.インタラクションの作成

Screenタブにて「クラフトモード」の「インタラクション設定」から「ペンライト」を作成します。

5-2.チャットに反応する条件を設定

「チャットに反応する条件」の「条件を追加」から、「チャットメッセージ」に「こんにちは」が「含まれるとき」と設定します。

7- ペンライト チャットに反応する条件

上記の設定をすると、「こんにちは」というコメントが投稿されるとペンライトのエフェクトが発生するようになります。

8-ペンライト 設定後画面

5-3.配信前にScreenを起動

配信前には、CastCraftのScreenタブをクリックして起動を完了させましょう。

5-4.Live Dashboardで配信に接続

「Live Dashboard」タブでコメントを取得することで、OBSにコメントに反応するエフェクトが表示されます。

コメントに反応する画面演出をつくる

方法②:OBS StudioのブラウザソースでTwitchコメント欄を直接表示させる

OBS StudioのブラウザソースでTwitchコメント欄を直接表示させる方法は、OBS Studioの機能のみを使用したシンプルな方法です。他のアプリやサイトを使用する必要がなく、簡単にデザインの凝ったコメント欄を表示できます。

STEP1:Twitchのコメント欄をポップアウトする

最初にTwitchの自分のチャンネルページに行き、チャットを表示させます。

次に、コメント欄の歯車を選択し、「チャットをポップアウト」を選択します。
1.STEP1:Twitchのコメント欄をポップアウト① 0

2.STEP1:Twitchのコメント欄をポップアウト② 0

コメント欄が別ウィンドウで表示されたら、上部にあるURLをコピーしましょう。
3.STEP1:Twitchのコメント欄をポップアウト③ 0

STEP2:OBS Studioのソースにブラウザを追加する

OBS Studioを起動し、シーンを選択します。

シーンを選択したら、ソースの下部にある+ボタンを選択し、メニューから「ブラウザ」を選択しソースを作成しましょう。
4.STEP2:OBS Studioのソースにブラウザを追加① 0

5.STEP2:OBS Studioのソースにブラウザを追加② 0

別ウィンドウでプロパティが表示されたら、URL欄に先ほどコピーしたURLを貼り付けます。
6.STEP2:OBS Studioのソースにブラウザを追加③ 0

幅や高さの数値を変更すると、表示されるコメント欄のサイズを調整できます。
7.STEP2:OBS Studioのソースにブラウザを追加④ 0

プレビュー画面からも調整できるので、自分好みの大きさや位置に調整しましょう。

配信画面にコメント表示をする方法を徹底解説!

カスタムCSSを使う

OBS Studioのブラウザソースを利用している場合、カスタムCSSを利用することで、表示されるコメントの書体をかわいいものに変更したり、表示形式を吹き出し型に変更したり、様々な形式にカスタマイズできます。
CSSの知識がある方は、個人でカスタマイズすることも可能ですが、CSSの知識がない方は、わんこめはいしんツールキットなどを利用し、お気に入りのテンプレートを探しましょう。テンプレートは無料で使用できるものもありますが、購入が必要なものもあります。

OBS上でのコメント表示をかわいいデザインにカスタマイズする方法【吹き出し風も】

方法③:Streamlabsを活用してコメント欄を表示する

ここでは「Streamlabs」というWebサービスを利用し、コメント欄を表示させる方法を解説します。
コメントをカスタマイズできるだけでなく、フォローやサブスクの通知を表示することも可能です。

STEP1:StreamlabsにTwitchアカウントでログインする

8.STEP1:StreamlabsにTwitchアカウントでログイン 0

Streamlabsを開き、Twitchアカウントでログインします。ログイン後にプラン選択の画面が表示されるので、コメント欄を表示させるだけであれば、無料プランを選択しましょう。
全ての設定が終わると、ホーム画面が表示され、Twitchアカウントとの連携が完了します。

STEP2:チャットボックスでカスタマイズする

次に、ホーム画面の左側にあるメニューから「すべてのウィジェット」を選択しましょう。
9.STEP2:チャットボックスでカスタマイズ① 0

表示された画面から「chat box」を選び、表示された画面を下にスライドすると、カスタマイズの項目が出てきます。
10.STEP2:チャットボックスでカスタマイズ② 0

テーマを変更するとコメント欄が表示される形式が変わり、テキストの色やフォントサイズまで詳細に設定できます。
11.STEP2:チャットボックスでカスタマイズ③ 0

全ての設定を終えたら、「ウィジェットURL」をコピーしましょう。

STEP3:OBS Studioのブラウザソースで表示させる

OBS Studioを起動し、シーンを選択します。
12.STEP3:OBS Studioのブラウザソースで表示させる① 0

シーンを選択したら、ソースの下部にある+ボタンを選択し、メニューから「ブラウザ」を選択しソースを作成しましょう。
13.STEP3:OBS Studioのブラウザソースで表示させる② 0

別ウィンドウでプロパティが表示されたら、URL欄にコピーしたウィジェットURLを貼り付けます。
14.STEP3:OBS Studioのブラウザソースで表示させる③ 0

幅や高さの数値を変更すると、表示されるコメント欄のサイズを変更できます。
15.STEP3:OBS Studioのブラウザソースで表示させる④ 0

プレビュー画面からも大きさや位置を変更できるので、自分好みの大きさや位置に調整しましょう。

方法④:Twitch Studioを活用してコメント欄を表示する

最後に、Twitch Studioを活用してコメント欄を表示させる方法について解説します。
Twitch Studio公式サイトにアクセスし、Twitch Studioをダウンロードします。
ダウンロードが完了したらTwitch Studioを起動し、Twitchのアカウントでログインしましょう。
設定を進め配信プレビュー画面が開いたら、コメント欄を表示させたいシーンを選び、「編集」を選択するか、下部にある「シーンを編集する」を選択します。
16.Twitch Studioを活用してコメント欄を表示① 0

レイヤー欄に表示されている「チャット」を選択することで、サイズや位置、枠の色など様々な項目を変更できます。「テストメッセージを追加」を選択すると、コメント欄のプレビューが確認できるので、設定を決める際に参考にしましょう。
17.Twitch Studioを活用してコメント欄を表示② 0

全ての設定が完了したら、下部にある保存を選択し完成です。

OBSでTwitchコメントを表示して配信画面を盛り上げよう

OBS StudioでTwitchのコメント欄を配信画面に表示させる方法は、
1. CastCraftを利用する
2. OBSにて直接表示させる
3. Streamlabsを利用する
4. Twitch Studioを利用する

これらの4つがあります。コメント欄を表示することにより、配信を今までよりもさらに盛り上げられるでしょう。様々なカスタマイズができますので、それぞれ自分に合った設定を選び、好みの配信画面を完成させましょう。

Twitchでコメントを流す方法を徹底解説!Twitchコメントを画面に横流し

コメント表示だけじゃない、OBS配信におすすめのツール

配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
視聴者と向き合うために最もおすすめな配信ツールがCastCraftです。

CastCraftを使えば、YouTube/Twitchのコメントを簡単にカスタマイズしてOBSに表示させることができますが、それだけでなく視聴者と向き合うためのさまざまな機能があります。

配信中のコメント管理ダッシュボード

  • 視聴者ごとの情報をためて、視聴者全員を覚えられる
  • 初見や常連を一目で判断できる
  • スパチャ・ビッツ等を読み上げたかどうか管理できる

CRM候補1

画面演出の「Screen」

  • 配信コメントをニコニコ風にOBS画面に横流しできる
  • 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
  • 設定した画像やGIFで自由に画面演出が作れる

screen-demo

このような機能により、配信者が視聴者との関係を深めることができます。

CastCraftのダウンロードページ(利用無料)

CastCraftを利用する配信者さんの声

ぺこPさん

『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』

MeeChanneLさん

『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』

九条林檎さん

『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』

ゆっきん【博多弁猫Vtuber】さん

『CastCraft様にはどれだけお世話になっているかわかりません!配信生活をもっと楽しいものにしてくださってありがとうございます。』

日々の配信をより良く

CastCraftが導入されているチャンネルの総登録者数は1.3億人を超えており、これまで120万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。

視聴者ダイアログを開く

CastCraftを試してみる(利用無料) (1)