Discordで喋ると配信で任意の画像が光る方法【立ち絵光らせる】【Discord/OBS】

はじめまして、でがらしと申します。
Youtuber（Vtuber）がコラボなどでDiscordで話しながら配信してる時に、配信で喋ってる人の立ち絵が光ってるのを見かけませんか？
今回はOBSでどのように設定すれば、Discordで喋ると任意の画像が光るのか、その方法を紹介します。
該当する方は一回読んでもらってもいいと思います。
なお、当方セキュリティには疎いので、実行は自己責任でお願いします。
もしこの方法に問題があれば連絡いただけると幸いです

イメージ湧かない、実際どんなの？

喋ってない時

↓

喋った時

喋ると明るくなり、画像に縁ができます。
これを再現します。

discordでサーバーとボイスチャンネルを用意する

まず、discordを導入しましょう。
discordの導入方法に関しては多数のサイトがあるので割愛します。

discordのボイスチャンネルに入っておく。

ボイスチャンネルに入らないと、画像は出てこないので、必ずボイスチャンネルに入っておきましょう。

discordを開いたままでdiscord ストリームキットを導入する

discord ストリームキットにアクセスし、OBS用にインストールするを選択。

OBSのポップアップを許可する

一度ディコードで許可してしまうとポップアップが出てこないみたいですが、全て許可するで処理します。

discord ストリームキットの上部の音声ウィジェットを選択する

上部の右側にある音声ウィジェットを選択します。

OBSで配信するときに使っているサーバーとチャンネルを選択する

①右下のURLをコピーし、メモする

このURLをOBSで後々使うので必ずメモします。

光らせたい画像をディコードに貼る

今回はイラスト屋から持ってきた画像をdiscordに貼りました。
フォルダからドラッグアンドドロップでも転送できます。

②画像を右クリックし画像のリンクのURLを取得する。

リンクを必ずコピーしてメモしよう。

開発者モードにする。

次にユーザーIDを取得するための準備として開発者モードにします。
開発者モードでしか、設定できないので、注意。
設定がすべて終わったら戻しても良いと思います。
左下の歯車マーク（ユーザー設定）をクリックし、詳細設定から開発者モードをオンにします。

③DiscordでユーザーIDを取得しメモする

初期画面に戻って右側の点滅させたい人のアイコンを右クリックします。

一番下のユーザーIDをコピーするを選択しメモします。

③で取得したdiscordのユーザーIDと②で取得した画像URLをサイトに貼る

OBSのDiscord通話相手立ち絵表示ジェネレーターに③と②のURLを貼ります。
③がdiscordのユーザーIDで②が画像のURLです。
この辺が一番危ない気はしているので、自己責任でお願いします。

DiscordID、画像URLを貼り終えたら、話すときの動きなどを設定する(縁を光らせたい場合は、縁取りを選択)

④下の画面に映ったカスタムCSSをコピーしメモする

OBSを起動し、カスタムCSSを入力する

ここまできたらもう少しです。
左下のソースからプラスマークを押し、ソースを追加します。

ブラウザを選択します。

新規作成でOKを選択し、URLの欄に①のURLを貼ります。

そして、カスタムCSSに④のコードを貼り付け、OKを選択肢します。

このとき、discordのボイスチャンネルに画像を映したい人がいるか確認します。

以上です。
いいねください
お願いします！