リンク生成とリダイレクト

【初心者向け】Discordサーバーで誰が話しているのかをわかるようにする画面を作ろう

提供:Willadge

皆さんこんにちは。暁星いちやです。

今回はDiscordサーバーの通話で誰が話しているのかがわかるようにするための設定の方法を公開したいと思います。

私もよく使う方法なので、備忘録代わりになります。 もしよろしければ活用してみてください。

また、設定した値を共有するほか、オリジナルで作りたい方向けのサイトも用意していますので、使ってみてください

DiscordUsageImage.png

使うとどうなるの?

コラボ配信や雑談放送で声の聞き分けができたり、アイコンで誰が話をしているのか一目瞭然なことからアイコンをぴょこぴょこ動かすことでそれだけで一つの表現方法として用いることが可能です。例えば、AmongUsのサーバーを作ってアイコンをそれぞれあのキャラクターとして割り当てることで、直感的にリスナーに誰が話をしているのかを伝えることができます。また、CSSを利用できるためアニメーションのバリエーションも増やすことができます。好きなデザインを見つけて思い思いの好きなデザインを見つけてみましょう

Discordのサーバーから呼び出す設定をしよう

まずはDiscordのサーバーの通話状態を表示させる基本的な設定からしていきましょう。以下のサイトのリンクをクリックします

https://streamkit.discord.com/overlay

次に、サイトが表示されるので、「Install for OBS」をクリックします

HowtoImportDiscord1.png

クリックすると設定画面が開くので「VoiceWidget」を選択します

HowtoImportDiscord3.png

「VoiceWidget」を選択すると以下の画面が出てくるので、まずは使いたいサーバーを選択する

HowtoImportDiscord4.png

サーバーを選択したら今度は通話チャネルを選択する

HowtoImportDiscord5.png

選択したら設定項目が何個かあるので、以下の内容を確認しながら調整しましょう。

項目名 和訳 内容 個人的設定
Show Speaking Users Only 喋っている人だけ表示 オンにすると喋っている人だけを表示してくれる

オフにすると全員が写っており、喋っている人を判別するにはアイコン周りが緑色に変更される

オフ
Small Avatars アバターを小さく アバターを小さく表示させる(本当に気持ち程度) オフ
Hide Names 名前を非表示 オーバーレイにユーザ名を表示させない オフ
Show My Avater First 先頭に自分のアカウントを表示 オーバーレイに誰が参加しても自分を一番最初にする オン

テキスト設定

項目名 和訳 内容 個人的設定
Text Color 文字色 カラーコードで指定して文字の色を設定する #FFFFFF
Text Size 文字の大きさ オーバーレイに表示させるユーザ名の大きさ 16px
Text Outline Color テキストの縁取りの色 テキストの縁取りの色を黒に指定する #000000
Shadow Color 影の色 影の色の設定をする #000000

設定が終わったら画面右下にあるリンクをクリックしてコピーします

HowtoInstallDiscord5.png

コピーしたらOBSを起動し、ソースを追加します。「ブラウザ」を選択します。

HowtoInstallDiscord6.png

ブラウザを新規作成します。必要に応じて名前を入力し、OKを押します

HowtoInstallDiscord7.png

URL欄に先ほどコピーしたリンクをペーストします。

幅や高さを調整して「OK」を押します。

HowtoInstallDiscord8.png

これで準備完了です!

HowtoInstallDiscord9.png

アレンジしてみよう

話しているのが誰かわかる方法が緑のインジケータだけでもいいけど、もっと見やすくわかりやすくしたいと思ったあなた。そんなサイトもあります


OBSのDiscordアイコン外観変更ジェネレーター

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

このサイトにアクセスをするとレイアウトが出てきます。

このサイトを使って私はぴょこぴょこさせるようなレイアウトを実現させられます

私が使っている設定を共有しておきます

HowToArrangeDiscord1.png

設定したあとはスクロールして下のコードをコピーします

HowToArrangeDiscord2.png

コピーしたあとはOBSで設定を開き、内容をペーストします。

HowToArrangeDiscord3.png

これで使えるようになりました

CompletetoDiscord.png

まとめ

これでできるようになりました。皆さんもこれでDiscordで参加している人をわかりやすくすることができました。

皆さんもぜひやってみてくださいね!

参考文献

OBSにディスコードのオーバーレイを表示して喋ってる人間を分かりやすくする方法 by一伏はっか

https://note.com/vanideshi/n/nfaa213706da2