ライブ配信でDiscordでの通話音声を流す場合、ひとつ難点があります。
それは、視聴者からするとだれが話しているのかわからないという問題です。配信を初めて見る視聴者にとっては、だれがだれなのか声だけでは区別がつきません。
そこで、アイコンを配信画面に表示したうえで、ぴょこぴょこ光らせてみましょう。
関連OBSにDiscordアイコンを映すベストな方法、ありました
目次
必要なもの
以下の2つがPCにインストールされていることを確認してください。
- Discord
- 配信ソフト
配信ソフトは、現在使っているものでかまいません。今回はOBS Studio（以下OBS）を例に見ていきます。
Discord StreamKit Overlayを使おう
Discordのアイコンを表示させるうえで重要なのが「Discord StreamKit Overlay」（以下StreamKit）というWebサービスです。
StreamKitに掲載されているURLをコピーし、OBSにペーストしましょう。すると、配信画面にDiscordのアイコンを表示できます。
StreamKitの使い方
おおよそ3ステップの設定となります。
- StreamKitにアクセスする。
- 掲載されているURLをコピーする。
- コピーしたURLをOBSにペーストする。
【2025年1月12日追記】エラーが出て使えない場合は
まず前提として、Discordにログインしておいてください。ログインしていない状態でStreamKitにアクセスすると、下記エラーが表示されます。
CAN'T CONNECT TO THE DISCORD CLIENT
この状態ではStreamKitを使えません。Discordを起動してログインし、ボイスチャンネルに参加しておきましょう。
しかし、それでもエラーが出て設定できない場合があるかもしれません。2024年12月中旬あたりからトラブルが起きています。
対処法は、下記ポストを参考にしてください。
（1）https://x.com/Madoka_Hoshimi/status/1876582966891348337
（2）https://x.com/Sn0vv_trpg/status/1871125716936565188
（3）Xでの「Streamkit」の検索結果
なお、筆者のケースについては最後にまとめました（おまけとして）。
StreamKitで設定する
ここからが本題です。
StreamKitにアクセスしたら、「Install for OBS」をクリックしてください。
すると、画面が切り替わるので「VOICE WIDGET」をクリックします。紛らわしいですが、「STATUS WIDGET」のほうではありません。
「Server」と「Voice Channel」を選びます。
▲Discord側でサーバーとチャンネルを作っていない場合は選べません。
StreamKit側にアイコンが表示されたことを確認しましょう。もし表示されていない場合は、Discord側でボイスチャンネルに参加します。
また、マイクに声を入れるとStreamKit側のアイコンの境界線が緑色で表示されます。
もし緑色の境界線が表示されていない（反応がない）場合は、マイク関連の設定を見直してください。
装飾設定について
StreamKitでの設定は以上で完了です。 あとは、URLをOBSにコピー＆ペーストするだけです。
ただ、ひょっとしたらStreamKitに並んでいる設定が気になるかもしれません。これはアイコン・名前などの装飾設定です。あまり大きな意味はありません。
| 説明 | |
| Show Speaking Users Only | 話している人のアイコンのみ表示する |
| Small Avatars | アイコンを小さく表示する |
| Hide Names | 名前を非表示にする |
| Text Color | 文字の色 |
| Text Size | 文字の大きさ |
| Text Outline Color | 文字の境界線の色（縁の色） |
| Text Outline Size | 文字の境界線の太さ |
| Shadow Color | 文字の影の色 |
| Shadow Size | 文字の影の太さ |
| Background Color | 文字の背景色 |
| Opacity | 背景色の透明度 |
| Shadow Color | 背景色の影の色 |
| Shadow Size | 背景色の影の太さ |
「Shadow Size」などは、「Text Size」を大きくしないと効果がわかりづらいかもしれません。
アイコンを光らせる設定はありませんが、仕様です。やり方は後述します。
URLをコピー＆ペーストする
URLをコピーする
StreamKitの右下に掲載されているURLをコピーしましょう。
URLが表示されない場合、ブラウザー側で拡大表示している可能性があります。拡大率を100％にしてください。
▲URLが見えていない状態です。
ブラウザーソースを追加する
いまコピーしたURLをOBSにペーストするわけですが、そのためにはOBSのブラウザーソースを使います。
- 「ソース」の「+」をクリックする。
- 「ブラウザ」をクリックする。
- 「OK」をクリックする。
URLをペーストする
そして、さきほどコピーしたURLを「URL」の部分にペーストします。
「幅」を312、「高さ」を600にします。
最後に「OK」をクリックして設定画面を閉じましょう。
配信画面にアイコンが表示されました。また、話している人のアイコンの境界線が緑色になります。
補足
StreamKitの設定を変更した場合、URLはコピー＆ペーストしなおしになる点に注意してください。
なぜなら、設定を変更すると自動的にURLも変更されるからです。したがって、新しいURLをコピー＆ペーストしなおさないと、設定変更が反映されません。
ぴょこぴょこ＆光らせる方法
これで終わりでもよいのですが、アイコンの境界線が緑色で表示されるだけですから、まだ見づらいかもしれません。
そこで、話している人のアイコンがぴょこぴょこ飛び跳ねるようにし、かつ光る設定にしてみましょう。
やり方は簡単です。今度は「OBSのDiscordアイコン外観変更ジェネレーター」というWebサービスを使います。
同サイトにアクセスしてください。「話すときの動き」という部分に「点滅」「ぴょこぴょこ」があるので、両方の設定をONにします。
そのうえで、画面を下にスクロールしたところにあるコピーアイコンをクリックします。すると、CSS（左側の文字列のこと）がコピーされます。
最後に、さきほどのブラウザーソースの「カスタム CSS」にペーストしましょう。
▲「URL」のほうではなく、「カスタム CSS」のほうにペーストです。最初からある文字列に上書きしてください。
設定が完了しました。話している人のアイコンが変化したことを確認してください。話していない人は暗いまま表示されます。
なお、アイコンを横並びにしたり、四角形にする設定もあります。自由に設定してかまいません。
まとめ
StreamKit + 配信ソフトの使い方さえ理解していれば、難しい部分はありません。
- StreamKitに掲載されているURLをコピーする。
- 配信ソフトのブラウザーソースに、URLをペーストする。
これでアイコンを表示できます。
あとは、アイコンを光らせるためにOBSのDiscordアイコン外観変更ジェネレーターを使うだけです。
OBSでのレイアウトのやり方や、通話音声の入れ方など、わからない部分がある場合は、下記ページをご覧ください。
おまけ : よくわからんエラーについて
筆者の場合は、「CAN'T CONNECT TO THE DISCORD CLIENT」は出ませんでしたが、アイコンの境界線が緑色に光りませんでした。2台のPCで試し、2台ともです。
いままでは問題なく、ひさびさに2024年末に試した結果、そうなりました。
そこで、対処法としてやったのは、Discord側で認証の解除、Discord側でマイク音声の設定見直し（ノイズ抑制を外した）、OBSのブラウザーソース削除あたりです。
それでもすぐには直らず、少し放置していたのですが、翌日いつのまにか直っていました。
加えて、なぜかDiscordの「設定」→「音声・ビデオ」の画面を開きっぱなしにしていれば不具合が起きないことに気が付きました。
それ以来、基本的に問題なくStreamKitを使えています。
2006年から15年以上、ゲーム実況のやり方の解説記事を書いています。書いた記事数は1,000本以上。ゲーム配信、ゲーム録画、動画編集の記事が得意です。
記事はていねいに、わかりやすく！ゲーム実況界の教科書をめざしています。