OBSにDiscordをオーバーレイ表示する方法

2018年2月8日 2026年1月9日

TeamSpeak 3に代わるボイスチャットアプリとして、自身も利用しているDiscord。
今回の記事では外部サイトを利用して、DiscordをOBSに表示する方法を解説します。

事前に準備する内容

OBSにDiscordの内容を表示する前に、下記2つのアプリをインストールしておきましょう。
インストールしていない場合には、後述する解説の途中でエラーが表示される可能性があります。

OBS Studio

: ダウンロード | OBS

Download OBS Studio for Windows, Mac or Linux

続きを見る

Discord

: Discord - Group Chat That’s All Fun & Games

Discord is great for playing games and chilling with friends, or even building a worldwide community ...

続きを見る

オーバーレイ情報の設定

OBSにDiscordの内容を表示するには、まず「Discord Streamkit Overlay」にアクセスします。

: Discord Streamkit Overlay

Customize, promote, and show off your Discord community directly on your stream. Display your Discor ...

続きを見る

Discord Streamkit Overlayに移動したら、図示している「Install for OBS」を選択します。

その直後、このようなエラーが表示される場合はDiscordのインストールと起動を確認してください。

Notice

Can't Connect to the Discord Client
It looks like we’re having trouble connecting to your Discord client. Make sure you have Discord installed and running on your computer. If you don’t have the app installed you can download it atdiscord.com/download

※Discord クライアントに接続できません。Discordクライアントに接続できないようです
お使いのコンピューターにDiscordがインストールされ、起動していることを確認してください
アプリがインストールされていない場合は、discord.com/downloadからダウンロードできます

ウィジェットの種類

Discord Streamkit Overlayで利用可能な「3種類」のウィジェットです。

STATUS WIDGET

Discordのサーバー内容を表示するための「ウィジェット」です。
CHAT WIDGETと同じく、使用する頻度は少ないと言えるでしょう。

STATUS WIDGET	内容
Display Online Count	サーバにログインしている人数を表示する
Display Server Icon	サーバに設定しているアイコンを表示する
Display Invite Link	サーバへの招待リンクを表示する（非推奨）
Invite Channel	「Display Invite Link」が有効時に、招待先を指定する
Discord Logo	右端に表示させるDiscordアイコンの色

CHAT WIDGET

Discordのチャット内容を表示するための「ウィジェット」です。
Discordに参加していない視聴者が、Discordにログインすることなく会話内容を確認することができます。

ただし意図しない会話が配信上に流れる可能性があるため、積極的な導入は避けるべきです。

CHAT WIDGET	内容
Server	チャットを表示するサーバを指定する
Text Channel	チャットを表示するチャンネルを指定する
Fade Out Chat	チャットが非表示になるまでの時間を設定する

VOICE WIDGET

Discordで発言したプレイヤーを表示するための「ウィジェット」です。
配信で導入されることが多く、設定を調整することで表示内容をカスタマイズできます。

またこのウィジェットが最も使われるでしょうから「TEXT SETTINGS以下」も併せて解説します。

VOICE WIDGET	内容
Voice Channel	アイコンを表示するチャンネルを指定する
Show Speaking Users Only	会話している参加者のアイコンのみ表示する
Small Avatars	アイコンのサイズを小さくする
Hide Names	参加者の名前を非表示にする
Show My Avatar First	管理者（あなた）の名前を優先して表示する
Text Color	文字の色（初期値：#ffffff）
Text Size	文字のサイズ（初期値：14px）
Text Outline Color	文字のアウトラインの色（初期値：#000000）
Text Outline Size	文字のアウトラインのサイズ（初期値：0px）
Shadow Color	影の色（初期値：#000000）
Shadow Size	影のサイズ（初期値：0px）
Background Color	背景の色（初期値：#1e2124）
Opacity	透明度（初期値：95%）
Shadow Color	影の色（初期値：#000000）
Shadow Size	影のサイズ（初期値：0px）

OBSにオーバーレイ表示する方法

ウィジェットの設定が終わったら「OBS」を起動して、ソース欄の「＋」を選択します。

追加するソースに「ブラウザ」を指定します。

『ソースを作成 / 選択』が表示されたら、必要に応じて「任意の名前」を入力して「OK」します。

Discord Streamkit Overlayに戻り、図示している文字列を「コピー」します。

コピーした文字列を①に貼り付け、②の幅を「312」に、③の逆さを「600」に指定して「OK」します。

数秒間待ち、OBSのプレビューにDiscordのアイコンが表示されることを確認します。
表示されない場合は『Show Speaking Users Only』の項目を含めて、設定内容を見直します。

過去の情報

記事公開日の2018年2月8日から、最終更新日2021年8月19日までに公開していた内容です。

導入前の設定

下のボタンから「StreamKit」のページへ移動します。

StreamKit

StreamKitのページが開いたら、画面を下へスクロールします。

画面中央にあるOBSの欄から「Discordに接続」を選択します。

ページが移動したら、左側の「Install for OBS」を選択します。

