OBS Guide
オーバーレイ配信演出StreamlabsStreamElements

OBS 配信オーバーレイの作り方と設定方法

OBSの配信画面にオーバーレイ(フレーム・テキスト・アラート)を追加する方法を解説。StreamlabsやStreamElementsのウィジェットをOBSに表示する設定手順をまとめています。

公開: 2026-03-05

オーバーレイとは

配信画面に重ねて表示する装飾・情報表示のことです。

よく使われるオーバーレイ:
・カメラフレーム(Webカメラの枠)
・配信者名・チャンネル名のテキスト
・フォロー・サブスク通知アラート
・チャットウィジェット
・クリエイティブアーツ(アニメーション演出)

静止画オーバーレイの作成

画像ソースで追加する(最シンプル)

ソース → + → 画像

ファイルパス: オーバーレイ画像のファイルを選択
(PNG推奨・透明背景対応)

PNGで透明(透過)背景のオーバーレイ画像を用意すれば、ゲーム映像の上に重ねて表示できます。


テキストオーバーレイの追加

ソース → + → テキスト(GDI+)

テキスト: 表示したい文字
フォント: フォントを選択
サイズ: 適切なサイズ
色: テキスト色
背景色: 背景(透明可)

使用例

・配信者名・チャンネル名
・「視聴ありがとうございます」
・ゲームタイトル
・SNSアカウント名

Streamlabsウィジェットの追加(フォロー・サブスク通知)

手順:
1. Streamlabs (streamlabs.com) でアカウント作成
2. Streamlabsと配信プラットフォームを連携
3. 「ウィジェット」→「アラートボックス」
4. ウィジェットURLをコピー

OBS側:
ソース → + → ブラウザ
URL: コピーしたURL
幅: 800
高さ: 600
→ OK

StreamElementsウィジェットの追加

StreamElementsはStreamlabsの代替サービスです。

1. StreamElements (streamelements.com) でアカウント作成
2. 「Overlays」→「My Overlays」→「New Overlay」
3. ウィジェットを追加・デザインカスタマイズ
4. 「Launch Overlay」ページのURLをコピー

OBS:
ソース → + → ブラウザ → URLを貼り付け

チャットウィジェットの設置

視聴者のコメントを配信画面に表示する方法:

StreamElements:
Overlay → チャットウィジェットを追加
→ フォント・色・アニメーションをカスタマイズ

OBS:
ブラウザソースでURLを指定
幅・高さを配置に合わせて調整

Webカメラフレーム(枠)の設置

Webカメラ映像を丸型や装飾フレームで表示できます。

方法1: フレーム画像(PNG透過)を使う
→ 画像ソースでフレーム画像を追加
→ Webカメラの映像の上にフレームを重ねる

方法2: ソースフィルターでマスク
→ Webカメラのソース → フィルター → 画像マスク
→ 丸型・角丸マスク画像を適用

オーバーレイ素材の入手先

無料素材:
・Nerd or Die (nerdordie.com) - 無料テンプレートあり
・OWN3D (own3d.tv) - 無料・有料素材
・Streamlabs Marketplace - 無料テーマ

有料素材:
・Motion Array
・Envato Elements

検証環境

CPU: Intel Core i9-14900K
GPU: Nvidia RTX 5070 Ti
メモリ: DDR5 64GB (32GB×2) 6000MHz
SSD: 3ドライブ構成
電源: 1000W
CPUクーラー: ROG RYUJIN III 360
OBS: 32.0.4

まとめ

  • 静止画オーバーレイはPNG透過画像をソースに追加
  • フォロー・サブスク通知はStreamlabs / StreamElementsのブラウザソースで追加
  • チャット表示もブラウザソースで設置できる
  • カメラフレームはPNG透過フレーム画像をカメラソースの上に重ねる
  • 無料素材はNerd or DieやOWN3Dなどで入手できる

関連記事