Discordのアイコンを配信画面に表示、ピカピカ光らせてみないか?全4ステップ

ライブ配信でDiscordでの通話音声を流す場合、ひとつ難点があります。

光るアイコン

それは、視聴者からするとだれが話しているのかわからないという問題です。配信を初めて見る視聴者にとっては、だれがだれなのか声だけでは区別がつきません。

Discord

そこで、アイコンを配信画面に表示したうえで光らせてみましょう

つまり、

  • 黙っている人のアイコンは暗いまま表示
  • 話している人のアイコンは明るく表示

というようにします。では、どうすればよいのでしょうか。

【スポンサーリンク】

必要なもの

以下の2つがPCにインストールされていることを確認してください。

意外かもしれませんが、新しくインストールするものはありません。

配信ソフトは、現在使っているものでかまいません。今回はOBS Studio(以下OBS)を例に見ていきます。

配信ソフト

Discord StreamKit Overlayを使おう

Discordのアイコンを表示させるうえで重要なのが「Discord StreamKit Overlay」(以下StreamKit)というWebサービスです。

Discord StreamKit Overlay

StreamKitに掲載されているURLをコピーし、OBSにペーストしましょう。すると、配信画面にDiscordのアイコンを表示できます。

Discord StreamKit Overlay

StreamKitの使い方

おおよそ3ステップの設定となります。

  1. StreamKitにアクセスする。
  2. 掲載されているURLをコピーする。
  3. コピーしたURLをOBSにペーストする。

Discordにログインしておく

まず前提として、Discordにログインしておいてください。ログインしていない状態でStreamKitにアクセスすると、下記エラーが表示されます。

CAN'T CONNECT TO THE DISCORD CLIENT

この状態ではStreamKitを使えません。Discordを起動し、ログインしておきましょう。

エラー

StreamKitで設定する

StreamKitにアクセスしたら、「Install for OBS」をクリックしてください。

Install for OBS

すると、画面が切り替わるので「VOICE WIDGET」をクリックします。紛らわしいですが、「STATUS WIDGET」のほうではありません。

VOICE WIDGET

Server」と「Voice Channel」を選びます。

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をコピー

URLが表示されない場合、ブラウザー側で拡大表示している可能性があります。拡大率を100%にしてください。

URLが表示されない
▲URLが見えていない状態です。

ブラウザーソースを追加する

いまコピーしたURLをOBSにペーストするわけですが、そのためにはOBSのブラウザーソースを使います。

  1. 「ソース」の「+」をクリックする。
  2. ブラウザ」をクリックする。
  3. 「OK」をクリックする。

ブラウザソース

URLをペーストする

そして、さきほどコピーしたURLを「URL」の部分にペーストします。

OBSの設定

「幅」を312、「高さ」を600にします。

幅と高さ

最後に「OK」をクリックして設定画面を閉じましょう。配信画面にアイコンが表示されました。また、話している人のアイコンの境界線が緑色になります。

緑色のアイコン

補足

StreamKitの設定を変更した場合、URLはコピー&ペーストしなおしになる点に注意してください。

なぜなら、設定を変更すると自動的にURLも変更されるからです。したがって、新しいURLをコピー&ペーストしなおさないと、設定変更が反映されません。

話している人を光らせるには?

これで終わりでもよいのですが、アイコンの境界線が緑色で表示されるだけですから、まだ見づらいかもしれません。

そこで、話している人のアイコンが光る設定にしてみましょう。

やり方は簡単です。今度は「Discord StreamKit Overlay Sample」というWebサービスを使います。

Discord StreamKit Overlay Sample

同サイトにアクセスしてください。下にスクロールしていくと、「明るさを変更する」という表記があります。

明るさを変更する

ここに表示されている文字列をコピーし、さきほどのブラウザーソースの「カスタム CSS」にペーストするのです。

カスタムCSSにコピペ
▲「URL」のほうではありません。「カスタム CSS」のほうにペーストです。最初からある文字列に上書きしてください。

設定が完了しました。話している人のアイコンが明るく表示されることを確認してください。話していない人は暗いまま表示されます。

光るアイコン

なお、Discord StreamKit Overlay Sampleにはアイコンを横並びにするコードもあります。

まとめ

StreamKit + 配信ソフトの使い方さえ理解していれば、難しい部分はありません。

  1. StreamKitに掲載されているURLをコピーする。
  2. 配信ソフトのブラウザーソースに、URLをペーストする。

これでアイコンを表示できます。

あとは、アイコンを光らせるためにDiscord StreamKit Overlay Sampleを使うだけです。

OBSでのレイアウトのやり方や、通話音声の入れ方など、わからない部分がある場合は、下記ページをご覧ください。

【図解】やさしいOBS Studioの使い方。ゲーム配信者のための設定ガイド
OBS Studio(以下OBS)は、各種配信サイトに対応している無料のライブ配信用ソフトです。詳しい使い方を見ていきましょう。 ...
OBSでDiscordの通話音声を入れる方法。ほぼ設定不要です
OBS Studio(以下OBS)を使用していると、Discordの通話音声を入れたい、ボイスチャットを入れたいというケースがあるかもしれま...
スポンサーリンク
レクタングル(大)
レクタングル(大)

X(旧Twitter)で最新情報をツイートしています!フォローお願いします。

関連コンテンツ



スポンサーリンク
レクタングル(大)