kamitool > 読みもの > 配信画面のレイアウトの決め方｜余白・セーフエリアと座標の目安

配信画面のレイアウトの決め方｜余白・セーフエリアと座標の目安

kamitool 運営者

配信の画面は、置けるものが多いぶん、気づくと隅から隅まで埋まっていることがあります。ゲームの映像、自分のカメラ、カウンター、告知のテロップ、コメント欄。すべてを同じ強さで主張させると、どれも読まれなくなります。ここでは、余白とセーフエリアの考え方、置き場所を決める順番、1920×1080での座標の目安を、表と手順で整理します。数値は目安なので、自分の配信に合わせて動かしてください。

レイアウトで先に決めておくこと

画面づくりで迷う原因の多くは、「何を一番見せたいか」が決まっていないことです。ゲーム配信なら、主役はゲームの映像です。雑談配信なら、話している本人のカメラや、話題を表す1枚の画像が主役になります。主役を1つ決めたら、そのほかの要素は、主役を邪魔しない位置に、小さめに置きます。

要素を、役割で3つに分けておくと、置き場所を決めやすくなります。

補助の表示は、数が増えやすい部分です。「あると便利そう」で足していくと、視聴者の目が散ります。配信中ずっと必要なものだけを常時表示にして、ほかは、場面を切り替えたときだけ出すようにすると、すっきりします。

余白とセーフエリアの考え方

セーフエリアとは、映像の端の内側に決める、「大事なものを置いてよい範囲」のことです。もとは、放送用のテレビで、画面の端が切れて見える機器があったことから生まれた考え方です。放送の世界では、画面の外周をおよそ5〜10%ほど内側に取った範囲を、文字や大切な映像を置く範囲の目安にしてきました。

配信は、パソコンやスマホで見られることが多く、端が切れる場面は、テレビほど多くありません。それでも、セーフエリアを決めておく意味は残っています。理由は3つあります。

• 視聴アプリの画面には、再生ボタン、字幕、コメント、タイトルなどが、映像の端に重なって出ることがある
• 映像を拡大して見る人、全画面にしない人など、見え方が一定ではない
• 端ぎりぎりに文字があると、画面の縁に張り付いて見え、窮屈な印象になる

1920×1080の画面で、5%を余白に取ると、左右が各96ピクセル、上下が各54ピクセルです。まずは、この内側を「置いてよい範囲」と考えます。常時出す文字は、この内側に収めます。背景や飾りのように、端まで広がってよいものは、外側に出ても構いません。

表の数字は、画面の大きさに割合をかけた、単純な計算の結果です。放送の規格そのものではなく、配信の画面づくりの出発点として使ってください。

1920×1080での置き場所の目安

OBSのキャンバスを、横1920、縦1080に設定していると仮定して、置き場所の例を挙げます。座標は、画面の左上を（0, 0）として、右へ進むほど横の値が増え、下へ進むほど縦の値が増える決まりです。

カメラの大きさ480×270は、画面の幅の4分の1です。横幅を4分の1にすると、縦横比も16:9のまま保てます。大きくしすぎると、ゲームの映像を隠す面積が増えます。反対に小さくしすぎると、表情が読み取れません。幅の5分の1から、4分の1のあたりを、出発点にするとよいでしょう。

ゲームによっては、画面の四隅のどこかに、重要な表示が出ます。左上にミニマップ、右上に残り時間、下に体力やアイテム、といった具合です。ゲームを起動した状態で、キャンバスに映った映像を見て、「情報が出ていない隅」を探してから、カメラや補助の表示を置きます。ゲームを変えるたびに、この確認をやり直します。

このサイトのツールを置くときの注意

kamitoolのツールは、OBSのブラウザソースの枠の中に、決まった位置で表示される作りです。無料版では、置く場所を設定で変えられないツールがあります。置き場所を動かしたいときは、OBSの側で、ソースの位置と大きさを調整します。

• 告知ティッカー（/tools/ticker/）は、画面の下に、半透明の帯の上を流れます。幅1920・高さ1080のソースとして入れるのが目安で、帯は画面の下端に出ます。下に体力表示が出るゲームでは、帯が重なって見づらくなるため、ゲーム映像の位置を少し上げるか、流す場面を限定します。
• 目標カウンター（/tools/goal/）は、タイトル、「今の数 / 目標」、「あと◯」が縦に並びます。ソースの枠の中で、位置は決まっているため、OBSでソースを動かして、置きたい場所に合わせます。
• 待機画面（/tools/standby/）や離席中画面（/tools/away/）は、画面全体を覆う背景です。ほかの要素に重ねるのではなく、単独で映るシーンを作って使います。

ソースの位置を動かしたり、大きさを変えたりするときは、OBSのプレビューで、ソースの四隅の赤い枠をつかんで引き伸ばします。この操作は、画像を引き伸ばすのと同じで、文字がぼやけることがあります。小さくするぶんには、ほとんど問題になりませんが、大きく引き伸ばすのは避けてください。数字で正確に合わせたいときは、ソースを右クリックして「変換」から「変換を編集」を開くと、位置と大きさを数値で入れられます。

決める順番と手順

