B-DASHでは10月21日(金)に第1回B-DASH大会を開催いたしました。
当Media初の大会であり、配信も初めてのことで多くの困難や、失敗がありましたので大会当日の準備や操作を担当しましたVキャスター鮭 おかゆからレポートをお送りいたします。
B-DASH杯の当日の様子はこちら↓
・大会用オーバーレイの作成方法
初めまして、B-DASH杯で当日のlive配信やゲーム操作をし司会進行も務めました鮭 おかゆです。
今回大会開催までの準備はほぼ一人で行ったのですが、今回は配信画面の背景オーバーレイの作成方法をお伝えできればなと思います
私自身、オーバーレイ作成は今回が初めてだったので、私はこうやって作りました!というのをお伝えします。参考程度にご覧ください!
__オーバーレイとは、配信画面に重ねる画像または動画の事
オーバーレイというのは、配信画面を飾りつけることが出来る外枠のことを言います!
オーバーレイ有り
![”OBS画面シーンオーバーレイ表示あり”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/ed94b8aebeb220f5aa36f90c180d2ff4.png?resize=688%2C387&ssl=1)
オーバーレイ無し
![”OBS画面シーンオーバーレイ表示無し”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/ea50cb596a88e93990ad3ff0d606569c.png?resize=684%2C376&ssl=1)
上記二つの画像を見比べればわかるように、オーバーレイが有るのと無いのとでは印象が違いますね!
こんな感じに、配信画面の印象を変えることが出来るのはオーバーレイが有るからです
__オーバーレイの作り方は静止画か動画で変わる
それでは早速、私が実際にやったオーバーレイの作成をお教えします
まず、オーバーレイには静止画と動画の2種類あります。私が今回作成したのは動画の方ですので、動きのあるオーバーレイの作成をしたい方は参考にして下さい
実際作成したオーバーレイ
オーバーレイ用の動画は配信がカクつかないよう最長でも大体1分以下の物が良いですが、私が作成した動画は5秒程度の短い物です
こちらをOBSに表示する際にループ設定することで、配信中背景が途切れないように表示させることが出来ます
■オーバーレイの表示の仕方はこちら↓
【オーバーレイ編】第1回B-DASH大会配信の準備などの工程【鮭 おかゆ】
動くオーバーレイを作成するにはまず、動画編集ソフトが必要です。ものは何でもいいですが私が使用したのはFilmoraというソフトを使用したので、こちらを使用しての説明になります
■Filmora(フィモーラ)とは
Filmoraは、Wondershare社が開発した家庭用の初心者~ミドルクラスまで対応したマルチなWindows/Mac用動画編集ソフトです。動画編集初心者にはちょうど良いソフトだと思いますが、こだわった動画を作成したいなどがある場合は別のソフトを使用するのが良いでしょう。
ですが豊富なエフェクトやBGMが最初から入っているので軽く編集作業をしてみたいという人には出が出しやすいソフトとなっております。
まずは無料版でいじってみるのもいいでしょう。
――FilmoraのDLはこちら↓
https://filmora.wondershare.co.jp/video-editor/
無料版ではある程度の動画編集が可能ですが製品のロゴが入ってしますので、ロゴを消したい場合は有料版を購入する必要があります。
他の編集ソフトと違って買い切りタイプのものが御座いますので、月額性のソフトを使用したくないという人にもお勧めです。
![”フィモーラ起動後表示画面”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/43d9d18fd76dd30657e3c6d4255d0129.png?resize=563%2C362&ssl=1)
Filmoraソフトを開くとこのような画面が出てきますので、青色の部分にある【プロジェクトを新規作成】を押します
![”フィモーラプロジェクト作成メディアサンプル表示画面”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/d5f23828dc2f6c93bcd67949ca6d2a61.png?resize=755%2C404&ssl=1)
次に左上にある【メディア】からサンプルカラーを選択します。これは動画のメイン背景になりますのでもしサンプルカラーじゃ物足りないという方はフリー画像を読み込むかご自身で作成するのが良いでしょう
私は自分で作成した背景を使用しましたが今回は、サンプル画像を使用して作成していこうかと思います
![”フィモーラでメディアサンプルを編集バーへ移動させる”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/3b0d401716ea285929336ab6bdfa11b6-1.png?resize=790%2C395&ssl=1)
背景となるテーマカラーを選んだらマウスで左クリックしたまま下の部分に持ってくると背景を置く事が出来ます
この時点で背景だけの5秒の動画が作成できます。ですがこれだけでは味気ないのでこれ等にエフェクトを付けていきます
その前に編集する為のバーの表示範囲を拡大します。拡大するには編集バーにマウスポインタ―を置いてキーボードの【CTRL】ボタンを押しながらマウスホイールを動かすことで縮小拡大が可能です
拡大後
![](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/bf569032fe34e1832c084c533ffe8fc1.png?resize=704%2C389&ssl=1)
編集バーを拡大し終えたら、画面上の方にあるエフェクトを押します。するとFilmoraで使用できるエフェクトが表示されます。
この状態では有料のエフェクトも含まれているので、検索バーの横にある【すべて】と書かれたところを選択して【無料】に変更しましょう。
そうすると無料で使用できるエフェクトのみが表示されますので、この中から好きなエフェクトを選んで編集バーにドロップしていきます
![”フィモーラでエフェクトを無料素材だけ表示”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/5211a17020ee075d05435efc84aba0cf.png?resize=655%2C385&ssl=1)
今回は【beam flow3】を背景画像の上に重ねてみました。Filmoraでの表示は下から上に重ねていく感じで表示されますので、エフェクトを背景画像の下に配置しないように気を付けてください
この状態で動画にしても十分使用できますが、もうひと手間加えようかと思います
――動画に文字を入れてみよう
今度はFilmoraの画面上にあるタイトルを選択して動画内に動きのある文字を入れてみましょう。タイトルを選択したらエフェクトでやったのと同じように【すべて】を【無料】に変更しておきます
すると無料の様々なテキストエフェクトが表示されますので、その中から気になったものを編集バーにドロップします
![”フィモーラで編集バーの素材の長さが違う”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/b192e7b6670b615d1dfec3ef1841b002.png?resize=740%2C387&ssl=1)
テキストの表示時間の長さが5秒よりも長いので、他の二つに長さを合わせたいと思います。
長さを変えたいエフェクトを選択すると周りに黄色い枠が表示されますので、その状態から一番右側にカーソルを合わせましょう
![”フィモーラで素材の長さを調節する”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/f1edd2c20f6e482737c9759dbac5ae7c.png?resize=352%2C230&ssl=1)
上記のようにカーソルの見た目が変わったら左クリックしたまま、長さを調整します
![”フィモーラで素材の長さを合わせて同じ時間表示出来るようにする”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/ad26935aea8c1171f466fc82b94cbe2e.png?resize=298%2C493&ssl=1)
長さがぴったりそろうと、青い線が出ますのでこれを目印に編集すると良いでしょう
![”フィモーラでテキスト素材を選択”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/a4f0cce505c1eed348b345d69b46bf84.png?resize=429%2C346&ssl=1)
画面右上にある動画確認モニターから実際に編集します。動かしたいテキストを選択すると周りに枠が出ます。その状態になったら左クリックしたままスライドすると動かすことが出来ます
![”フィモーラでテキスト素材を移動させる”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/9f8b709b8ca1ffd8e5d8094bcdf3a905.png?resize=401%2C243&ssl=1)
選択できていない部分の文字はそのままの位置から動かすことが出来ませんので、この文字も選択してあげましょう
複数の文字やエフェクトを選択する時はキーボードの【SHIFT】キーを押しながら左クリックすることで複数選択できます
![”フィモーラで複数のテキスト素材を選択する”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/4c104742de82ceb72f8372ea68f0e3ea.png?resize=348%2C242&ssl=1)
選択した文字を任意の場所に移動させたら後は、文字を好きな色やフォントに変更します。
文字を変更するには変更したい文字範囲をダブルクリックします
![”フィモーラで選択したテキスト素材を編集する”](https://i0.wp.com/b-dash-media.com/wp-content/uploads/2022/11/3a09a98f6a22bfccccb078d65a3f4aca.png?resize=400%2C217&ssl=1)
すると左側に編集画面が出てきますので、好きなように文字を編集しましょう!
そうしてできたものがこちらです!
簡単な説明となりましたが、あとはOBSのテキストで文字を増やしたりした方が編集がしやすくなったりするのでオーバーレイ編はこれで終わりです!
是非ご自身のオリジナルのオーバーレイを作成してみてくださいね!
―――以上のことを参考にオーバーレイを自作してみよう!
動くオーバーレイの作成方法はいかがでしたでしょうか?
今回B-DASH大会の準備を担った鮭 おかゆさんですが、彼女も動画制作や配信は初めての状態で行ったので、初心者の方に参考にしてもらえればと思います。