この記事ではStreamElementsを利用して配信にオーバーレイを設置する方法について解説していきます
簡単に、しかも無料でクオリティの高いオーバーレイが使用できるので有効活用していきたいですね
オーバーレイの追加方法
オーバーレイの選択
まずStreamElementsを開き、左側のメニューから「ALERTS&OVERLAYS」→「テーマギャラリー」を選択します
![Stream Elements テーマギャラリー](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_72-758x386.jpg)
すると多くの既に作成済みのオーバーレイ一覧が表示されます
また、上のタブから選択ができます
それぞれ私の主観で紹介すると
- 特製テーマ
基本的にメインシーン・カメラメインのシーン・スタートシーン・離席シーン・エンディングシーンの5つがパックになったテーマ
オーバーレイ自体がアニメーションしていたりとド派手な印象
アラートもパックに合ったものが既に用意されている - テーマ
基本的にメインシーン用のみのオーバーレイ
シンプルなものが多くゲームをよく魅せたい場合におすすめ
アラートはテーマに合ったものが既に用意されている - アラート
シーンではなく様々なアラートのパック - ウィジェット
配信を装飾するのに便利なものが多い
![Stream Elements テーマリスト](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_73-758x415.jpg)
どのオーバーレイを選択しても後から必要・不必要を自分で選択できるので一度試してみることがおすすめです
各テーマのプレビューを押すとどのように動くのか、どんなシーンが用意されているのかを確認することができます
![Stream Elements テーマ](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_74.jpg)
使用したいテーマが見つかったらオーバーレイを作るを選択
オーバーレイに名前を付けると各シーン用のURLが表示されます
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_75.png)
配信ソフトに追加
OBS Studioの場合
まず、使用するシーンを作成します
作成したシーン毎にそれぞれ「ブラウザ」ソースを追加してきます
![OBS ブラウザソース](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_77.png)
ブラウザソースを以下のように設定していきます
![](https://kurocha.jp/wp-content/uploads/2021/11/2021-11-21_03h04_33.jpg)
表示されていないときにソースをシャットダウンを選択すると、別のシーンにを使用している(このブラウザソースが表示されていない)際の負荷を減らすことができますが、もう一度このオーバーレイを使用しているシーンに入った際に再読込をするためオーバーレイが表示されるまでに時間が掛かる場合があります
別のシーンからこのブラウザソースを使用しているシーンに移動した瞬間も常にオーバーレイを表示したい場合はチェックを外して下さい
最後にOKをおします
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_80-758x427.png)
これをそれぞれのシーンに追加していきます
Xsplitの場合
シーンを作成して、ソースの追加から「ウェブページ」を選択します
![Xsplit ウェブページ](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_82-758x605.png)
表示されたウインドウにシーンに合ったオーバレイのURLをコピペします
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_83.png)
OKを押すとオーバーレイが表示されます
このままではオーバーレイが切れてしまっているので、画面に合うように調整していきます
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_84-1-758x605.png)
また、ソースを右クリックして「ソースをメモリに保存する」にチェックを入れます
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_104.png)
これでオーバーレイの設置が完了しました
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_85-758x605.png)
オーバーレイの編集
このままでは細かいところがまだ不十分なのでオーバーレイを自分で編集していきます
追加したオーバーレイは左側のメニューの「マイオーバーレイ」から確認することができます
![Stream Elements マイオーバーレイ](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_86-758x557.jpg)
表示されたオーバーレイの「編集」ボタンをクリックすることで編集画面に移動できます
編集画面では「Edit social names here」欄にあるSNSの名前等を編集していきます
※テーマ毎に名前が違う場合があるかもしれません
![Stream Elements オーバーレイの編集](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_93-758x386.png)
変更したいテキストソースの名前をクリックし、「Setting」を押すことでテキストソースの中身の編集ができます
![Stream Elements オーバーレイの編集](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_95-758x386.png)
また、ソース名右の目のマークをクリックすることで表示/非表示を選択することができるので使っていないSNS等は消してしまいましょう
![Stream Elements オーバーレイの編集](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_96-758x245.png)
また、オーバーレイのバランスを調整するためにアイテムを移動させたいときにアイテムがグルーピングされていて複数のアイテムが一緒に動いてしまう場合があります
そのときは「ALT+左クリック」でグループ内のアイテムを1つだけ選択することができます
その状態で移動させることで他のソースに影響を与えずに移動することができます
![Stream Elements オーバーレイの編集](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_98-758x374.png)
調整が終わったら右上の「SAVE」をクリックします
SAVEを押した時点でOBS StudioやXsplitに追加したオーバーレイにも変更が適用されます
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_100.png)
アラートのテスト
オーバーレイの編集画面でフォローやサブスクライブ等のテストができます
編集画面下部の「EMULATE」からそれぞれテストしたいイベントを発生させることが可能です
![Stream Elements アラートテスト](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_101-758x359.png)
どういった動きかは編集画面でも確認できますが、配信ソフト上でも確認できます
![Stream Elements アラートテスト](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_103-758x427.png)
シーンを完成させる
ここまでオーバーレイの設定は完成したのであとはオーバーレイに他のソースアイテムを合わせていきます
基本的にオーバーレイは全てのソースアイテムの上に置いておくことをおすすめします
![](https://kurocha.jp/wp-content/uploads/2020/08/screenshot_2020-08_105-758x427.jpg)
おわりに
かっこいい、かわいいオーバーレイが使用できるとそれだけで配信のモチベーションがあがります
簡単に導入できるので一度試してみては
![](https://kurocha.jp/wp-content/uploads/2021/04/Stream-Elements-まとめ-300x158.jpg)
コメント
コメント一覧 (2件)
一つ疑問だったのですが、表示されていないソースをシャットダウンにチェックを入れてしまうと、シーン切り替えの際に表示までラグが表示されませんか?
1つのシーンにすべてのオーバーレイを入れているなら良いのかもしれませんが
ご指摘ありがとうございます。
たしかに使用していない状態から復帰する際に読み込みをし直すので表示が遅れてしまいます。
ブラウザソースは負荷が大きめのソースなのでその旨の解説を追記しました。