🎥

配信開始直後の待機画面作成に remotion いいかもしれない

2023/01/15に公開

こんにちは。見切り発車でバ美肉をしたもののぜんぜん動画制作をしていない個人勢 VTuber のミルコです。

先日、こちらの記事で remotion という、 React で動画制作できるライブラリを知りました。

https://zenn.dev/seya/articles/47c2c9ee354b60

こちらの紹介を見て「これは…使える……!」と思い、数時間使ってみたので雑記事を投稿します。

個人的には、動画をフルフルで作成するのもいいですが、動画素材に使いはじめるのがいいんじゃないかな~と思ったので、そんな感じの視点でのレビューになります。

雑につくってみたもの

https://youtu.be/NepAmFOcW9g

利用例

https://youtu.be/DHSdKEbjx90

OBS Studio ではグリーンバックの動画をフィルター処理して緑色部分を透過することができるので、他の素材と重ね合わせて利用することが可能です。

感想

複数の素材を組み合わせるのが楽そう

通常の動画編集ソフトだと「素材A/B/Cを選択してフレーム30にあわせて…」みたいな細かい作業が必要になったりすると面倒だったりする部分があるかと思います。
remotion を利用すると、コードで宣言的に宣言できますし、共通変数を用意して共通化させたりするのも簡単だと思います。

スタイリングに CSS が使えるのが Good

動画周りのセンスが皆無でも、 CSS Animation の easing などのアニメーション知見が利用できます。
さらに tailwind css を利用すると animate-bounce などで楽が出来ます。
もしかしたらこのあたりはリッチな動画編集ソフトならば付属しているのかもしれませんが、 remotion を使うことで無料で利用できるのが良いと思いました。

サンプルの動画でも、テキスト部分に animate-bounce を使っています。

https://github.com/mirko-san/remotion_videos/blob/962bdfd59f211e6e5175956ee6d56d4e639e1439/src/Text.tsx#L5-L7

さいごに

動画素材制作については可能性をめちゃくちゃ感じました!
みなさんもレッツ npm init video !!

https://www.remotion.dev/

GitHubで編集を提案

Discussion