OBSでオーバーレイを載せるには、「ソース」ドックの下にある＋ボタンから「画像」（固定のグラフィック）か「ブラウザ」（アラートやチャットのウィジェットが発行するWebアドレス）を追加し、一覧でゲームのソースより上に置きます。確認する点は、ソースの種類、重なり順、背景の透過の3つです。この記事のメニュー名は、OBS Studio 32.2.2の日本語ロケール文字列と公式ナレッジベースを2026年10月6日確認時点で照合したもので、Windows PC前提です。ウェブカメラの配置はフェイスカム付きでゲームを録画する方法で扱うため、ここでは画像とブラウザのソースに絞ります。
結論：アラートはOBSに内蔵されていません
OBS Studioにはストリームのアラート機能が組み込まれておらず、公式FAQは第三者のアラート提供者が出すオーバーレイをブラウザソースとして追加するよう案内しています。つまり、アラートやチャットボックスは提供者から受け取ったアドレスを貼る形で、ロゴや枠は自分で用意したファイルを読み込む形になります。この記事では特定の提供者やテンプレートサイトは紹介しません。シーン作り全体が重く感じるときは、OBSが複雑すぎるときに自動録画へ乗り換える方法を扱った記事も参考になります。
画像とブラウザのオーバーレイを載せる手順
- 1シーンを選びゲームのソースを先に置く「シーン」ドックで対象のシーンを選びます。公式のストリームレイアウト チュートリアルは、画面キャプチャ（Display Capture）、ゲームキャプチャ（Game Capture、Windowsのみ）、ウィンドウキャプチャ（Window Capture）、映像キャプチャデバイス（Video Capture）のいずれかでゲームのソースを先に追加し、編集 > 変換 > 画面に合わせる（Ctrl-F）でキャンバスの大きさに揃える流れです。オーバーレイはその上に重ねる層になります。
- 2画像ソースを追加する「ソース」ドック下の＋ボタン（ソース追加）を押すと開く「ソースを追加」ウィンドウで、「ソースの種類」の一覧から「画像」を選びます。「ソースを表示した状態で作成」にチェックが入っているのを確認して「新しいソースを作成」ボタンを押すと、ソース名が自動で付いてプロパティが開きます。公式ナレッジベースは以前の画面（新規作成を選び、名前を入力し、OK）で説明しているため、見た目が少し違う場合があります。プロパティで「参照」からファイルを選び、OKを押します。対応形式はBMP、TGA、PNG、JPEG、GIFで、アルファ（透過）は該当する形式で使えます。ファイルの指定欄は「画像ファイル」です。
- 3ブラウザソースを追加する同じウィンドウの「ソースの種類」の一覧から「ブラウザ」を選んで「新しいソースを作成」を押し、開いたプロパティのURL欄に提供者が示すアドレスを貼ります。公式ドキュメントの既定値は幅800、高さ600で、FPS 30は「カスタムフレームレートを使用する」をオンにしたときに使われる値です（ページ日付は2022年1月11日）。アラートのチュートリアルは「適切な大きさ」に調整するとだけ述べているため、設定 > 映像の「基本 (キャンバス) 解像度」を参考に幅と高さを調整し、プレビューで切れていないかを見ます。PCに保存したページは、代わりに「ローカルファイル」をオンにします。
- 4背景が透過になっているか確かめる画像は、ファイル自体が透明な背景で保存されていてはじめて後ろの画面が透けます。ブラウザソースでは、「カスタム CSS」の既定値 body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } がページ背景を透明にすると公式ドキュメントに書かれています。四角い背景が出るときは、この欄を書き換えていないかを見てください。これ以外の透過方法は、ナレッジベースに記載がありません。
- 5大きさと位置を整えるソースを選ぶとプレビューに赤い境界ボックスが出ます。ドラッグで移動し、角や辺の赤いハンドルで大きさを変えます。正確な値は編集 > 変換 > 変換の編集（WindowsではCtrl-E）の「位置」「大きさ」「クロップ」に入力します。Altを押しながらハンドルをドラッグすると切り抜き、Ctrlを押しながらドラッグするとスナップが無効になります。
- 6重なり順を決める一覧で上にあるソースが下のソースより手前に描かれます。オーバーレイがゲームの後ろにあるなら、選んでから一覧下の上矢印ボタンを押すか、「順序」メニューの「上に移動」「最上部に移動」を使います。オーバーレイが複数あっても同じ規則で並べます。
- 7表示・ロック・更新を確認する目のアイコンが灰色なら非表示、白なら表示中です。配置が決まったソースは「ロック」しておけます。ブラウザソースが古いページを出し続けるときは、プロパティの「現在のページのキャッシュを更新」を押します。
オーバーレイの種類と使うソース
| 状況 | 使うソース | 公式ドキュメントで確認する値 |
|---|---|---|
| 固定のロゴや枠 | 画像 | 「画像ファイル」にBMP、TGA、PNG、JPEG、GIFのいずれかを指定 |
| Webアドレスで届くアラートやチャット | ブラウザ | URLに提供者のアドレスを貼る。公式の既定値は幅800、高さ600 |
| 自分のPCに保存したWebページ | ブラウザ | 「ローカルファイル」をオンにしてパスを指定（既定はオフ） |
| 後ろのゲーム画面が透けてほしいもの | アルファ付きの画像、またはブラウザの既定のカスタム CSS | 既定CSSは body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } |
| 複数の画像を順番に表示 | 画像スライドショー（Image Slide Show） | 公式の既定値は スライド時間間隔 8000 ms、画面切替速度 700 ms |
| オーバーレイがゲームの後ろに隠れる | ソースの順序 | 一覧で上にあるソースが下のソースより手前に表示される |
録画・配信を始める前の点検
- 画像ファイルがBMP、TGA、PNG、JPEG、GIFのいずれかで、透過が必要なら透明な背景で保存されていることを確認します
- ブラウザのURLが提供者の画面のとおりに貼れていて、「ローカルファイル」のオン・オフが意図どおりかを確認します
- 幅と高さを「基本 (キャンバス) 解像度」と比べ、プレビューで切れや余白がないことを確認します
- ソース一覧でオーバーレイがゲームのソースより上にあることを確認します
- 目のアイコンが白で、「カスタム CSS」の既定値を消したり変えたりしていないことを確認します
- 「ページ権限」が既定の「OBSのステータス情報へのアクセス」のままか、変えた理由を説明できるかを確認します
配置が決まったあと、録画に移るとき
ここまでの作業はOBSの中でレイアウトを組むもので、DORにライブオーバーレイがあるという意味ではありません。録画の段階でDORができるのは、OBSのようにシーン・ソース・出力を先に組まずに始めることです。VALORANTなどの対応ゲームを起動すると、無料のWindowsアプリがゲームを自動で検出し、試合全体をmp4で録画します。VALORANTはキルのハイライトも自動でクリップになる7ゲームの1つです。録画後はアプリのライブラリで開始と終了を指定して切り取り、16:9、9:16、1:1から出力比率を選べます。インストール不要のブラウザ編集機能DOR スタジオでは、編集段階でテキストを重ねられますが、これは配信中のライブオーバーレイとは別の作業です。
