メインコンテンツへスキップ
OBSチャットCSSジェネレーター
配信画面をおしゃれに!プレビューを見ながらOBS用チャットCSSを簡単作成。
StreamElementsのカスタムCSSとして使用できます。

ヒント

プリセットを選ぶと、現在の設定が上書きされます。まずはプリセットを選んでから微調整するのがおすすめです。
※実際の配信画面イメージ
👑Minatoこんばんは!配信楽しみにしてました!
💎Sakura今日のゲームは何ですか?
Tanaka初見です。声がいいですね!
🤖StreamBotフォローありがとうございます!
Kenta草www
使い方:StreamElementsの「Overlay Editor」→「Chat Box」→「Settings」→「Enable Custom CSS」をONにして、このコードを貼り付けてください。
使い方ステップ
1

デザインを調整

左側のパネルでプリセットを選び、文字サイズや色を微調整します。

2

CSSをコピー

「CSSをコピー」ボタンを押して、コードをクリップボードに保存します。

3

StreamElementsに貼り付け

Chat Boxの設定画面にある「Enable Custom CSS」をONにし、コードを貼り付けます。

よくある質問

Q. Streamlabsでも使えますか?

基本的にはStreamElements専用です。Streamlabsはクラス名(HTML構造)が異なるため、そのままでは適用されません。

Q. デザインが崩れる

StreamElements側のテーマ設定(Theme)を「Custom」または「Clean」に設定しているか確認してください。

OBSのコメント欄をおしゃれにするメリット

ゲーム配信や雑談配信において、画面上に表示される「視聴者のコメント」は、配信の盛り上がりを伝える重要な要素です。 デフォルトのデザインのままでは味気ないだけでなく、背景と同化して読みづらいこともあります。
このツールを使ってデザインをカスタマイズすることで、「配信の雰囲気に合わせる」「可読性を上げる」「視聴者に自分のコメントが読まれたという満足感を与える」ことができます。

このツールの特徴

  • 直感的な操作: CSSの知識がなくても、スライダーやカラーピッカーで見たままに編集できます。
  • リアルタイムプレビュー: 実際の配信画面に近い背景で、どのように表示されるか即座に確認できます。
  • コピペで完了: 複雑なコードを書く必要はありません。生成されたコードをコピーして貼り付けるだけです。
  • 日本語フォント対応: 「明朝体」や「ドット文字」など、日本語配信にマッチするフォントを選べます。

縦書きチャットで「和風」を演出

このツールは珍しい「縦書き(Vertical Writing)」に対応しています。 「和風ホラーゲーム」や「お正月配信」、「書道配信」など、和の雰囲気を大切にしたい場面で大活躍します。 フォントを「明朝体」に設定し、レイアウトタブで「縦書きモード」をONにするだけで、一気に雰囲気が変わります。

対応している配信ソフト

本ツールは、StreamElements(ストリームエレメンツ)の「Chat Box」ウィジェット向けに最適化されています。 Streamlabs(ストリームラボ)やその他のコメントビューアーでは、HTML構造(クラス名)が異なるため、CSSが正しく適用されない場合があります。
最も汎用性が高く、サーバー負荷も軽いStreamElementsでの運用を推奨しています。