配信画面のレイアウトは、素材を探す前に2つ決めると作り直しが減ります。「OBSの解像度」と「ゲーム画面・モデル・コメント欄を置く枠の位置」です。
検索で出てくる記事の多くは配置のコツやデザイン例を紹介していますが、素材選びより先に決める寸法の話はあまり出てきません。解像度と枠が決まっていないと、無料素材でも依頼でも「モデルが枠に入らない」「ぼやける」が起きます。
この記事では、この2つを決める手順、無料素材で作るか依頼するかの判断基準、依頼するときに渡す仕様を順に書きます。配信を始めるまでの全体像はゲーム配信の始め方をまとめた柱ページにあります。
配信画面のレイアウトの作り方｜全体の手順
配信画面は、OBSの中で「背景」「ゲームやカメラの映像」「モデル」「フレームや文字」を重ねて作ります。作業の順番は次のとおりです。
- OBSの基本（キャンバス）解像度を確認する
- ゲーム画面・モデル・コメント欄・名前の枠の位置を紙かメモに書く
- 枠に合う素材を集める（無料素材・有料素材・依頼のどれか）
- OBSで素材を重ね、表示の順番を整える
- スマホの画面で見え方を確認する
手順1と2だけなら、素材がなくても今日できます。ここを飛ばして素材から探し始めると、気に入った素材の枠に合わせて画面を作ることになります。するとモデルの位置やゲーム画面の大きさを素材に縛られてしまいます。OBSの基本操作に不安があるなら、先にOBS Studioの使い方の記事を読んでください。シーンとソースの考え方がわかると、この先の手順が読みやすくなります。
手順1・2：解像度と枠の位置を先に決める
OBSの基本（キャンバス）解像度を確認する
OBSでは「ファイル > 設定 > 映像」に「基本 (キャンバス) 解像度」と「出力 (スケーリング) 解像度」が並んでいます（執筆時点の日本語表示。出典: OBS Studio 公式リポジトリの日本語翻訳ファイル）。素材の大きさを合わせる相手は「基本 (キャンバス) 解像度」の方です。
キャンバスは、配信画面を組み立てる作業台の大きさだと考えてください。出力解像度は、その作業台を配信サイトへ送るときに縮めるサイズです。素材をキャンバスと同じ縦横のピクセル数で作れば、拡大して文字がにじむことがありません。たとえばキャンバスが1920×1080なら、フレーム素材も1920×1080で用意します。数字はこの画面に表示されている値をメモしておき、あとで素材を選ぶときや依頼するときに使います。
枠の位置を書き出す
次に、画面のどこに何を置くかを決めます。きれいな図である必要はなく、長方形を描いて、その中に枠を書き込めば十分です。決めるのは次の4つです。
- ゲーム画面（またはカメラ・作業画面）を置く位置と大きさ
- モデルを置く位置。全身か胸から上か
- コメント欄を画面に出すかどうか。出すなら位置
- 名前・配信タイトル・SNSのIDなど文字を置く場所
モデルをゲーム画面の右下や左下に重ねるなら、ゲームのミニマップや体力表示など、ゲーム側の表示とぶつからないかを確認します。遊ぶゲームが決まっているなら、一度プレイ画面を撮って、その上に枠を描くと確実です。
スマホで見る人もいるので、文字は画面の端ぎりぎりに置かないようにします。配信サイトの再生ボタンなどが重なって読めなくなることがあるためです。
手順3・4：素材をOBSで重ねる
素材がそろったら、OBSのシーンに重ねていきます。以下のメニュー名は執筆時点の日本語表示で、バージョンによって名前や位置が変わることがあります。
画像素材（フレーム・背景・名前プレート）を入れる
「ソース」欄の「＋」から「画像」を選び、「画像ファイル」で素材を指定します。OBSの画像ソースが読み込める形式は、PNG・JPEG・GIF・WebP・PSDなどです（出典: OBS Studio 公式リポジトリ 画像ソースのコード）。ゲーム画面を見せる「穴」が空いたフレームは、背景が透明なPNGで用意します。
素材がずれたときは、素材を右クリックして「変換 > 画面に合わせる」を選ぶと、キャンバスの大きさに合わせて配置されます。素材とキャンバスの解像度が同じなら、これでぴったり重なります。
重なる順番を整える
ソース欄では、上にあるものほど画面の手前に表示されます。下から「背景 → ゲーム画面 → フレーム → モデル → 文字」の順に並べるのが基本の形です。順番は、ソースを右クリックして「順序 > 上に移動」などで変えられます。位置が決まったソースは、ソース欄の鍵のアイコン（ロック）で固定しておくと、配信中に誤ってずらす心配がありません。
共通部分は1つのシーンにまとめる
「雑談」「ゲーム」「待機」など複数のシーンを作るなら、共通部分を1つのシーンにまとめます。名前プレートやモデルなどです。それを各シーンに「シーン」ソースとして追加すると、位置を1か所直すだけで全シーンに反映されます。モデルをOBSに映す方法そのものはVTube Studioの使い方の記事で手順を書いています。
コメント欄やアラートはブラウザソースで入れる
コメント欄やフォロー通知など、Webページとして提供される表示は「ブラウザ」ソースで読み込みます。OBSのブラウザソースは、Webベースのオーバーレイをシーンに入れるための機能として公式に説明されています（出典: obs-browser 公式リポジトリ）。幅と高さは、手順2で決めたコメント欄の枠に合わせて入力します。
配信画面は無料素材で作るか依頼するか
素材の手に入れ方は、大きく3つです。費用の金額は出品者ごとに幅が大きいため、ここでは比べやすい項目だけを並べます。
| 比べる項目 | 無料素材 | 有料の配布素材 | イラストレーター・デザイナーに依頼 |
|---|---|---|---|
| 費用 | かからない | 素材ごとの価格 | 見積もり次第。いちばん高くなりやすい |
| 使い始めるまで | 当日から | 購入後すぐ | 相談・制作・修正の期間が必要 |
| 枠の位置の自由度 | 素材に合わせる | 素材に合わせる。加工可の素材もある | 自分の配置に合わせて作ってもらえる |
| 他の配信者との被り | 起きやすい | 起きることがある | 起きにくい |
| キャラとの統一感 | 色を選んで寄せる | 色違いがあれば寄せられる | モデルの色や設定に合わせられる |
ココナラでVTuberのイラスト・Live2Dモデルを依頼する（無料会員登録）
判断の目安は「デビュー日までの期間」と「枠の位置をどこまで自分で決めたいか」です。デビューまで1か月を切っているなら、まず無料素材で配信を始めるのが現実的です。配信を何回か続けると、自分に必要な枠が見えてきます。そのあとで依頼に切り替えても遅くありません。最初から依頼すると、使ってみて初めて「コメント欄はいらなかった」と気づくことがあります。
一方で、モデルやキャラ設定の色に画面を合わせたい場合や、ゲーム画面を大きく見せたい場合は、依頼の方が早く終わります。配布素材の枠に配置を合わせ続けると、結局は自分で加工する手間がかかるためです。依頼先の探し方や頼み方の流れはイラスト・Live2D依頼の手順の記事と同じ考え方で進められます。
素材を使う前・依頼する前に確認すること
無料・有料の配布素材は利用規約を読む
無料でも、使ってよい範囲は配布者ごとに違います。素材をダウンロードしたら、配布ページの利用規約で次の点を確かめます。
- 収益化した配信（広告・投げ銭・メンバーシップ）で使ってよいか
- クレジット表記が必要か。必要なら書く場所（概要欄など）
- 色の変更や切り抜きなどの加工をしてよいか
- アーカイブや切り抜き動画、サムネイルに写ってもよいか
規約が見つからない素材は、使う前に配布者へ確認するか、別の素材を選んだ方が安全です。加工しても著作権は配布者に残る、と定めている配布ページもあります。加工した素材をほかの人に配るのは避けてください。
依頼するときは仕様を文章で渡す
依頼では、手順1と2のメモがそのまま仕様書になります。最低限、次の内容を伝えると見積もりと完成品のずれが減ります。キャンバスの解像度、ゲーム画面やモデルの枠の位置と大きさ、透明PNGで納品してほしいことの3つです。フレーム・名前プレート・背景を別ファイルにしてもらうと、あとから一部だけ差し替えられます。
あわせて、使う範囲（配信・アーカイブ・切り抜き・サムネイル）、修正の回数、納期も最初に確認します。これらは出品ページや見積もりの段階で書かれていることが多いので、購入前に読んでおきます。サムネイルにも同じデザインを使いたいなら、サムネイルの作り方の記事も見て、文字や色の方向をそろえておくと統一感が出ます。
配信画面デザインでつまずきやすい3つの症状
素材がぼやける場合は、素材の解像度がキャンバスより小さいことが原因です。OBS上で引き伸ばすと文字の縁がにじみます。キャンバスと同じ解像度の素材に差し替えてください。
モデルや文字が見えない場合は、ソース欄の順番を見直します。フレームやゲーム画面がモデルより上にあると、モデルが後ろに隠れます。目のアイコン（可視性）がオフになっていないかも確認します。
スマホで文字が読めない場合は、文字が細すぎるか、背景と色が近すぎます。配信を限定公開でテストし、自分のスマホで見て確かめるのが確実です。PCのモニターで読める大きさでも、スマホでは小さく見えることがあります。
今日やること：OBSの解像度を見て、枠を1枚描く
今日は「ファイル > 設定 > 映像」を開き、基本 (キャンバス) 解像度をメモしてください。次に、長方形の中にゲーム画面・モデル・コメント欄の枠を描きます。この1枚があれば、無料素材を探すときも、依頼で見積もりを取るときも、話が早く進みます。
デザインを依頼する場合は、出品ページで実績と使用範囲を見比べ、メモを添えて相談してみてください。
ココナラでVTuberのイラスト・Live2Dモデルを依頼する（無料会員登録）
配信全体の準備はゲーム配信の始め方の柱ページ、OBSの基本操作はOBS Studioの使い方の記事にまとめています。