Discordのアイコン表示をOBSに映して誰が話してるかわかりやすくする方法！

Discord（ディスコード）を使用して友達と通話（ボイスチャット）しながらゲーム実況をやっている人も多いですが、以下の画像のようにDiscordのアイコン表示をOBSの画面に映して誰が話しているのかわかりやすくしたい人もいるのではないでしょうか？

そんなあなたのために、今回はDiscordのアイコン表示をOBSに映して誰が話してるかわかりやすくする方法を徹底解説していきます！

🔽OBSの使い方を全てまとめたページはこちら！
check！
＞＞OBS Studioの使い方まとめページを確認する！

🔽Discordの使い方を全てまとめたページはこちら！
check！
＞＞Discordの使い方をまとめたページを確認する！

動画でも解説しています

Discordのアイコン表示をOBSに映して誰が話してるかわかりやすくする方法

Discordのアイコン表示をOBSに映して誰が話してるかわかりやすくする方法を解説しますが、

というように順を追って設定していきます。

①Discord StreamKit Overlayでの設定方法

まずはDiscordを起動してサーバーを作成し、通話（ボイスチャット）を始めて下さい。

もしもDiscordでサーバーを作成して通話する方法がわからない場合は、こちらのページで詳しいやり方を解説しているので要チェックです！
check！
＞＞Discordでサーバーを作成して通話する方法を確認する！

Discordで通話を始める事ができたら、こちらの「Discord StreamKit Overlay」というページを開いてください。

以下のような画面が表示されるので、「Install for OBS」をクリックしましょう。

次にこのような画面が表示された場合、Discordでアクセス許可を行う必要があります。

Discordの画面を開くとこのような画面が表示されているので、「認証」をクリックしてください。

Discord StreamKit Overlayの画面に戻り、このように表示されていたらアクセス許可は完了です。

しかし、このままだと英語になっているので非常にわかりにくいですよね。

もしも、ブラウザでChromeを使用しているのなら、画面内で右クリックして「日本語に翻訳」をクリックすると、

以下の画像のようにページ内の文字を日本語翻訳できます。（Chromeを使っていない人はこちらからダウンロードしてみて下さい。）

日本語の方がわかりやすいと思うので、ここからは日本語翻訳の状態で解説していきます。

まずは「音声ウィジェット」タブをクリックして、現在通話しているサーバーと音声チャンネルを選択してください。

すると、画面右側にプレビュー画面が表示されます。

実際にマイクに向かって話すとアイコン画像の周りが緑色になりますが、リアルタイムで動作を確認可能です。

基本的にこのプレビュー画面を見ながら各種設定を行っていくので覚えておきましょう。

次に細かい設定を行っていきますが、「話すユーザーのみを表示」をオン・オフすると、話している時は表示され、話していない時は非表示になります。

これは好みになるので、必要に応じてオン・オフを行ってください。

次に「小さなアバター」をオン・オフすると、表示されるアバター画像を通常状態から小さく表示できます。

これも好みになりますし、サイズ調整はOBSに表示させるときに調整することもできるので、必要に応じてオン・オフを行ってください。

次に「名前を隠す」をオン・オフすると、名前の表示をオン・オフすることができます。

アイコン画像だけOBSに表示させたいならオンにするのがおすすめです。

次に画面を下にスクロールすると、名前のテキストの色や文字サイズ、シャドウカラーなどを変更可能です。

これらの設定はプレビュー画面を見ながら自分が好きなように設定して下さい。

②OBSでの設定方法

自分好みに表示方法を設定できたら、OBSで設定していきましょう。

プレビュー画面の下にURLが記載されていますが、これをクリックすると全て選択できます。

選択できたら右クリックして「コピー」をクリックしてください。

もしくは「Ctrl＋C」のショートカットキーでコピーすることが可能です。

次にOBSを起動したら、ソースの欄の「＋」をクリックして「ブラウザ」をクリックします。

ソースを作成/選択という画面が表示されるので、好きな名前を付けたら「OK」をクリックしてください。
（今回は初期設定のまま解説していきます。）

すると、プロパティの画面が表示されますが、URLの欄に記載されている文字を消した後に右クリックして「Paste」をクリックして貼り付けて下さい。

もしくは「Ctrl＋V」のショートカットキーでも貼り付けることが可能です。

