【2026年版】配信オーバーレイの作り方｜Canva・Figmaで無料デザイン

序章：配信の「顔」を作ろう

配信を始めたばかりの頃、誰もが一度は思うはずです。

「有名配信者みたいに、かっこいい配信画面にしたい…でもデザインなんてできない」

安心してください。2026年現在、デザイン経験ゼロでも、無料ツールだけでプロ顔負けのオーバーレイが作れる時代です。しかも、専門的な知識は一切不要。テンプレートをカスタマイズするだけでも、十分にオリジナリティあふれる配信画面が完成します。

本記事では、代表的な無料デザインツール「Canva」と「Figma」を使った配信オーバーレイの作り方を、初心者でも分かるように徹底解説します。

• テンプレートのカスタマイズ方法
• ゼロから自作する手順
• OBSへの設定方法
• デザインのコツと注意点

これを読めば、今日から「見られる配信」「覚えてもらえる配信」ができるようになります。

1. オーバーレイとは？配信における役割

オーバーレイの基本概念

「オーバーレイ（Overlay）」とは、配信画面の上に重ねて表示するグラフィック要素のことです。

具体的には以下のような要素を指します：

• ウェブカメラフレーム：顔出し配信の際、カメラ映像を囲む枠
• チャット欄背景：視聴者のコメントを表示するエリアの装飾
• 配信者情報パネル：名前、SNSアカウント、現在のゲームタイトルなど
• 寄付・フォローアラート：スーパーチャットやフォロー通知の演出
• 画面下部バー（ローワーサード）：常時表示される情報バー
• トランジション画面：「休憩中」「まもなく開始」などの全画面表示

これらを組み合わせることで、配信画面全体に統一感が生まれ、視聴者にとって見やすく、印象に残る配信になります。

なぜオーバーレイが重要なのか

逆に、オーバーレイがない配信は「始めたばかりの素人」という印象を与えがちです。特に競争が激しいゲーム配信や雑談配信では、第一印象で視聴者が離脱してしまうこともあります。

2. Canva vs Figma：どちらを選ぶべき？

比較表：CanvaとFigmaの違い

どちらを選ぶべきか

結論：迷ったらCanvaから始めましょう。慣れてきたらFigmaに移行するのもアリです。

3. Canvaでオーバーレイを作る（初心者向け）

準備：Canvaアカウント登録

1. Canva公式サイトにアクセス
2. 「無料で始める」をクリック
3. Googleアカウントまたはメールアドレスで登録
4. 無料プランのままでOK（Pro版は14日間無料体験あり）

ステップ1：テンプレートを探す

Canvaには「配信オーバーレイ」専用のテンプレートが多数用意されています。

1. Canvaのホーム画面で「デザインを作成」をクリック
2. 検索バーに「Twitch Overlay」「Stream Overlay」「配信画面」などと入力
3. または、カスタムサイズで「1920 x 1080 px」を指定して空白キャンバスを作成

気に入ったテンプレートをクリックすると、編集画面が開きます。

ステップ2：テンプレートをカスタマイズする

テンプレートをそのまま使うのではなく、自分だけのオリジナルに変えていきましょう。

色を変える

1. 変更したい要素（背景、フレームなど）をクリック
2. 画面上部のカラーパレットから好きな色を選択
3. または「カラーコード」を直接入力（例：#FF5733）

テキストを変える

1. テキスト部分をクリック
2. 自分の配信者名、SNSアカウント、キャッチフレーズなどに書き換え
3. フォントを変更したい場合は、上部の「フォント」ドロップダウンから選択

不要な要素を削除、追加する

• 不要な要素：クリックして選択 → Delete キー
• 要素を追加：左メニューの「素材」から図形、アイコン、ステッカーなどを検索

ステップ3：透過PNGで書き出す

オーバーレイとして使うには、背景を透明にした画像として保存する必要があります。

