配信画面の「枠」はどうやって付ける?オーバーレイで画面を作る方法

ゲーム画面上に(枠組み、フレーム)が付いている配信を見かけたことがあるかもしれません。

オーバーレイ

いったい、あの枠はどのようにして付けているのでしょうか。じつは無料でできます。やり方をご紹介します。

なお、枠が画面に被った状態、あるいは枠のことをオーバーレイといいます。覚えておいてください。

【スポンサーリンク】

配信ソフトについて理解しよう

まず前提として、配信ソフトの使い方がわからない場合、このページの内容は難しいかもしれません。

OBS Studio

なぜなら、配信ソフトを使って枠画像を表示させるからです。具体的には、「ソース」や「ソースの追加」といった用語の理解が不可欠です。

したがって、もし配信ソフトを使ったことがないなら、まずはインストールして使い方を理解することから始めましょう。

おすすめの配信ソフトはどれか。目的別、サイト別に一覧・比較してみた
ライブ配信で使う配信ソフトには、さまざまな種類があります。では、どの配信ソフトを使えばよいのでしょうか。 このページでは、各配...

オーバーレイのしくみ

枠は、たんなる画像

枠は一般的に、画像ファイル(静止画)でできています。下記画像をご覧ください。

オーバーレイ

これはOBS Studio(以下OBS)で、犬の画像の上に枠画像を重ねた画面です。枠画像の市松模様の部分は、透明になっています(透過PNG)。

犬と枠

透明というとわかりづらいかもしれませんが、枠画像に四角い穴が空いているような状態だと思ってください。その穴から犬の画像が見えているのです。

ソースの順序(重なり順)は、枠画像が手前、犬の画像が奥です。これがオーバーレイの基本的なしくみです。

ソースの順序

フリー素材で実際にやってみよう

もっとも、「まったく意味がわからない」という人もいるでしょう。そこで、簡素な枠画像を用意しました。

難しいと感じる人もいるかもしれません。しかし、実際にやればわかります。意外と簡単です。

以下の手順に従い、筆者が作成した画像をPCに保存してください。

  1. こちらの画像を開く。
  2. 右クリックし、「名前を付けて画像を保存」をクリックする。
  3. 「保存」をクリックする。

画像を保存したら、これを配信ソフトに追加します。

  1. 「ソース」の「+」から適当なソースを追加する(例 : ゲーム画面)。
  2. 「ソース」の「+」から「画像」を選択し、保存した枠画像を追加する。
  3. 枠画像の穴に合うように、1で追加したソースのサイズ・位置を調整する。

ソースのサイズ・位置を調整

ソースの順序に注意しましょう。枠画像が手前に来るようにしないと、ゲーム画面で枠が隠れてしまいます。

ただ、この枠画像では見た目が悪すぎます。もっとよい素材はないのでしょうか。美しいデザインのオーバーレイを使いたいところです。

Streamlabs OBSを使う方法

美しいデザインで簡単

まず、Streamlabs OBS(以下SLOBS)という配信ソフトの機能を使う方法があります。

Streamlabs OBSの詳しい使い方・設定方法
Streamlabs OBS(以下、SLOBS)は、無料で使えるライブ配信用ソフトです。使い方を詳しく見ていきましょう。 SL...

この方法の場合、クオリティの高いオーバーレイを使えるメリットがあります。自分で作るのとは比較になりません。

ただ、以前は無料でできたのですが、現在は有料化されました。無料でやりたい人には向かない方法です。

独自機能が便利

SLOBSという名前を聞いても、ピンとこない人が多いかもしれません。SLOBSは、OBSをベースに開発された配信ソフトです。

slobs公式サイト
▲SLOBS公式サイト。ダウンロード・インストール方法がわからない場合は、こちらをご覧ください。

基本的な使い方はOBSと同じなのですが、OBSにはない機能がいくつか搭載されています。そのひとつが、オーバーレイを簡単に追加できるという機能です。

Streamlabs OBSのテーマ・オーバーレイで、配信画面をカスタマイズする方法
Streamlabs OBS(以下SLOBS)には、無料のオーバーレイが豊富に用意されています。 とはいえ、あまり聞き...
スポンサーリンク
レクタングル(大)

オーバーレイを自分で作成したい場合は

画像編集ソフトを用意する

もしオリジナルのオーバーレイを自作したいなら、画像編集ソフトを用意しましょう。たとえば、以下のようなソフトです。

  • Photoshop Elements(買い切り)
  • Photoshop CC(サブスクリプション)
  • GIMP(無料)

画像の一部を透明化する

まず重要なのは、枠画像の一部分を透明にするという点です。たとえば、枠内にチャットの画面を表示したいなら、枠の内側部分は透明にします。

透過

そのためには、背景レイヤーを透明にします。具体的なやり方については、画像編集ソフトのマニュアルを参照してください。

透明レイヤー
▲一例ですが、Photoshopの場合は「ファイル」→「新規」で「カンバスカラー」を「透明」にすれば背景レイヤーを透明にできます。

透過PNGで保存する

また、JPEG形式ではなくPNG形式で画像ファイルを保存するようにしてください。JPEGでは透過機能がサポートされていないので、透明にできないからです。

PNG-24

▲Photoshopの場合は、保存するさいに「PNG-24」を選び、「透明部分」にチェックが入っていることを確認します。これで透過情報を保持した32bitの画像になります(24bit + 8bit)。

保存したPNG画像は、一見するとふつうの画像に見えます。透明な部分があるようには見えませんが、配信ソフトで枠画像を追加すれば問題ないことがわかるでしょう。

詳細はこちら

詳しい作成方法については、下記ページをご覧ください。無料の画像編集ソフト、GIMPの使い方を交えて解説しました。

【サンプル配布】無料で配信画面の枠素材を作る方法。簡単なデザインを例に
ゲーム配信でよく見かけるような、配信画面の枠(オーバーレイ)を実際に作ってみましょう。 一般的に、枠の多くは静止画像でできてい...

Webサービス、販売サイト

オーバーレイを提供している、以下のようなWebサービスを使う方法もあります。

  • Strexm
  • StreamElements

また、オーバーレイ(素材)をインターネット上で有料で販売している人もいます。必要であれば買うという選択肢もあるでしょう。

たとえば、「ココナラ」(PR)で制作を依頼できます。「オーバーレイ」で検索してみてください。

まとめ

オーバーレイは2種類に分類できます。

  • 自分が作ったもの
  • 他人が作ったもの

自作する場合、オーバーレイは1枚絵の静止画像にしてもよいですし、いくつかのパーツに分類してもかまいません。

また、アルファチャンネル(透過)付きのWebM形式の動画を作って、アニメーションさせることもできます。

スポンサーリンク
レクタングル(大)
レクタングル(大)

X(旧Twitter)で最新情報をツイートしています!フォローお願いします。

関連コンテンツ



スポンサーリンク
レクタングル(大)