youtubeの絵文字と、コメント本文がぼやけてしまう

対象

わんコメ

利用OS

Windows

利用バージョン

OSのバージョン: 11
わんコメ:9.1.5
OBS: 33.0.0

その他関連しそうなアプリやプラグインの名称とバージョン

PRO版を利用

していない

発生した場所

OBS / 配信サイト

発生したURL

発生前(わんコメ更新前):https://youtube.com/live/2hp6ynSA3Y8
発生後(わんコメ更新後):https://www.youtube.com/live/DAjUxJe5uGc

発生日時

2026/10/24 頃(わんコメの更新後)

発生時のスクリーンショット

画像1が発生前(わんコメアプデ前)画像2が発生後(わんコメアプデ後)

発生時のレポート

onecomme-report-1792942964492.zip (71.9 KB)

内容

先日24日ごろにわんコメのアップデートをし配信を行ったところ、リスナーさんから
「youtubeの画面に映るチャットの文字と絵文字がぼやけて見える」と報告がありました。
わんコメはslimのテンプレートをそのまま使用しています。

発生前、発生後のスクリーンショットを見比べたり、自分なりに色々試してみたのですが
・デフォルトのフォントがアップデートで変わった?
・縁取りがついていると文字がガビガビした感じになる
・メンバーシップの絵文字/バッジに関しては、解像度が低くなっている?

という感じです。

現状、文字のフォントをデフォルトから変更し、縁取りをなくすことでガビガビした感じが軽減されていますが、絵文字がぼやけてしまう状態は改善されていません。

これらを解決するために、こちらでできることは何かありますか?

OBS 33.0にて、ブラウザソースに対応しているフォントや
優先的に表示されるフォントが変わっている可能性はあります。

というのも、私の環境で試したのが以下のスクショです。

ver 32.2.2

ver 33.0.0

わかりやすいのが右側のテンプレートで、
「テストユーザー」の名前のフォントが明らかに変化していました。


また、DotGothic16フォントへの変更のみktx-quick-starterに
カスタムCSSを適用したのが以下ですが、

/* テンプレカスタム ここから */
@import "https://fonts.googleapis.com/css2?family=DotGothic16&display=swap";

body {
    font-family: "DotGothic16",sans-serif
}
/* テンプレカスタム ここまで */

OBS 33.0では意図したフォントにて表示はされませんでした。

そのため、OBSのブラウザソースを表示させているChromium周りの問題で、
「意図していないフォント」や「各種CSSの適用具合」になっている可能性はありそうです。

わんコメ側でも何らかの修正にて対応できる可能性があるかもしれませんが、
OBS側での対応待ちになる可能性もありますので即答はできそうもありません。


YouTubeの絵文字/バッジに関しましては、わんコメではもともと高画質では受信していません。
絵文字は24px、バッジは32pxにて受信されています。

そのため、絵文字やバッジを高画質化するためには、カスタマイズが必要となります。

(宣伝ではないので、ほかのプラグインを探すのももちろんOKだと思います)
以下の私が制作したプラグインだと、おまけ機能に絵文字やバッジ、ユーザーのアバターを高画質化する処理を組み込んであります。

こういったプラグインを利用するのも一つの手になっています。


現時点ですぐに返答できる結論といたしましては、

  • テンプレートの文字関係は「OBSのアップデート(33.0)」起因の可能性が高い
  • 絵文字やバッジの解像度はわんコメのアップデートもOBSのアップデートも関係ない

という形になりそうです。

「いいね!」 1

【追記】
カスタムCSS適用時のフォント反映について追記いたします。

/* テンプレカスタム ここから */
@import "https://fonts.googleapis.com/css2?family=DotGothic16&display=swap";

body {
    font-family: "DotGothic16",sans-serif
}
/* テンプレカスタム ここまで */

上記まったく同じカスタムCSSをコピペしたケースですが、
これを「最上部」に入れたところ問題はなくなりました。

テンプレエディタでコピペするコードより上にCSSがあるケース

テンプレエディタでコピペするコードが最上部のケース

私の場合には以下のコードではありませんでしたが、
以下のCSSがOBSのブラウザソースにはデフォルトでは入っていますので、
入っている場合には削除またはそれよりも上にカスタムCSSを入れ、
思ったとおりのカスタマイズが適用されるか確認してみてください。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

ただ、なにもカスタムCSSに変更を加えていない以下のスクショにある
右側のテンプレートのようなケースだと、
OBS側もしくはテンプレート側で何らかの対処がないと
思ったとおりのフォントにはなりそうもありません。

縁取り含め

  • カスタムCSSを最上段に持ってくる

ことで、一部の現象に対しては解決が見込めるかもしれません。


また、OBSに入れたテンプレートの「幅」と「高さ」を調整するのはプロパティからとなり、
幅と高さを小さくしすぎたものをOBSのシーン上で大きくしようとすると、
小さな写真を大きくしたときのように滲む原因となりますので、
そのようなこともしていないか再確認をお願いいたします。


また、可能であれば「どのようなカスタムCSSを適用されているのか」を提示いただけますと、
調査もスムーズになる可能性がありますのでご協力願います。

「いいね!」 1

ありがとうございます。
現状、OBSの対応を待ちながら、しっくりくる設定を探しなおすしかなさそうなんですね…。
ご説明ありがとうございました。
画像に関しては、外部のプラグインの導入も検討してみます。

カスタムCSSに関しては、不具合発生前の物が残っていないため、提出することが出来ません。

問題を見つけられる以前のカスタムCSSは残っていないのですね、承知いたしました。

問題を見つけたあとのカスタムCSSだけでも残っており提示いただければ、
何かしらの解決や修正案の糸口が見つかる可能性はございます。


また、Xの引用となり恐縮ではありますが、
以下のような手法もお試しください。

・にじみ
・ガビガビ
を感じるということでしたら、上記ポストのとおり、
「OBS 33.0にてブラウザソースのデフォルトのフォントが変更された」
のが原因である可能性も十分に考えられます。

以下のコードをカスタムCSSに記述することでフォントが以前の状態と同じになり、
文字へのにじみやガビガビ感にも変化が出るかもしれません。

body { font-family: "Meiryo", sans-serif; }

「いいね!」 1

情報ありがとうございます。
教えて頂いたコードをカスタムCSSに入れてみたところ、確かにフォントが変わった(戻った?)様に思えます。
自身のアーカイブなどと見比べて確認してみようと思います。ありがとうございました。