カスタムCSSとは?OBS配信でかっこいいコメント欄を表示する方法

最終更新 2024-06-21
3‐カスタムCSS�を用意

目次

カスタム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のコメント欄をカスタマイズする方法を例に解説します。

  1. YoutubeStudioから配信枠を作成した際の管理画面を開く。

1-youtubestudioの管理画面

  1. 右側コメント欄の3点リーダーから「チャットをポップアウト」を選択する。

2-チャットをポップアウト

  1. 出てきたタブのURLをコピーする。

手順2:カスタムCSSを用意

次にカスタムCSSを準備します。そもそもCSSとはCascading Style Sheetsの略で、れっきとしたプログラミング言語です。そのため、自作することは可能ですが、専門的な知識が必要となります。
しかし、ほとんどの配信者が専門的な知識なしで、カスタムCSSを準備しているので安心してください。サイトを活用することで専門的な知識がなくても望んだ効果を得ることができるカスタムCSSを準備することができます。

後ほど詳しく紹介するChat v2.0 Style Generatorを活用する例を挙げると、サイト内でフォントサイズや背景色などを数値を設定すれば、カスタムCSSが生成されます。 好みの設定にカスタマイズしたカスタムCSSを生成できたら、それをコピーします。

3‐カスタムCSSを用意

手順3:OBSでブラウザソースを作成

それではここからは配信画面の設定に移ります。
OBSを起動し、OBSのソースタブの左下「+マーク」を押し「ブラウザ」を選択しブラウザソースを作成してください。

4‐ブラウザソースを追加

手順4:カスタムCSSをコピペ

ブラウザソースが作成できたら、まずプロパティを開きましょう。あとは準備したURLをそれぞれコピー&ペーストし、位置や大きさを整えて終了です。

  1. 手順1でコピーしたコメント欄のURLを「URL」部にペーストします。これでもコメント欄は配信画面に表示されますが、このままだと何のカスタマイズもされていない質素なコメント欄のままです。

5‐プロパティのURL

  1. 同様のプロパティ内「カスタムCSS」部に手順2でコピーしたカスタムCSSをペーストします。その際、bodyから始まる文字列がカスタムCSSに元から入っていた場合はそれを消してからペーストしてください。

6‐プロパティのカスタムCSS

  1. 大きさや位置を調整して終了です。ブラウザソースのプロパティから、幅や高さの数値を調整したり、OBS上の配信画面から赤い丸をドラッグすることで場所を調整したりできるので、ゲーム画面や背景と被らないように設置しましょう。

カスタムCSSを入手できるおすすめサイト

Chat v2.0 Style Generator

Chat v2.0 Style GeneratorはYoutubeのコメント欄をカスタマイズするCSSを生成することができるサイトです。カスタムCSS関連では検索上位に表示される最も人気なサイトです。様々なカスタマイズがあるので解説していきます。

フォントを変更する

フォントによって印象は大きく変わります。デフォルトで「可愛い系」「綺麗系」「特殊文字」など様々な種類のフォントがあります。また、PC内にインストールしているフォントも使用することもできます。
自分の配信コンセプトにあったフォントを選択するようにしましょう。

7‐フォント(共通設定)

背景色を変更する

コメント欄の背景や、コメント別で背景を変更することができます。自分のコメントやメンバーシップ加入者のメッセージのみ目立たすことができ、コメント欄にメリハリが生まれます。
色や透明度を調整することで、目立ち過ぎない塩梅にすることが重要です。

8‐背景色を変更する

スーパーチャット関係の設定を調整する

スーパーチャットやスーパースティッカーをもらったときのフォントサイズや色は通常のコメントと区別しておくと良いでしょう。
コメント欄で目立つようにすることで、より貰いやすくなりますし、贈ったほうも嬉しいものです。
「上部にスーパーチャット欄を表示」にチェックをつけることで、通常のYoutubeのコメント欄のように贈られたスーパーチャットがストックして表示されます。スーパーチャットを貰うことが多い人は設定すると良いでしょう。

10‐はいしんツールキット

はいしんツールキット

はいしんツールキットは配信で使えるツールが無料で使えるサイトです。コメント欄だけでなく、雑談枠などで使える時計やコラボ配信で使えるDiscordVC用のカスタムCSSを手に入れることができます。
ここではYoutubeのコメント欄のカスタマイズ方法について紹介します。

手順1:サイトにアクセスする

