DiscordオーバーレイCSS25選｜OBSでアイコンの形・動き・配色を変更

Discord通話アイコンの形や動きを変えるOBS用カスタムCSSを25種類まとめました。周りの飾りなし6案と、周りの飾りあり19案から選べます。枠線だけの6案、大きなアイコンに小さな飾りを添える4案、カードや模様を付ける9案を掲載しています。

すべての見本に色選択のプルダウンがあります。選んだ色・配色が、動く見本とコピー用CSSに連動します。「CSSを表示する(コピー用)」を開き、枠内をクリックしてCtrl + A → Ctrl + Cで全文をコピーしてください。MacではCommandキーを使います。OBSには1案分だけを貼り付けます。

貼り付ける場所はOBSの「ブラウザ」ソースの「カスタムCSS」です。Discord公式StreamKitのVoice Widgetを使います。OBSでの表示・動作は確認済みです。追加4案と色選択版はブラウザ内の模擬発話で確認しています。実際の通話中の動作は未確認です。

CSSの読み込みが終わると色を選べます。読み込みに失敗した場合は、ページを再読み込みしてください。

【スポンサーリンク】

[PR]自動ハイライト検出など便利な機能あり

Shorts工房を販売中！

自動ハイライト検出で、
3時間の配信アーカイブでも、
楽々切り抜き！
無料デモ版もあり（制限あり）

★こちらから詳細確認
→Shorts工房について詳しく見る

周りの飾りなし

カードや枠線は付けず、アイコン自体の形と動きを変えます。ここではアイコン画像の色味を変更します。写真やイラストの色も変化するため、画像の色を変えたくない場合は「アイコン本来の色（変更なし）」を選んでください。元画像そのものは書き換えません。

1. 角丸四角 × ぽんぽん跳ねる

2. 縦長たまご × 左右にゆらゆら

3. ひし形 × こくこく

4. 六角形 × すっと拡大

5. ハート形 × どきどき

6. 丸形 × ぷにっと変形

[PR]Twitchのプロフィール

Twitchパネルを可愛く！

★無料お試し版もあるよ↓

Twitchパネル画像、オフライン、プロフィールバナー
15デザインあり。
4色 × 30枚 = 120枚入り
→Twitchパネル画像について詳しく見る

周りの飾りあり

枠線だけの6案、アイコンが主役のかわいい2案・かっこいい2案、カード付き9案の順に紹介します。装飾版の配色変更は枠・飾り・カードの色を変え、アイコン画像自体の色は保ちます。

枠線だけのシンプルなデザイン｜6案

1. 角丸四角 × ぽんぽん跳ねる｜枠線のみ

2. 縦長たまご × 左右にゆらゆら｜枠線のみ

3. ひし形 × こくこく｜枠線のみ

4. 六角形 × すっと拡大｜枠線のみ

5. ハート形 × どきどき｜枠線のみ

6. 丸形 × ぷにっと変形｜枠線のみ

アイコンが主役のデザイン｜かわいい2案・かっこいい2案

1. ハートのプチリース

2. ミントの星ステッチ

3. ネオンアーク

4. シャープブラケット

カードや模様を付けるデザイン｜9案

1. キャンディハート

2. レトロポップ

3. サイバーネオン

4. モノクロスタジオ

5. 縦長チケット

6. 縦長アーチ窓

7. まるいバッジ

8. 横長ふきだし

9. 縦長カットパネル

Discord・StreamKit・OBSで、それぞれ何を設定する？

StreamKitをブラウザソースとしてOBSへ追加する流れは、Discord公式のOBS StreamKit解説でも案内されています。OBSのカスタムCSS欄は、OBS公式のブラウザソース解説で確認できます。

[PR]シーン切替もオシャレに

スティンガー動画販売中！

★無料お試し版もあるよ↓

OBSなどのシーン切替を可愛く♪
→シーン切り替え動画について詳しく見る

DiscordのオーバーレイCSSをOBSへ設定する手順

1. DiscordとStreamKitを開く

Discordのデスクトップアプリを起動し、表示したいサーバーのボイスチャンネルへ参加します。Discord公式StreamKit Overlayを開き、「Install for OBS」から案内に従って連携を許可します。表示ラベルや認証画面は更新により変わる場合があります。

2. Voice Widgetでチャンネルを選ぶ

「Voice Widget」を選び、サーバーとボイスチャンネルを指定します。今回のCSSでは名前を表示する設定にし、「話している人だけ表示」に相当する設定はオフにしてください。待機中のアイコンやカードを残したまま、発話中だけ色や動きを変えられます。サーバーのボイスチャンネル用で、DM・グループDMの通話を対象にしたCSSではありません。

3. 発行されたウィジェットURLをコピーする

StreamKitのインストール用パネルに表示されるURLをコピーします。サーバーやチャンネルを選ぶ前の設定ページURLではなく、そのウィジェット用に発行されたURLを使います。この記事の見本や、他の人のチャンネル用URLは入力しません。

4. OBSへブラウザソースを追加する

OBSの「ソース」から「＋」→「ブラウザ」を選んで新規作成し、URL欄へ貼り付けます。「ローカルファイル」はオフにします。アイコンが主役の追加4案は幅1100・高さ310、それ以外の飾りなし6案・枠線だけの6案・最初の装飾4案は幅1100・高さ300、縦長などの追加カード5案は幅1100・高さ400を最初の目安にしてください。これは各CSSのレイアウトと余白に合わせた表示領域です。

5. カスタムCSS欄へ1案分を丸ごと貼る

