Twitch配信画面のオーバーレイ・パネルの作り方｜無料で配信をプロ仕様に【2026年】

Twitchで配信してるけど、画面がゲーム映像だけで味気ない...。そう感じたことはありませんか？

有名ストリーマーの配信を見ると、ウェブカメラの枠がカッコよくデザインされていたり、フォローやサブスクの通知がアニメーション付きで表示されていたり、チャンネルページの下にキレイなパネルが並んでいたりしますよね。あれがいわゆる「オーバーレイ」と「パネル」です。

「あんなの作るの大変そう」「デザインセンスないから無理」と思うかもしれません。でも実は、無料素材やツールを使えば、デザイン未経験でもプロっぽい配信画面は作れます。しかも、そこまで時間はかかりません。

この記事では、Twitchのオーバーレイとパネルの作り方を、サイズの基本から具体的な制作手順、OBSでの設定方法まで丁寧に解説します。

Twitchオーバーレイとは？種類と役割

オーバーレイとは、配信画面のゲーム映像やカメラ映像の上に重ねて表示するグラフィックのことです。英語で「overlay（上に重ねる）」という意味そのままですね。

ゲーム画面だけの配信と、統一感のあるオーバーレイが設定された配信では、視聴者が受ける印象がまったく違います。オーバーレイがあるだけで「この人はちゃんと配信に力を入れてるな」と思ってもらえる。つまり、チャンネルのブランディングに直結する要素です。

Twitchで使われるオーバーレイには、主に以下の種類があります。

オーバーレイの種類一覧

初心者の方は、まず「ウェブカメラ枠」と「情報バー」から始めるのがおすすめです。この2つがあるだけで画面の印象はかなり変わります。アラートやトランジションは慣れてきてから追加すれば大丈夫です。

静的オーバーレイとアニメーションオーバーレイの違い

オーバーレイには、画像として固定表示する「静的オーバーレイ」と、動きのある「アニメーションオーバーレイ」があります。

静的オーバーレイはPNG画像（透過対応）で作成し、OBSに画像ソースとして追加するだけなので導入が簡単です。一方、アニメーションオーバーレイはWebMやAPNG形式、またはブラウザソース経由で表示するため、やや設定が複雑になります。

この記事では、初心者でも取り組みやすい静的オーバーレイを中心に解説します。

オーバーレイの推奨サイズと構成

Twitchの配信画面は基本的に1920x1080px（フルHD）が標準です。オーバーレイもこのサイズに合わせて作成するのが原則です。

各要素の推奨サイズ

注意すべきポイントがいくつかあります。

まず、オーバーレイのファイル形式は必ずPNGにしてください。JPGだと透過が使えないため、ゲーム画面の上にベタ塗りの四角が表示されてしまいます。

次に、ゲーム画面を遮らないレイアウトを意識すること。特にFPSやMOBAなど、画面の端にUIが表示されるゲームでは、オーバーレイが重要な情報を隠してしまわないか確認が必要です。HP表示やミニマップの位置は事前にチェックしておきましょう。

また、ウェブカメラの配置は左下か右下が定番です。ゲームによってはUIとの兼ね合いで左上に置くこともありますが、視聴者がもっとも自然に目を向けやすいのは左下か右下のどちらかです。

オーバーレイの作り方3つの方法

オーバーレイを手に入れる方法は大きく分けて3つあります。それぞれのメリット・デメリットを理解した上で、自分に合った方法を選びましょう。

方法1：無料素材サイトからダウンロードする

もっとも手軽なのが、配信向けの無料素材を提供しているサイトからダウンロードする方法です。

Streamlabs

Streamlabsは配信ツールとして有名ですが、無料のオーバーレイテーマも多数公開されています。ウェブカメラ枠、アラート、待機画面などがセットになっている「テーマ」をワンクリックで適用できるのが強みです。Streamlabs OBSを使っている場合は、アプリ内から直接テーマを選んで適用するだけ。通常のOBS Studioを使っている場合でも、素材単体でダウンロード可能です。

Nerd or Die

Nerd or Dieは、配信オーバーレイに特化した素材サイトです。無料パックと有料パックの両方があり、無料でも十分使えるクオリティのものが揃っています。デザインはゲーミング寄りのものが多く、FPSやバトロワ系の配信者に人気があります。OBS Studio、Streamlabs、XSplitなど主要な配信ソフトに対応した形式で素材が用意されています。

