配信オーバーレイの作り方:サイズとよくある失敗

要点: オーバーレイとは、OBSの中でゲームやカメラの上に重ねるグラフィックのレイヤーです。Webカメラのフレーム、開始・休憩シーン、チャットの要素、アラートなどが含まれます。OBSのベースキャンバスのサイズ(通常は1920x1080)に合わせてデザインし、パーツを分けたシーンに整理します。このガイドでは、良いオーバーレイに何が含まれるか、OBSで歪まずに組み込む方法、そしてよくある失敗を解説します。

オーバーレイとは、何のためのもの?

配信に入ってきた人が最初に見るのは、シーンです。ゲーム、カメラ、そしてそれを囲むすべて。オーバーレイは、その視覚的な「枠」です。役割は3つあります。

• アイデンティティ: 1フレームを見ただけで、あなたのチャンネルだと分かること。
• 整理: カメラ、ゲーム、アラートがどこにあるかを明確にすること。
• 文脈: 最新のフォロワー、カウンター、「少し離席します」のメッセージなどを表示できること。

オーバーレイとアラートは別物です。オーバーレイは、シーンの固定されたデザインで、アラートはイベントで作動する通知です。アラートについてはアラートのガイドで扱っています。

完成したオーバーレイに含まれるもの

オーバーレイのパッケージは、同じスタイルのシーンのファミリーとして組まれるのが一般的です。

パーツ	用途
開始シーン(「starting soon」)	人が集まるのを待つあいだの画面
ゲームシーン	Webカメラのフレーム、縁、ゲーム用の空き領域
トーク専用シーン	Just Chattingや会話向けの大きなカメラ
休憩シーン(「BRB」)	すぐ戻ることを知らせる表示
終了シーン	あいさつ、SNS、次回の配信
Webカメラのフレームと装飾	カメラを配色で囲む枠
チャットとイベントの要素	チャットボックス、イベントリスト、最新のフォロワーなどのラベル

OBSのアラートガイドによると、動的な要素として一般的なのは、アラート、イベントリスト、チャットボックス、単独の情報を表示するラベル(最新のフォロワー、最新のサブスクライバー)、そしてイベントのアイコンで満たされる「ジャー」です。

どのサイズでデザインする?

プラットフォームが定めるオーバーレイのサイズはありません。基準になるのはOBSのベースキャンバスです。OBSの概要ガイドによると、キャンバスはソースを配置する作業スペースで、通常はモニターやゲームの解像度と同じです。そのため、ルールはシンプルです。

1. 各シーンをベースキャンバスと同じサイズでデザインします。キャンバスが1920x1080なら、1920x1080で。
2. キャンバスは固定します。あとから変えると、すべてのソースを配置し直すことになります。低い解像度で配信したいときは、キャンバスではなく出力解像度だけを下げます。
3. プラットフォームの上限を意識します。Kickは最大1920x1080、60fpsに対応し、Twitchの推奨は1080p60までです。1080pで配信するなら、4Kのオーバーレイは役に立ちません。

オーバーレイがウェブページの場合(ブラウザソース)

アニメーションのあるオーバーレイの多くと、すべてのアラートは、**ブラウザ(Browser Source)**ソースで動きます。OBSの公式ドキュメントによると次のとおりです。

• 既定のサイズは800x600なので、オーバーレイのサイズ(たとえば1920x1080)に手動で調整する必要があります。
• 既定のCSSでは、背景が透明になり、余白とスクロールバーが取り除かれます。
• 「非表示のときにソースをシャットダウン(Shutdown source when not visible)」を有効にすると、画面に出ていないときにページが解放されます。また、「シーンがアクティブになったときにブラウザを更新」を有効にすると、シーンを切り替えるたびに再読み込みされます。

画像と透明度

静止したパーツ(フレーム、縁、文字)には、キャンバス全体を覆う背景が透明な画像を使います。画像ソースとして置くとシーン全体に広がり、「空いている」部分から下のゲームやカメラが見えます。

チャンネルのサイズも大切

オーバーレイは配信の中にありますが、チャンネルにはOBSの外にもビジュアルのパーツがあります。たとえばTwitchでは、チャンネル設定の公式ヘルプに次のようにあります。

• プロフィールバナーの推奨サイズは1200x480 px。ページは各自のウィンドウに合わせて拡大縮小されるため、デザインは左側に集めます。
• 情報パネル:幅320 pxまで(高さ300 px)、2.9 MB未満の画像。
• プロフィール画像:JPEG、PNG、GIFで10 MBまで。

オーバーレイ、パネル、バナーで同じ色、フォント、ロゴを使えば、チャンネルがひとつのブランドに見えます。その方法はブランディングのガイドで解説しています。

OBSで組み込む手順

1. 設定 > 映像で、ベースキャンバスを固定します(たとえば1920x1080)。
2. 開始、ゲーム、トーク、休憩、終了と、状況ごとにシーンを作ります。
3. まず背景のソース(ゲーム、カメラ)を追加し、その上に透明度のあるオーバーレイ画像を置きます。
4. Webカメラのフレームを、オーバーレイの枠のサイズまで広げます。必要なら、切り抜き/パディング(Crop/Pad)フィルターでトリミングします。
5. ブラウザソース(アラート、チャット、ラベル)を一番上に追加し、どの画像にも隠されないようにします。
6. 短いテスト配信か録画をして、ゲームの要素を何も隠していないか確認します。

OBS全体の設定(CBRやビットレートを含む)は、OBSのガイドで確認できます。

よくある失敗

• ゲームのUIを隠す。 大きな縁を描く前に、ミニマップ、体力、重要なテキストがゲームのどこにあるか確認しましょう。
• Webカメラが小さすぎる、枠が合っていない。 フレームがカメラと合っていないと、雑に見えます。枠のサイズを測って、カメラをそれに合わせましょう。
• 一度に要素が多すぎる。 カウンターやボックスが増えるほど画面が散らかり、あなたとゲームに焦点が合わなくなります。
• 文字が小さい。 スマートフォンでは12 pxの文字は読めません。言葉は少なく、サイズは大きめに。
• アラートが二重になる。 アラートのソースを複数のシーンにコピーし、さらにオーバーレイの中にもあると、アラートが2回鳴ります。1つだけにしましょう。
• スタイルが混ざる。 ネオンのフレームにミニマルなパネル、別のスタイルのエモートでは、寄せ集めのチャンネルに見えます。

あなたのチャンネル用のオーバーレイ

Epikでは、オーバーレイを単品で、1点$20でご依頼いただけます。Boostパックには、ロゴ、オーバーレイ3点、パネル3点、バナー1点(プラットフォーム1つ向け)が含まれ、Epikパックには、オーバーレイ、フレーム、パネル、バナー、エモート、サブスクバッジ、アラート、TTS、マルチプラットフォーム対応のOBS設定が加わります。お支払いはすべてPayPalでの一括払いで、あなたのブリーフから始めます。