eスポーツ大会の配信画面では、ゲーム映像だけでなく、チーム名、スコア、選手カメラ、コメント欄、スポンサー名など複数の情報を同時に見せます。
これらを整理してゲーム映像の上へ重ねるデザインが、配信オーバーレイです。静止した枠だけでなく、スコア表示が現れる、ロゴが光る、試合開始時に画面が切り替わるといったアニメーションを付けることもできます。
ただし、見た目の派手さだけで決めると、肝心のゲーム画面が狭くなったり、文字が読みにくくなったりします。依頼前には、何を表示するか、どこを動かすか、どの形式で受け取るかを整理しておく必要があります。
- eスポーツ配信のオーバーレイとは
- 静止画とアニメーション付きの違い
- 最初に配信の種類を伝える
- 先に必要な画面を一覧にする
- ゲーム画面を最優先にする
- ゲームの種類で配置は変わる
- 選手カメラの大きさを決める
- コメント欄を画面へ入れるか
- SNS表示は情報を増やしすぎない
- スポンサー表示の場所を決める
- どこにアニメーションを付けるか
- 動かしすぎると見にくくなる
- 配信画面の色をどう決めるか
- 参考画像の渡し方
- MP4とMOVは何が違うか
- 透過が必要な場所を分ける
- OBSへ入れたときの動作も考える
- 配信解像度とフレームレートを伝える
- カスタムCSSが必要か
- 用意しておきたい素材
- ロゴデータは背景が透明なものを用意する
- 修正は配置と動きに分けて伝える
- 見積もりへ影響しやすい項目
- よくある失敗
- 制作を依頼する前にまとめる内容
- まとめ
eスポーツ配信のオーバーレイとは
配信オーバーレイとは、ゲーム映像、カメラ映像、コメントなどの上に重ねて表示する枠や装飾です。
eスポーツ配信では、一般的なゲーム実況よりも多くの情報を扱います。
- 大会名
- 対戦チーム名
- チームロゴ
- 現在のスコア
- 選手名
- 選手カメラ
- 実況者や解説者の名前
- コメント欄
- SNSアカウント
- スポンサー名
- 次の試合予定
- 大会ルール
- 試合開始前や終了後の案内
これらをそのまま並べると、画面が狭くなります。オーバーレイでは、視聴者が必要な情報をすぐ見つけられるように、表示する場所と大きさを決めます。
静止画とアニメーション付きの違い
配信オーバーレイには、動かない静止画タイプと、動きが付いたアニメーションタイプがあります。
| 項目 | 静止画オーバーレイ | アニメーション付き |
|---|---|---|
| 主な役割 | 情報を整理して表示する | 情報整理に加えて演出を付ける |
| 向いている場面 | 通常のゲーム実況、雑談配信 | 大会、イベント、公式番組 |
| 動作の軽さ | 比較的軽い | 内容によって負荷が増える |
| 表現 | 枠、背景、ロゴ、文字 | 発光、出現、切り替え、ループ |
| 納品形式 | PNGなど | MP4、MOVなど |
| 修正 | 比較的直しやすい | 動きも含めて調整が必要 |
大会全体を通して表示する枠は静止画にし、試合開始や結果発表だけアニメーションを使う方法もあります。
すべてを動かす必要はありません。常に動く場所を増やしすぎると、視聴者の目がゲームから外れます。
最初に配信の種類を伝える
オーバーレイを依頼するときは、どのような配信で使うのかを最初に伝えます。
同じeスポーツでも、用途によって必要な画面が変わるためです。
個人やチームのゲーム配信
ゲーム画面、配信者のカメラ、コメント欄、SNS表示が中心です。
視聴者と配信者の距離が近いため、チームカラーやキャラクターを使った個性的な画面にもできます。
eスポーツ大会
対戦チーム、スコア、選手名、試合数、スポンサーなど、大会運営に必要な情報が増えます。
ゲーム中の画面だけでなく、試合前、試合間、結果発表、表彰など複数の画面を用意することがあります。
企業主催のゲームイベント
eスポーツ大会の情報に加えて、企業ロゴ、商品名、キャンペーン案内などを表示します。
ゲームらしい演出と企業のデザインルールを両立させる必要があります。
テレビ番組風の配信
ゲーム画面よりも、出演者のカメラ、テロップ、番組タイトルなどを大きく見せる構成です。
トーク中とゲーム中で画面を切り替えることもあります。
先に必要な画面を一覧にする
依頼前には、配信中に使う画面を一覧にします。
よく使われるのは次のような画面です。
- 配信開始前の待機画面
- オープニング
- 大会概要の説明
- 対戦カード
- 選手紹介
- ゲーム中
- 実況・解説画面
- スコア表示
- 休憩画面
- 次の試合案内
- 結果発表
- 表彰
- エンディング
- 配信トラブル時の一時画面
大会の規模によっては、ゲーム中のオーバーレイ一つだけでは足りません。
必要な画面数が分からない場合は、配信の進行表を作り、場面ごとに何を表示するかを書き出します。
ゲーム画面を最優先にする
eスポーツ配信では、ゲーム映像が最も大切です。
デザインを目立たせようとして枠を太くすると、ゲーム内の地図、体力、残り時間、装備などが隠れることがあります。
依頼時には、実際のゲーム画面を見せます。
特に確認したいのは次の場所です。
- ミニマップ
- 体力や残り人数
- スコア
- アイテム欄
- プレイヤー名
- 制限時間
- 通知
- メニュー
- 字幕
ゲームごとに情報が表示される場所は違います。画面の端に重要な情報が多いゲームでは、オーバーレイを細くするか、表示位置を避ける必要があります。
ゲームの種類で配置は変わる
同じレイアウトをすべてのゲームへ使い回せるとは限りません。
| ゲームの種類 | 配置で気をつけること |
|---|---|
| FPS | 画面中央と四隅にゲーム情報が多い |
| バトルロイヤル | マップ、残り人数、装備欄を隠さない |
| 格闘ゲーム | 画面上部の体力と下部のゲージを空ける |
| スポーツゲーム | 得点表示や選手情報の位置を調べる |
| カードゲーム | 手札や盤面を狭くしない |
| レースゲーム | 順位、速度、コースマップを避ける |
| ストラテジー | 画面全体に細かな情報が表示される |
複数のゲームを扱う大会では、一つの枠で共用できるか、ゲームごとに作り分けるかを決めます。
共用する場合は、装飾を画面の外側へ寄せ、ゲーム映像をできるだけ広く残します。
選手カメラの大きさを決める
選手カメラを使う場合は、人数と表示方法を伝えます。
- 一人だけ大きく表示する
- 両チームの代表者を表示する
- 選手全員を並べる
- 試合中は小さく、紹介時は大きくする
- 実況者と解説者も表示する
カメラ枠を作るだけでなく、実際に映る顔の大きさも見ます。
横長の枠へ縦長のカメラ映像を無理に入れると、左右に空白ができたり、顔が切れたりします。使用するカメラの縦横比も制作前に伝えます。
コメント欄を画面へ入れるか
コメント欄は視聴者との一体感を出せますが、大会配信では必ず必要とは限りません。
入れる場合は、次の点を決めます。
- 何件表示するか
- 名前を表示するか
- アイコンを表示するか
- 背景を付けるか
- コメントの文字色
- 長いコメントをどうするか
- 不適切なコメントを管理する方法
- どの配信サービスのコメントを使うか
コメントを画面へ直接表示する場合、枠のデザインだけでなく、文字の見え方も考えます。
背景が明るいゲームと暗いゲームの両方で使うなら、コメント欄に半透明の背景を付けると読みやすくなります。
SNS表示は情報を増やしすぎない
配信画面へX、YouTube、Twitchなどのアカウント名を載せることがあります。
ただし、複数のURLやアカウントを常に表示すると画面が散らかります。
表示する場合は、次のように整理します。
- 大会公式アカウントだけ表示する
- チーム名と一緒に短く表示する
- 試合間だけ大きく表示する
- QRコードは休憩画面に置く
- ハッシュタグは一つに絞る
ゲーム中は短いアカウント名だけにし、詳しい案内は待機画面や終了画面へ分ける方法もあります。
スポンサー表示の場所を決める
企業主催の大会や協賛付きイベントでは、スポンサー名やロゴを表示します。
制作前に整理したいのは次の内容です。
- スポンサーの社数
- ロゴの優先順位
- 常時表示するか
- 一定時間ごとに切り替えるか
- どの画面へ表示するか
- 背景色の指定
- ロゴ周辺の余白
- 最小表示サイズ
- 白抜き版や単色版の有無
複数のスポンサーを同じ場所へ並べると、一つひとつが小さくなります。
ゲーム中は主要スポンサーだけを表示し、待機画面や休憩画面で全社を紹介する方法もあります。
ロゴガイドラインがある場合は、ロゴデータと一緒に制作者へ渡します。
どこにアニメーションを付けるか
動きを付ける場所は、大きく3種類に分けられます。
常に繰り返す動き
枠の一部が光る、背景の線が流れるなど、配信中に繰り返す動きです。
動きが大きすぎるとゲームの邪魔になるため、常時表示する場所では小さな変化に抑えます。
場面を切り替える動き
ゲーム画面から選手紹介へ移るときなどに使う演出です。
画面全体を覆うトランジションにすると、切り替え中の操作を隠せます。
情報が現れる動き
選手名、スコア、対戦カードなどが画面へ入るときの動きです。
表示後は静止させれば、情報を読みやすくできます。
動かしすぎると見にくくなる
アニメーション付きだからといって、すべての枠を動かす必要はありません。
特に避けたいのは次のような状態です。
- カメラ枠が常に大きく発光している
- スポンサー名が速く切り替わる
- コメント欄の背景が激しく動く
- ゲームの照準付近に動く装飾がある
- 複数のアニメーションが別々の速さで動く
- ループのつなぎ目が毎回目立つ
視聴者が長時間見る配信では、短い広告動画よりも落ち着いた動きが向いています。
試合開始や勝敗決定など、見せ場だけ動きを強くするほうがメリハリを付けられます。
配信画面の色をどう決めるか
色は、ゲーム画面との見分けやすさと大会の印象の両方から決めます。
使える資料には次のものがあります。
- 大会ロゴ
- チームカラー
- 企業のブランドカラー
- ゲームタイトルの雰囲気
- イベント会場の装飾
- ユニフォーム
- 過去の配信画面
「青系でかっこよく」だけでは、明るい青、濃紺、シアンなど幅があります。
次のように伝えると具体的です。
- 濃紺を基本にシアンをアクセントにする
- 紫とピンクを使うが、派手すぎないようにする
- 企業カラーの緑を使い、ゲーム部分は暗くしない
- 金色を使うが、高級感より大会らしい勢いを出す
避けたい色も伝えておくと、初案のずれを減らせます。
参考画像の渡し方
希望に近い配信画面がある場合は、画像や動画を送ります。
ただし、「この画面と同じものにしてほしい」ではなく、参考にしたい部分を分けて伝えます。
- スコア表示の位置
- カメラ枠の形
- 線の細さ
- 発光の強さ
- 色の組み合わせ
- 試合開始時の動き
- ロゴが現れる速さ
- コメント欄の読みやすさ
複数の参考例を送る場合は、それぞれの好きな部分を書きます。
参考画像だけを大量に送るより、優先順位を付けたほうが意図を伝えやすくなります。
MP4とMOVは何が違うか
アニメーション付きオーバーレイでは、MP4やMOVなどの動画形式が使われます。
| 形式 | 主な特徴 |
|---|---|
| MP4 | 多くのソフトで扱いやすく、背景付き動画に向く |
| MOV | 設定によって透明な背景を保てる |
| PNG | 動かない枠やロゴに向く |
| PSD | レイヤーを残して編集する場合に使われることがある |
ゲーム映像へ枠だけを重ねたい場合は、背景が透明な動画が必要になることがあります。
一方、待機画面や休憩画面のように画面全体を覆う動画なら、背景付きのMP4で足りることがあります。
どの形式が必要か分からない場合は、使用する配信ソフトと用途を伝えます。
透過が必要な場所を分ける
すべての素材を透明背景にする必要はありません。
| 素材 | 透過の必要性 |
|---|---|
| ゲーム画面へ重ねる枠 | 必要になりやすい |
| カメラ枠 | 必要になりやすい |
| コメント欄 | 配置方法による |
| 待機画面 | 通常は不要 |
| 休憩画面 | 通常は不要 |
| トランジション | 演出による |
| スポンサー紹介画面 | 通常は不要 |
透過動画は、同じ見た目の背景付き動画よりデータが大きくなることがあります。
必要な場所だけ透過にすれば、配信時の扱いを簡単にできます。
OBSへ入れたときの動作も考える
配信オーバーレイは、完成動画として見るだけではなく、OBSなどの配信ソフトへ入れて使います。
納品後には次の点を試します。
- 正しい位置へ重なるか
- 画面サイズが合っているか
- ループの途中で止まらないか
- 背景が正しく透明になるか
- 音が不要な素材から音が出ないか
- シーンを切り替えたときに最初から再生されるか
- PCへ過度な負荷がかからないか
- 長時間配信してもずれないか
本番と同じ解像度、ゲーム、配信ソフトで試すことが大切です。
制作側の確認環境では問題がなくても、自分の配信設定では位置や大きさが合わないことがあります。
配信解像度とフレームレートを伝える
制作前には、予定している配信のサイズを伝えます。
よくあるのは横長の16:9ですが、大会によっては縦型のSNS配信や会場モニターも使います。
伝えたい項目は次のとおりです。
- 画面の横幅と縦幅
- 横長か縦長か
- 配信のフレームレート
- YouTube、Twitchなどの配信先
- 会場モニターでも使うか
- 録画動画へ使うか
- 別のサイズも必要か
横長の配信画面を完成させてから縦長へ切り抜くと、ゲーム画面やカメラ枠が入りません。
複数のサイズで使う予定があるなら、最初から作り分けを相談します。
カスタムCSSが必要か
コメント欄や通知を表示する場合、動画素材だけでなく、文字の見た目を調整するCSSが必要になることがあります。
CSSで変えられるものには、次のような項目があります。
- コメントの文字色
- 名前の色
- フォント
- 背景
- 行間
- アイコンの大きさ
- 新しいコメントが入る動き
- 一定時間後に消える動き
オーバーレイの枠だけ作っても、コメント文字の色や位置が合わなければ完成した画面には見えません。
コメント表示まで一体化したい場合は、使用するコメント表示ツールも伝えます。
用意しておきたい素材
依頼時に用意できると進めやすい素材をまとめます。
- 大会ロゴ
- チームロゴ
- スポンサーロゴ
- 選手名
- 選手写真
- チームカラー
- ブランドガイドライン
- 使用ゲームの画面
- 大会の進行表
- 表示するSNSアカウント
- ハッシュタグ
- 使用するフォント
- 配信画面のラフ
- 参考にしたい配信動画
すべてが完成していなくても依頼はできます。
ただし、あとからチーム数やスポンサー数が増えると、レイアウトを作り直すことがあります。未確定の情報がある場合は、その予定も伝えておきます。
ロゴデータは背景が透明なものを用意する
チームやスポンサーのロゴは、背景が透明なPNGや編集可能なデータが扱いやすくなります。
Webサイトから保存した小さなJPGだけでは、拡大したときに輪郭が荒れることがあります。
ロゴを受け取るときは、次の点も確かめます。
- 商用配信で使えるか
- 色を変えてよいか
- 白抜き版があるか
- 周囲に必要な余白
- アニメーションを付けてよいか
- スポンサー契約終了後の扱い
ロゴを動かす場合は、制作前に使用許可も確認します。
修正は配置と動きに分けて伝える
修正指示をまとめるときは、デザインとアニメーションを分けます。
配置の修正例
- 選手カメラを少し小さくする
- スコアを中央へ寄せる
- コメント欄の幅を広げる
- スポンサー名を下部へ移す
- ゲーム画面をもう少し広くする
動きの修正例
- ロゴの発光を弱くする
- 表示される速さを遅くする
- 常時動く線を止める
- トランジションの時間を短くする
- ループの切り替わりを自然にする
「全体をもっとかっこよく」と伝えるより、どの場所をどう変えるかを書いたほうが正確です。
画像へ番号や矢印を書き込んで送る方法もあります。
見積もりへ影響しやすい項目
オーバーレイ制作の作業量は、画面数や動きの数によって変わります。
見積もり時に伝えたいのは次の項目です。
- 必要な画面数
- アニメーションの有無
- トランジションの数
- ロゴ制作の有無
- コメント表示の調整
- カスタムCSSの有無
- チームやスポンサーの数
- 横長と縦長の作り分け
- 配信ソフトへの設定作業
- 納品希望日
- 修正予定の回数
- 元データの要否
「オーバーレイ一式」とだけ伝えても、人によって想像する内容が違います。
ゲーム画面用、待機画面、結果発表、トランジションなど、必要なものを具体的に挙げます。
よくある失敗
ゲーム画面が狭くなる
装飾、カメラ、コメント欄をすべて入れた結果、ゲーム映像が小さくなることがあります。
最初にゲーム画面の最低サイズを決めておきます。
文字が小さすぎる
パソコンでは読めても、スマートフォン視聴では読めないことがあります。
実際の配信画面をスマートフォンでも確認します。
色がゲーム画面に埋もれる
暗いゲームに黒い枠、明るいゲームに白い文字を使うと見えにくくなります。
複数の場面を使って見え方を試します。
常時アニメーションが気になる
発光や流れる線を長時間見続けると、ゲームへ集中しにくくなることがあります。
動きを付ける場所と止める場所を分けます。
必要な納品形式を伝えていない
MP4だけを受け取り、ゲーム画面へ重ねたところ背景が残ることがあります。
透過が必要な素材は制作前に分けます。
本番直前まで動作確認をしない
位置ずれや再生設定の問題が見つかっても、直す時間がありません。
納品後すぐに仮配信を行います。
制作を依頼する前にまとめる内容
問い合わせる前に、次の内容を一つの文書へまとめます。
配信の概要
- 大会や番組の名前
- 使用するゲーム
- 配信日
- 配信先
- 個人配信か大会配信か
必要な画面
- ゲーム中
- 待機
- 休憩
- 選手紹介
- 結果発表
- エンディング
- トランジション
表示する情報
- チーム名
- スコア
- 選手名
- カメラ
- コメント
- SNS
- スポンサー
デザイン
- 希望する雰囲気
- イメージカラー
- 参考画像
- 避けたい表現
- ロゴやブランドのルール
納品
- 画面サイズ
- 使用する配信ソフト
- MP4やMOVなどの形式
- 透過の必要な素材
- 希望納期
- 実績公開の可否
問い合わせ文は、次のようにまとめられます。
eスポーツ大会のゲーム配信用オーバーレイを依頼したいです。
使用ゲームは〇〇で、YouTubeへ横長の画面で配信します。
必要な画面は、待機、対戦カード、ゲーム中、休憩、結果発表の5種類です。
ゲーム中は、両チーム名、スコア、選手カメラ2枠、大会ロゴを表示します。
濃紺とシアンを中心にした、近未来的で見やすいデザインを希望します。
常時動く演出は控えめにし、試合開始時と結果発表時にアニメーションを入れたいです。
OBSで使用するため、透過が必要な素材の納品形式も相談したいです。
内容が決まっていない部分は、未定と書いて構いません。
その代わり、何を提案してほしいのかを明記します。
まとめ
eスポーツ配信のオーバーレイを依頼するときは、見た目を考える前に、必要な画面と表示情報を整理します。
ゲーム画面を最優先にし、選手カメラ、コメント、SNS、スポンサーをどこへ置くか決めます。常時表示する枠は控えめにし、試合開始や結果発表などの見せ場へ動きを付けると、画面が騒がしくなりにくくなります。
納品形式は、背景付きで使うのか、ゲーム映像へ重ねるのかによって変わります。使用する配信ソフト、画面サイズ、透過の必要な素材を事前に伝えてください。
完成後は本番と同じ環境で仮配信を行い、位置、読みやすさ、ループ、PCへの負荷まで確かめます。デザインだけでなく、実際の配信で問題なく使える状態まで考えることが、見やすい大会画面につながります。

