Discordの通話相手をOBSで表示する方法

Vtuber基礎知識 Vクエwiki

🌱 はじめに
🧩 実際のイメージ【下記動画21:32～】
🔗 Discord StreamKit Overlayで通話URLを取得
🖥️ OBSにブラウザソースとして取り込む
🎨 カスタムCSS調整：立ち絵で喋らせたい
🖼️ カスタムCSS調整：アイコン外観変更したい

🌱 はじめに

コラボ配信でDiscord通話を使う際、「今誰が喋っているのか分かりづらい」と感じることが多くあります。特に人数が多い配信や、人狼・Among Usなどの企画配信では、視聴者が混乱しやすくなります。

そこで便利なのが、Discordで喋っている人のアイコンや立ち絵を、声に反応してぴょこぴょこ表示する演出です。

本記事では、「Discord StreamKit Overlay」と「Discord通話相手立ち絵表示ジェネレーター」を使って実現する方法を、OBS初心者でも分かるように解説します。

🧩 実際のイメージ【下記動画21:32～】

🔗 Discord StreamKit Overlayで通話URLを取得

【Discord StreamKit Overlayとは？】
Discordのボイスチャンネルで「誰が通話しているか」「誰が喋っているか」を、配信画面に表示できる公式ツールです。サーバーとボイスチャンネルを指定するだけで、その通話に参加しているユーザーのアイコンを自動で表示し、喋っている人に反応させることができます。

① Discordでコラボ用サーバーを立てる

「Discord StreamKit Overlay」は、サーバーを立てないと活用ができません。まずはDiscordでコラボ用のサーバーを作成しましょう。

② Discord StreamKit Overlayにアクセスする

https://streamkit.discord.com/overlay

上記URLより、「Discord StreamKit Overlay」のページへアクセスします。

③ Install for OBSをクリック

④ Discordと連携を行う

以下の画像のように、Discordとの連携設定を行います。

①voice widget：タブを選択
②Server：コラボ用の該当サーバーを選択
③Voice Channel：コラボに使うボイスチャンネルを選択

【補足】
「サーバー情報」は、PCにインストールされているDiscordアプリの情報を元に自動的に取得されます。「Discord StreamKit Overlay」上で、特別なログイン作業は不要です。

⑤ URLを取得

以下の場所からURLをコピーします。このURLがDiscordの通話情報を取得してくれています。

【補足】
取得したURLは、OBSのブラウザソースのURL欄に貼り付けます。

🖥️ OBSにブラウザソースとして取り込む

① ブラウザソースを追加

OBS上のソースから「ブラウザ」を追加します。

複数人とコラボする場合は、必ずソース名を設定しましょう。人数が増えてくると、誰が誰の映像か分からなくなりがちです。

「Discord_苗字名前」

② 各種設定を行う

ブラウザソースの設定を、以下のようにします。

URL：Discord StreamKit OverlayからコピーしたURLを入力
幅：1920
高：1080

【設定画面を閉じてしまった場合】
ソースをダブルクリックすれば、再度表示させることができます。

【サイズ】
後ほど調整する必要はありますが、あらかじめ大きめにブラウザソースを作成しておくのがおすすめです。そのため「1920×1080」でまずは作成しておくのがオススメです。

③ CSSで見た目を変更

初期設定では、アイコンのみが表示されている状態です。そこで、ブラウザソースの設定にある「カスタムCSS」を操作することで、見た目をデザインしていきます。

後述の「カスタムCSS調整」を参考にしながら、好みの見た目を作成してください。

🎨 カスタムCSS調整：立ち絵で喋らせたい

① Discordの開発者モードをONにする

まず、Discord側で開発者モードを有効にする必要があります。

Discord左下の「ユーザー設定（歯車）」をクリック
「詳細設定」
「開発者モード」をON

これを有効にしないと、ユーザーIDを取得できません。

② 表示したい相手のDiscordユーザーIDを取得

立ち絵を表示したい相手の「アイコン or ユーザー名」を右クリック
「ユーザーIDをコピー」を選択します。

【補足】
コピーしたユーザーIDは、後ほど「立ち絵表示ジェネレーター」の「DiscordユーザーID」欄に貼り付けます。