1. 画面右上の「共有」→「ダウンロード」をクリック
2. ファイル形式で「PNG」を選択
3. 「透過背景」にチェックを入れる（★重要）
4. 「ダウンロード」をクリック

ステップ4：OBSに設定する

ダウンロードしたPNG画像を、配信ソフト（OBS Studio）に読み込みます。

1. OBS Studioを開く
2. 「ソース」パネルの「+」をクリック
3. 「画像」を選択
4. 「参照」からダウンロードしたPNGファイルを選択
5. プレビュー画面でサイズや位置を調整

これでオーバーレイが配信画面に表示されます！

4. Figmaでオーバーレイを作る（カスタマイズ重視）

準備：Figmaアカウント登録

1. Figma公式サイトにアクセス
2. 「Get started for free」をクリック
3. Googleアカウントまたはメールアドレスで登録
4. ブラウザ版でもデスクトップアプリ版でもOK

ステップ1：新規ファイルを作成

1. Figmaのダッシュボードで「New design file」をクリック
2. 左メニューの「Frame」ツール（または「F」キー）を選択
3. 右パネルで幅「1920」、高さ「1080」を入力してフレームを作成

これで1920x1080pxのキャンバスが完成です。

ステップ2：パーツを作る

Figmaでは、図形ツールを組み合わせてデザインを作ります。

長方形でベース を作る

1. 「R」キーを押して長方形ツールを選択
2. キャンバス上でドラッグして四角形を描く
3. 右パネルの「Fill」で色を設定
4. 「Stroke」で枠線の色と太さを設定

角丸にする

右パネルの「Corner radius」に数値を入力すると、角が丸くなります（例：20px）。

グラデーションを適用する

1. 右パネルの「Fill」カラー選択部分をクリック
2. 「Solid」を「Linear」（グラデーション）に変更
3. グラデーションの色と方向を調整

テキストを追加する

1. 「T」キーを押してテキストツールを選択
2. キャンバス上をクリックして文字を入力
3. 右パネルでフォント、サイズ、色を調整

ステップ3：レイヤーを整理する

デザインが複雑になってきたら、レイヤーをグループ化して整理しましょう。

1. 複数のレイヤーを選択（Shiftを押しながらクリック）
2. 「Ctrl + G」でグループ化
3. グループ名を「Webcam Frame」「Chat Box」など分かりやすい名前に変更

ステップ4：透過PNGで書き出す

1. 書き出したいフレームまたはレイヤーを選択
2. 右パネル下部の「Export」セクションで「+」をクリック
3. フォーマットを「PNG」に設定
4. 「Export [名前]」をクリック

Figmaは自動的に透過PNGとして書き出されます（背景が透明なら）。

5. ゼロから作る！実践デザイン例

「テンプレートじゃ物足りない！完全オリジナルを作りたい！」という方のために、具体的なデザイン例を紹介します。

例1：シンプルな配信者情報バー（ローワーサード）

デザインコンセプト：画面下部に常時表示する、配信者名とSNSアカウントを表示するバー

Canvaでの作り方

1. カスタムサイズ「1920 x 200 px」で新規作成
2. 長方形を配置し、幅を1920px、高さを100pxに設定
3. 背景色を半透明の黒（例：#000000、不透明度70%）に設定
4. テキストで配信者名を左側に配置（白文字、太字）
5. SNSアイコン（左メニュー「素材」から「Twitter」「YouTube」などを検索）を右側に配置
6. 透過PNGで書き出し

Figmaでの作り方

1. フレーム作成：1920 x 200 px
2. 長方形ツール（R）で背景バーを作成
3. Fill：#000000、Opacity：70%
4. テキストツール（T）で配信者名を入力
5. アイコンは「Plugins」→「Iconify」などで検索して挿入
6. Export → PNG

例2：ウェブカメラフレーム

デザインコンセプト：カメラ映像を囲む装飾フレーム（四隅に角丸の枠）

