配信画面のレイアウトデザインの基本｜視聴者が見やすい情報配置

新しいオーバーレイを作って、時計もフォロワー目標もコメント欄も、全部のせてみた。でも、なんだか見づらい——。配信画面は、のせる情報を増やすほど、一つひとつが読まれにくくなります。

特に気をつけたいのが、スマホで見ている人です。パソコンで作った画面は、スマホを縦に持つと横幅が約5分の1に縮んで映ります。見やすい画面のコツは「主役・余白・文字の大きさ」の3つです。

※本記事はPR・広告（アフィリエイト）を含みます。商品の選定基準・調査方法については運営者情報をご覧ください。

① まず「主役」を決めて、いちばん大きく置く

画面の中で、視聴者がいちばん見たいものは何でしょうか。ゲーム配信ならゲームの画面、雑談配信なら配信者（カメラやアバター）です。主役を決めたら、それをいちばん大きく置き、カメラ・コメント・テロップなどの脇役は、主役のじゃまにならない場所に小さくまとめます。

ハル

時計とかフォロワー目標とか、全部のせたら便利だと思ったのに…

ビット

情報が多いほど、一つひとつは読まれにくくなるんだ。その配信で本当に見てほしいものだけ残してみよう。ほかは、休憩画面や概要欄にまわしてもいいね。

② 文字やロゴは、画面の端から少し内側に置く

画面の端ぎりぎりに置いた文字は、見る環境によって見切れたり、プレーヤーの再生バーや字幕に重なったりします。テレビ放送の規格（EBU R 95）では、文字などのグラフィックは上下左右それぞれ5%内側に収めるのが目安です。1920×1080の画面なら、左右96px・上下54pxになります。

③ スマホで見たときの大きさで、文字を決める

スマホを縦に持つと、画面の横幅は約390ポイント（iPhoneの場合）。横1920pxの配信画面は、約5分の1に縮んで映ります。横向きの全画面でも、約3分の1です。

Appleのデザインの手引きでは、スマホの文字は11ポイント以上が目安とされています。縦向きで5分の1に縮むと考えると、大事な文字は50px以上（計算では約54px）あると安心です。

ハル

スマホで見る人のほうが多いかもしれないもんね！

ビット

そういうこと。パソコンの大きな画面だけで決めないのがコツだよ。

④ 基本の形は変えずに、配信の種類でシーンを分ける

配信のたびにレイアウトが変わると、視聴者は「どこに何があるか」を毎回探し直すことになります。基本の形を決めて、ゲーム配信用・雑談用・休憩用のようにシーンを分けておくと、切り替えも楽です。

休憩中や開始前の画面は配信の待機画面・休憩画面の作り方、シーンの切り替えを楽にする方法はOBSでシーン切り替えを自動化する方法で紹介しています。

素材・テンプレートの入手先

デザインをゼロから作るのが難しい場合は、CanvaやFigmaで配布されている配信オーバーレイ用のテンプレートを使うと、短時間でまとまったデザインに仕上げられます。配信サムネイル・バナーの作り方で紹介したツールは、オーバーレイの画像づくりにもそのまま使えます。

オリジナルの枠・ロゴを自分で描きたい場合

テンプレートを組み合わせるだけでなく、カメラ枠やロゴをオリジナルのイラストで用意したい場合は、液晶ペンタブレットがあると作業がぐっとやりやすくなります。マウスで細かい線を描くのに比べて、直感的にデザインを調整できます。配信サムネイル・バナーの作り方で紹介した板タブと合わせて、予算に応じて検討してみてください。

よくある質問

ハル

OBSの機能だけで、こういうレイアウトって作れるの？

ビット

作れるよ。ソースの位置と大きさを調整して、画像やテキストのソースを重ねるだけで十分。飾りの画像は、別のツールで作って読みこめばいいんだ。

ハル

VTuberのときも、同じ考え方でいい？

ビット

うん。主役はアバターだから、いちばん大きく置こう。コメント欄やテロップが顔や口元に重ならないようにするのがポイントだよ。

まとめ：作ったらチェック

※2026年10月27日：マンガと図解を加えて、内容を全面的に見直しました。画面の名前は OBS Studio の日本語表示をもとにしています。参考：EBU R 95「Safe areas for 16:9 television production」、Apple「UI Design Dos and Don’ts」、W3C「WCAG 2.1」1.4.3