YouTube動画広告なしで見れる無料次世代ブラウザ「Braveアプリ」が優秀すぎる!

StreamElements(ストリームエレメンツ)で自作オーバーレイを作る方法(その2)

今回はStreamElementsのオーバーレイGo to overlay editor」画面の説明と使い方です

また、前回紹介までに紹介した

ストリームエレメンツの豊富なテンプレートオーバーレイの設定方法と使い方

StreamElements(ストリームエレメンツ)で自作オーバーレイを作る方法(その1)

も併せて参照してみてください。

編集画面の説明(左上)

StreamElementsアカウントにログイン後、My overlaysを選択し「Go to overlay editor」を選択します。

まずは、編集画面のアイコンについて説明します。

編集画面左上部分からざっと解説していきます。

①EDITOR:オーバーレイ編集画面の全体表示。違うページを表示したあとはここを押して編集画面全体に戻ります。
②WIDGETS:ウィジェットの設定画面。

  • 下記画像が代表的なStreamElementsのウィジェットでかなり多くのコンテンツが用意されてます。各ウィジェットを選らびADDを押すと編集画面に反映されます。

③DATA:自分の配信のそれぞれのでフォロワー数やCheer数など詳細なデータを確認することができます。

④INSERT TEXT:テキストを挿入です。押すたびに複数追加可能

  • 「Custom Widget name」任意のテキストボックス名設定可能、「Message」に入力したテキストが反映されます。

⑤INSERT IMAGE:画像を挿入します。押すたびに複数追加可能。

  • ❶左側のSET IMAGEを押し、画像アップロード画面を開きます。
  • ❷右上のUPLOADを押し、入れたい画像をドラッグ&ドロップ。
  • ❸右下にあるUPLOADでアップロード完了。
  • ❹IMAGES一覧から任意の画像にマウスオーバーしSUBMITボタンをクリック。
  • ❺編集画面に画像が挿入されているのがわかります。
⑥INSERT VIDEO:映像を挿入します。押すたびに複数追加可能

  • アップロードのやり方は上のINSERT IMAGEと同様でアップロード後、Video sizeの項目でScaled to fitを選ぶと拡大・縮小ができます。

  • Autoを選んだ場合ボックスのサイズを変えても映像は固定されたままです。
  • Play with audioにチェックを入れると映像は音声とともに再生されます。
  • Loopにチェックを入れると映像は繰り返し再生されます。
  • Volumeは音量で、Play with audioにチェックが入っている場合のみ音量調整ができます。

編集画面の説明(右上)

次に編集画面右上部分を解説していきます。

  • Snapping:on/off他の画像やウィジェットに吸い付く形で配置する/しない
  • Zoom in拡大
  • Zoom out縮小
  • Fit to screen開いているブラウザのサイズに合わせて全体を表示する
  • Reset zoom拡大縮小していたものをリセットする
  • mute audio in the editor編集画面で音をミュートする
  • Exitこれを押すと、Are you sure you wish to leave this page?(このページを離れてもいいですか?)と聞かれるのでSTAY(このまま留まる)もしくはLEAVE PAGE(ページを離れる)を選ぶ。
注意

LEAVE PAGEを選ぶとMy overlaysに戻るので、戻る前に忘れずにセーブをしてください。

レイヤー部分と緑色部分

メインの編集画面説明です。

メイン画面は左側のレイヤー部分右の緑色のプレビュー編集画面にわかれます。

①緑色の部分:プレビュー画面くらいのイメージで大丈夫です。

レイヤーと緑色説明

②レイヤー:ここで詳細設定をおこないます。

編集におけるレイヤーとは直訳すると階層という意味で、ここではざっくり透明のシートのようなものが重なっているイメージで大丈夫です。

レイヤー

レイヤー内の機能説明(ここで詳細をいじります)

今回は例として星の画像をつかって説明します。選択すると下記のようなメニューが表示されます。

Position,size and style位置、サイズやスタイルを変更します。

  • width(幅)
  • height(高さ)
  • Top(上からの距離)
  • Left(左からの距離)
  • Opacity(不透明度)
  • center widget(overlayの真ん中に移動させます)

Text settingsテキストの設定です。

フォントの種類や文字サイズ、色などテキストに関する様々な設定ができます。

Text shadow(文字に影をつける)Text scrolling(文字をスクロールさせる)といった動きをつけることもできます。

Animation settingsアニメーションを設定します。アニメーションはBounce(弾む感じ)Fade In(徐々に表示)Flip In(くるっと回転)など様々な動きが用意されています。

Move Layer up ∧/down ∨レイヤー(階層)を上や下に移動させます。

Duplicate widget選択したレイヤーを複製してこのオーバーレイ、もしくは他のオーバーレイ(複数選択可能)に表示させます。

Delete widget選択したレイヤーを削除します。

Toggle visibility on/off選択したレイヤーを表示/非表示します。

Lock Layer選択したレイヤーをロックします。

緑色部分

最後に緑色部分の説明をします。

画像やテキストなどはドラッグで移動、削除はDELETE。
拡大や縮小は対象画像をクリックし、右下に表示される■をドラッグ。

ひよこ

せっかく配置した画像がちゃんと動くか確かめたいなぁ
StreamElementsなら簡単に確認することができます。

くま

下側に半透明に見えているベルのアイコンをクリックするとメニューが表示されます。

このメニューをクリックすることでフォローされた時の動きやCheerされた時の動きを確認することができます。

注意

全て設定が終わったら、編集画面左下のSAVEで保存、LAUNCHで別ウィンドウにて確認することができます。※SAVEはお忘れなく

そして、LAUNCHで表示されるリンクをコピペして、お使いの配信ソフトにコピーしたリンクを貼りつけて完了です。

配信ソフト貼り付け1

Stream labsOBSを立ち上げプラスボタンを押します

「ソースのプラスボタン」➔「ブラウザーのソース」➔「URLにコピーしたURLを入力」

配信ソフト貼り付け2

コピーしたURLを入力

※使用例はStreamlabs OBSを使用しています。

応用編1、2と長くなりましたがここまで読んでいただきありがとうございます。

ここはどうするの?など質問ありましたらコメント欄にてぜひお待ちしております。

以上でオーバーレイ講座終了。

初心者でも簡単にカスタマイズできるのでぜひやってみてください。