共通の作り方

1. キャンバスサイズ：640 x 480 px（またはカメラ映像のサイズに合わせる）
2. 中央に長方形を配置し、角丸に設定
3. Fillを削除（透明にする）
4. Strokeで枠線を設定（色、太さ）
5. 四隅に装飾用の小さな図形（三角形、円など）を配置
6. 配信者名やロゴを隅に小さく配置
7. 透過PNGで書き出し

6. デザインで差をつける！プロ級のコツ

配色理論を味方につける

おすすめの配色ツール：

• Coolors：ランダム配色生成
• Adobe Color：カラーホイールで調和の取れた配色を作成

フォント選びで印象が変わる

レイアウトの基本原則

アニメーションで差をつける（応用編）

静止画オーバーレイに慣れたら、動くオーバーレイにも挑戦してみましょう。

Canvaでできる簡単アニメーション：

1. Canvaで作成したデザインに「アニメートを適用」機能を使う
2. 「フェード」「スライド」「ポップ」などの動きを選択
3. MP4形式で書き出し
4. OBSで「メディアソース」として読み込む

本格的なアニメーション：

• After Effects：プロレベルのアニメーションが作れる（有料、学習コスト高）
• Streamlabs：配信者向けウィジェット（アラート、チャットボックスなど）が無料で使える

7. よくあるトラブルと解決法

トラブル1：透過PNGが透過されていない

原因：背景レイヤーが残っている、または書き出し設定が間違っている

解決法：

• Canva：「透過背景」にチェックが入っているか確認
• Figma：フレームの背景Fillを削除してから書き出し
• OBS：画像ソースのプロパティで「透明度」が100%になっているか確認

トラブル2：画質が荒い

原因：書き出し解像度が低い、または圧縮されている

解決法：

• デザイン時のキャンバスサイズを必ず1920x1080px（またはそれ以上）に設定
• 書き出し時の解像度設定を確認（Canva Proなら2倍解像度で書き出し可能）
• OBSで画像ソースのサイズを「元のサイズ」に設定

トラブル3：文字が読みにくい

原因：コントラスト不足、フォントサイズが小さい

解決法：

• 文字の背景に半透明のボックスを配置
• テキストに「縁取り」（Stroke）を追加
• フォントサイズを大きくする（最低でも24px以上推奨）

トラブル4：OBSでオーバーレイの位置がずれる

原因：画像サイズと配信解像度が一致していない

解決法：

• OBSの「設定」→「映像」で出力解像度を確認（1920x1080推奨）
• 画像ソースを右クリック→「変換」→「画面に合わせる」

8. 無料で使える素材・リソース集

デザイン素材サイト

配信オーバーレイ専門サイト

• Nerd or Die：無料＆有料の配信オーバーレイパック
• OWN3D：プロ品質のオーバーレイ、アラート（一部無料）
• Streamlabs Themes：Streamlabs OBS用のテーマパック

コミュニティ・テンプレート

• Figma Community：他のデザイナーが作ったFigmaテンプレートを無料で複製できる
• Canva Template：Canva内で「Stream Overlay」で検索

9. まとめ：あなただけの配信画面を作ろう

配信オーバーレイは、視聴者に与える第一印象を大きく左右する重要な要素です。しかし、高額なデザイナーに依頼したり、複雑なソフトを学んだりする必要はありません。

CanvaとFigmaという無料ツールを使えば、今日からすぐにプロ級のオーバーレイが作れます。

まずはテンプレートをカスタマイズすることから始めてみてください。慣れてきたら、少しずつ自分だけのオリジナル要素を追加していきましょう。

デザインは「センス」ではなく「知識」と「練習」です。何度も作り直して、視聴者の反応を見ながら改善していくことで、必ず「あなたらしい」配信画面が完成します。

さあ、今日からあなたの配信を、次のレベルへ引き上げましょう！