OBSでディスコードのアイコンを跳ねさせる方法！おすすめ設定も紹介
目次
Discord Reactiveなら簡単に設定できる
Discordで通話を繋いでゲームをプレイする時や、配信者同士でのコラボでDiscordを使う時、話している人のアイコンがぴょこぴょこと跳ねたり、光ったりする演出は、画面を一気に華やかにしてくれます。
こうした演出は再現するのが難しそうに見えますが、Discordの外部ツールである「Discord Reactive」を使えば、OBSのブラウザソースを設定するだけで簡単に実現できます。
本記事では、Discord Reactiveを使ってアイコンを跳ねさせる具体的な手順を解説し、配信画面の見た目を整えるための詳細設定についても紹介します。
画像も交えながら分かりやすく解説していますので、配信画面に表示させるDiscordのアイコンを跳ねさせたいゲーマーや配信者の方は、ぜひ最後までご覧ください。
Discord Reactiveとは？
Discord Reactiveの概要
Discord Reactiveは、Discordのボイスチャット参加者の発言状況を視覚的に表示し、アイコンを跳ねさせたり光らせたりといった挙動を実現するための外部ツールです。
OBSのブラウザソース機能を利用して動作するため、特別なソフトをインストールすることなく導入でき、手順さえ理解していれば誰でも簡単にカスタマイズできるのが特徴です。
Discord Reactiveでできること
Discord Reactiveは、ブラウザソースとしてOBSに追加するだけで、ボイスチャンネルに参加している全員のアイコンをリアルタイムでまとめて表示することができます。
現在ボイスチャットに参加している人の情報を自動で読み込むため、人数の増減に応じてアイコンの数や配置などを調整する必要がなく、CSSの知識がなくても直感的に見た目を編集できます。
また、自分がボイスチャンネルを移動した場合でもURLを変更する必要がなく、自動でボイスチャンネルと参加者を検知して表示が更新されるため、設定の手間を大きく省けるのも特徴です。
アイコンをグレーアウトさせて話している人だけを縁取って強調表示したり、跳ねるアニメーションを付けたりといった画面演出も簡単に追加できるため、簡単に配信画面を賑やかにできます。
Discord Reactiveでできないこと
一方で、Discord Reactiveは基本的に自分が参加しているボイスチャンネルにのみ対応しているため、複数のボイスチャンネルに分かれているユーザーのアイコンを同時に取得・表示することはできません。
そのため、チームごとに別のチャンネルに分かれつつ全てのチームのアイコンを表示したい、といった場合は、「Discord Stream Kit」などの他ツールを使用する必要があります。
Discord Reactiveの設定方法
1.Discord ReactiveとDiscordを連携する
ここからは、実際にDiscord ReactiveとDiscordを連携し、OBSで読み込むまでの手順を解説します。
まずはDiscord Reactiveの公式ホームページにアクセスし、「LOG IN WITH DISCORD」ボタンをクリック。
Discordでアカウント連携の認証画面が表示されるため、一番下までスクロールして「認証」をクリックします。
下記の画面が表示されればDiscordとの連携は完了です、「閉じる」をクリックしてください。
連携が完了すると、ボイスチャンネルの情報が自動で取得されるようになり、Discord Reactiveの管理画面でカスタマイズが可能になります。
2.Discord Reactiveの設定を変更する
次に、Discord Reactiveの「Source」タブからアイコンなどの設定を変更していきます。
変更内容が分かりやすくなるよう、あらかじめDiscordでボイスチャンネルに入室しておきましょう。
まずはDiscord Reactiveの画面を開き、画面上部のメニューから「Sources」タブをクリック。
「Basic Sources」と「Custom Sources」の二つの項目が表示されますが、今回はより細かくアイコンを調整するため、「ADD CUSTOM SOURCE」を選択してカスタムソースを追加します。
カスタムソースの設定画面が表示されるため、それぞれの項目を調整していきます。
各項目の設定が完了したら、「SAVE」をクリックして変更を保存しておきましょう。
それぞれの項目の解説、おすすめの設定は以下の通りです。
Custom
カスタムソースの名前です。
複数のカスタムソースを使い分けたい場合は、分かりやすい名前を設定しておきましょう。
Cross-fade Effect
発話に反応してアイコンをフェードイン・フェードアウトさせます。
話者を判別しやすくなるため、ボックスをチェックして有効化しておきましょう。
Speaking Animation
発話に反応してアイコンを跳ねさせます。
アイコンを跳ねさせたい人は「Single Bounce」もしくは「Continuous Bouncing」に設定しましょう、おすすめは「Single Bounce」です。
Dim non-speaking images
自分が発話していないときにアイコンを暗くします。
特にこだわりがなければ「Always」に設定しておきましょう。
Show mute/deaf icons
マイクやスピーカーのミュートアイコンを表示します。
こちらは「If matches inactive image」に設定してください。
Show names
アイコンの下部分に名前を表示します。
表示する名前の種類（ニックネーム、サーバーニックネーム、ユーザーネーム）を選ぶこともできます。
名前を表示しない「Hidden」、サーバーニックネームを表示する「Server Nickname」がおすすめです。
Name size
表示する名前のサイズを指定します。
基本的にはデフォルトの「32」で問題ありません。
Image alignment
アイコンの並び方（左揃え、真ん中揃え、右揃え）を指定します。
こちらもデフォルトの「真ん中揃え」がおすすめです。
Image Spacing
各アイコンの配置間隔を指定します。
基本的には「Normal」、間隔が広いと感じた場合は「Small Gap」、狭いと感じた場合は「Small Overlap」から試してください。
その他の項目
アイコンの並びの向きを変更する「Image Layout」、名前の表示位置を変更する「Name Placement」、発話者だけを表示する「Only Show Speaking」、アイコンをトリミングする「Crop Images」、プレビューを確認できる「Preview Mode」は、有料会員である「Reactive Premium」の限定機能です。
「Include」「Exclude」からは、それぞれ特定の人物だけを表示・非表示に設定できます。
3.OBSのブラウザソースで読み込む
カスタムソースの設定が完了したら、次はOBSのブラウザソースで読み込んでいきます。
まずは「Source」画面の「Custom Source」から先ほど設定したカスタムソースをクリックし、ブラウザソース用のURLをコピー。
次にOBSを起動し、画面左下の「ソース」欄に表示されている「+」ボタンをクリックし、表示されるメニューの中から「ブラウザ」を選択します。
任意の名前を付けてソースを作成し、プロパティ画面の「URL」に先ほどコピーしたカスタムソースのURLを貼り付けてください。
設定が完了すると、OBS上にDiscordのアイコンが表示されるようになるため、お好みで配置やサイズを変更してください。
Discord Reactiveのおすすめカスタム
立ち絵を設定する
アイコンではなく独自の立ち絵を設定したい場合は、「Library」から立ち絵を追加する必要があります。
まずはDiscord Reactiveの画面上部のメニューから「Library」を選択。
Library画面が表示されるため、「ADD MODEL」をクリックします。
カスタム画面が表示されるので、画像を追加していきます。
「Speaking」は話しているとき、「Inactive」は黙っているとき、「Muted」はマイクミュート時、「deafened」はスピーカーミュート時に表示される画像です。
まずは「Model」に立ち絵を適用したい人の名前を入力し、「Speaking」の「ファイルが選択されていません」をクリックして画像を追加します。
一つに画像を追加すると、残りの三つにも自動で画像が追加されます。
場合によって画像を切り替えたい場合は、それぞれに別の画像を追加することも可能です、設定が完了したら「SAVE」を選択してください。
最後に「SET ACTIVE」をクリックすれば設定は完了です、「Active Model」が設定したモデルになっているか確認しておきましょう。
この状態で「Custom Source」をOBSに追加すれば、独自の立ち絵を表示できます。
自由に配置する
アイコンを横並び以外で自由に配置したい場合、Reactive Premiumの「Image Layout」機能を使用するか、「Basic Sources」で一つずつ追加したアイコンを手作業で並べる必要があります。
「Basic Sources」を利用する場合は、それぞれのユーザーの横に表示されているコピーボタンからURLをコピーし、カスタムソースと同じように追加していきます。
ただし、ベーシックソースは一つのソースにつき一人しか追加できず、また一度でも同じボイスチャンネルに入った人しか表示されないため、設定の手間がかかります。
アイコンを縦表示にしたい、なおかつ設定の手間を省きたい方は、Reactive Premiumに加入して「Image Layout」機能を使いましょう。
話者ごとに設定を変更する
話者ごとに表示名や表示されるモデルの設定を変更したい場合は、カスタムソースを使用します。
まずはカスタムソースの設定画面を開き、「Include」をクリック。
下記のような画面が表示されるため、設定を変更したい話者の名前を選択します。
個人設定画面が表示されるため、各項目の設定を変更して「SAVE」で保存し、この作業を話者の人数分繰り返します。
「Override Name」ではOBS上で表示される名前を、「Override Model」では使用するモデルを設定できます。
また、その話者がDiscord Reactiveを使用している場合、「○○'s choice」にはその人が設定しているモデルが表示されます。
Discord Reactiveでアイコン表示を賑やかに
Discord ReactiveとDiscordを連携することで、OBS上でDiscordのアイコンを跳ねさせたり、光らせたりする演出を簡単に追加できます。Discord上で連携を許可し、OBSのブラウザソースにURLを入力するだけで導入できるため、難しい設定やCSSの知識も必要ありません。また、カスタムソースでそれぞれの細かい設定や立ち絵のカスタマイズ、話者ごとの個別設定などを組み合わせることで、配信画面をより魅力的で華やかなものに仕上げることができます。当記事で解説した設定方法を参考にし、アイコン表示のある賑やかな配信画面を作り上げてください。
OBS配信をより面白くするために
配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。
機能のご紹介
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- コメントを画面に横流しできる
- 設定した画像やGIFで自由に画面演出が作れる
いつでも投げ銭（収益化）機能
- 配信者に9割還元できる
- 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能
導入実績
CastCraftは上記のような機能により、配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入されたチャンネルの総登録者数は1.6億人を超えており、これまで20万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。