カスタムCSSとは？OBS配信でかっこいいコメント欄を表示する方法
目次
カスタムCSSで見やすいOBS配信の画面を作る
Vtuberの配信やコラボ配信を見ていると、喋るたびにDiscordのアイコンや立ち絵が光る配信画面やお洒落にカスタマイズされたコメント欄が映った配信画面を見る機会があります。配信者やVtuberによってカスタマイズが違うので、個性をアピールする重要な要素です。
このカスタマイズは配信ソフトOBSでカスタムCSSを使うことで実現することができます。この記事では、OBSでカスタムCSSを使う方法と、CSSを入手できるサイトをご紹介します。
カスタムCSSとは？
カスタムCSSとは何か、そして使う方法を解説します。
ブラウザソースをカスタマイズする
カスタムCSSとは、コメント欄やdiscordのVCアイコンをカスタマイズするために必要なコードのことです。サイトを利用し誰でも簡単に作成することができ、それをOBSに入力して設定することができます。
カスタムCSSを作成するサイトはもちろん、カスタマイズするために必要な素材もインターネット上に無料で存在しています。そこで得たカスタムCSSをOBSのソース「ブラウザ」内の「カスタムCSS」枠にコピー&ペーストし大きさを整えれば設定完了です。
配信初心者でも有名配信者や有名Vtuberと同じ配信画面を簡単に再現することができます。
OBSでカスタムCSSを使う方法
それでは具体的な設定手順を解説します。
手順1：素材のリンクを用意
画面に表示させたい素材のURLを用意します。素材の例としてYoutubeのコメント欄を挙げ、コメント欄をポップアウトしてURLを取得する方法を解説してください。
まず、画面に表示させたい素材のURLを用意します。今回は、Youtubeのコメント欄をカスタマイズする方法を例に解説します。
- YoutubeStudioから配信枠を作成した際の管理画面を開く。
- 右側コメント欄の3点リーダーから「チャットをポップアウト」を選択する。
- 出てきたタブのURLをコピーする。
手順2：カスタムCSSを用意
次にカスタムCSSを準備します。そもそもCSSとはCascading Style Sheetsの略で、れっきとしたプログラミング言語です。そのため、自作することは可能ですが、専門的な知識が必要となります。
しかし、ほとんどの配信者が専門的な知識なしで、カスタムCSSを準備しているので安心してください。サイトを活用することで専門的な知識がなくても望んだ効果を得ることができるカスタムCSSを準備することができます。
後ほど詳しく紹介するChat v2.0 Style Generatorを活用する例を挙げると、サイト内でフォントサイズや背景色などを数値を設定すれば、カスタムCSSが生成されます。 好みの設定にカスタマイズしたカスタムCSSを生成できたら、それをコピーします。
手順3：OBSでブラウザソースを作成
それではここからは配信画面の設定に移ります。
OBSを起動し、OBSのソースタブの左下「＋マーク」を押し「ブラウザ」を選択しブラウザソースを作成してください。
手順4：カスタムCSSをコピペ
ブラウザソースが作成できたら、まずプロパティを開きましょう。あとは準備したURLをそれぞれコピー&ペーストし、位置や大きさを整えて終了です。
- 手順1でコピーしたコメント欄のURLを「URL」部にペーストします。これでもコメント欄は配信画面に表示されますが、このままだと何のカスタマイズもされていない質素なコメント欄のままです。
- 同様のプロパティ内「カスタムCSS」部に手順2でコピーしたカスタムCSSをペーストします。その際、bodyから始まる文字列がカスタムＣＳＳに元から入っていた場合はそれを消してからペーストしてください。
- 大きさや位置を調整して終了です。ブラウザソースのプロパティから、幅や高さの数値を調整したり、OBS上の配信画面から赤い丸をドラッグすることで場所を調整したりできるので、ゲーム画面や背景と被らないように設置しましょう。
カスタムCSSを入手できるおすすめサイト
Chat v2.0 Style Generator
Chat v2.0 Style GeneratorはYoutubeのコメント欄をカスタマイズするCSSを生成することができるサイトです。カスタムCSS関連では検索上位に表示される最も人気なサイトです。様々なカスタマイズがあるので解説していきます。
フォントを変更する
フォントによって印象は大きく変わります。デフォルトで「可愛い系」「綺麗系」「特殊文字」など様々な種類のフォントがあります。また、PC内にインストールしているフォントも使用することもできます。
自分の配信コンセプトにあったフォントを選択するようにしましょう。
背景色を変更する
コメント欄の背景や、コメント別で背景を変更することができます。自分のコメントやメンバーシップ加入者のメッセージのみ目立たすことができ、コメント欄にメリハリが生まれます。
色や透明度を調整することで、目立ち過ぎない塩梅にすることが重要です。
スーパーチャット関係の設定を調整する
スーパーチャットやスーパースティッカーをもらったときのフォントサイズや色は通常のコメントと区別しておくと良いでしょう。
コメント欄で目立つようにすることで、より貰いやすくなりますし、贈ったほうも嬉しいものです。
「上部にスーパーチャット欄を表示」にチェックをつけることで、通常のYoutubeのコメント欄のように贈られたスーパーチャットがストックして表示されます。スーパーチャットを貰うことが多い人は設定すると良いでしょう。
はいしんツールキット
はいしんツールキットは配信で使えるツールが無料で使えるサイトです。コメント欄だけでなく、雑談枠などで使える時計やコラボ配信で使えるDiscordVC用のカスタムCSSを手に入れることができます。
ここではYoutubeのコメント欄のカスタマイズ方法について紹介します。
手順1：サイトにアクセスする
はいしんツールキットのサイトにアクセスしましょう。検索エンジンで検索してもでてきます。
アクセスできたら「Youtube・Twitchコメント欄」をクリックします。
手順2：好きなカスタマイズを選ぶ
「ふきだし」「見出しつき」など種類があるので、自分の配信コンセプトに合ったカスタマイズを選びクリックします。
クリックすると、カスタマイズ画面が出てきます。
コメントのフォントや色を設定したらページ下部のカスタムCSSをコピーします。
注意）YoutubeLive用とTwitchLive用があるので、自分が配信しているサイトのものを選びましょう。合っているものを選ばなければ、正しく認識されず配信画面に反映されません。
手順3：OBSで設定する。
先述のChat v2.0 Style Generatorの時と同様にOBSのブラウザソース上で設定します。
- OBSを起動し、ソースタブからブラウザを作成する。
- ブラウザタブのプロパティを開き、「URL」部に素材となるコメント欄のURLをペーストする。
- 「カスタムCSS」部に手順2でコピーしたCSSをペーストする。
以上がはいしんツールキットを使用したコメント欄のカスタマイズ方法になります。
BOOTH
クリエイターさんが自作したカスタムCSS等を販売しているサイトです。
基本有料ですが、クオリティの高い配信にできる点がメリットであることを述べてください。
BOOTHはクリエイターさんが作成したカスタムCSSや素材などを販売しているサイトです。クレジット記載などの条件付きに無料のものもありますが、基本的には有料になります。
しかし、有料に見合ったクオリティの高いカスタムCSSが多数販売されています。
猫モチーフのデザインやサイバーパンクなデザインなど、豊富なバリエーションがあり配信者の多様なコンセプトに対応しています。世界観を大事にしているVtuberさんや特定のゲームだけを配信している配信者の方におすすめです。
カスタムCSSを使わずにコメント欄を表示する方法
ここまで、カスタムCSSを用いてコメント欄をカスタマイズする方法を紹介してきました。ここからはカスタムCSSを用いずにコメント欄を配信画面に表示する方法について解説していきます。
CastCraft
CastCraftは特定のコメントに反応して配信画面で演出を流すなどの楽しい仕掛けができる無料ソフトです。
カスタムCSSでは対応できないこだわったエフェクトやコメントの読み上げにも対応しており、盛り上がった配信にしたい人におすすめです。
カスタムCSSと違い、別ソフトをインストールし連携をする必要があります。導入方法については以下の記事で解説しているので、ぜひ参考にしてみてください。
Streamlab
Streamlabsは豊富な機能面が魅力のアプリです。公式サイトで「ライブ配信に必要なものがすべて揃っています」と記載されている通り、配信画面でカスタマイズできる要素の全てがつまっているといっても過言ではないでしょう。
- コメント表示
- 登録、メンバー加入通知
- 投げ銭演出
- アニメーションの追加
上記以外にも様々な機能があり、使いこなすことができれば唯一無二の自分専用配信画面が作成できます。配信中級者以上で、もっと配信を盛り上げたい方におすすめです。
以下の記事で詳しく解説しているのでぜひ参考にしてみてください。
OBSでカスタムCSSを活用して配信画面を彩ろう
配信画面のコメント欄をカスタマイズすることで配信はより盛り上がります。カスタムCSSを使用することで、コメントのフォントや色、背景などをカスタマイズすることができます。世界観を大事にしているVtuberの方や特定のゲームだけをしている配信者の方などは、カスタムCSSを使用することでどんな配信をしているのかを一目で視聴者に理解させることができます。ぜひカスタムCSSをOBSで使うことで配信画面をカスタマイズしてみてください。
コメント表示だけじゃない、OBS配信におすすめのツール
配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
視聴者と向き合うために最もおすすめな配信ツールがCastCraftです。
CastCraftを使えば、YouTube/Twitchのコメントを簡単にカスタマイズしてOBSに表示させることができますが、それだけでなく視聴者と向き合うためのさまざまな機能があります。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 配信コメントをニコニコ風にOBS画面に横流しできる
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- 設定した画像やGIFで自由に画面演出が作れる
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.3億人を超えており、これまで120万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。
