目次
カスタム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のコメント欄をカスタマイズする方法を例に解説します。
- 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が正しく反映されない原因と対処法
OBSでカスタムCSSを設定したのに、「見た目が変わらない」「透過されない」「レイアウトが崩れる」といったトラブルの原因と対処法を解説します。
URLに「studio」が含まれている場合
コメント欄が正しく表示されない、CSSが効かない場合は、URLの取得元が間違っている可能性があります。
YouTube Studioの管理画面からコピーしたURLには、「studio.youtube.com」が含まれることがありますが、このURLはOBSのブラウザソースでは正常に動作しません。
以下の手順で、正しいURLを取得しましょう。
- 配信視聴ページを開く。
- コメント欄右上の「︙」から「チャットをポップアウト」を選択する。
3. 新しく開いたウィンドウのURLをコピーする。
正しいURLは「youtube.com/live_chat?is_popout=1」のような形式になっています。URLを確認するだけで解決するケースが多いので、最初にチェックしましょう。
コメント欄が透過されない場合
背景を透明にしたつもりでも、コメント欄の白背景や黒背景が残ってしまう場合は、CSSの貼り付け方やOBS側の設定ミスが原因の可能性が高いです。
ブラウザソースの「カスタムCSS」欄にCSSが正しく貼られているかを確認しましょう。以前のCSSを消さずに上書きしていたり、「body」から始まる不要なコードが残っていると、透過が反映されないことがあります。
一度カスタムCSS欄をすべて削除し、生成サイトからコピーしたCSSをそのまま貼り直すのが効果的です。改善しない場合は、ブラウザソースのプロパティ内にある「現在のページのキャッシュを更新」を実行すると、正しく表示されることがあります。
サイズがおかしい（横長・縦長になる）場合
コメント欄が「横に伸びすぎる・縦に長くなりすぎる」といった場合は、ブラウザソースのサイズ設定が原因です。
以下の手順でサイズを調整できます。
- OBSで該当のブラウザソースをダブルクリックする。
- プロパティ内の「幅」「高さ」を調整する。
3. 配信画面上で赤枠をドラッグして位置を微調整する。
サイズを変更せずに不要な部分を消したい場合は、「altキー」を押しながらドラックすることでトリミングできます。
カスタム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
BOOTHはクリエイターさんが作成したカスタムCSSや素材などを販売しているサイトです。クレジット記載などの条件付きに無料のものもありますが、基本的には有料になります。
しかし、有料に見合ったクオリティの高いカスタムCSSが多数販売されています。
猫モチーフのデザインやサイバーパンクなデザインなど、豊富なバリエーションがあり配信者の多様なコンセプトに対応しています。世界観を大事にしているVtuberさんや特定のゲームだけを配信している配信者の方におすすめです。
カスタムCSSを使わずにコメント欄を表示する方法
ここまで、カスタムCSSを用いてコメント欄をカスタマイズする方法を紹介してきました。ここからはカスタムCSSを用いずにコメント欄を配信画面に表示する方法について解説していきます。
CastCraft
CastCraftは特定のコメントに反応して配信画面で演出を流すなどの楽しい仕掛けができる無料ソフトです。
カスタムCSSでは対応できないこだわったエフェクトやコメントの読み上げにも対応しており、盛り上がった配信にしたい人におすすめです。
カスタムCSSと違い、別ソフトをインストールし連携をする必要があります。導入方法については以下の記事で解説しているので、ぜひ参考にしてみてください。
Streamlab
Streamlabsは豊富な機能面が魅力のアプリです。公式サイトで「ライブ配信に必要なものがすべて揃っています」と記載されている通り、配信画面でカスタマイズできる要素の全てがつまっているといっても過言ではないでしょう。
- コメント表示
- 登録、メンバー加入通知
- 投げ銭演出
- アニメーションの追加
上記以外にも様々な機能があり、使いこなすことができれば唯一無二の自分専用配信画面が作成できます。配信中級者以上で、もっと配信を盛り上げたい方におすすめです。
以下の記事で詳しく解説しているのでぜひ参考にしてみてください。
OBSでカスタムCSSを活用して配信画面を彩ろう
配信画面のコメント欄をカスタマイズすることで配信はより盛り上がります。カスタムCSSを使用することで、コメントのフォントや色、背景などをカスタマイズすることができます。世界観を大事にしているVtuberの方や特定のゲームだけをしている配信者の方などは、カスタムCSSを使用することでどんな配信をしているのかを一目で視聴者に理解させることができます。ぜひカスタムCSSをOBSで使うことで配信画面をカスタマイズしてみてください。
関連の人気記事
OBSでのコメント表示におすすめのCastCraft
OBSでYouTubeやTwitchなどの配信コメント表示を行う際のツールとして、CastCraftをおすすめします。
CastCraftを使えば、配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 配信コメントをニコニコ風にOBS画面に横流しできる
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- 設定した画像やGIFで自由に画面演出が作れる
いつでも投げ銭（収益化）機能
- 配信者に9割還元できる
- 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで260万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。