OBSとDiscordの連携方法を解説！オーバーレイやアイコンが跳ねる仕組みも紹介
目次
OBSとDicordを連携させよう
OBS StudioにDiscordを連携させると、音声を配信に取り込んだりDiscordアイコンを配信画面に表示したりできます。
アイコンをカスタマイズすれば、話している人を光らせてわかりやすく表示でき、跳ねさせることも可能です。
本記事では、OBS StudioとDiscordを連携させる方法を解説するとともに、Discordのアイコンを光らせたり跳ねさせたりする方法を紹介します。
OBS配信を進化させる「CastCraft」
OBSではできない、コメント表示・読み上げ・演出をまとめてサポート。
- コメント表示・読み上げ・初見強調で「配信を始めやすく、盛り上げやすい」
- 視聴者メモや投げ銭分析で「ファンとの関係を深め、収益化を後押し」
CastCraftは初心者からプロ配信者まで、
成長に合わせて使えるオールインワン配信ツールです。
OBSとDiscordの連携方法
OBSでDiscord音声を取り込む方法
Discordで通話を開始し、OBS側で配信を開始すればDiscordの音声を取り込むことができます。
Discordの音声設定
手順1：ボイスチャンネルをクリックして通話を開始
手順2：画面下の歯車マーク「ユーザー設定」から「音声・ビデオ」をクリック
基本的にDiscord設定はすべてこの歯車マークから行います。
手順3：「入力デバイス」で自身の使用しているマイクを選択
OBSの音声設定
手順1：ホーム画面右下の「設定」をクリック
手順2：「音声」の「デスクトップ音声」を「既定」にする
手順3：ホーム画面下にある「音声ミキサー」の「デスクトップ音声」が反応しているかを確認
注意）デスクトップ音声を確認する際、Discord以外の音声は切ってください。
手順4：配信を開始
以上の設定でDiscordの音声が配信できるようになりました。
OBSでDiscordの画面共有を取り込む方法
Discordには、通話に参加している人に特定のウィンドウを共有する画面共有機能があります。画面共有をOBSに取り込むことによって、複数の配信者が同じ画面をそれぞれのチャンネルで配信することができます。
Discordの画面設定
手順1：通話を開始し、画面下の「画面を共有する」をクリック
手順2：共有したいウィンドウを選択して「Go Live」をクリック
手順3：画面共有右下の「ポップアウト」をクリックし、画面共有を別ウィンドウで表示
OBSの画面設定
手順1：「ソース」の「＋」→「ウィンドウキャプチャ」→「OK」の順にクリックしてソースを作成
手順2：「プロパティ」の「ウィンドウ」で「Discord.exe：（ボイスチャンネル名）」を指定し「OK」をクリック
注意）Discord全体を指定すると、参加しているチャンネル等の余計な部分までOBSに映ってしまいます。
手順3：プレビュー画面にDiscordの画面共有が映っていることを確認
以上の設定でOBSにDiscordの画面共有を取り込むことができました｡
OBSにDiscordのアイコンをオーバーレイ表示する方法
OBS StudioにDiscordのアイコンを表示させるためには、Discord StreamKitをインストールしましょう。
また、話している人のアイコンが跳ねるよう設定したい場合には、外部ツールとの連携が必要です。
それぞれの方法をここで解説するので、参考にしてDiscordのアイコンをオーバーレイ表示してみましょう。
Discord StreamKitならアイコンをオーバーレイ表示可能
Discord StreamKitを使用すれば、Discordのアイコンを配信画面上に表示できます。
表示させる方法は、次のとおりです。
1.Discord StreamKitにアクセスする。
まずは、Discord StreamKitにアクセスして、「Install for OBS」をクリックしてください。
Discord上に認証画面が出てきた場合は、「認証」をクリックしましょう。
2.Discord StreamKitで設定する
Discord StreamKitの画面上で「VOICE WIDGET」タブに切り替えます。
このとき、ブラウザに日本語の翻訳ツールやプラグインを入れておくと項目がわかりやすくなるので、便利です。
表示したいサーバーや音声チャンネルを選択し、各設定を済ませたら右側プレビュー画面下にあるURLをコピーしてOBS Studioを開きましょう。
3.OBS Studioで設定する
OBS Studioのソースに「+」ボタンで「ブラウザ」を追加して、コピーしたURLを貼り付けましょう。
OBS Studioのプレビュー画面にて、Discordアイコンが確認できれば完了です。
表示されていない場合は、表示対象に設定したDiscordのチャンネルに加入しているかどうかを確認してみましょう。
また、URLに誤りがないかも併せて確認してみてください。
Discord StreamKitで表示させたDiscordのアイコンは、デコレーション機能が反映されない点のみ、注意しましょう。
Discordのアイコンが跳ねる設定
配信中、話している人のDiscordアイコンが光るだけでなく跳ねているシーンをよく見かけます。
ここでは、Discordのアイコンが跳ねる設定を解説するので、手順に沿って設定してみましょう。
設定する際は、先にDiscord StreamKitとの連携を済ませ、配信画面にDiscordアイコンが表示されている状態でなければならないので、注意しましょう。
1.外部ツールを使用して跳ねるようCSSを設定する
Discordのアイコンが跳ねる設定は、OBS Studioに追加したDiscord用のブラウザソースで、CSSを設定する形になります。
CSSの生成をおこなってくれる外部ツールがいくつかあるので、好みのものを使用して設定してみてください。
ここでは、例としてはいしんツールキットを用いて解説します。
2.はいしんツールキットで跳ねる設定を行う
はいしんツールキットにアクセスして、「DiscordオーバーレイCSS」をクリックしたら、上部にある「StreamKitで使える」の「きゅーと」を選びましょう。
設定画面を開いたら、アイコンの跳ね方やサイズなどを設定してください。
設定が完了したら、一番下にある「コピペ用CSS」をコピーしてOBS Studioを開きましょう。
3.OBS StudioのブラウザソースにCSSを挿入する
OBS Studioのソース内にあるDiscord用のブラウザソースをダブルクリックして設定画面を表示したら、「カスタムCSS」にコピーしたCSSコードを貼り付けてください。
アイコンが変更され、話しているときに跳ねれば設定完了です。
以上で、設定完了です。
使用するツールにより、変更できるデザインが多少異なるので、任意のものを使用してみてください。
Discordアイコンが跳ねる設定にできるおすすめツール
今回例に挙げたはいしんツールキットをはじめ、Discordアイコンを跳ねさせられるツールを紹介します。
どちらもおすすめのツールなので、ぜひ活用してみてください。
はいしんツールキット
はいしんツールキットは、アイコンを2種類の方法で跳ねさせられます。
「ふわふわ」は、少し斜めに傾きながらかわいらしくアイコンが跳ね、「ぴょこぴょこ」は、通常の上下に跳ねる動きです。
ほかにも、次のような設定ができます。
- アイコンの大きさを3段階から選べる（デフォルト、でかい、でっかい）
- アイコンの形を3種類から選べる（まる、角まる、四角）
- 名前の形を2種類から選べる（デフォルト、角まる）
- 名前のカラーを自由に設定できる
自分らしさを表現できるので、いろいろと試してみてください。
設定を変更した際は、再度OBS StudioのブラウザソースにあるカスタムCSSも変更しなければならないので、注意しましょう。
OBSのDiscordアイコン外観変更ジェネレーター
OBSのDiscordアイコン外観変更ジェネレーターも、はいしんツールキットと同じくアイコンを跳ねさせられます。
用意されているデザインやカスタム自由度が高く、光りつつ跳ねさせられるのでおすすめです。
使い方もカスタムCSSにコピペするのみで、はいしんツールキットと変わりません。
OBSのDiscordアイコン外観変更ジェネレーターでできる設定内容は、次のとおりです。
- アイコンの並び（縦並び、横並び）
- アイコンの形（丸、角丸四角、四角、縦長）
- アイコンの大きさ（標準、大きい、とても大きい）
- 話すときの動き（縁取り、点滅、ぴょこぴょこ）
- 動きの速さ
- 色
- 名前の見た目（黒背景、縁取り、文字のみ）
- 名前の位置（上下左右）
- 特定のユーザを隠す（ユーザIDの入力）
よりカスタマイズ性の高いアイコンを使いたい方は、OBSのDiscordアイコン外観変更ジェネレーターを使用してみてください。
トラブル別の対処法
ケース①OBSにDiscordが映らない場合は？
Discordの配信モードを確認
配信モードがONになっていると、OBSにDiscordが映らない場合があります。
手順1：Discordの画面下部にある歯車マークから「ユーザー設定」を開く
手順2：「アプリの設定」→「配信モード」をクリック
手順3：「スクリーンキャプチャからDiscordウィンドウを隠す」のチェックが外れていることを確認
ソースのプロパティを確認
ウィンドウキャプチャでDiscordのウィンドウを指定できていない可能性があります。
手順1：「ソース」から作成済みの「ウィンドウキャプチャ」を選択
手順2：「プロパティ」をクリックし、「ウィンドウ」でDiscordの画面が指定できているか確認
ケース②OBSにDiscordの音声が入らない場合は？
OBSにDiscordの音声を取り込むには、Windows、OBS、Discordの3つの出力デバイス設定で同じデバイスを設定する必要があります。
Windows
手順1：タスクバー右下の通知領域からスピーカーをクリック
手順2：自身の使用しているスピーカー、ヘッドホンを選択
これでWindowsの設定は完了です。
OBS
手順1：「設定」から「音声」をクリック
手順2：「デスクトップ音声」で「既定」を選択
「既定」に設定しておくと、Windowsで設定したデバイスと同じデバイスの音声を取り込みます。よって、デバイスを買い替えた場合はWindowsでの設定をだけを変更すれば自動的にOBSの設定も変更されます。
Discord
手順1：「設定」→「音声・ビデオ」をクリック
手順2：「出力デバイス」で「Default」を選択
「Default」はOBSの「既定」と同じという認識で問題ありません。これでDiscordもWindowsと同じ出力デバイスが設定されました。
OBSとDiscordを連携してコラボ配信を楽しむ
今回はOBSとDiscordを連携する方法と、それによってできることについて解説しました。Discordの通話音声や画面共有をOBSに取り込むことで、複数人で遊んでいる様子を配信することができます。また、Discord StreamKitを使って通話アイコンを表示しておくと、誰が話しているのかわかりやすくなります。OBSとDiscordを連携して、複数人での配信を楽しみましょう。
OBSでのYouTube/Twitch配信におすすめのツール
配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
視聴者と向き合うために最もおすすめな配信ツールがCastCraftです。
CastCraftの機能を一部ご紹介します。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- コメントを画面に横流しできる
- 設定した画像やGIFで自由に画面演出が作れる
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで164万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。