選んだデザインのCSS全文を「カスタムCSS」へ貼り付けます。もとの欄を必要に応じて控えてから入れ替えてください。このCSSには背景透明・余白の調整も含まれています。保存するとブラウザソースの見た目へ適用されます。

6. 実際に通話して、アイコンと動きを確認する

Discordで声を出し、OBSのプレビューで対応する参加者のアイコンやカードが発話状態に変わるか確認します。声が入り続ける場合はDiscord側の入力感度・入力モードなどを確認します。CSS自体がマイク音を検出する仕組みではなく、StreamKitが受け取った発話状態に応じて表示を変えています。

人数・大きさ・動きの調整

アイコンが主役の追加4案は幅1100・高さ310で4人まで、飾りなし6案と枠線だけの6案は幅1100・高さ300で4人まで、最初の装飾4案も幅1100・高さ300で4人までが1行の目安です。追加カード5案は幅1100・高さ400が目安で、吹き出しは1行3人、それ以外は4人まで。人数が増えて折り返す場合は、飾りなしと最初の装飾4案は高さ560、追加カードは高さ740などへ増やします。

OBSの幅・高さはブラウザページの表示領域です。アイコンそのものの縦横比はCSSのwidth・height、角丸や切り抜きはborder-radius・clip-pathで変更します。切り抜いた外側は隠れ、元のプロフィール画像そのものを書き換えるわけではありません。MDNのclip-path解説。

縦長のアイコン窓はobject-fit:coverで比率を保ち、画像の周辺を一部切り取ります。切り取りを避けるならcontainへ変更できます。丸い元画像の透明な角をCSSで復元することはできません。見本は四角い元画像を切り抜いています。「ぷにっと変形」だけは意図的に画像を縦横に変形させています。

ハート形のアイコンは160px固定のパスを使っています。大きさを変える場合は、まずOBSのシーン上でソース全体を拡大縮小してください。画像のwidth・heightだけを変えると切り抜き位置がずれます。ほかの案も、サイズ変更後は発話時に画像がはみ出さないか確認します。

装飾ありのCSSは先頭の--card-width・--avatar-size・--gapなどで大きさや間隔を調整します。後半で形状用の数値を指定している案は、その指定も合わせて変更します。名前が長い場合は末尾を省略します。ユーザーIDごとの固定席を作るCSSではありません。

ハート・ドット・メーターは装飾用の動きで、声の大きさを測るものではありません。ミュートやスピーカーオフの表示はStreamKitから状態が届いた場合に変わります。飾りなし版は名前・状態の文字を非表示にし、発話中の動きや明るさで区別します。

表示されない・動かないときに確認すること

• 参加者自体が出ない：Discordアプリの起動、StreamKitへの許可、サーバー・チャンネルの選択、通話への参加状態を確認します。
• 公式の表示は出るがデザインが変わらない：CSSがOBSのカスタムCSS欄に全文入っているか、別のCSSが混在していないかを確認します。必要ならブラウザソースのプロパティから現在のページのキャッシュを更新します。
• 名前が出ない：飾りなし6案では名前を意図的に非表示にしています。装飾あり版で出ない場合は、StreamKit側の名前表示設定を確認します。CSSは作られなかった名前要素を追加できません。
• 下や右側が切れる：人数に合わせてブラウザソースの幅・高さを広げます。カードの外側には発話時の浮き上がりや影の余白も必要です。
• 動きだけ止まる：動きを減らす設定が反映される環境ではアニメーションを止め、明るさや枠色などで発話を区別する設計です。
• 以前は使えたCSSが効かなくなった：StreamKit側の表示構造が変わった可能性もあります。確認日以降の互換性を保証するものではありません。

このCSSの仕組みと確認範囲

Discord公式の配信ファイルを確認し、.voice_state・.voice_avatar・.voice_usernameと、発話時の.wrapper_speakingを対象にしています。末尾にランダムな文字列が付くクラス名に依存せず、現在のStreamKitが付けている名前を使います。これらは公式の永続的なCSS拡張APIとして保証されたものではありません。確認対象の公式StreamKit。

見本は同じCSSで発話状態を切り替えて作成しました。ブラウザで25案の模擬発話を確認しました。枠線だけの6案では、画像と線が一緒に動くこと、選択色が見本とコピー欄のCSSへ反映されることを確認しました。追加11案は操作ボタンによる発話切り替えとスマートフォン幅の見本表示、動きを減らす設定を確認しています。装飾版は長い名前の省略と折り返し、飾りなし版はカード・外枠・影・名前が表示されないことも確認しました。OBSでの表示・動作は確認済みです。実際の通話中の動作は未確認です。CSSを貼るだけで通話音声がOBSへ追加されるわけではないため、配信で通話音声も流す場合は音声ソースを別に設定します。

この25案のCSSはオリジナルです。配信・動画制作のための利用と色・サイズ・動きの調整ができます。アイコン画像は各参加者のDiscordアイコンを使用するため、それぞれの画像の利用条件に従ってください。見本用SVGアイコンは記事内デモ用です。

YouTubeコメントCSS無料配布｜かわいい・かっこいいデザイン

OBS待機画面の作り方｜背景やソースの配置を確認する

合わせて読みたい

YouTubeコメントCSS無料配布｜OBSで使えるかわいい・かっこいい12種

合わせて読みたい

OBS待機画面の作り方｜動く背景・BGM・切り替えの設定手順

ショート動画を手軽に作るアプリ

OBSの配信画面をおしゃれに

いっぷー

ゲーマー兼サムネ好き

XYouTube

不定期に更新していくよ！よろしくね♪