③ 表示したい立ち絵画像のURLを取得

次に、喋ったときに動かしたい立ち絵画像を用意します。

Discordで立ち絵を投稿するチャンネルを作成（例：立ち絵）
上記チャンネルに立ち絵画像を投稿
画像を右クリック →「リンクをコピー」

【補足】
コピーしたURLは、後ほど「立ち絵表示ジェネレーター」の「DiscordユーザーID」欄に貼り付けます。

④ OBSのDiscord通話相手立ち絵表示ジェネレーターにアクセス

https://obs-discord-picture.alfebelow.com

上記URLより、「OBSのDiscord通話相手立ち絵表示ジェネレーター」のページへアクセスします。

【OBSのDiscord通話相手立ち絵表示ジェネレーターとは？】
Discord通話中のユーザーに反応して動く、立ち絵用のカスタムCSSを自動生成できる無料ツールです。このツールで作成したCSSを、OBSのブラウザソースに貼り付けて使用します。

⑤ URLを入力

DiscordユーザID：上記②のIDをコピペ
画像URL：上記③のURLをコピペ

正しく設定できると、画面右側のプレビュー欄に立ち絵が表示されます。

⑥ 動きや表示オプションを調整する

プレビューを確認しながら、以下を好みに合わせて設定します。

話すときの動き（ぴょこぴょこ・点滅など）
動きの速さ
名前の表示 / 非表示
枠・後光の色

【補足】
初期設定のままでも、十分に綺麗なデザインになりますので、そのまま使用しても問題ありません。

⑦ カスタムCSSをコピー

見た目が問題なければ、画面下部に生成されるカスタムCSS をコピーします。

CSSをクリック
「CTRL + A」で全選択
「CTRL + C」でコピー

⑧ OBSのブラウザソースにカスタムCSSを貼り付ける

次にOBSを開き、すでに作成してある Discord用ブラウザソースの設定を開きます。

「カスタムCSS」欄を全選択
既存のコードを削除
⑦でコピーしたCSSを貼り付け

【補足】
ショートカット「Ctrl + A（全選択）」→「Ctrl + V（ペースト）」を使うと簡単です。

⑨ サイズ・位置を調整して完成

立ち絵は、画像の原寸サイズでOBSに表示されます。

OBSのプレビュー画面で「サイズ変更」「表示位置の調整」を行い、見やすい位置に配置しましょう。

これで、喋った人の立ち絵が声に反応して動く演出が完成です。

【注意：表示されない場合】
実際にDiscordの通話チャンネルに該当者が入室していないと、立ち絵は表示されません。OBSの準備段階などで動作確認をしたい場合は、自分が該当の通話チャンネルに入室した状態で、一時的に自分のユーザーIDを使ってCSSを作成するのがおすすめです。

⑩ リンク切れに注意

事前にOBSの準備を行い、当日になって何故か立ち絵が表示されないという現象が発生することがあります。その場合は、リンクが切れている可能性が高いです。

「Discord StreamKit Overlay」のURLを取得し直す
画像URLを取得し直し、カスタムCSSを再発行する

上記を実施すれば、改善することが多いです。

🖼️ カスタムCSS調整：アイコン外観変更したい

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

https://obs-discord-icon.alfebelow.com

上記URLより、「OBSのDiscordアイコン外観変更ジェネレーター」のページへアクセスします。

【OBSのDiscordアイコン外観変更ジェネレーター】
Discord通話中のユーザーに反応して動く、アイコン用のカスタムCSSを自動生成できる無料ツールです。このツールで作成したCSSを、OBSのブラウザソースに貼り付けて使用します。

② 動きや見た目の設定を調整する

プレビューを確認しながら、以下を好みに合わせて設定します。

アイコンの並び
アイコンの形
アイコンの大きさ
話すときの動き
名前の表示の有無
特定のユーザを隠す

【補足】
初期設定のままでも、十分に綺麗なデザインになりますので、そのまま使用しても問題ありません。

③ カスタムCSSをコピー

見た目が問題なければ、画面下部に生成されるカスタムCSS をコピーします。

CSSをクリック
「CTRL + A」で全選択
「CTRL + C」でコピー

④ OBSのブラウザソースにカスタムCSSを貼り付ける