OWN3D

OWN3Dもオーバーレイ素材の定番サイトです。プロフェッショナルなデザインが多く、統一感のあるパッケージ（オーバーレイ、パネル、アラート、バナーのセット）が特徴です。無料素材は数が限られますが、有料プランに加入すれば数百種類のテーマが使い放題になります。

無料素材のメリットは、とにかく手軽にプロっぽい見た目が手に入ること。デメリットは、人気のテーマは他の配信者とかぶりやすいという点です。

方法2：Canvaで自作する

Canvaは無料で使えるオンラインデザインツールで、Twitchオーバーレイの自作にも向いています。

手順はシンプルです。Canvaにログインして、カスタムサイズで「1920x1080px」のキャンバスを作成します。背景を透過に設定し（Canva Proが必要）、テンプレートや図形を組み合わせてデザインしていきます。完成したらPNG形式でダウンロードします。

Canva Proを使えば背景透過が可能ですが、無料プランの場合は背景が白くなってしまいます。無料プランで透過PNGを作りたい場合は、別のツール（remove.bgなど）で白背景を除去する必要があります。

Canvaの強みは、デザインの自由度が高いことと、テンプレートが豊富なこと。「Twitch overlay」で検索すると、それなりの数のテンプレートが出てきます。自分のチャンネルカラーに合わせてカスタマイズできるのが大きなメリットです。

方法3：AIで画像を生成する

最近はAI画像生成ツールを使って、オリジナルのオーバーレイ素材を作る方法も増えてきました。

たとえば、ウェブカメラ枠のデザインや待機画面の背景イラストをAIに生成させて、それをCanvaや画像編集ソフトで仕上げるという流れです。テキストや透過処理はAI単体では難しいので、生成した素材をベースに加工する使い方が現実的です。

サムネAIを使えば、配信のイメージに合った画像をプロンプト（テキスト指示）から生成できます。テンプレートを選んでテキストを入力するだけなので、デザインツールを触ったことがない方でも使いやすいはずです。ゲーミング系やサイバー系など、配信向けのテンプレートも用意されています。

Twitchパネルの作り方

次に、Twitchチャンネルページの「パネル」について解説します。

パネルとは、配信画面の下（チャットの下）に並ぶ画像ブロックのことです。自己紹介、配信スケジュール、PCスペック、SNSリンクなど、チャンネルに関する情報を視聴者に伝える役割を持っています。

パネルの基本サイズ

Twitchパネルの仕様は以下のとおりです。

• 横幅：最大320px（これ以上大きい画像を設定しても320pxに縮小される）
• 高さ：制限なし（ただし極端に縦長だとスクロールが増えて使いにくい。100~300px程度が目安）
• ファイル形式：PNG、JPG、GIF
• ファイルサイズ：10MB以下

推奨サイズは320x100pxです。このサイズだと見た目がスッキリして、テキストも読みやすい。高さを200~300pxにすれば、画像内により多くの情報を入れられますが、パネルの数が多いとスクロールが長くなるので注意が必要です。

よくあるパネルの種類

最低限用意したいのは「About Me」「Schedule」「Rules」「SNS Links」の4つです。この4つがあれば、初めてチャンネルを訪れた視聴者に必要な情報を伝えられます。

パネルの設定手順

Twitchでパネルを設定する手順は以下のとおりです。

1. Twitchにログインし、自分のチャンネルページを開く

2. チャンネルページの配信画面の下にある「パネルを編集」をクリック（トグルスイッチが表示される）

3. 「+」ボタンをクリックして「テキストまたは画像パネルを追加」を選択

4. パネルの画像をアップロードし、タイトル・説明・リンクURLを設定

5. 「送信」をクリックして保存

6. パネルの並び順はドラッグ＆ドロップで変更できる

パネル画像の作成には、先ほど紹介したCanvaが便利です。320x100pxのカスタムサイズでキャンバスを作り、テキストとアイコンを配置するだけでそれらしいパネルが作れます。

ポイントは、チャンネル全体の配色やデザインをオーバーレイと統一すること。パネルだけ別のテイストだと、チグハグな印象を与えてしまいます。OWN3DやNerd or Dieで配布されているパッケージ素材には、オーバーレイとパネルがセットになっているものが多いので、統一感を出しやすいです。

