配信画面上で今誰が話してるのかをDiscordのアイコンで超わかりやすくする「OBSのDiscordアイコン外観変更ジェネレーター」の使い方

オンラインゲームの実況プレイでは、複数人がDiscordなどのボイスチャットを使って会話することがありますが、その実況配信や動画の視聴者には「今誰がしゃべっているのか？」というのがわかりにくいことがよくあります。そこで、画面上にDiscordのアイコンを表示した上で、そのアイコンの動きや形をカスタマイズ可能な「OBSのDiscordアイコン外観変更ジェネレーター」を、アルフさんが公開しています。

OBSのDiscordアイコン外観変更ジェネレーター
https://obs-discord-icon.alfebelow.com/

GitHub - alfe/obs-discord-icons-css-generator: Discordで通話中のメンバーをOBS Studioに表示するときに、横並びにしたりアイコンを四角にしたりするためのカスタムCSSをつくるジェネレーター
https://github.com/alfe/obs-discord-icons-css-generator

まずは、OBS StudioにDiscordのアイコンを表示させる必要があるため、Discordを起動した状態で、ブラウザから以下の「Discord StreamKit Overlay」にアクセスします。

Discord StreamKit Overlay
https://streamkit.discord.com/overlay

Discord StreamKit OverlayはOBS StudioとXSplitに対応。今回はOBS Studioで利用するので「Install for OBS」をクリックします。

すると、Discordが「StreamKit Overlay」からのアクセス要求を確認してくるので、「認証」をクリックします。

Discord StreamKit Overlayのうちから「VOICE WIDGET」のタブをクリックし、「Server」で利用しているDiscordのサーバーを、「Voice Channel」で反映したいボイスチャンネルを選択します。設定はいろいろありますが、「Show Spieking Users Only(しゃべっている人のアイコンだけ映す)」「Small Avatars(アイコンを小さく表示する)」「Hide Names(名前を隠す)」の3つを気にするだけでOK。設定を終えたら、右のプレビュー画面の下に表示されるURLをコピーします。

次にOBS Studioで、ソース欄で右クリックして「追加」を選択し、「ブラウザ」をクリック。

「OK」をクリック。

ブラウザのプロパティにあるURLの欄に、Discord StreamKit OverlayでコピーしたURLを張り付けて、「OK」をクリックします。

すると、こんな感じでDiscordのアイコンを表示するレイヤーが追加されます。しゃべるとアイコンが緑色に光るので、誰がしゃべっているのかどうかが視覚的にわかりやすくなるというわけです。

実際にDiscordのアイコンを表示した状態でしゃべりながらOBS Studioで録画するとどうなるのかは、ゲーマー向け高機能オーディオミキサーのヤマハ ZG01とDiscord StreamKit Overlayを利用してゲームプレイを録画した以下のムービーを見るとよくわかります。ゲーム画面の右上にDiscordのアイコンが表示されており、しゃべるとその人のアイコンが光ります。

ヤマハ ZG01を使ってDiscordでボイチャしながらゲームしてみた - YouTube


OBSのDiscordアイコン外観変更ジェネレーターは、このDiscord StreamKit Overlayを使ったアイコン表示をさらにカスタマイズできるサイトです。

OBSのDiscordアイコン外観変更ジェネレーターにアクセスします。

Discord StreamKit Overlayでは、アイコンの並び・アイコンの形・話すときの動き・動きの速さ・アイコンの大きさ・名前の表示・名前の見た目・名前の位置を調整できます。設定操作パネルの右側にプレビューが表示されます。

設定が終わると、設定操作パネルの下にCSSコードが表示されます。右にあるクリップボードアイコンをクリックすると、自動でCSSコードがコピーされます。

OBSのソースにある「ブラウザ」のプロパティで、「カスタムCSS」の欄にCSSコードをコピーし、「OK」をクリック。

すると、OBSのDiscordアイコン外観変更ジェネレーターで設定した通りにアイコンが表示されます。動きが加わると、今誰がしゃべっているかがよりわかりやすくなるので、OBSのDiscordアイコン外観変更ジェネレーターは複数人でしゃべりながらゲームをする実況配信や動画を録画するのであれば、かなりお役立ちです。