コラボ配信の必須アイテム
コラボ配信でよく見かける、誰がしゃべってるかを分かりやすくするためのアイコンと名前表示があるんですが、それについてのお話です。
以前にも、オーバークックをやっていた頃に似たような内容のブログを書いていますが、今回はもっと汎用的なCSSになります。
早速、8月から本格始動した私のTwitchチャンネルのオーバーレイ設定について調べた内容をまとめたいと思います。
誰がしゃべってるかオーバーレイ
こんなの見たことないですか？
これを表示させるためのカスタムCSSを簡単に生成できる方法を見つけたのでやってみました。
テスト動画がこちら
うまく表示されてます！
これを表示するために使用しているコードがこちら
CSSを自動生成
とても簡単に、好みの表示に変更できるサイトを見つけたので、そちらを使用させていただきました！
それがこちら
obs-discord-icon.alfebelow.com
こちらのサイトを利用すると、アイコンの並びを縦横に変更できたり、アイコンの形などの変更も、視覚的な確認をしながら変更ができ、そこで生成されたCSSを自分のOBSのカスタムCSS欄にコピーペーストするだけといった、配信者の痒い所に手が届く系サイトです！
本当にありがとうございます！
こちらが使い方の解説ブログです
制作者は、アルフ（@alfe_below）さん です。
私の場合、OBSはstreamlabsを使用しているので、設定場所はここです。
こんな感じで、OBSに新しいブラウザーソースを作って、URLのところは、お馴染みの Discord STREAMKIT（ https://streamkit.discord.com/overlay ）で取得したURLをペーストし、カスタムCSSのところに、上記で公開した自分用にちょっとだけカスタマイズしたCSSをペーストするだけで、簡単に設定できました！
私のチャンネルもそうですが、実写を表示していないチャンネルで複数人しゃべっていると、初めて訪問した時は、主が誰なのかわからなかったりするのですが、これなら、名前やアイコンから今話しているのが、このチャンネルの人かなと予想できます。
画面内の情報量が多くなると、長時間視聴される方が疲れるケースがあるので、画面はシンプルな仕上がりにした方が良いに越したことはないのですが、複数人がしゃべるケースの多い私のチャンネルでは、有効と判断しました。
出来るだけシンプルにするために、アイコンには動きをつけず、しゃべっている時の明かりも控えめに表示されるように設定しています。
これなら視聴者さんも、ずっと見ていて疲れを感じることも少なくなるかなと思います。
新しい機能をいつ使うことになるか分かりませんが、皆さんに楽しんでいただけるように、これからも工夫していけたらと思っています。
♪(´ᵕ｀๑)۶⁾⁾