オーバーレイ作成：静止画ではなくライブグラフィックス
多くの配信オーバーレイパックは、OBSに置いたあと二度と触らない画像ファイルです。生きたオーバーレイは違います。スコア、ゲストの名前、その日の見出しを知っていて、本番中にそれを書き換えます。何が入っていて、どう作るのかを説明します。
オーバーレイの実際の中身
プロの放送を分解すると、繰り返し現れる要素が4〜5個あります。配信オーバーレイも同じ一覧を、ひとりとPC1台の規模に縮めたものです。
- 名前テロップ — 誰が話し、なぜ聞く価値があるのか。ローワーサード作成 →
- バグ（隅の常設要素） — ロゴ、スコア、時計。スコアボード表示 →
- ティッカー — 見出し・予定・スポンサーを流す下部の帯。ニュースティッカーソフト →
- 全画面の場面 — まもなく開始、少々お待ちください、結果、順位表、速報帯。
- フレームとマット — ウェブカメラやゲーム画面の周りの固定装飾。画像ファイルが得意な唯一の領域です。
静的オーバーレイと生きたオーバーレイ
画像のオーバーレイはフレームや枠には最適です。形が変わらないならPNGが正解です。文字が入るものはすべて別問題になります。名前・スコア・見出しがPNGに焼き込まれた瞬間、更新は画像編集と再読み込みを意味します。生放送40分目に落ち着いてできる作業ではありません。
生きたオーバーレイは、デザインをテンプレートに、内容をパネルに置きます。番組中デザインは変わらず、内容は常に変わる。この2つを分けることが要点のすべてです。
配信向けの設計
放送グラフィックスは2メートル離れたテレビ用に設計されています。配信は片手のスマホで見られます。ここから3つの判断が変わります。画面比で文字を大きく、コントラストを強く、同時に出す要素を減らす。
アクセントカラーを1つ決め、どこでも使ってください。テロップ、バグ、ティッカーが同じ出自に見えることが重要です。ちぐはぐなオーバーレイは素人っぽく見える一番の近道です。チャンネルカラーがあるならそれを。LowerThird Software のデザインファミリーは1組の値から自動で色を組み替えます。
四隅を空けておく
各プラットフォームは自分たちのUIを映像の上に載せます。Twitch はチャットとプレイヤー操作、YouTube はタイトルバーと終了画面、Kick も独自のUI。いずれもスマホでは下の隅を覆う可能性があります。
四辺に最低5%の余白を残し、右下の隅は「借りている場所」と考えてください。最も多い犠牲者は最下端に貼り付いたティッカーです。少し上げるだけで、どのプラットフォームでも生き残ります。
1つのソースに全部載せる
要素がHTML5になれば、すべてが1枚の透過ページに載り、OBSに必要なブラウザソースは1つだけです。位置合わせが減り、新しいシーンを作るときの抜けが減り、ブランドカラーを変える場所が1か所になります。OBSの設定は5分ほど →
ライブデータからオーバーレイを組む 早期アクセス版を配布中です。ブラウザソース1つで、本番中も各要素が更新され続けます。
早期アクセスを申し込む