【Discord】OBSにアイコンを表示して誰が話しているかわかりやすくする方法

DiscordでOBSにアイコンを表示して誰が話しているのか配信などでわかりやすくする方法を紹介していきます。
通常のオーバーレイだと小さく分かりにくいためOBSように分かりやすくできたほうが便利です。

Discord StreamKit Overlayの設定

DiscordのアイコンをOBSで表示させるには、Discord StreamKit Overlayというアプリを使用します。
公式サイトの左にある「Install for OBS」をクリックします。

画面がDiscordに切り替わりますので、青い「認証」をクリックします。

再度Discord StreamKit Overlayのブラウザに戻ります。
Google Chromeをブラウザで使用している場合は、右クリックから「日本語に翻訳」で英語を日本語にすることができます。

上部のメニューで音声ウィジェットを開きます。
サーバーとボイスチャンネルを現在使用しているボイスチャンネルを指定します。
すると右側にプレビューが表示されるようになりDiscordが音声を検出した場合はリアルタイムで緑色に光ります。
「話しているユーザーのみ表示」は好みによって変更しましょう。
「小さいアバター」「名前を隠す」はオフにしておくほうがいいです。
下にスクロールすると文字と背景の大きさ、色を変更することができます。

以上で設定は完了です。

OBS上での設定

続いてOBSで設定をしていきます。
今回使用しているのは純正のOBSではありませんが、設定は同じです。
Discordアイコンを表示したい配信画面を表示させ、ソースを追加をクリックします。
ソースを追加から「ブラウザソース」を選択します。

ブラウザソースの設定で「URL」の部分にDiscord StreamKit Overlayのプレビュー下にあるURLをコピペで貼り付けます。
貼り付けが完了したら「閉じる」「OK」で完了します。
幅や高さは後から修正していきましょう。

するとウィジェット、ソースを追加した部分にDiscord StreamKit Overlayのアイコンが表示されるようになっています。

注意点としては、Discord StreamKit Overlayで設定を変更した際には、URLが変わってしまいます。
ですので、設定を変更するたびにURLを入れ替えないと変更することができません。
再度変更するには、ソースを右クリックして「プロパティ」から編集することができます。