OBSなどの配信ソフトで、多くの人はPNGやJPGなどの画像ファイルをオーバーレイ（透過素材）として使っています。しかし、最新のeスポーツ大会では「HTML/CSS」を使った動的なオーバーレイが主流になりつつあります。なぜコードで画面を作る必要があるのか、その利点と方法を解説します。
画像素材にはない、HTMLオーバーレイの利点
- データの動的更新：対戦スコア、残り時間、Twitterのハッシュタグ投稿などを、画像を差し替えることなくリアルタイムに更新できます。
- 高精細なアニメーション：CSS Animationsを使うことで、非常に滑らかで洗練された演出が可能です。
- レスポンシブ：解像度が変わっても文字がぼやけず、常に最適な品質を維持できます。
- 外部API連携：ゲーム内のAPIと連携して、選手の体力や所持金を自動表示させることも可能です。
基本的な作り方の流れ
1. HTMLで構造を作る
まずは通常のWebサイト制作と同じように、表示したい要素を記述します。配信画面は基本的に1920x1080のサイズで作成します。
2. CSSでデザインと透過設定を行う
背景を透明にするために background: transparent; を設定します。フォントサイズや位置調整は、配信画面上での見栄えを確認しながら行います。
3. OBSの「ブラウザソース」で読み込む
- OBSのソース追加から「ブラウザ（Browser）」を選択します。
- 「ローカルファイル」にチェックを入れ、作成したHTMLファイルを選択します。
- 幅を1920、高さを1080に設定します。
- 画面にオーバーレイが表示されます。
活用術：JavaScriptを使えば、「30分ごとに協賛ロゴを切り替える」「試合開始のカウントダウンを表示する」といった高度な制御も自由自在です。
よく使われるWeb技術
- Google Fonts：配信に最適な、視認性の高いフォントを簡単に導入できます。
- Lottie：After Effectsで作ったアニメーションを軽量なJSONファイルとして書き出し、Web上で再生できます。
- WebSocket：別PCやサーバーからの操作を、遅延なくオーバーレイに反映させるために使われます。
まとめ
HTML/CSSでのオーバーレイ制作は、Web制作の知識がそのまま配信クオリティに直結する非常に面白い分野です。最初は「名前とSNSアカウントを表示するだけのバー」から自作してみてはいかがでしょうか。
revideが作っているもの
HTML/CSSの知識がなくても、ブラウザ上で直感的にプロ級のオーバーレイをデザイン・操作できる仕組みを、revideのeZroでは構築しています。デザインの自由度と操作の簡便さを両立させます。