Streamlabs OBSのテーマ・オーバーレイで、配信画面をカスタマイズする方法

この記事をシェアする

Streamlabs OBS(以下SLOBS)には、無料のオーバーレイが豊富に用意されています。

SLOBS

とはいえ、あまり聞き慣れない用語かもしれません。そこで、このページではオーバーレイのメリット・使い方について詳しく見ていきましょう。

以下の3サイトを対象とした解説です。

  • Twitch
  • YouTube
  • Mixer
【スポンサーリンク】

オーバーレイとは

海外のゲーム配信に多いのですが、TwitchやYouTubeなどで画面が美しくカスタマイズされている配信を見かけたことはないでしょうか。

オーバーレイ

たとえば、ゲーム画面にオシャレな枠画像(フレーム)が重なっているような配信です。枠画像の上には、さらに文字情報が掲載されていることもあるでしょう。

このように、画面上に画像などの各種素材が重なって配置されている状態、または枠のことをオーバーレイといいます。

配信画面の「枠」はどうやって付ける?オーバーレイで画面を作る方法
ゲーム画面上に枠(枠組み、フレーム)が付いている配信を見かけたことがあるかもしれません。 いったい、あの枠はどのようにして付け...

オーバーレイを使うメリット

個性を出せる

人と差を付けるには、最初に視聴者が目にする部分で違いを出すのも重要です。

SLOBS

無料で、しかもワンクリックで使える

では、オーバーレイで画面をカスタマイズするにはどうしたらよいのでしょうか。簡単です。

  1. SLOBSをインストールする。
  2. 好きなオーバーレイをインストールする。

わざわざ自分でオーバーレイを作る必要はありません。有料のオーバーレイを購入する必要もありません。

SLOBSには、さまざまな種類のオーバーレイが用意されています。ワンクリックでインストールしましょう。もちろん無料です。

オーバーレイ

ソース・シーンが最初から入っている

オーバーレイをインストールすると、ソースシーンも併せて追加されます。したがって、ソース・シーンを追加する作業を大幅に減らせるというメリットもあります。

ソース・シーン
▲青色で塗りつぶした部分は、自動で追加されたものです。

たとえば、以下のようなソース・シーンが最初から入っています。

  • アラートボックス(チャンネル登録、フォローの通知)
  • チャットボックス
  • オープニング画像
  • 休憩画像
  • エンディング画像

つまり、オーバーレイをインストールすれば、アラートボックスなどのガジェットも、休憩用画像も、最初からすべて自動で入るということです。これはもう、使わない手はありません。

オーバーレイをインストールしよう

SLOBSをインストールしてログインする

では、さっそくオーバーレイをインストールしましょう。

まずSLOBSをインストールします。そして、画面左下の歯車アイコンからログインしてください。

歯車アイコン

注意したいのですが、ログインしないとSLOBSの「テーマ」タブを開けず、オーバーレイをインストールできません。必ずログインしてください。

「テーマ」タブ

試しに「Geometric Madness」をインストールする

「テーマ」タブから「Secne Themes」タブを開き、好みのオーバーレイを探します。フィルタリングで数を絞ることもできます。

「テーマ」タブ

今回はテストとして、「Geometric Madness」をインストールします。

  1. 検索ボックスに「Geometric Madness」と入力する。
  2. サムネイルが表示されるので、クリックする。
  3. 「Install Overlay」をクリックする。

Geometric Madness

このオーバーレイはアニメーションするぶん少し重いのですが、ソース・シーンが充実しており、練習に適した素材となっています。

シーンを確認しよう

Geometric Madnessをインストールしたら、左上にあるカメラのアイコンをクリックしてください。

Geometric Madness

いろいろなシーンが並んでいます。各シーンの意味は以下のとおりです。

  • Starting Soon : オープニング
  • Live Scene : メインとなる配信画面
  • Be Right Back : 短時間の離席
  • Intermission : 休憩
  • Ending Soon : エンディング

シーン

オーバーレイをインストールすると、このように実用的なシーン・ソースが自動で複数追加されます。必要に応じて切り替えましょう。

たとえば、トイレのときは「Be Right Back」をクリックして画面を切り替えて、配信を再開するときは「Live Scene」をクリックします。

もし英語表記がわかりづらい場合は、任意のシーンで右クリックし、「名前の変更」をクリックすれば名称を変更できます。

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

