カスタム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で使うことで配信画面をカスタマイズしてみてください。
配信をより面白くするために
配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。
大きく分けて、
- 視聴者を覚えるYouTube/Twitchコメビュ
- 配信画面演出のScreen
- 収益化のための機能
の三つの機能があり、それぞれ下記のような目的があります。
| 機能 | 目的 |
|---|---|
| YouTube/Twitchコメビュ | 視聴者が配信に馴染めるようなやり取りをサポート |
| Screen | 視聴者とのやり取りを視覚的に楽しくする |
| 収益化 | 視聴者を大事にする形で収益化する |
CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
CastCraftは上記のような機能により、配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入している配信者さんの事例としては、
等がいらっしゃいます。
導入されたチャンネルの総登録者数は5,000万人を超えており、これまで110万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。