OBSのオーバーレイ設定方法を徹底解説!おすすめ無料配布サイトも紹介!

最終更新 2023-12-20
20.枠に合わせる

目次

オーバーレイとは

オーバーレイとは配信画面を彩る枠のことです。ゲーム配信や歌配信をする際に、配信者の姿やチャット画面、フォローされたときに出るメッセージなどの、ポップアップの枠組みに使われており、多くの配信者に好んで使われています。個性的なオーバーレイを設定することで、他の配信者との差別化と、効果的なファンサービスによって登録者の増加が期待できるでしょう。OBSでオーバーレイを設定すること自体は簡単なのですが、視聴維持率やファン獲得を考えるなら、オーバーレイの詳細な設定方法は必見です。この記事をご参考に、視聴者をより楽しめるような工夫を施しましょう。

OBSでオーバーレイ設定をする前に

オーバーレイ用の画像を用意

OBSでオーバーレイを設定するにはオーバーレイ用の画像を用意する必要があります。ここからは自分で画像を作成する方法と無料配布の画像を活用する方法についてご紹介します。

自分で作成する場合

オーバーレイ用の画像を自作する場合、画像編集ソフトを使って、画像を作ります。画像編集ソフトには無料の物から有料の物までありますが、オーバーレイ用の画像を作るだけなら、無料のソフトで問題ありません。Photoshop等の有料のソフトがあるとより、効率的にクオリティの高い画像を作れますが、無料ソフトでは不可能と言うわけではないので注意しましょう。

無料配布用の画像を活用する場合

オーバーレイ用の画像は無料配布されていることがあり、画像編集ソフトの使い方がわからない方やどんな画像がいいのかイメージが湧かない方におすすめの方法です。配布されている画像をダウンロードするだけで、OBSに設定できるので、手間をかけずにオーバーレイを設定したいときにも有効な手段となります。

オーバーレイを自分で作成する方法

おすすめ無料編集ソフト

おすすめの無料画像編集ソフトはGIMP2とCanvaです。どちらも簡単な操作で画像を編集できるので、画像編集ソフトを初めて使う人でもオーバーレイ用の画像を作れるでしょう。

GIMP2

GIMP2はパソコンにデータをダウンロードしてから、ソフトを起動します。ダウンロードする手間は掛かりますが、オフライン状態でも作業ができるため、出先でも画像を作れるのがメリットです。

GIMP2のダウンロードサイト

Canva

Canvaはソフトをダウンロードせずに、ブラウザ上で画像を作れるソフトです。アカウントの作成が必要になりますが、ダウンロードの手間が不要ですぐに編集を始められるのがメリットです。

Canvaの公式サイト

GIMP2の使い方

手順1:GIMP2を開き、画像を作る準備をする

GIMP2を開き、左上にあるファイルを選択し、「新しい画像」をクリックします。

1.gimp2

するとポップアップされるので、キャンパスサイズを一般的なモニターサイズの1920×1080にし、「OK」をクリックします。

2.OKをクリック

OKをクリックするとホワイトボードが出てくるので、ここからオーバーレイのデザインを作れるようになります。様々な画像をカスタマイズしてオーバーレイを作成しましょう。

3.ホワイトボード

手順2:画像を編集し画像生成

オーバーレイのデザインが出来上がったら、画像を生成します。画像の生成方法は簡単です。画面左上のファイルをクリックし、「エクスポート」をクリックします。

4.エクスポート

すると、画像のような画面がポップアップされるので、指定のファイルを選択し、再度「エクスポート」を押すことで、画像を作れます。

5.画像を作れます

Canvaの使い方

手順1:好みのオーバーレイを検索する

Canvaでは好みのデザインを検索でき、中にはオーバーレイ用のデザインもあります。「デザインを作成」をクリックし、検索欄で「オーバーレイ」を打ち込むと「Twitchのオーバーレイ」が出てくるので、ここをクリックします。

6.検索

クリックすると、左側にさまざまなテンプレートが出てくるので、好きなデザインを選びます。