ソースを編集しよう

サンプル画像を削除し、ゲーム画面を入れる

つぎに、メインの配信画面を編集します。シーンを「Live Scene」に切り替えてください。すると、FPSのゲーム画面が映ります。

「Live Scene」に切り替え

たくさんのソースが並んでいて混乱するかもしれません。最初にすべきは、「ソース」のいちばん下にある「Background (delete me)」を削除することです(選択後「-」をクリック)。これはサンプル画像なので、必要ありません。

「Background (delete me)」を削除

そして、代わりのゲーム画面を入れます。ゲーム画面を入れるには、「ソース」の「+」から任意の項目を選択します。よくわからない場合は、下記ページをご覧ください。

Streamlabs OBSで視聴者に画面を見せる方法、4種類まとめ
Streamlabs OBS(以下SLOBS)で、画面を視聴者に見せるための設定を実際に行ってみましょう。 「ソース」のところにある「...

ソースの順序を変更する

ソースの順序・重なり順に注意しましょう。これをまちがえると、ほかの画像がゲーム画面で隠れてしまいます。そこで、追加したゲーム画面はいちばん下にドラッグして移動させます。

ソースの順序
▲ゲーム画面がほかのソースよりも下の順位になるようにします。

ソースの編集方法について不明な点がある場合は、下記ページをご覧ください。ソースの順序についても書いておきました。

Streamlabs OBSでソースを追加・編集して、画面を映す方法
Streamlabs OBS(以下SLOBS)で、画面を視聴者に見せるにはどうしたらよいのでしょうか。 そこで重要なのが、ソー...

SNSのアカウント名を入れる

シーンを「Intermission」に切り替えると、画面に「YOUR NAME」という文字が映っています。

画面の「YOUR NAME」

この文字の部分には、自分のアカウント名を入れます。たとえば、Twitterであれば以下のようにしましょう。

  1. 「ソース」のところにある「Twitter Name」をダブルクリックする。
  2. 設定画面が開くので、「Text」の部分にTwitterのアカウント名を入れる。
  3. 「完成」をクリックする。

「Twitter Name」をダブルクリック

不要なソースを削除する

使わないソースは削除します。ソースを選択して「-」をクリックしてください。

ソースの削除

日本人は顔出しする人が少ないため、Webカメラ関連のソースは不要でしょう。

  • Webcam Frame : Webカメラの映像の枠
  • Webcam : Webカメラの映像
ソースのなかには、PCの動作が重くなるものがあります。不要なソースは積極的に削除すべきです。

オーバーレイの切り替え・削除

オーバーレイは複数入れて切り替えることができます(シーンコレクション)。オーバーレイを切り替えるには、下矢印の部分をクリックしてください。

オーバーレイの切り替え

すると、インストールしたオーバーレイの一覧が表示されます。ここで任意のものを選択すれば切り替わります。

オーバーレイの一覧

もしオーバーレイが不要になったのであれば、「全部を管理する」から削除できます。

「全部を管理する」から削除

まとめ

オーバーレイは自分で作ることもできますが、既存のものをうまく活用すると便利です。ソースの順序が重要なので、その点は注意しましょう。

オーバーレイの使い方がわかったら、ぜひ配信してみてください。URL・ストリームキーの設定をすれば、どの配信サイトでも配信できます。

Streamlabs OBSでURL・ストリームキーを設定する方法
Streamlabs OBS(以下SLOBS)でライブ配信をするためには、画面左下の歯車アイコンから設定する必要があります。 ...

SLOBSを無料でダウンロードする

SLOBSダウンロード

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

この記事をシェアする

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

関連コンテンツ



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

質問・コメント

  1. まふぃん より:

    最近SLOBSを使ってTwitchで配信してて、テーマをインストールしてユーザーネームやSNS等のテキストの部分を変えても文字が出てこないのですが何が原因でしょうか?

    • 管理人 より:

      「ソース」の「A」と書いてあるものをダブルクリックして、
      表示されたウィンドウの「Text」の部分に文字を入れますが、
      そこに文字を入力できないということですか?

      • まふぃん より:

        textに文字を入れてもシーンの中に文字が反映されないですorz

        • 管理人 より:

          それは困りましたね…。

          いったんそのソースを削除して、新たに「テキスト(GDI+)」を
          追加してもうまくいきませんか?
          あるいはソースの順序を変えてみるとか。