このときDiscordを起動していないと「設定できない」というメッセージが表示されます。
もしこのメッセージが表示されたら、インストールしているDiscordを起動しましょう。

Discordを起動したするとページが更新され、設定画面が表示されます。
まずは「STATUS WIDGET」を選択し「Server」から任意のサーバを選びます。

すると右側にプレビューが表示され、サーバ名やサーバアイコンなどが確認できます。

つぎに「VOICE WIDGET」を選択すると「Voice Channel」からチャンネルを選択できます。

「STATUS WIDGET」と「VOICE WIDGET」ともに、画面下に詳細設定があります。
この詳細設定では表示する項目やサイズ、背景色の変更などが行えます。

OBSの設定

OBSを起動して「ソース欄にある+マーク」を選択します。（シーンの欄ではありません）
すると追加可能なソースが一覧で現れますから、上から5番目にある「ブラウザ」を選択します。

追加する設定名に任意の名称（例：Discord）を入力し「OK」を選択します。

ここまで終わったら先程のページに戻り、右下にある「URL」をコピーします。

URLをコピーしたらOBSに戻り「URLの欄」に貼り付ければ、設定完了です。
一応その下にある幅には「312」を、高さには「600」を入力しておきましょう。

配信画面に字幕を表示させる方法

ちなみに「配信画面に字幕を表示させる方法」は、別記事で詳しく解説しています。

: 【OBS】配信に音声認識字幕ちゃんで字幕を表示させる方法【設定】

しばしば配信サイトを見ていると遭遇することになる、日本語や英語の字幕を表示している配信者。
今回の記事では「音声認識字幕ちゃん」を利用して、OBSに字幕を追加して配信する方法を解説します。

続きを見る

-ゲーム, 環境論

comment コメントをキャンセル

FaberSid より:

2018年9月22日 10:08 PM

私の環境では起動しているにもかかわらず設定画面でエラーが出ました。
(2018/09/22)
なぜかわかるようでしたら教えてほしいです。

返信
- Volx より:
  
  2018年9月25日 6:19 PM
  
  ＞FaberSidさん
  
  　こちらの環境では昨日24日に表示ができることを確認いたしました。
  　原因については不明です。
  
  返信
PUBGモバイルより:

2018年10月15日 10:28 PM

PUBGモバイルでゲーム実況をしてるものなのですが
Discordで友達と会話しゲーム実況をOBSを使用してライブ配信したいのですが上記の方法だと出来ません！教えていただければ幸いです！

返信
- Volx より:
  
  2018年10月15日 10:30 PM
  
  ＞PUBGモバイルさん
  
  　そもそもOBSはPC用のソフトなので、モバイルでは利用できないのではないでしょうか。
  
  返信
匿名より:

2019年4月3日 11:25 PM

ボイスチャンネルのところに接続しているプレイヤーの名前が出てきません。

返信
- Volx より:
  
  2019年4月4日 2:09 AM
  
  ＞匿名さん
  
  　自身はこの設定で表示されています。
  　同じようにすれば、表示されるのではないでしょうか？
  
  　https://twitter.com/Volx_jp/status/1113488637428084736
  
  返信
Ｎより:

2021年1月16日 7:47 PM

OBSに張り付けるURLが無いんですけどどうしてでしょうか

返信
- Volx より:
  
  2021年1月16日 9:45 PM
  
  ＞Ｎさん
  
  　わかりません。
  　仕様が変わったのかと思いつい先程起動しましたが、記事の内容通りの位置にあります。
  
  返信
  - らんより:
    
    2021年2月10日 6:31 PM
    
    私もURLが表示されず困っています
    
    返信
    - Volx より:
      
      2021年2月12日 3:50 AM
      
      ＞らんさん
      
      　私は問題なく表示されているため、原因がわかりかねます。
      
      返信
      - 匿名より:
        
        2021年2月25日 4:43 AM
        
        ＞Nさん、らんさん
        それってデバイスはノートパソコンですか？
- C より:
  
  2021年11月10日 10:18 PM
  
  フォント表示などを小さくしてみて下さい。
  
  私はGoogleChromeを使っていますが、ブラウザの「詳細（右上にある、縦に点が3つ並んだ所）」＞ズームで「－（縮小表示）」を複数回押したら出て来ました。
  
  返信
ai より:

2021年2月19日 2:46 PM

ＵＲＬでません。
Windowsだとでないとかありますかね？

返信
- Volx より:
  
  2021年2月19日 5:08 PM
  
  ＞aiさん
  
  　原因がわかりかねますが、インターネットを閲覧するブラウザを変更してみてはいかがでしょうか？
  
  返信
I より:

2022年3月12日 2:34 PM

ディスコードを起動していてもエラーが出てしまいます。MacBook Proです。原因わかりますでしょうか？

返信
- Volx より:
  
  2022年3月12日 11:44 PM
  
  ＞Iさん
  
  　申し訳ありませんが、原因はわかりかねます。
  
  返信

Dishonoredを日本語化する方法

「SHiFT」のアカウント作成方法