OBSで配信画面に枠（オーバーレイ）を重ねる方法｜透過PNGの置き方とゲーム画面・カメラの合わせ方
OBS
配信
はじめに
ゲーム画面やカメラのまわりに枠を付けるだけで、配信画面はぐっと整って見えます。この「枠」は、真ん中が透明になった画像（透過PNG）を、ゲーム画面の上に重ねて作るのが一般的です。
この記事では、OBS Studio で枠を重ねて、ゲーム画面やカメラをぴったり合わせるまでの手順をまとめます。
枠の中の暗い部分は透明です。ここに、ゲーム画面・カメラ・コメント欄が透けて見えるように重ねます（上の画像は、わかりやすいように背景の上に置いています）。
重なり順がいちばん大事
OBS の「ソース」の一覧は、上にあるものほど手前に表示されます。枠は、ゲーム画面やカメラより上に置きます。
並びは、ソースをドラッグするか、一覧の下の ↑ ↓ ボタンで変えられます。
手順
1. 枠を置く
1.本番のシーンを選び、「ソース」の ＋ →「画像」を追加します。
2.「画像ファイル」で枠の PNG を選んで OK を押します。
3.枠の大きさが画面とちがうときは、右クリック →「変換」→「画面に合わせる」で全体に広げます。
2. ゲーム画面を枠の中に合わせる
ゲーム画面は、そのままだと画面いっぱいに出るので、枠の「GAME」の中に収まるように小さくします。
1.ゲーム画面のソースをクリックして選びます。
2.赤い枠の角をドラッグして、縦横の比率を保ったまま小さくし、枠の中に動かします。
3.細かく合わせたいときは、右クリック →「変換」→「変換の編集」で、位置と大きさを数字で入れます。
| 操作 | やり方 |
|---|---|
| 比率を保って大きさを変える | 角をドラッグ |
| 端を切り取る（クロップ） | Windows は Alt、Mac は option を押しながら辺をドラッグ |
| 数字で合わせる | 右クリック →「変換」→「変換の編集」 |
| 元に戻す | 右クリック →「変換」→「変換をリセット」 |
3. カメラとコメント欄を合わせる
カメラも同じように、枠の「CAMERA」の中に動かします。カメラの映像が横長で枠に合わないときは、Alt（option）を押しながら左右を切り取ります。
コメント欄は、配信サービスが出しているコメント表示用の URL を「ブラウザ」ソースで追加し、幅と高さを枠の「CHAT」に合わせます。
4. ずれないようにロックする
合わせ終わったら、ソースの一覧で各ソースの鍵のマークを押してロックします。配信中にうっかりドラッグしても動かなくなります。
うまくいかないとき
| 困りごと | 見るところ |
|---|---|
| 枠が見えない | 枠のソースが一覧のいちばん上にあるか。目のマークがオンか |
| 枠の透明な部分が黒い・白い | 画像が透過PNGか（JPG は透明にできません） |
| ゲーム画面が枠からずれる | ゲーム側の解像度が変わった。「変換の編集」で数字を入れ直す |
| 枠がぼやける | 枠の画像が配信の解像度より小さい。1920×1080 の画像を使う |
| 場面ごとに枠を作り直すのが面倒 | 枠と背景を「共通」シーンにまとめ、「ソース」の ＋ →「シーン」で各シーンに入れる |
関連記事
この記事で使った枠
記事の画像は、このサイトで作った「動く配信素材」の宇宙の枠です。ゲーム用・雑談用の配置と、コメント欄・カメラ・画面の枠だけの画像があり、待機画面や配信中の部屋と同じ世界でそろえられます。