次に幅と高さの設定を行いますが、

Discord StreamKit Overlayのサイトを確認すると、幅：312ピクセル、高さ：600ピクセルで指定されているので、この数値に合わせて設定します。

OBS側の幅の項目を「312」、高さの項目を「600」に設定したら「OK」をクリックしてください。

すると、プレビュー画面にDiscordのアイコンが表示されるので、位置調整やサイズ調整を行いましょう。

設定時の注意点

実際にOBSに表示させたけど、やっぱり設定を変更したい場合があると思います。

ただ、Discord StreamKit Overlay内の設定を変更するとURLが変わってしまうので再設定を行う必要があります。

設定を変更したらもう1度同じようにURLを選択してコピーし、

OBSのブラウザのURLに貼り付け直すようにして下さい。

ボイスチャンネルを切り替えた時でも表示させる方法

1つのサーバー内に複数のボイスチャンネルがある場合もありますが、別のボイスチャンネルに切り替えたとしても表示させる方法を解説しておきます。

まず、ボイスチャンネルをこれから作成するというのであれば、先に作成を行いましょう。

今回は「テスト用」というボイスチャンネルを作成して解説します。

ボイスチャンネルの作成ができたら、こちらのボイスチャンネルの通話に入ってください。

次にDiscord StreamKit Overlayの音声チャンネルの項目に先ほど作成した「テスト用」を選択します。

もしも表示されていないのであれば、ページを更新してから確認してください。

あとは細かい設定を行ったら、URLをコピーしましょう。

この後の流れは同じで、OBS側でブラウザのソースを新しく追加し、URLの貼り付けと幅の調整を行えば、OBSに表示させることができます。

実際にボイスチャンネルを切り替えたとしても表示されるのか確認してみてください。

Discordアイコンの外観を変更する方法

ここまで解説した方法では、表示されるDiscordアイコンが丸型のみとなっており、話した時もアイコン画像の周りが光るだけの仕様になっています。

ただ、Discordアイコン外観変更ジェネレーターというサイトを利用してCSSを作成し、その情報をブラウザソースに貼り付けることで、また違った外観に変更することが可能です。

実際の導入方法を解説しますが、まずはこちらのDiscordアイコン外観変更ジェネレーターというサイトを開いてください。

実際に設定内容を確認すると、アイコンの並びや形、大きさ、話す時の動き方などを設定できるようになっています。

プレビュー画面を見ながら自分好みに設定してみてください。

設定が行えたらOBSに導入していきますが、画面下の方にCSSが表示されているので、CSSの画面右中央あたりにあるコピーマークをクリックしてコピーしてください。

次にOBSの画面に戻り、先ほど設定を行ったブラウザソースをダブルクリックしてプロパティの画面を開いてください。

もしくは、ソースを選択した状態で「プロパティ」をクリックすることでも開くことができます。

次にカスタムCSSという項目に最初から記載されていたCSSはすべて削除し、先ほどコピーしたCSSを貼り付けてください。

できたら「OK」をクリックしましょう。

すると、Discordアイコンの外観が変化します。

話すときの動きの設定も加えていたのであれば、実際に声を出して正常に動くのかも確認しましょう。

まとめ

今回はDiscordのアイコン表示をOBSに映して誰が話してるかわかりやすくする方法を解説しました！

Discordの使い方を全てまとめたページを作成しているので、Discord関連でわからない事がある場合はチェックしてみて下さい！
check！
＞＞Discordの使い方をまとめたページを確認する！

ちなみに、自分は「しふぁチャンネル」というゲーム実況チャンネルと「しふぁの作業部屋」というこれからYouTubeを始めたい人向けの情報を発信しているチャンネルを運営していますが、両方のチャンネルとも収益化の条件である、

この条件をクリアしており、収益化もしています。

特に「しふぁの作業部屋」ではたった4ヶ月間・3日に1本動画を投稿するだけで収益化する事ができたので、その時のノウハウをまとめた記事をnoteにて販売しております。

少しでも早く登録者数や再生回数を増やして収益化まで行きたいと考えている人にとって役に立つ情報を解説していますし、今なら購入者限定で無料で貰えるお得な特典も用意しています！

今後も特典を増やしたり、内容のアップデートも行っていく予定なので、お得なうちにチェックしてみて下さいね♪