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

この記事をシェアする

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

オーバーレイ

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

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

スポンサーリンク

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

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

OBS Studio

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

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

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

オーバーレイのしくみ

枠は、たんなる画像

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

オーバーレイ

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

犬と枠

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

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

ソースの順序

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

もっとも、「まったく意味がわからない」という人もいるでしょう。そこで、簡素な枠画像を用意しました。筆者が作成したこちらの画像をPCに保存してください。

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

やり方は以下のとおりです。

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

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

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

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

Streamlabs OBSを使う方法がおすすめ

美しいデザインで簡単、無料

いちばん推奨したいのは、Streamlabs OBS(以下SLOBS)という配信ソフトの機能を使う方法です。

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

なぜなら、クオリティの高いオーバーレイを使えるからです。自分で作るのとは比較になりません。しかも無料です。

さらに、オーバーレイはワンクリックで切り替えられます。いろいろな種類のオーバーレイがあるので、服を着替えるような感覚で、気軽に変更してみてください。

オーバーレイ

独自機能が便利

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

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

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

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

ほかにはYouTubeやTwitch用に、チャンネル登録されたときの通知を配信画面に表示する機能や、チャットを配信画面に表示する機能も最初から組み込まれています。

Streamlabs OBSで注目すべき機能と、本体の導入手順
Streamlabs OBS(以下、SLOBS)には、さまざまな機能が搭載されています。注目すべき機能に絞って、具体的に見ていきましょう。 ...

こういった機能に興味があるなら、OBSから乗り換えてみるとよいでしょう。OBSの設定を部分的にSLOBSに引き継ぐこともできます。

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

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

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

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

  • Photoshop Elements
  • Photoshop CC
  • GIMP(無料)

画像の一部を透明化する

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

透過

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

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

透過PNGで保存する

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

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

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

Webサービス、販売サイト

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

  • Strexm
  • StreamElements

これは、たとえばOBSであれば「ソース」の「+」から「ブラウザ」を選択し、特定のURLをコピー&ペーストして使います。もちろん、SLOBSからも同じように利用できます。

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

まとめ

以上、配信画面に枠を付ける方法を見てきました。けっきょくのところ、オーバーレイは2種類に分類できます。

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

筆者は、他人が作ったオーバーレイを使う方法をお薦めします。とくに、SLOBSを使うやり方です。このソフトで「Geometric Madness」というオーバーレイをインストールすれば、完成度の高さに驚くことでしょう。

Geometric Madness
▲Geometric Madnessを使うには、最初にSLOBSをインストールしてログインします。詳細は、こちらをご覧ください。

もしオーバーレイを自作するにしても、さまざまなデザインを参考にするうえでSLOBSをインストールしておくことには意味があります。たくさんのサンプルをSLOBSで実際に使い、優れた部分をデザインに取り入れてみましょう。

SLOBSダウンロード

自作する場合、オーバーレイは1枚絵の静止画像にしてもよいですし、いくつかのパーツに分類してもかまいません。また、アルファチャンネル(透過)付きのWebM動画を作って、アニメーションさせることもできます。

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

この記事をシェアする

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

関連コンテンツ



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