パネルデザインのコツ

パネル画像のデザインで意識したいことをいくつか挙げます。

テキストを大きめにする。 パネルは320px幅と小さいので、文字が読めないほど細かいと意味がありません。パネル内のテキストは最低でも14px相当の視認性を確保しましょう。

色数を絞る。 メインカラー1色にアクセントカラー1色、あとは白か黒。色が多すぎるとゴチャゴチャして安っぽく見えます。

アイコンを活用する。 テキストだけのパネルよりも、内容に合ったアイコン（カレンダー、マイク、PC、Twitterのロゴなど）を入れた方がひと目で内容が伝わります。

OBSでオーバーレイを設定する手順

オーバーレイ素材が用意できたら、OBS Studio（以下OBS）に読み込んで配信画面に反映させましょう。ここでは基本的な設定方法をステップバイステップで解説します。

ステップ1：OBSを起動してシーンを確認する

OBSを起動すると、画面左下に「シーン」と「ソース」のパネルがあります。デフォルトで「シーン」が1つ作られているはずです。配信の場面ごとにシーンを分けると管理しやすくなります。

• 配信メイン：ゲーム画面＋ウェブカメラ＋オーバーレイ
• 待機画面：Starting Soon画面
• 休憩：BRB画面
• 終了：Ending画面

これら4つのシーンを作成しておくのがおすすめです。

ステップ2：ゲームキャプチャを追加する

「配信メイン」のシーンを選択し、「ソース」パネルの「+」ボタンをクリックします。「ゲームキャプチャ」を選択し、キャプチャ対象のゲームを指定します。ゲームが起動していれば、プルダウンから選択可能です。

ステップ3：ウェブカメラを追加する

同じシーンの「ソース」に「映像キャプチャデバイス」を追加します。使用するウェブカメラを選択し、解像度やフレームレートを設定します。ゲーム映像の上にカメラ映像が重なるので、サイズと位置を調整しましょう。一般的には画面左下か右下に配置します。

ステップ4：オーバーレイ画像を追加する

ここが本題です。「ソース」の「+」ボタンから「画像」を選択します。準備しておいた透過PNG形式のオーバーレイ画像を読み込みます。

ソースの並び順は上にあるものほど前面に表示されます。オーバーレイ画像はゲームキャプチャやウェブカメラの上に配置してください。具体的には、ソースリストで以下の順番になるようにします（上が前面）。

1. オーバーレイ画像（最前面）

2. ウェブカメラ枠（ウェブカメラ枠を別画像にしている場合）

3. 映像キャプチャデバイス（ウェブカメラ）

4. ゲームキャプチャ（最背面）

ステップ5：位置とサイズを微調整する

OBSのプレビュー画面で各ソースの位置とサイズを調整します。赤い枠線をドラッグすればサイズ変更、中央をドラッグすれば位置移動ができます。Altキーを押しながらドラッグするとトリミングも可能です。

ウェブカメラのサイズがオーバーレイのカメラ枠にぴったり収まるように調整しましょう。枠からはみ出たり、隙間が空いたりすると見栄えが悪くなります。

ステップ6：待機画面・休憩画面・終了画面を設定する

先ほど作成した「待機画面」「休憩」「終了」の各シーンに、それぞれの全画面画像を追加します。画像ソースとして読み込み、プレビューで画面全体に表示されているか確認してください。

配信中は画面左下のシーン一覧をクリックするだけで、メイン画面と待機画面を切り替えられます。「Stinger」トランジションを設定しておけば、シーン切り替え時にカッコいいアニメーションを挟むこともできます。

ステップ7：アラートを設定する（オプション）

フォローやサブスクのアラートは、StreamlabsまたはStreamElementsのブラウザソースを使います。

1. StreamlabsまたはStreamElementsにTwitchアカウントでログイン

2. アラート設定ページでデザインやサウンドをカスタマイズ

3. 「ウィジェットURL」をコピー

4. OBSの「ソース」に「ブラウザ」を追加し、URLを貼り付ける

5. 幅と高さを設定（800x600px程度が目安）

これでフォローやサブスクが発生すると、配信画面にアラートがポップアップ表示されるようになります。

配信画面のデザインをAIで作る

ここまで読んで、「なんだか大変そうだな」と感じた方もいるかもしれません。確かに、オーバーレイとパネルをゼロから自作するのは、それなりの時間と労力がかかります。

