目次
OBSのコメント欄はCSSでかわいいデザインにできる
配信画面に視聴者のコメントを表示させることで配信全体がにぎやかになります。ただ、OBSにそのまま表示しただけのコメント欄は、どうしてもシンプルで味気ない見た目になりがちです。
そこで活躍するのがCSSです。OBSのコメント欄は、CSSを使うことで文字の色やフォント、背景、吹き出しの形まで自由にデザインを変更できます。
本記事では、CSSをコピペするだけでコメントをかわいくする方法から、ジェネレーターを使って自分好みに調整する方法、外部ツールを使ってもっと手軽にカスタマイズする方法まで詳しく解説していきます。
基本編：OBSにコメントを表示する方法
CSSでデザインを変える前に、まずはOBSにコメントを表示させる基本の手順を押さえておきましょう。YouTube・Twitchともに、「ブラウザソース」を使ってコメントを表示します。
YouTubeの場合
- 配信ページでコメント欄のメニューから「チャットをポップアウト」を選択
- 表示された画面でURLをコピー
- OBSに「ブラウザ」ソースを追加
- ブラウザソースの設定画面でコピーしたURLを貼り付け
Twitchの場合
- 配信ページでコメント欄の歯車アイコンから「チャットをポップアウト」を選択
- 表示された画面でURLをコピー
- OBSに「ブラウザ」ソースを追加
- ブラウザソースの設定画面でコピーしたURLを貼り付け
OBSのコメント欄をかわいいデザインにする3つの方法
OBSのコメント欄をかわいくする方法は、「配布されているCSS素材を使う」「CSS生成ツールでコードを作る」「外部ツールでカスタマイズする」の3つです。
それぞれ「手軽さ」「自由度」「完結度」が異なるため、自分がどこを重視したいかで選ぶのがおすすめです。
| 方法 | 手軽さ | 自由度 | 完結度 | こんな人におすすめ |
|---|---|---|---|---|
| ①配布CSS素材 | ◎ | △ | △ | デザインを選ぶだけで済ませたい人 |
| ②CSS生成ツール | ○ | ◎ | △ | 色や形を自分好みに変えたい人 |
| ③外部ツール | ○ | ○ | ◎ | OBS外で管理・編集まで一括でやりたい人 |
CSSの知識がまったくない方は、まず①の配布素材から試してみるのがおすすめです。
①コピペで簡単｜配布されているコメントCSS素材
すでに完成されたCSS素材を配布・販売しているサービスを利用する方法です。気に入ったデザインを選び、コードをコピーしてOBSのカスタムCSS欄に貼り付けるだけで完成するので、CSSの知識はまったく必要ありません。 以下は代表的なサービスです。
BOOTH
出典：BOOTH公式サイト
「BOOTH」は、クリエイターがさまざまな作品を出品しているマーケットサイトです。コメント欄用のカスタムCSSも数多く出品されており、有料のものは数百円程度で購入できるほか、無料で配布されているものもあります。
コメント欄のCSSだけでなく、配信画面に表示できる時計やオーバーレイなど、配信に必要な素材が一通り揃います。「他の配信者とクオリティで差をつけたい」「無料素材では物足りない」という方は、BOOTHで探してみるのがおすすめです。
はいしんツールキット
「はいしんツールキット」は、配信画面を装飾する素材を配布しているサイトです。YouTube・Twitchの両方に対応した、かわいい吹き出し風のコメントCSSを無料で使うことができます。
吹き出しが飛び出す方向の違う2種類が用意されており、フォントや色も簡単に変更できるため、シンプルながら自分の配信画面に合わせやすいのが特徴です。有料版では、アニメーション付きの凝ったデザインも選べます。
②デザインを調整｜コメントCSS生成ツール
配布素材よりもう一歩こだわりたいなら、CSS生成ツール（ジェネレーター）を使う方法がおすすめです。画面上で色や形を選んでいくだけで、自動的にCSSコードが作られるので、自分の好みに合わせてデザインを調整できます。
代表的なツールが、YouTube・Twitchに対応したコメントCSS生成ジェネレーター「fukidashi」です。
「fukidashi」では、簡単な操作で、かわいいコメントデザインを作ることができます。 通常コメントだけでなく、メンバーシップやスーパーチャットの表示もまとめてデザインできるのも便利なポイントです。
③ツール上で完結｜外部ツールのコメントカスタマイズ機能
もう一つの選択肢として「CastCraft（キャストクラフト）」ような外部ツールがあります。
「CastCraft」は、YouTube・Twitchに対応した配信者向けのツールで、コメント表示や読み上げ、配信画面づくりまでをサポートしてくれます。
おしゃれなデザインのテンプレートが複数用意されており、デザインを選び、色やアニメーションを設定するだけで、かわいいコメント欄が完成します。
CSSのコードを書いたりコピペしたりする必要はなく、すべてツール上の操作だけで完結するのが大きな魅力です。
CSSがコメントに反映されないときの対処法
URLやカスタムCSSのコピペが正しくない
CSSがコメントに反映されない場合に意外と多いのが、URLやカスタムCSSが正しくコピペできていないケースです。正しくコピペされているか確認してみましょう。
また、ポップアウトURLは「URL」欄、デザイン用のコードは「カスタムCSS」欄と、貼り付ける場所を取り違えていないかも確認してください。
OBSやブラウザソースのキャッシュが残っている
OBSやブラウザソースのキャッシュ（一時的に保存された古いデータ）が原因で反映されていないケースがあります。
ブラウザソースのプロパティ画面を開き、「現在のページのキャッシュを更新」ボタンをクリックしてみましょう。
それでも変わらない場合は、ソースの「目」のアイコンを一度オフにして再びオンにするか、OBS自体を再起動すると反映される可能性があります。
YouTubeやTwitch側の仕様変更
突然CSSが反映されなくなった場合、YouTubeやTwitch側のアップデートによって、コメント欄の仕様が変更されたことが原因かもしれません。
OBSを最新バージョンに更新し、あわせて、CSSの配布元サイトを確認してみましょう。 仕様変更があると、配布元が対応版のCSSや対処法を発信していることがあるため、最新情報をチェックしてみてください。
OBSのコメント欄をかわいくして配信を盛り上げよう
今回は、OBSのコメント欄をCSSを使ってかわいく表示する方法を解説しました。配布CSS素材・CSS生成ツール・外部ツールの3つがあり、手軽さや自由度に応じて選べます。自分に合った方法でかわいいコメント欄を作り、配信を盛り上げていきましょう。
OBSコメントCSSのよくある質問
OBSのコメント欄はどうやってかわいくできますか？
ブラウザソースで表示したコメント欄にカスタムCSSを適用すると、色やフォント、吹き出しの形まで調整できます。
CSSの知識がなくても設定できますか？
はい。配布されているCSS素材をコピペしたり、CSS生成ツールを使ったりすれば、専門知識がなくても整えやすいです。
CSSが反映されないときは何を確認すべきですか？
URLの貼り付け先、カスタムCSS欄の内容、ブラウザソースのキャッシュを優先して確認すると切り分けしやすいです。
もっと手軽にコメント欄を整える方法はありますか？
CastCraftのような外部ツールを使うと、コードを直接触らずにコメント表示を調整しやすくなります。
関連の人気記事
OBSでのコメント表示におすすめのCastCraft
OBSでYouTubeやTwitchなどの配信コメント表示を行う際のツールとして、CastCraftをおすすめします。
CastCraftを使えば、配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 配信コメントをニコニコ風にOBS画面に横流しできる
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- 設定した画像やGIFで自由に画面演出が作れる
いつでも投げ銭（収益化）機能
- 配信者に9割還元できる
- 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで260万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。