- これはなに？
- もう少し詳しく
- OBSにチャット欄を表示させる方法
- かんたん設定について
- フォント(共通設定)について
- チャット本文の設定について
- アイコンの設定について
- ユーザー名(チャンネル名)の設定について
- 時刻の設定について
- 背景色について
- スーパーチャット関係について
- フェードイン/アウトについて
- 実験中について
- その他
- 作成したCSSをOBSで使用する方法
- 謝辞
これはなに？
OBS(Open Broadcaster Software) を使って配信画面にチャット欄を表示する際に使用できるCSSジェネレーターの日本語版とその設定方法に関するメモです。日本語のフォントを使用できるので、アルファベット・ひらがな・漢字でフォントがバラバラなのを改善できます。
もう少し詳しく
OBSで配信する際にチャット欄の背景を透過するには Chat v2.0 Style Generator を使ってCSSの設定をする方法が有名ですが、日本語の環境で使用するとフォントなどが意図したものとは異なった結果になってしまうことがあります。また、サイト自体も英語なので人によってはやや使いにくいという問題もあります。
そこで、フォントを日本語に対応+設定画面も日本語にしてしまおう…という目的で作りました。(元サイトの作者の方から許諾を得ています)
なお、フォント設定以外の部分(OBSのインストールや配信用の設定など)は解説サイトが多数あるため省略します。
※分かりにくい記述や間違った記述があればTwitterまで連絡していただければ助かります。
OBSにチャット欄を表示させる方法
基本的な流れは 困った時に役立ちそうなメモ に記載していますが、より詳細な説明・手順は新・VIPで初心者がゲーム実況するには様の解説をご覧ください。
かんたん設定について
数値変更ボタン
フォントサイズ・縁取りなどの数値を一括で○○倍に変更するためのものです。文字が小さいからといってOBS上で引き伸ばして表示するとフォントがぼやけてしまうため、最初から大きい文字サイズを設定できるようになっています。
テンプレート
「アイコンは表示したいけどユーザー名は隠したい」「ユーザー名もアイコンも非表示にしたい」などの設定が一括でできるようになっています。縦棒┃の色を変えたい場合は「背景色」の項目を編集してください。
フォント(共通設定)について
色の指定
「作成済みのCSSからカラーコード（色の指定）を抜き出したい」「カラーコード（#123456など）で指定したい」といった場合は困った時に役立ちそうなメモをご確認ください。フォントの指定
ユーザー名・チャット本文などですべて同じフォントが使用されます。「Googleが提供している無償フォントを利用する」「PCにインストール済みのフォントを指定する」の2つの方法があり、フォントにこだわりがなければGoogleのフォントを利用する方が簡単です。
8種類のフォントから選ぶことができますが、多くの漢字に対応している＆読みやすい"Noto Sans JP"がオススメです。明朝体にしたい場合は"Noto Serif JP"をどうぞ。
自分で用意したフォントを使用したい場合は、「PC内のフォントを使う」にチェックを入れてインストール済みのフォント名を入力してください。
画像のようにメモ帳からコピペしてくると簡単です。
補足1
最新版のOBS Studio（25.0～25.0.8）には「フォント名を日本語で指定しても反映されない」というバグがあります。今後の更新で修正されるとのことですが、今の時点で日本語フォントを使いたい場合は困った時に役立ちそうなメモをご確認ください。
補足2
フォントによっては「配信での使用が禁止」「商用利用が禁止」などの条件が設定されていることがあるため、使用の前にライセンスを確認してください。基本的に下記のいずれかのライセンスが適用されているフォントであれば、動画・配信で問題なく利用可能です。（Googleの無償フォントもこれらのライセンスが適用されています）
いずれにせよ、各フォントのライセンスを確認した上でご利用いただくようお願いします。
- Open Font License
- Apache License
- M+ FONT LICENSE
- IPAフォントライセンス
- パブリックドメイン
チャット本文の設定について
太さ
極細～極太の9段階ありますが、非対応のフォントの場合は通常(極細～中)と太字(中太～極太)の2通りの太さしか設定できません。色の指定
「作成済みのCSSからカラーコード（色の指定）を抜き出したい」「カラーコード（#123456など）で指定したい」といった場合は困った時に役立ちそうなメモをご確認ください。絵文字のサイズ
この数値を変更すると、絵文字😊とメンバー向けのカスタム絵文字の両方のサイズが変更されます。カスタム絵文字の場合は表示されている画像をそのまま引き伸ばすことになるため、極端に大きなサイズに設定した場合多少ぼやけて表示されてしまいます。
アイコンの設定について
アイコンの大きさも変更できますが、無理やり引き伸ばすことになるため少しぼやけてしまいます。
ユーザー名(チャンネル名)の設定について
ユーザー名とバッジを非表示
この項目にチェックを入れると、ユーザー名(チャンネル名)とバッジの両方が非表示になります。バッジとは、チャンネル管理者の王冠、モデレーターのスパナ、メンバーシップの●(設定している場合は画像)のことです。
この項目が役立ちそうな場面の一例です。
- チャット欄を小さくするためにできるだけ文字数を減らしたい
- 同じコメントが並んだ時に綺麗に並ぶようにしたい
（ユーザー名の長さは人によって違うのでズレてしまう） - 画面上に視聴者の名前を表示しないことで自己顕示欲を抑えさせたい
- アイコンとセットで非表示にすることで誰のコメントかわからないようにしたい
（チャット欄を見ずに配信画面だけを見た場合）
太さ
デフォルトでは太字が設定されてるため、必要に応じて変更してください。太字が設定されているのは、色の設定によっては輪郭の黒と混ざって見づらくなることがあるためです。
色の指定
「作成済みのCSSからカラーコード（色の指定）を抜き出したい」「カラーコード（#123456など）で指定したい」といった場合は困った時に役立ちそうなメモをご確認ください。スパナ・メンバーバッジを非表示
「バッジは表示したくないがユーザー名は表示したい」という場合に有効な設定です。ユーザー名(チャンネル名)の色を統一することで、モデレーターやメンバーのコメントとそうでないコメントの区別がつかなくなります。「ユーザー名とバッジを非表示」の設定の方が優先されます。
ユーザー名の後に改行
ユーザー名(チャンネル名)とコメント本文の間に改行を追加します。チャット欄が縦に長くなる、文頭が統一されて読みやすくなるという特徴があるため、流速がゆるやかなチャット欄では見やすくなって良いかもしれません。
時刻の設定について
時刻を表示する
この項目にチェックを入れると、ユーザー名(チャンネル名)の前に 12:00 AM や 11:59 PM のように表示されます。色の指定
「作成済みのCSSからカラーコード（色の指定）を抜き出したい」「カラーコード（#123456など）で指定したい」といった場合は困った時に役立ちそうなメモをご確認ください。背景色について
色の指定
色の指定だけでなく、不透明度（透明～塗りつぶしの度合い）とセットで設定します。「作成済みのCSSからカラーコード（色の指定）を抜き出したい」「カラーコード（#123456など）で指定したい」といった場合は困った時に役立ちそうなメモをご確認ください。
不透明度は0～100%の範囲で設定可能です。(左端：0%(透明/塗りつぶさない)，右端：100%(塗りつぶし))
全体の背景色
チャット欄全体の背景色を指定します。指定したくない場合はバーを一番左端に移動させます。メッセージ背景色
特定のメッセージの背景色を指定します。指定したくない場合はバーを一番左端に移動させます。ユーザー名の左側だけ塗りつぶす
メッセージの背景色は変えず、代わりにコメント左端に色付きの┃を表示するものです。なお、「メッセージ背景色」のバーを右に移動させないと┃が出ないようになっています。スーパーチャット関係について
太さ
「スーパーチャットの投稿者名」と「新規スポンサー」は「ユーザー名(チャンネル名)の設定」の太さが、それ以外の部分は「チャット本文の設定」の太さが反映されます。上部にスーパーチャット欄を表示
チャット欄で一定金額以上のスーパーチャットが画面に残るのを表示するかどうかの設定です。デフォルトでは表示しない設定になっています。チャット欄を表示
通常のチャット欄を表示するかどうかの設定です。これにチェックを外すと上記の「上部にスーパーチャット欄を表示」以外何も表示できなくなります。フェードイン/アウトについて
全般
チャットメッセージをフェードイン/アウトさせる場合の設定欄です。有効にすると多少重くなってしまうようなので、スペックがギリギリの場合は無効にした方がいいかもしれません。フェードインを使う
メッセージがフェードインするようになります。フェードアウトを使う／フェードアウトまでの待ち時間(秒)
一定時間経過後にメッセージがフェードアウトするようになります。(標準では30秒後)あくまでも配信画面に映らなくなるだけなので(=YouTubeのサーバーから消えるわけではない)、視聴者のチャット欄などには表示されたままなので注意してください。
フェード効果の時間
フェードイン・フェードアウトのアニメーション効果時間の長さを指定できます。数値の単位は「ミリ秒」なので 1000 にすると1秒間かけてフェードイン(アウト)するようになります。(1000ミリ秒＝1秒)
左から右へフェード／右から左へフェード
フェードイン(アウト)の効果が横からスライドインするように変化します。両方にチェックを入れた場合は「左から右」が優先となります。フェードの移動量:
横方向のフェードが有効な場合にのみ効果があります。数値を大きくするとより離れた場所からスライドインするようになりますが、極端に大きな数値だとOBSの負荷が若干高くなるようです。
そのため、見た目の移動速度を上げたいのであれば「フェード効果の時間」の数値を小さくした方が効果的です。
実験中について
すごく小さくしてもスクロールするようにする
チャット欄を表示している「ブラウザ」の幅・高さを小さくしすぎると、正常にスクロールしなくなったり、文字が端で切れてしまうことがあります。この項目にチェックを入れるとそれを回避するCSSが追加されますが、意図しない別の不具合が起こる可能性があります。
（一応、ある程度はテストしているのですが、正常な動作を保証できないので「自己責任」という形でお願いします…）
その他
作成したCSSはリアルタイムでページ下部の「CSS」のところに反映されます。ページを移動・更新すると消えてしまうので、完成したらメモ帳にコピペ＆保存するなどしてバックアップを取るようにしてください。
