OBSでオーバーレイを設定する手順と無料配布サイト５選
※2024年9月に更新しました。
ゲーム配信をしているライブ配信者に多く利用されているのがオーバーレイです。
オーバーレイとはワイプ画面などの枠のことだと考えて問題ありません。
メインの画面の他に、配信者の姿やチャット欄などを表示しているのがワイプと呼ばれるもので、その枠飾りがオーバーレイになります。
ハイクオリティなオーバーレイを実装してライブ配信を行うことで他の配信者とも差がつけられるので、ゲーム配信をする方にはぜひオススメです。
ではオーバーレイを使うにはどうすれば良いのでしょうか？
実はOBSを使ったライブ配信で設定することができ、設定そのものは難しくありません。
初心者でも簡単に用意することができます。
ここではOBSのオーバーレイの手順と、高品質なオーバーレイをダウンロードできるオススメサイトを５つ紹介します！
記事監修者 2024年 2月 監修者：ビデオ制作ディレクター / ＭＤＭ合同会社 代表 水田吉紀
2012年 営業職から映像製作会社に転職し、映像カメラマンの業務に携わる。 2020年 ＭＤＭ合同会社を設立。
ライブ配信業務を中心にビデオ撮影・動画編集の仕事を請け負っている。
目次
OBSでオーバーレイの設定の手順
では実際にOBSでオーバーレイを設定する手順を確認していきます。
最初に行なうのは、オーバーレイとして使う画像を用意することです。
画像自体は自分で作っても良いですが、一番簡単な方法は無料で配布されているオーバーレイ用の画像を活用することでしょう。
自分だけのオーバーレイが欲しい場合はクラウドソーシングでクリエイターに作成を依頼するのも1つの方法です。
まずオーバーレイの設定を練習するだけなら、無料配布されているものをダウンロードするのが手早いでしょう。
ちなみに一般的な配信サイトでは、画面のサイズが1920×1080となります。
基本的にオーバーレイは配信する解像度やOBSのキャンバス解像度と同じサイズの画像を用意してください。
配信サイトによっては大きさが違うかもしれませんので、その場合は画面サイズに合わせて画像をクロップ（切り取り）しましょう。
ここでは画像は既に用意されている前提で、OBSでの設定手順を紹介します。
Adobe Creative Cloud Expressのオーバーレイテンプレート 参考：Creative Cloud Express
ここではAdobe Creative Cloud Expressでダウンロードしたオーバーレイのテンプレートを利用します。
Adobe Creative Cloud Expressは月額1,000円ちょっとで利用できるクリエイティブツールで、お店のパンフや壁紙、facebookの投稿やYouTubeで利用できるサムネイルのテンプレートがあります。
Creative Cloud契約者はAdobe Creative Cloud Expressのプレミアム版が料金内で使えるのでオススメです。
関連情報：Adobe Creative Cloud Express
OBS「ソース」から「画像」を追加
OBSのホーム画面にある「ソース」から、左下の「+」をクリックします。
追加できるソースの一覧が表示されるので「画像」を選択します。
画像の名前を付ける
ウィンドウが表示されるので、「新規作成」でわかりやすい名前をつけてOKを押します。
画像のプロパティ⇒画像ファイルの参照を選択
すると「画像のプロパティ」が表示されるはずです。
表示されない場合は、ソースから「画像」をダブルクリックして開きましょう。
詳細画面中央には画像ファイルとあり、横に参照ボタンがあります。
参照ボタンをクリックして、パソコン内に保存しているオーバーレイの画像を指定します。
この時に画像が間違っていないかを確認してから、OKをクリックしましょう。
するとOBSのモニターに指定した画像が表示されるはずです。
OBSのモニターサイズに画像のサイズを合わせる
ここで追加したオーバーレイの画像が配信画面にピッタリと合わさっているか確認してください。
もし微調整が必要であるのなら、ソースで画像を選択します。
すると赤枠で指定した画像が表示されるので、ドラッグ＆ドロップを使って位置の調整をしてください。
大きさが合わない場合は赤枠上にあるボックスを、ドラッグすれば画像の拡大・縮小ができます。
ここまででOBS側の設定は終了です。
オーバーレイを設定できるのは、あくまでも枠飾りだけになります。
オーバーレイに画面の枠表示やチャットの枠がある場合、追加したソースをその枠に合わせます。
OBS「ソース」の順番で背景となる「画像」を一番下にする
例えばゲーム配信をする場合は、OBSのソースからウィンドウキャプチャーを追加してオーバーレイの上に表示します。
ゲームのプレイヤー自身をワイプ枠（ピクチャーインピクチャー）で表示する場合は「映像キャプチャデバイス」で映像を入力すると良いでしょう。
チャット欄の追加は、配信サイトによって方法が異なりますので、以下のページの解説を合わせてご覧ください。
チャットを画面に追加する手順
✅YouTubeでコメント（チャット）表示する手順
✅Twitchでコメント表示する手順
✅ツイキャスでコメント表示する手順
いずれにせよオーバーレイの画像は、ソースウィンドウで一番下に移動することで背景にすることができます。
上に設置したものほど優先して表示されるので、この順番を間違えると正しく設定していても画面上には表示されなくなります。
OBSのオーバーレイを自分で作る方法
次にOBSのオーバーレイを自分で作る方法についても確認していきます。
自分で作るといっても枠飾りだけなので、特に難しくはありません。
無料で使える画像ソフト GIMP2
オーバーレイを作る場合にはPhotoshopのような画像編集ソフトが必要ですが、有料のアプリを使わずになるべくお金をかけたくないのなら、無料で利用できるGIMP2などのソフトを使うといいでしょう。
画像編集ソフトは有料・無料問わずに色々とあるので、自分にとって使い勝手の良いものを選ぶといいです。
ここではGIMP2を使ってオーバーレイを作る手順を解説します。
GIMP2のメニュー「ファイル」⇒「新しい画像」でキャンバスサイズを設定
GIMP2はPhotoshopによく似た画像編集ソフトです。
最初に行なうのはキャンバスサイズの指定からです。
「ファイル」⇒「新しい画像」を選びます。
するとキャンバスサイズを設定できるので1920x1080pxを入力します。
Ctrl + Shift + Nで新規レイヤーを追加する
Photoshopと同様に「Ctrl + Shift + N」で新規レイヤーを作成できます。
作成したレイヤーに図形描画ツールや文字作成ツールでオブジェクトを作成するという流れになります。
矩形を追加するには「フィルター」⇒「下塗り」⇒「シェイプ」を選択
ここからがオーバーレイの本格的な自作になります。
例えば図形描画ツールを使って大まかな枠を作り、線の太さや色などは後で設定していくといいかもしれません。
GIMP2は図形描画ツールがとてつもなく分かりにくいのが特徴で、メニューバーの「フィルター」から「下塗り」⇒「シェイプ」を選びます。
ショートカットは「Ctrl + F」になります。
GIMP2のシェイプエディターの図形選択アイコンは分かりにくい
GIMP2のシェイプエディタは初期設定のままで使うと、シェイプエディタの図形描画を選択するアイコンがものすごく見えにくいです。
そこでGIMPの設定を変更して画面を見やすくします。
「編集」⇒「設定」⇒「テーマ」⇒「Light」を選択
GIMP2のメニューバーの「編集」⇒「設定」を選択し、「テーマ」を選びます。
テーマはダーク（初期設定）・グレイ・ライト・システムの4種類から選べるので、ダークからグレイやライトに変更します。
シェイプエディタの視認性が改善する
するとシェイプエディタの図形描画アイコンが少し分かりやすくなりました。
矩形の作成を選んで枠を作成してみましょう。
また枠内の説明として文字ツールを使って、文字の装飾をしながら自作していきましょう。
ちなみにオーバーレイで使われる枠としては、次のようなものがあります。
オーバーレイの主な構成要素
・チャンネル名や配信者名を記載する枠
・SNSアカウントを紹介する枠
・チャット欄を表示する枠
などが代表的です。
他にも顔出し配信をするワイプ用の枠、ゲーム画面を囲む枠、何をしているのか伝えるインフォーメーションの枠などがあるといいでしょう。
これらの中から自分の配信に必要なものを選びます。
実際には多くても3つから4つ程度になります。
あまりたくさんの枠を作っても、情報が多くなりすぎてゴチャゴチャした印象になります。
最低限必須なものだけを選んでいくといいでしょう。
自分で納得のいくオーバーレイ用の画像ができたら保存してください。
背景のチェックを外す
また保存する時は透過PNGを選択するのがおすすめです。
GIMP2 エクスポートの設定画面
特にシンプルなオーバーレイのパーツだけを使いたい場合は、透過PNGで保存しないと背景が白くなってしまいます。
テンプレートからオーバーレイを作る
OBS「ソース」から「画像」を追加
ここでは先ほど紹介したAdobe Creative Cloud Expressを使ってオーバーレイを作る方法を解説します。
やはりデザインなどを経験したことがないのなら、0から画像を作るのは難しいと考えるかもしれません。
Adobe Creative Cloud Expressは好みのオーバーレイからカスタマイズすることができます。
検索窓に「オーバーレイ」と入力するとライブ配信に最適なオーバーレイ用のテンプレートが表示されます。
OBS「ソース」から「画像」を追加
好みのテンプレートを選んで、「このテンプレートから作成」をクリックします。
OBS「ソース」から「画像」を追加
入力されている文字情報や画像を変更することができます。
各パーツのレイヤーを選んで、フィルターや色調補正を適用することである程度のカスタマイズは可能です。
オーバーレイの作成に時間を割きたくないと考えるのなら、配布されているものをベースに使った方が良いでしょう。
逆にオリジナルのオーバーレイを使いたいのなら、お金や時間をかけて手に入れましょう。
オーバーレイ無料配布＆無料作成サイト５選
ではOBSで使えるオーバーレイを配布しているサイトを5種類紹介します。
いずれも無料で利用できるサイトで使い勝手もかなり良いです。
この中から自分の好みにあるオーバーレイを探してカスタマイズすると良いでしょう。
BOOTH
誰でも簡単に作品を販売、購入できるサイトになります。
デジタルデータの画像などもそうですが、他にも様々な物が販売されているのが特徴です。
基本的に有料のサイトになるのですが、中には無料で利用できるオーバーレイもあります。
また数百円で購入できる安価なオーバーレイもあるので、気に入ったものがあれば購入するのもおすすめです。
PNGTREE
BOOTHよりも画像データに特化しているだけあって、無料で配布されているオーバーレイのデータも豊富と言えます。
シンプルなデザインから凝ったデザインまで、幅広く用意されているので利用しやすいでしょう。
単純にオーバーレイの設定練習をしたいとしても、Pngtreeなら簡単にデザインを見つけることができます。
PIXIV
あまり利用しない人からすると、オーバーレイ用の画像があるのと不思議に思うかもしれません。
しかし実際には無料で利用できる素材が、幾つか用意されているのです。
ゲーム用の素材はもちろんですが、Vtuber用の素材などパターン別に用意されています。
普段からPIXIVを利用している人なら、別途アカウントを作る必要もないで気軽に利用できるはずです。
CANVA
様々なテンプレートが用意されていて、それを自分で好きにカスタマイズできるのがポイントでしょう。
Adobe Creative Cloud Expressによく似たブラウザアプリです。
無料で利用できるのですが、カスタマイズした画像をダウンロードするにはアカウント登録が必須となっています。
プロフィールのアバターやバナー画像など、幅広い画像を入手できるのもポイントでしょう。
基本的にはTwitch用となるのですが、設定を変更することで他の配信サイト用にも利用可能です。
freepik
画像ごとにライセンスがあり、その内容に従って利用できます。
フリーで利用できるオーバーレイ用の画像もたくさんあるので、登録さえしておけば手軽に使えるでしょう。
ただ有料のものがあったり、商業用には使えない素材などもあります。
そのためデザインをダウンロードする前に、しっかりとライセンスの内容を確認しておく方がいいです。
OBSでオーバーレイを設定する手順と無料配布サイト５選 まとめ
OBSでオーバーレイを設定・作成する方法について解説しました。
画面がごちゃごちゃとなるのであえて利用しないという人もいますが、ゲーム配信などでは主流となっています。
特に難しい設定は必要ありませんが、オーバーレイ用の画像を用意するほうが難しいかもしれません。
その場合は無料で配布されているものを手始めに使うか、無料のツールとテンプレートで作るのがおすすめです。
※2022年12月に更新しました。 突然ですがライブ配信をプロに依頼した場合の相場ってどのぐらいかご存じでしょうか？ もちろんイベントの規模や配信事業者によって一概には言えませんが、多くは15～30万円ぐらいが相場の目安となっています。 コロナ過のもと、政府の自粛要請によってあ...
