【OBS】YouTubeライブ配信にDiscordの通話アイコンを表示する方法｜StreamKitオーバーレイの設定とカスタマイズ

2026年10月20日 最終更新日時 : 2026年10月20日 ひりぐりちゃんブログ

こんぐりちゃん～ひりぐりちゃんです🍍 ( ᐛ )/
YouTubeライブ配信の画面にDiscordの通話アイコン
（今しゃべっている人が光るやつ）を載せるときの設定を共有します。

載せるだけなら簡単です。
（とは言ってもひりぐりちゃんもめっちゃ検索しました(｀・ω・´)）
さらに見た目をカスタマイズするやり方もあわせて紹介します。

使うもの

  • OBS
  • Discord
  • Discord StreamKit Overlay（Discordの公式のオーバーレイ用ページ）
  • 見た目を変えたいときだけ：OBSのDiscordアイコン外観変更ジェネレーター
    （外部のサイトです）

通話アイコンを表示する手順

1. StreamKitのページで設定する

  1. Discord StreamKit Overlayのページを開きます。 https://streamkit.discord.com/overlay
  2. 「Install for OBS」を選びます。
  3. 上にタブが3つあるので、右にある「音声ウィジェット」を選びます。

次に、2つのプルダウンを設定します。

  • サーバー：「サーバーを選択してください」のプルダウンから配信中に使うDiscordのサーバーを選びます
  • 音声チャンネル：「音声チャンネルを選択してください」のプルダウンから配信中に使うボイスチャンネルを選びます

設定すると右側に通話アイコンのプレビューが出ます。
その下にURLが表示されるのでこれをコピーします。

2. OBSにブラウザソースを追加する

  1. OBSの「ソース」欄の左下にある「＋」ボタンを押します。
  2. 「ブラウザ」（ブラウザソース）を選んで追加します。
  3. ソースの名前は、好きなものに変えて大丈夫です。
    スクショでは「dan通話アイコン」が通話アイコンのソースです。


3. URLを貼る

  1. 追加したソースを右クリックして「プロパティ」を選びます。
    ダブルクリックでも開けます。
  2. 「URL」の欄に、さっきコピーしたURLを貼ります。

するとOBSの画面に通話アイコンが表示されます。

通話アイコンを表示するだけならここまででOKです。


通話アイコンの見た目をカスタマイズする

もっとかわいく見やすくしたいときは次の手順に進みます。

ひりぐりちゃんはこのサイトを使っています( ᐛ )/
Discord公式のものではなく、外部のサイトです。
利用するときはサイトの案内を確認して自己責任でお願いします( ᴗˬᴗ)

OBSのDiscordアイコン外観変更ジェネレーター
https://obs-discord-icon.alfebelow.com/

プレビューを見ながら簡単に設定できます。

1. 見た目を設定する

「1．見た目の設定」で次のような項目を決められます。

  • アイコンの並び
  • アイコンの形
  • アイコンの大きさ
  • 話すときの動き
  • 色
  • 名前の表示
  • 名前の見た目
  • 背景色
  • 名前の位置
  • 特定のユーザーを隠す

右のサンプルアイコンのプレビューを見ながら好みに設定してみましょう。

2. CSSをコピーする

設定が終わったら画面を下にスクロールします。
「3．CSSをコピー」という項目があり、
下には難しそうな文字列が並んでいますがここをいじる必要はありません。
さっきの設定が反映されたCSS（カスケードスタイルシート）が作られています。
右にある「コピー」ボタンを押して全文をコピーしましょう。

3. OBSのカスタムCSSに貼る

  1. OBSに戻って通話アイコンのソースのプロパティを開きます。
  2. 「カスタムCSS」の入力欄にコピーしたCSSを貼ります。
  3. 入力欄にもともと何か書かれていたら、それを削除してから貼ると良いかも？
    貼り終わったら右下の「OK」ボタンを押します。

これでOBSに表示されている通話アイコンが設定したとおりの見た目に変わるはずです。



↓ひりぐりちゃんが配信や録画で使用して、
３回もリピ購入しているお気に入りのマイクはこちら( ᐛ )/↓


配信前に確認しておくこと

  • 一緒に通話している人の名前やアイコンが配信に映ります。
    映ってもいいか事前に確認しましょう。
  • 配信が始まる前に自分の声に反応してアイコンがどう映るか
    テストしておきましょう( ᐛ )/

まとめ

いかがでしたでしょうか？
通話アイコンを載せるだけなら
StreamKitのURLをブラウザソースに貼るだけです。

見た目を整えたいときはジェネレーターで作ったCSSを貼れば簡単にカスタマイズできます。

今回はこれで終わります( ᴗˬᴗ)
チャット欄の表示方法のカスタマイズはまた別の記事で紹介したいと思います( ᐛ )/

最後まで読んでくださってありがとうございます(/・ω・)/
YouTubeの配信アーカイブもぜひ見てくださいね～！
チャンネル登録もよろしくお願いします( ᐛ )/

ではまた～🍍💛

カテゴリー
Youtube活動関連
タグ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
【OBS】YouTubeライブ配信のソース設定｜マイクラ配信で使った画面構成New!!
2026年10月14日