Twitchオーバーレイは、配信をより洗練された認識しやすい外観にする最も簡単な方法の1つです。適切なオーバーレイを使用すると、ゼロからデザインを構築することなく、ゲームプレイ、Webcam、アラート、その他の配信要素をフレームに収めることができます。

朗報として、Twitchオーバーレイの追加は OBS Studio 簡単です。このガイドでは、静的およびアニメーション化された配信オーバーレイのインストールプロセスを説明し、OBSシーンで正しく整理する方法を解説します。

Twitchオーバーレイとは何ですか？

Twitchオーバーレイは、配信コンテンツの上に配置されるグラフィックまたはアニメーションです。次のような要素を含めることができます：

ウェブカムフレーム
装飾的なボーダー
配信情報
最近のイベント
チャットエリア
目標
アニメーション化されたグラフィック
テーマに沿った背景

ストリームオーバーレイパックには、連携して動作するように設計された複数の調整されたグラフィックが含まれることが多く、異なるOBSシーン全体で一貫したビジュアルスタイルを作成できます。

始める前に

オーバーレイをインストールする前に、ダウンロードして解凍してくださいストリームオーバーレイパック.

製品に応じて、次のようなファイルを受け取る場合があります：

PNG
WEBP
JPG
GIF
WEBM
MP4
PSD

正確な形式はアセットパックによって異なります。OBS Studioは、静的グラフィック用の画像ソースと、動画および音声ファイル用のメディアソースをサポートしています。

ヒント： ダウンロード、デスクトップ、その他の場所に散らばらせるのではなく、配信用アセットをコンピューター上の専用フォルダに保管してください。これにより、後でOBSのセットアップを維持することがはるかに簡単になります。

ステップ1：OBS Studioを開く

OBS Studioを起動し、使用したいシーンコレクションを開きます。

最初のセットアップを作成する場合は、いくつかの基本的なシーンから始めることができます：

もうすぐ始まります
ゲームプレイ
雑談
すぐに戻ります
エンディング

OBSシーンは個々のソースから構築され、ゲーム、Webcam、画像、動画、テキスト、その他の要素を含めることができます。

ステップ2：キャンバスの解像度を確認する

グラフィックを追加する前に、OBSキャンバスがオーバーレイの設計された解像度と一致していることを確認してください。

例えば、多くの現代の配信グラフィックは以下向けに設計されています：

1920 × 1080

キャンバスが異なるアスペクト比または解像度を使用している場合、グラフィックの位置を変更またはサイズ変更する必要がある場合があります。

これは、 基本（キャンバス）解像度 変更すると、既存のソースの位置を再調整したりサイズを変更したりする必要が生じる可能性があるため、特に重要です。

ほとんどの標準的な16:9のTwitchレイアウトでは、1920 × 1080が便利な出発点となります。

ステップ3：静的オーバーレイを追加する

オーバーレイがPNGまたはその他のサポートされている画像形式である場合は、 画像ソース.

としてOBSに追加します：

ソース → ＋ → 画像

ソースに認識しやすい名前を付けます（例：

ゲームプレイオーバーレイ

次にオーバーレイファイルを選択します。

OBSがシーンに画像を配置するので、そこで位置の調整やサイズ変更を行います。画像ソースは、OBSのシーンに画像やスライドショーを追加するために特別に設計されています。

ステップ 4: オーバーレイをキャンバスいっぱいに配置する

ソースリストからオーバーレイを選択し、以下を実行します：

変換 → スクリーンに合わせる

ソースを画面に合わせるためのOBSショートカットキーを使用することもできます。

オーバーレイがキャンバスと同じ解像度で作成されている場合、シーンに正しく揃うはずです。

アスペクト比が異なるオーバーレイを引き延ばすと、デザインが歪む原因になるため避けてください。

ステップ 5: ゲームプレイやカメラを追加する

次に、オーバーレイの下側に表示させるコンテンツを追加します。

例えば:

ソース

ゲームプレイ
ウェブカメラ
ストリームオーバーレイ

順序が重要です。

OBSでは、ソースリストの上にあるソースが、下にあるソースの上に表示されます。つまり、装飾用のオーバーレイは通常、次のように配置する必要があります：上ゲームプレイやウェブカメラのソース。

一般的なゲームプレイシーンの例：

ストリームオーバーレイ
ウェブカメラ
ゲームプレイ

下側でゲームプレイが見えた状態で、オーバーレイがその周囲のビジュアルフレームを提供します。

ステップ 6: ウェブカメラの位置を調整する

オーバーレイに専用のウェブカメラフレームがある場合は、以下を使用してウェブカメラを追加します：

ソース → ＋ → 映像キャプチャデバイス

その後、オーバーレイレイヤーの下に配置します。

フレーム内に収まるようにウェブカメラのサイズを調整します。

ウェブカメラのフレームが透明なPNGの一部である場合、透明なエリアを通してカメラが見える状態を保ちながら、フレームをカメラの上に維持することができます。

ステップ 7: アニメーション付きオーバーレイを追加する

アニメーション付きオーバーレイの動作は少し異なります。

WEBMやMP4などの動画ベースの素材の場合は、以下を使用します：

ソース → ＋ → メディアソース

次に、アニメーションファイルを選択します。

OBSはメディアソースを通じて、以下をはじめとするいくつかの動画フォーマットをサポートしています： WEBM、MP4、MOV、MKV、AVI、GIFなど。