はいしんツールキットのサイトにアクセスしましょう。検索エンジンで検索してもでてきます。
アクセスできたら「Youtube・Twitchコメント欄」をクリックします。

手順2:好きなカスタマイズを選ぶ

「ふきだし」「見出しつき」など種類があるので、自分の配信コンセプトに合ったカスタマイズを選びクリックします。
クリックすると、カスタマイズ画面が出てきます。
コメントのフォントや色を設定したらページ下部のカスタムCSSをコピーします。

注意)YoutubeLive用とTwitchLive用があるので、自分が配信しているサイトのものを選びましょう。合っているものを選ばなければ、正しく認識されず配信画面に反映されません。

手順3:OBSで設定する。

先述のChat v2.0 Style Generatorの時と同様にOBSのブラウザソース上で設定します。

  1. OBSを起動し、ソースタブからブラウザを作成する。
  2. ブラウザタブのプロパティを開き、「URL」部に素材となるコメント欄のURLをペーストする。
  3. 「カスタムCSS」部に手順2でコピーしたCSSをペーストする。

以上がはいしんツールキットを使用したコメント欄のカスタマイズ方法になります。

BOOTH

クリエイターさんが自作したカスタムCSS等を販売しているサイトです。 基本有料ですが、クオリティの高い配信にできる点がメリットであることを述べてください。 BOOTHはクリエイターさんが作成したカスタムCSSや素材などを販売しているサイトです。クレジット記載などの条件付きに無料のものもありますが、基本的には有料になります。
しかし、有料に見合ったクオリティの高いカスタムCSSが多数販売されています。
猫モチーフのデザインやサイバーパンクなデザインなど、豊富なバリエーションがあり配信者の多様なコンセプトに対応しています。世界観を大事にしているVtuberさんや特定のゲームだけを配信している配信者の方におすすめです。

カスタムCSSを使わずにコメント欄を表示する方法

ここまで、カスタムCSSを用いてコメント欄をカスタマイズする方法を紹介してきました。ここからはカスタムCSSを用いずにコメント欄を配信画面に表示する方法について解説していきます。

CastCraft

CastCraftは特定のコメントに反応して配信画面で演出を流すなどの楽しい仕掛けができる無料ソフトです。
カスタムCSSでは対応できないこだわったエフェクトやコメントの読み上げにも対応しており、盛り上がった配信にしたい人におすすめです。

カスタムCSSと違い、別ソフトをインストールし連携をする必要があります。導入方法については以下の記事で解説しているので、ぜひ参考にしてみてください。

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

Streamlab

Streamlabsは豊富な機能面が魅力のアプリです。公式サイトで「ライブ配信に必要なものがすべて揃っています」と記載されている通り、配信画面でカスタマイズできる要素の全てがつまっているといっても過言ではないでしょう。

  • コメント表示
  • 登録、メンバー加入通知
  • 投げ銭演出
  • アニメーションの追加

上記以外にも様々な機能があり、使いこなすことができれば唯一無二の自分専用配信画面が作成できます。配信中級者以上で、もっと配信を盛り上げたい方におすすめです。
以下の記事で詳しく解説しているのでぜひ参考にしてみてください。

Streamlabsでコメント表示する方法を解説!トラブル時の対処法も

OBSでカスタムCSSを活用して配信画面を彩ろう

配信画面のコメント欄をカスタマイズすることで配信はより盛り上がります。カスタムCSSを使用することで、コメントのフォントや色、背景などをカスタマイズすることができます。世界観を大事にしているVtuberの方や特定のゲームだけをしている配信者の方などは、カスタムCSSを使用することでどんな配信をしているのかを一目で視聴者に理解させることができます。ぜひカスタムCSSをOBSで使うことで配信画面をカスタマイズしてみてください。

配信をより面白くするために

配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。

大きく分けて、  

  • 視聴者を覚えるYouTube/Twitchコメビュ
  • 配信画面演出のScreen
  • 収益化のための機能

の三つの機能があり、それぞれ下記のような目的があります。

機能 目的
YouTube/Twitchコメビュ 視聴者が配信に馴染めるようなやり取りをサポート
Screen 視聴者とのやり取りを視覚的に楽しくする
収益化 視聴者を大事にする形で収益化する

CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
CRM候補1

特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
ペンライト

さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
収益管理

CastCraftは上記のような機能により、配信者(ゲーム配信者やVtuber)が視聴者との関係を深めることを手助けします。

導入している配信者さんの事例としては、

等がいらっしゃいます。

導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。

CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。

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