1. キャンバスの解像度（基本の画面サイズ）と、出力の解像度を確認する。例では、どちらも1920×1080
2. ゲームや作業画面など、主役の映像を全面に置いて、情報が出ている隅を確認する
3. 余白を5%に決め、画面の上に目印となる四角形を置いて、内側の範囲を見えるようにする（確認用なので、あとで消すか非表示にする）
4. カメラを、情報の出ていない隅に置く。大きさは、幅の4分の1以下から始める
5. 常時出す補助の表示を、1つずつ追加する。1つ追加するたびに、ゲームの重要な表示と重なっていないかを見る
6. 場面ごとのシーンを複製して、必要のない表示を外す（待機用、休憩用など）
7. 実際に配信先のプレビューや、限定公開の配信で、視聴者の画面でどう見えるかを確かめる

この順番の利点は、主役の映像を先に置くことで、「あとから足した要素のせいで、主役が隠れた」という失敗を防げることです。逆に、カメラや飾りから置いていくと、ゲームの映像に合わせる段階で、全部の位置を直すことになります。

見直しと応用

よくある失敗と見直しのしかた

確認のしかた

レイアウトの確認は、自分のモニターだけで終わらせないことが大切です。次の方法を組み合わせると、見落としが減ります。

• 録画した動画を、あとから再生して見る
• 限定公開や、公開範囲を絞った配信先の機能を使って、視聴者側の画面を見る（配信先ごとに、利用できる機能は異なります）
• スマートフォンで、視聴者として画面を開いて、小さな画面でも読めるか確かめる
• ブラウザの再生画面を、全画面にした場合と、しない場合の両方で見る

確認用チェックの観点は、次のとおりです。

• 主役の映像が、ほかの要素で隠れていない
• 常時出す文字が、余白の内側に収まっている
• カメラが、ゲームの情報と重なっていない
• 補助の表示が、一目で読める数に収まっている
• 場面を切り替えても、位置がずれたり、不要な表示が残ったりしていない

配信の種類による置き方の違い

同じ1920×1080でも、配信の内容によって、向く配置は変わります。代表的な3つの型を比べます。

反応の速さが求められるゲームでは、視聴者も画面の中心付近を見ています。中心から遠い隅に、補助の表示を寄せると、プレイの見え方を邪魔しません。いっぽう、雑談のように動きの少ない配信では、画面の中心が空きやすいので、補助の表示を少し内側に置いても、気になりません。

耐久配信のように、数が増えていく様子そのものが見どころになる場合は、数の表示を、視線の通り道に近い位置に置く選択もあります。ただし、数字を大きくしすぎると、ゲームの映像を隠してしまいます。幅や高さの半分を超えるような大きさは、避けておくと安心です。

解像度が違うときの考え方

配信の画面が1920×1080ではなく、1280×720のこともあります。この場合も、考え方は変わりません。割合で考えると、置き場所の見当がつきます。

どちらの画面でも、縦横の比は16:9で同じなので、座標を倍率でそろえれば、配置の形はそのまま移せます。1920から1280への倍率は、3分の2です。たとえば、1920での96は、1280では64です。

ブラウザソースを使うときは、キャンバスの大きさと、ソースの幅・高さをそろえておくのが基本です。キャンバスが1280×720なのに、ソースを1920×1080で入れると、枠の一部がキャンバスの外にはみ出して、ツールの表示が切れて見えることがあります。キャンバスを変えたときは、ブラウザソースの幅と高さも見直します。

配信先ごとの見え方に備える

配信先のサービスによって、視聴画面の作りは違います。映像の上に、再生の操作や、視聴者数、チャット、タイトル、広告の枠などが重なる場合があります。どの位置に何が出るかは、サービスやアプリの更新で変わるため、ここでは具体的な位置を断定しません。確認する習慣だけ、決めておくと役に立ちます。

1. 配信を始める前に、配信先の管理画面で、プレビューや、視聴ページの見た目を確認する
2. パソコンのブラウザと、スマートフォンのアプリの、両方で映像を開く
3. 縦持ちの状態、横持ちの状態、全画面の状態で、文字の位置が重なっていないかを見る
4. 重なる場所があれば、常時出す文字を、その場所から離す

この確認は、配信先を変えたとき、アプリが大きく更新されたときにも、やり直しの対象です。レイアウトを「一度作ったら終わり」にしないことが、長く続けるときのコツです。

位置を保存しておく方法

気に入った配置ができたら、そのシーンを複製して、控えを残しておきます。OBSには、設定をまとめて書き出す機能もあります。「シーンコレクション」を書き出せば、パソコンを変えたときや、設定を壊したときに、配置を戻せます。配置を変える前に、複製を1つ作る習慣をつけておくと、試行錯誤が怖くなくなります。

あわせて、メモにも残しておくと便利です。「余白は5%、カメラは480×270、左下は96, 756」のように、数字を書いておけば、シーンを作り直すときに、ゼロから考え直さずに済みます。

まとめ

レイアウトは、主役を決めて、余白を取り、情報の出ない場所に補助を置く、という順番で考えると、迷いが減ります。1920×1080では、5%の余白が左右96、上下54で、カメラの大きさは480×270が出発点です。数値は、あくまで目安です。ゲームや配信の内容に合わせて、配信前に実際の画面で確かめながら、少しずつ調整してください。

あわせて読みたい記事