そこでおすすめしたいのが、AIを活用したデザイン制作です。

サムネAIでは、テンプレートを選んでテキストを入力するだけで、配信に使えるグラフィック素材を生成できます。サムネイル用のツールではありますが、生成した画像を待機画面の背景やパネルのベース素材として使うことも可能です。

たとえば、ゲーミング系のテンプレートでチャンネルロゴ風の画像を生成し、それをパネルに加工するという使い方ができます。CanvaやPhotoshopで透過処理やテキスト追加をすれば、オリジナルの配信素材が短時間で完成します。

関連記事として、配信サムネイルや待機画面の作り方については以下の記事でも詳しく解説しています。

• 配信サムネイル・待機画面の作り方
• ゲーム実況サムネイルの作り方
• 背景透過・人物切り抜きの方法

よくある質問（FAQ）

Q. Twitchのオーバーレイは無料で作れる？

はい、無料で作れます。Streamlabs、Nerd or Die、OWN3Dなどの配信素材サイトでは、無料のオーバーレイパッケージが多数公開されています。また、Canvaの無料プランでも基本的なデザインは可能です。ただし、Canvaの無料プランでは背景透過ができないため、透過PNGが必要な場合はCanva Proに加入するか、別ツールで透過処理する必要があります。

Q. オーバーレイの画像サイズはいくつにすればいい？

Twitchの標準配信解像度に合わせて1920x1080pxで作成するのが基本です。ウェブカメラ枠など個別のパーツは、表示したいサイズに合わせて調整しますが、フルオーバーレイとして1枚の画像にまとめる場合は1920x1080pxの透過PNGにしてください。

Q. Twitchパネルの推奨サイズは？

Twitchパネルの横幅は最大320pxです。高さに制限はありませんが、100~300px程度がバランスの良い範囲です。推奨は320x100px。これなら見た目がスッキリしつつ、必要な情報を入れられます。

Q. OBSでオーバーレイが表示されないのはなぜ？

考えられる原因は主に3つです。1つ目は、ソースの並び順が間違っている場合。オーバーレイ画像がゲームキャプチャより下にあると、ゲーム映像に隠れて見えません。ソースリストで上に移動してください。2つ目は、画像ファイルのパスが変わった場合。ファイルを移動したり名前を変えたりすると、OBSが画像を見つけられなくなります。3つ目は、画像がJPG形式の場合。JPGでは透過が効かないため、背景が白く表示されてしまいます。PNG形式に変換してください。

Q. オーバーレイとパネルのデザインを統一した方がいい？

はい、統一することを強くおすすめします。オーバーレイとパネルで配色やテイストがバラバラだと、チャンネル全体の印象がちぐはぐになります。配色は2~3色に絞り、フォントや装飾のスタイルもできるだけ揃えましょう。OWN3DやNerd or Dieのパッケージ素材を使えば、最初から統一されたデザインが手に入るので楽です。

まとめ

Twitchのオーバーレイとパネルは、配信画面のクオリティを大きく左右する要素です。この記事の内容を振り返っておきましょう。

オーバーレイのポイント：

• サイズは1920x1080pxが基本。透過PNG形式で作成する
• まずはウェブカメラ枠と情報バーから始める
• 無料素材サイト（Streamlabs, Nerd or Die, OWN3D）を活用すれば手軽に導入できる
• Canvaで自作すればオリジナルデザインも可能

パネルのポイント：

• 横幅は320px。推奨サイズは320x100px
• About Me、Schedule、Rules、SNS Linksの4種類は最低限用意する
• オーバーレイと配色・テイストを統一する

OBSの設定：

• ソースの並び順でオーバーレイを最前面にする
• シーンを分けて待機画面・休憩画面・終了画面を管理する
• アラートはStreamlabsやStreamElementsのブラウザソースで設定する

「見た目なんて配信の中身には関係ない」と思うかもしれません。でも、Twitchで新しい視聴者を獲得するには、第一印象がとても大切です。プロっぽい配信画面は、それだけで「この配信、ちょっと見てみよう」と思わせる力があります。

配信素材をもっと手軽に作りたい方は、サムネAIもぜひ試してみてください。テンプレートを選んでテキストを入力するだけで、配信に使えるグラフィックを生成できます。オーバーレイやパネルのベース素材づくりに活用できるはずです。