Discordを配信画面に映すメリット
Discordは、主にゲーム仲間と集まり、複数人数でボイスチャットを行えるアプリです。他にも、文字チャット・画像の送受信・ビデオ通話などが可能です。
リスナー参加型やコラボ配信でボイスチャットを行う場合、誰が参加しているか・誰が喋っているか…が分かった方が、配信として見栄えが良くなります。
- OBSにDiscordのアイコンを表示できる
- 喋ってる人のアイコンを光らせられる
- 表示させるデザインを好きに設定できる
今回は『Windows版』を用いての方法を解説します。ブラウザ版をお持ちでない方は、下記のリンクからダウンロード・インストールをお願いします。
Discordアイコンを配信画面に映す方法
- Windows版のDiscord
- Discord StreamKit Overlay（webツール）
- obs studio
以上の３つのツールが必要になります。DiscordはWindows版の物をインストール。Discord StreamKit OverlayはDL不要のWebツールです。
Discord StreamKit Overlayを導入
▲Discordを立ち上げた状態で『こちらのサイト』にアクセスし『install for OBS』をクリックしましょう。
▲Discord側で、上記のような『外部アプリケーションのアクセス要求画面』が表示されると思うので『認証』をクリックしましょう。
▲Discordでサーバー（LINEで言うグループトークみたいなもの）を作成します。すでにサーバーを持っている方は省略して構いません。
▲今回は例として『ゲーム』というサーバーを作成しました。
▲Discord StreamKit Overlayに戻り『Server』の項目をクリックすると、Discordで作成しているサーバー名が表示されると思います。（されてない場合は更新してみましょう）
▲右上の『VOICE WIDGET』を選択し、左の『Voice Channel』の項目から『一般（別の名称の可能性あり）』を選択しましょう。右側にプレビューが表示されるはずです。
下記の項目にて色々と細かい設定が可能ですが、ひとまずはOBSにDiscordを表示させる設定が揃ったため、OBSを立ち上げましょう。
▲その前に、プレビュー画面に表示されているURLをコピーしておきましょう。
▲OBSにて、ソースの部分で『右クリック→追加』もしくは『＋アイコン』をクリックし、ブラウザを選択。
▲新規作成を選択し、好きな名前を付け『OK』をクリック。
▲URLの部分に、先ほどコピーしたURLを張り付けましょう。
▲幅・高さも、先ほどのプレビューを参考。こちらでは『width:312px height:600px』と表示されている為、同じように入力し、OKを押しましょう。
▲OBSの画面にDiscordのアイコンが表示されたはずです。細かい設定を行っていないため、全体的にサイズが小さいので、気になる場合は後で調整しましょう。
▲テストでマイクに向かって喋ってみます。すると、自分が喋っている間だけアイコンの枠に色が付いたはずです。ひとまずはこれで完了です！
デザインをカスタマイズする
Discord StreamKit Overlayからもカスタマイズ可能ですが、若干自由度が低いので、今回は『OBSのDiscordアイコン外観変更ジェネレーター』という便利なサイトでカスタマイズしていきましょう。
▲好みのカスタマイズが決まったら、下へとスクロールし、表示されているコードを全て選択しコピーしましょう。
▲OBSにて、先ほど作ったDiscordソースをダブルクリックしましょう。
▲カスタムCSSの項目に、先ほどコピーしたコードを張り付けましょう。元々表示されていたコードは削除してしまって構いません。
▲デザインが反映されていれば完了です！
Discord StreamKit Overlayやアイコン外観変更ジェネレーターは、カスタマイズを行いたいとき以外、起動しておく必要はありません。