7.テンプレート

手順2:テンプレートを編集と画像生成

好みのテンプレートを選んだら、クリックして、右画面に表示させます。

8.右画面

右画面でテンプレートを編集できます。四角のサイズを変更したり、テキストを加えたり、色を変えたりと自由にカスタマイズ可能です。

編集が終わったら、画像を生成しましょう。画像を生成するには、左上にある「ファイル」をクリックし、「ダウンロード」をクリックします。

9.ダウンロード

「ダウンロード」をクリックすると、画面右上に詳細が出てくるので、再度「ダウンロード」をクリックすると画像を作れます。

10.ダウンロード

オーバーレイの無料配布画像を活用する方法

おすすめの無料配布をしているサイト

オーバーレイの画像編集をするのが面倒くさいと思う方なら、無料配布しているサイトからダウンロードするのが良いでしょう。有志の方が沢山のデザインを作成しており、無料でも質の高いオーバーレイ画像をダウンロードできます。ただ、使用する権限を確認しておかないと、著作権違反になってしまうので、注意しましょう。

BOOTH

オーバーレイの画像をダウンロードするうえで、おすすめのダウンロードサイトはBOOTHです。BOOTHはクリエイティブな商品を販売しているサイトで、有料のものから無料のものまで、ダウンロードできます。

BOOTHの公式サイト

BOOTHでオーバーレイをダウンロードする方法

手順1:「オーバーレイ」で検索して好みのデザインを選ぶ

BOOTHの公式サイトを開いたら、まずは左上にある検索欄から「オーバーレイ」を検索します。

11.検索

検索することで、様々なオーバーレイのデザインが出てきますが、今回は無料の物をダウンロードしたいので、画面右にある「絞り込み」をクリックし、価格のバーを0にします。そして、「絞り込み」をクリックします。

12.絞り込み

絞り込みをすることで無料のオーバーレイのデザインが検索できます。ここから好きなデザインを選びましょう。

13.検索

手順2:権限を確認してダウンロード

好みのオーバーレイを選択したら、クリックして、内容を確認しましょう。内容を確認する際は、著作者のメッセージと禁止事項、ライセンスなどを確認しましょう。もし、商用利用が不可のメッセージがある場合、配信で稼ぎたい方は使用できません。また、商用利用に関しての記入がない場合、後からトラブルになる可能性があるため、使用は避けた方が無難です。

権限を確認したら、ダウンロードしましょう。ダウンロードの方法は簡単です。ダウンロード画面の右側が画像のようになっているので、クリックするだけでOKです。

14.ダウンロード

ダウンロード自体は難しくないのですが、権限の確認は必ず忘れないようにしてください。

OBSのオーバーレイ設定方法

ここからはOBS上でオーバーレイを設定する方法についてご紹介します。使用するオーバーレイはCanvaのダウンロードで使用したものを使っていきます。オーバーレイの設定ができると、オーバーレイのデザインを自由に変えられるようになるので、設定方法を知っておきましょう。

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

下記の記事でも、配信画面でのレイアウトについて詳しくご紹介しております。

OBSでの配信画面のレイアウトについて徹底解説!

手順1:オーバーレイの画像を追加する

まずは、ダウンロードしたオーバーレイの画像をOBSに追加しましょう。「ソース」の「+」をクリックし、「画像」をクリックします。

15.画像

「画像」クリックし、ソースの名前を入力した後、OKを押した後、次のような画面になります。

16.参照

この「画像ファイル」の「参照」をクリックし、先ほどダウンロードしたオーバーレイの画像を選択し、OKをクリックします。すると、OBS上にオーバーレイの画像を導入できました。

手順2:オーバーレイに重ねてソースを設定する

オーバーレイの画像を追加したら、オーバーレイの枠組みに合わせて、配信画面に表示させたいソースを追加していきます。今回配信するゲーム画面を追加していきます。別のソースでも同じ方法で追加できるので、参考にしてください。まずは、「ソース」の「+」をクリックし、「ゲームキャプチャ」をクリックします。

