ライブ配信でDiscordでの通話音声を流す場合、ひとつ難点があります。
それは、視聴者からするとだれが話しているのかわからないという問題です。配信を初めて見る視聴者にとっては、だれがだれなのか声だけでは区別がつきません。
そこで、アイコンを配信画面に表示したうえで光らせてみましょう。
つまり、
- 黙っている人のアイコンは暗いまま表示
- 話している人のアイコンは明るく表示
というようにします。では、どうすればよいのでしょうか。
2024年9月現在、この記事は古くなっています。読まないようにしてください。
2024年現在は、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にペーストする。
Discordにログインしておく
まず前提として、Discordにログインしておいてください。ログインしていない状態でStreamKitにアクセスすると、下記エラーが表示されます。
CAN'T CONNECT TO THE DISCORD CLIENT
この状態ではStreamKitを使えません。Discordを起動し、ログインしておきましょう。
StreamKitで設定する
StreamKitにアクセスしたら、「Install for OBS」をクリックしてください。
すると、画面が切り替わるので「VOICE WIDGET」をクリックします。紛らわしいですが、「STATUS WIDGET」のほうではありません。
「Server」と「Voice Channel」を選びます。
▲Discord側でサーバーとチャンネルを作っていない場合は選べません。
StreamKit側にアイコンが表示されたことを確認しましょう。もし表示されていない場合は、Discord側でボイスチャンネルに参加します。
装飾設定について
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をコピー＆ペーストしなおさないと、設定変更が反映されません。
話している人を光らせるには？
これで終わりでもよいのですが、アイコンの境界線が緑色で表示されるだけですから、まだ見づらいかもしれません。
そこで、話している人のアイコンが光る設定にしてみましょう。
やり方は簡単です。今度は「Discord StreamKit Overlay Sample」というWebサービスを使います。
同サイトにアクセスしてください。下にスクロールしていくと、「明るさを変更する」という表記があります。
ここに表示されている文字列をコピーし、さきほどのブラウザーソースの「カスタム CSS」にペーストするのです。
▲「URL」のほうではありません。「カスタム CSS」のほうにペーストです。最初からある文字列に上書きしてください。
設定が完了しました。話している人のアイコンが明るく表示されることを確認してください。話していない人は暗いまま表示されます。
なお、Discord StreamKit Overlay Sampleにはアイコンを横並びにするコードもあります。
まとめ
StreamKit + 配信ソフトの使い方さえ理解していれば、難しい部分はありません。
- StreamKitに掲載されているURLをコピーする。
- 配信ソフトのブラウザーソースに、URLをペーストする。
これでアイコンを表示できます。
あとは、アイコンを光らせるためにDiscord StreamKit Overlay Sampleを使うだけです。
OBSでのレイアウトのやり方や、通話音声の入れ方など、わからない部分がある場合は、下記ページをご覧ください。
2006年から15年以上、ゲーム実況のやり方の解説記事を書いています。書いた記事数は1,000本以上。ゲーム配信、ゲーム録画、動画編集の記事が得意です。
記事はていねいに、わかりやすく！ゲーム実況界の教科書をめざしています。