OBS Studio（以下OBS）による配信でDiscordのアイコンを映してみたいと思ったことはないでしょうか。
そこで便利なのが「Discord Reactive」（ディスコード・リアクティブ、以下Reactive）というネット上のサービス・ツールです。
これを使うと
- アイコンをOBSに映せる
- 発話時にアイコンがぴょこぴょこ跳ねる（動く）
- 発話時にアイコンを光らせることができる
- アイコンの代わりに立ち絵を表示できる
ようになります。
Reactiveの使い方を見ていきましょう。2ステップです。
- Reactiveで設定する。
- Reactiveの設定をOBSにドラッグ＆ドロップする。
- 完成。
目次
「Discord StreamKit Overlay」との違い
すでにDiscordのアイコンをOBSに表示したことがある人にとって気になるのは、「Discord StreamKit Overlay」（以下StreamKit）との違いではないでしょうか。
Reactiveが優れている点としては、以下の4点があげられます。
- 最初に1回ドラッグ＆ドロップするだけで設定を適用できる
- 最初からぴょこぴょこできる（カスタムCSS不要）
- 最初から光る（同上）
- 最初から立ち絵を表示できる
- ボイスチャンネルを変更してもURLをコピペしなおす必要なし
端的には、ReactiveのほうがStreamKitよりも便利といえるでしょう。設定の手間を大きく省けます。
設定しよう
設定画面を開いてVC参加
まずはReactiveにアクセスし、「Log In With Discord」をクリックしてください。
「認証」をクリックします。
すると、画面が切り替わり、設定画面が表示されました。この画面で設定していくことになります。
いまの段階では必須ではないのですが、ボイスチャンネルに参加しておきましょう。そのほうが設定の効果が一目瞭然であるため、便利です。
ぴょこぴょこ＆光らせる設定
最初に設定すべきは「Include own image in group view」です。やり方にもよりますが、ここがOFFだと自分のアイコンが映りません。ONにしておきます。
ぴょこぴょこ跳ねさせたい場合は、「Bounce Effect」をONにしましょう。マイクに声を入れたとき上下にアイコンが動くようになります。
光らせる設定については、最初から光るので設定不要です。しいていえば「Cross-fade effect」をOFFにするとパッと光り、パッと暗くなります。
自分をずっと光らせておく設定
自分のアイコンを常時光らせておきたいのであれば、「Dim own non-speaking image」を「Never」にします。
▲「Dim own non-speaking image」は、自分が話していないときに画像を暗くするという意味合いです。「Never」にすると画像が暗くならず、光りっぱなしになります。
この設定にすることで、自分が話していないときであってもアイコンが暗くなりません。ただ、通常は「Always」にしておくほうが自然です。
名前を表示する設定
名前を表示したい場合は、「Show names」を変更してください。名前の大きさについては、その横の「Name size」で設定します。
画像間の空白を変える設定
「Image Spacing」をいじると、自分のアイコンと他人のアイコンの空白を変更できます。
アイコンどうしを離したいときに調整しましょう。
OBSにアイコンを映そう
「ブラウザ」ソースを追加
Reactiveで設定が完了したら、最後にOBSの設定です。
Reactiveの「Group」をOBSのプレビュー画面にドラッグ＆ドロップしてください。「はい」をクリックすると、OBSに「ブラウザ」ソースが追加されます。
ただ、OBSを管理者権限で起動している場合はドラッグ＆ドロップできません。対処法は以下のとおりです。
- 「Group」の右上のアイコンをクリックする（URLがコピーされる）。
- OBSの「ソース」の「+」アイコンから「ブラウザ」をクリックする。
- 「新規作成」が選択されていることを確認し、「OK」をクリックする。
- 「URL」の部分に、さきほどのURLをペーストする。
- 「OK」をクリックする。
これでOBSの設定は完了しました。
OBSに自分のアイコンが映っていることを確認しましょう。また、同じボイスチャンネルに参加している自分以外の人のアイコンも映ります。
映らない場合は
アイコンがまったく表示されない場合は、ボイスチャンネルに参加してください。
また、「Group」の設定後に自分のアイコンだけ表示されない場合は、「Include own image in group view」をONにします（上述）。
縦に並べたい場合は
「Group」をOBSにドラッグ＆ドロップするなどして「ブラウザ」ソースを追加すると、横一列にアイコンが並びます。
しかし、もしアイコンを任意の位置に配置にしたいのであれば、名前の書いてあるアイコンのほうを使いましょう。
たとえば、自分と相手2人ぶんのアイコンを配置したい場合は、自分と相手のアイコンを2回に分けてOBSにドラッグ＆ドロップします。
あとは2個のアイコンを自由に並べるだけです。
立ち絵を表示しよう
アイコンだと味気ないという人もいるかもしれません。立ち絵（アバター）も簡単に表示できます。もちろん、ぴょこぴょこ動きます。
Reactive右側の「Models」にある「+」をクリックしてください。
設定画面が開いたら、どれでもよいので「ファイルが選択されていません」をクリックして任意の画像を追加します。
すると、下記画像のような状態になりました。追加した画像が一気に4つ表示されますが、それぞれ微妙に違うことがわかります。
- Speaking Image : 話しているときの画像
- Inactive Image : 黙っているときの画像
- Muted Image : マイクをミュートにしたときの画像
- Deafened Image : スピーカーをミュートにしたときの画像
そして「Name」の部分で任意の名前にし、「SAVE」をクリックして保存しましょう。
最後に、いま追加した立ち絵をクリックして完成です。これで設定が適用されて、立ち絵が表示されるようになりました。
「はいしんツールキット」が対応
StreamKitで使っていた人もいると思いますが、「はいしんツールキット」がReactiveにも対応しました。
アイコンを丸く表示したり、ふわふわした動きにしたいときに重宝するでしょう。
使い方ですが、まずは同サイトで設定します。
- はいしんツールキットにアクセスする。
- 「Reactiveで使える」の「きゅーと」をクリックする。
- 任意の設定にする。
- 「コピー」をクリックする（CSSがコピーされる）。
つぎに、さきほど追加した「ブラウザ」ソースをダブルクリックし、「カスタム CSS」にペーストしましょう。「OK」をクリックして完成です。
まとめ
Reactiveを使えば、すぐにDisordのアイコンをOBSに映せます。さまざまなメリットがあるので、重宝するはずです。
もっとも、たとえば「外観的にはStreamKitを使いたい」という人もいるかもしれません。
ReactiveとStreamKit、両方使ってみて自分に合うほうを選んでみてください。
2006年から15年以上、ゲーム実況のやり方の解説記事を書いています。書いた記事数は1,000本以上。ゲーム配信、ゲーム録画、動画編集の記事が得意です。
記事はていねいに、わかりやすく！ゲーム実況界の教科書をめざしています。