17.ゲームキャプチャ

ゲームキャプチャを追加したら、任意のゲーム画面を「モード」で選択します。選択し、細かな設定をして、OKをクリックすると、ゲームキャプチャができるようになります。ここまでの操作は一般的にゲームキャプチャを追加する時と同じ操作です。

18.OK

このままではOBSの画面サイズいっぱいにゲームキャプチャが表示され、オーバーレイの画像が見えなくなってしまうので、オーバーレイの枠に合わせて、ゲームキャプチャのサイズを変更します。ゲームキャプチャの画面端をドラッグアンドドロップするとサイズを変更できます。
19.ゲームキャプチャ

オーバーレイの枠に合わせて変更するとこうなります。

20.枠に合わせる

画面に合わせると配信画面の雰囲気が大きく変わることがわかるでしょう。

手順3:表示したい情報を追加する

ゲームキャプチャだけでなく、顔出し配信のための映像キャプチャやコメント欄、Vtuberの立ち絵などをオーバーレイの枠に合わせて、サイズを変更することで、簡単にレイアウトを変え、配信画面を個性的にすることが可能です。また、配信活動以外にSNSや紹介したい商品を表示させる際も、オーバーレイの枠にあてはめることで、より視聴者に伝わりやすくなり、フォロワーの増加や商品紹介にも繋がるでしょう。オーバーレイの枠を増やす場合は、画像編集ソフトで画像を修正する必要があるため、OBSで表示する前に何を表示させたいのか決めておきましょう。

動くオーバーレイを作る方法

動くオーバーレイを自作する方法

オーバーレイは画像だけでなく動画を活用することで、動くオーバーレイを作成できます。やり方としては背景に動画を流し、枠を切り抜くことで、オーバーレイが動いているように見せることが可能です。

OBSの「ソース」の「+」をクリックし、「メディアソース」を選択します。

21.メディアソース

「メディアソース」を選択すると、画面のようにポップアップされるので、任意の動画を選択し、OKをクリックします。この時、「繰り返し」にチェックを入れておくことで、動画の止まらないようになるので、必ずチェックを入れておきましょう。

22.ローカルファイル

このままでは動画が前面になり、他の画面が見えなくなっているので、順番を調整します。ソースの順番を変え、メディアソースを一番下にすることで、動画が背景に映るようになります。これだけで、動くオーバーレイが完成します。

コメントに連動したオーバーレイの設定方法(CastCraft Screen)

視聴者のチャットや投げ銭に合わせて、効果的にオーバーレイを表示させる方法もあります。CastCraftというツールのScreen機能を使うことで、配信でのイベントに連動したエフェクトの設定が可能になります。

screen-hero

1. CastCraftデスクトップ版をインストール

まずはCastCraft公式サイトにアクセスし、CastCraftのデスクトップアプリをダウンロードしてください。

CastCraftをダウンロード

ダウンロードしたファイルをダブルクリックすると、インストールがはじまります。

2. ログイン

CastCraftを起動したら、「CastCraftにログイン」ボタンを選択してログインしましょう。
ログインするアカウントは、YouTube Liveを行うアカウントでログインしてください。
CastCraft導入手順④

ログイン時に「不明なエラー」等が表示されてログインできない場合  

CastCraftの「YouTube」タブに切り替えて、YouTube Studioが表示されていることを確認しましょう。

YouTubeタブで、CastCraftにログインしたものと異なるYouTubeチャンネルが表示されている場合は、YouTube Studioの右上のアイコンをクリックして正しいアカウントに切り替えてください。
CastCraft導入手順⑤

3. Screen機能のインストール

Screen機能を使うには追加のインストールが必要です。 CastCraftのScreenタブからダウンロード後、ダウンロードフォルダ内のインストーラをダブルクリックして導入してください。

その後、CastCraftのScreenタブにてScreen機能が正常に起動したらインストール成功です。

(※初回の起動には時間がかかります)

4. ScreenをOBS等に追加