アニメーションによっては、以下を有効にするとよい場合があります：

ループ

アニメーションを継続的に繰り返したい場合。

シーンがアクティブになったときに一度だけ再生されるべきアニメーションの場合は、次のようなオプションが役立ちます： ソースがアクティブになったときに再生を再開する 役立つことがあります。

ステップ 8: 配信アラートを追加する

アラートは、メインのオーバーレイとは別に追加できます。

たとえば、シーンには以下が含まれている場合があります：

アニメーション付きオーバーレイ
アラートソース
ウェブカメラフレーム
ゲームプレイ

多くのアラートシステムは、フォロワー、チャンネル登録者、寄付、その他のイベントを表示するためにOBSの ブラウザソース を使用します。OBSはブラウザソースを、配信アラートやチャットボックスによく使用されるソースタイプとして識別します。

これにより、オーバーレイとアラートを独立して動作させることができます。

ステップ 9: 個別のシーンを作成する

すべてのグラフィックを1つの巨大なOBSシーンに詰め込もうとしないでください。

代わりに、配信のさまざまな部分に合わせて別々のシーンを作成してください。

もうすぐ始まります

使用するもの：

背景
アニメーション付きオーバーレイ
まもなく開始テキスト
音楽

ゲームプレイ

使用するもの：

ゲームキャプチャ
ウェブカメラ
ウェブカメラフレーム
ストリームオーバーレイ
アラート

離席中

使用するもの：

背景
アニメーション化されたグラフィック
退席中メッセージ
音楽

エンディング

使用するもの：

背景
アニメーション付きオーバーレイ
SNS情報
終了メッセージ

これにより、配信の異なる場面の切り替えが非常に簡単になります。

ステップ 10: オーバーレイソースをロックする

すべてが正しく配置されたら、OBSでグラフィックソースをロックします。

これにより、ゲームプレイ、Webカメラ、その他のソースを調整しているときに、誤ってオーバーレイを動かしてしまうのを防ぎます。

シーンに複数のレイヤーが含まれている場合に特に便利です。

Twitchオーバーレイによくある問題

オーバーレイがゲームプレイを隠してしまう

ソースの順序を確認してください。

通常、オーバーレイはソースリストのゲームプレイよりも上に配置する必要があります。

オーバーレイが引き延ばされて見える

アスペクト比とキャンバスの解像度を確認してください。

オーバーレイが1920×1080用に設計されているにもかかわらず、キャンバスが異なるアスペクト比を使用している場合、要素の位置調整が必要になることがあります。

アニメーションオーバーレイが再生されない

ビデオベースのオーバーレイに対して メディアソース を使用しているか確認し、ファイル形式がサポートされていることを確認してください。

また、ソースがアクティブになったときにアニメーションがループまたは再起動するように設定されているかどうかも確認してください。

Webカメラがフレームの後ろに不自然に表示される

ソースリストでWebカメラのソースをWebカメラフレームの下に移動してください。

注意:

上のソース＝最前面に表示されます。

シーンを変更するとオーバーレイが消える

オーバーレイが1つのシーンにのみ追加されている場合は正常な動作です。

各シーンに個別に追加するか、必要に応じてソースを再利用できるOBSの機能を使用してください。

配信開始前にすべてをテストする

最初の配信の前に、数分かけてシーンのテストを行ってください。

OBS自体も、すぐに最初の配信を開始するのではなく、配信前に設定をテストすることを推奨しています。

確認項目:

ゲームプレイの位置
Webカメラの位置
オーバーレイの配置
アニメーション化されたグラフィック
アラート
マイク
デスクトップオーディオ
シーンのトランジション
テキストの視認性

ローカルで短いテスト録画を行うことは、視聴者よりも前に問題を発見する簡単な方法です。

配信のビジュアルスタイルを統一する

オーバーレイの導入は始まりにすぎません。プロフェッショナルなチャンネルを目指すなら、グラフィックの視覚的一貫性を保つようにしましょう。

次の要素:

Twitchのプロフィール → バナー → パネル → オーバーレイ → アラート → Webカメラフレーム → Stream Deckアイコン

これらすべてで、同じ色、タイポグラフィ、全体的な美学を使用できます。

これは、次のような認識しやすいスタイルを基盤としたチャンネルに特に効果的です: カワイイ、コージィ、パステル、アニメ、サイバーパンク、ゴシック、またはミニマリスト のデザイン。

完全なストリームオーバーレイパックを見つける

OBSのグラフィックをゼロから作成したくない場合は、統一された ストリームオーバーレイパック を使用することで、必要な主要なビジュアル要素を1回のダウンロードで揃えることができます。

私たちの クリエイターのストリーミングアセット Twitchストリーマー、YouTubeクリエイター、VTuber、ゲーマー、コンテンツクリエイター向けにデザインされたテーマ別のストリームオーバーレイやその他のグラフィックが含まれています。

完全なオーバーレイパックを使用すると、時間を節約しながら、OBSのシーン全体で一貫したビジュアルアイデンティティを作成するのに役立ちます。

初めてTwitchチャンネルを設定する場合でも、既存の配信をリフレッシュする場合でも、OBS Studioにコーディネートされたオーバーレイをインストールすることは、配信をより洗練されたプロフェッショナルな印象にする簡単な方法です。