OBS等にて「映像キャプチャデバイス」(もしくは「ビデオキャプチャデバイス」)ソース を追加し、デバイス選択で「CastCraft Screen」を選択(下図)
OBS_video_capture_device

映像キャプチャデバイスに「CastCraft Screen」の表示がされない方は、NDI経由でOBSに出力する方法をお試しください。

5. インタラクション設定

CastCraftのアプリ内で「Screen」タブをクリックし、Screenを起動します。
(※初回の起動には時間がかかります)
起動が完了したら、上部のバーを「クラフトモード」にします。
クラフトモード

「インタラクション設定」タブを選択します。
インタラクション設定

「インタラクション一覧」の中から、設定したいエフェクトの「設定」ボタンを押します。
インタラクション一覧

デフォルトで追加されていない種類のエフェクトを新規追加したい場合は、「インタラクション設定」という表記の右にある「+」ボタンから追加できます。  

インタラクションの追加

6. チャットに反応する条件を設定

エフェクトごとに発生する条件を追加することで、コメントの回数や、コメント内のキーワードに応じてエフェクトを出しわけることができます。

設定するには、「チャットに反応する条件」内の「条件を追加」というボタンを押します。
チャットに反応する条件を作成

条件内容を記入して「作成」を押せば各エフェクトがどのようなチャットの時に出現するかが設定できます。
チャットに反応する条件

7. 配信前にScreenを起動

Screenでの画面演出を使うには、配信前にScreenタブをクリックして起動しておく必要があります。

8. CastCraftの「YouTube」タブから配信を開始

CastCraftのYouTubeタブから配信を開始しましょう。

ライブ配信接続手順①

その後、OBS等の配信ソフトウェアで配信を開始しましょう。

ライブ配信接続手順②

9. 「Live Dashboard」タブで配信に接続

YouTubeタブから配信を開始したら、自動で「Live Dashboard」タブでも配信に接続され、コメントの取得が開始されます。

コメントを活用したCastCraftの様々な機能を使うためには、こちらのコメント取得が基本として必要です。

ライブ配信接続手順④

自動で接続されない場合、Live Dashboard内の緑色の「配信に接続」ボタンを押しましょう。

この際、URLの入力を行う必要はございません。

10. テロップの設定/文字や手持ちの画像を使ったエフェクト

CastCraft Screenでは、リッチなアニメーション付きのテロップや、文字や手持ちの画像を使ったエフェクトを設定することもできます。

CastCraft Screenでのテロップの設定方法

文字エフェクトの設定方法

手持ちの画像を使ったエフェクトの設定方法

オーバーレイを活用して他の配信者と差をつけよう

オーバーレイを活用することで、配信画面のデザインやエフェクトを追加し、他の配信者との差別化を実現できます。他の配信者と一味違う配信画面に設定しておくことで、新規の視聴者を魅了させ、離脱を抑えることができます。配信活動はいかに新規の視聴者を増やし、固定ファンを作り上げるかが大切になるので、オーバーレイを活用することは配信活動を効果的に長く楽しませる行動と言えるでしょう。また、固定ファンだけでなく新規を増やすことで、チャット欄も盛り上がり、より反応が楽しめる配信に変わります。

配信をより面白くするために

配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。

大きく分けて、  

  • 視聴者を覚えるYouTube/Twitchコメビュ
  • 配信画面演出のScreen
  • 収益化のための機能

の三つの機能があり、それぞれ下記のような目的があります。

機能 目的
YouTube/Twitchコメビュ 視聴者が配信に馴染めるようなやり取りをサポート
Screen 視聴者とのやり取りを視覚的に楽しくする
収益化 視聴者を大事にする形で収益化する

CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
CRM候補1

特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
ペンライト

さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
収益管理

CastCraftは上記のような機能により、配信者(ゲーム配信者やVtuber)が視聴者との関係を深めることを手助けします。

導入している配信者さんの事例としては、

等がいらっしゃいます。

導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。

CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。

CastCraftのダウンロードページ(利用無料)