Remotionを触るには、どんな経験がいるの？　なのだ

YouTubeを検索すると出てきます。
「AIに頼めばRemotionで動画が作れる！」
たしかに凄いです。
おしゃれなアニメーションが、サクッと生成できます。

ちょっとだけ難しいけど、
自力で進めるなら、相当な幸福が待っています。
ただし、最後まで読めた人限定です。

Remotionで何ができるの？

最近語られることが増えたRemotion。これはReactというウェブ技術をベースにした、動画をコードで書くフレームワークです。

ブラウザ上でアニメーションを組み立てて、MP4を出せます。と説明されることが多いです。でも、Reactもフレームワークも判らなければ、じゃあ「何ができるの？」となります。

本質は「Webページを1フレームずつ描画して、パラパラと動画にする」ことです。After Effectsのようなタイムライン操作はありません。Webで表示できるものは何でも素材になります。編集という面倒な部分が消えますが、プログラミングが必要というトレードです。

YouTubeでよく見る「あの動画」が作れます

Remotionが得意とする動画の形を、具体的に挙げてみます。

ゆっくり・ずんだもん・立ち絵系の解説動画：左右に立ち絵キャラクターを配置して、音声に合わせて口パクさせる、あの形式です。

ランキング動画： 「〇〇ランキングTOP5」の形式で、順位ごとにアイテムが飛び込んでくる動画です。データさえ用意すれば、テンプレートから自動で生成できます。同じ構造の動画を量産するのがRemotionの本領です。

MV動画： 画像と歌詞を組み合わせた短尺のミュージック動画です。SNSの投稿に添付するような15秒の動画を、テンプレート化して量産する用途に向いています。



つまり、「しゃべる・動く・字幕が出る」という構成の動画は、
Remotionで全部作れます。

バイブコーディングで乗り越えられるのは最初の30分だけです

「AIに頼めば誰でもできる」が半分嘘な理由を、正直に書きます。
HelloWorldは、たしかにすぐ動きます。ターミナルにコマンドを打つと、タイムライン付きのプレビューが立ち上がります。テキストがアニメーションして、Renderボタンを押せばMP4が出てきます。

ここまでは感動的なほどスムーズです。

問題はその先です。自分の作りたいものを作ろうとした瞬間、コードを読む力が要ります。エラーが出たとき、何を見ればいいか分かる力が要ります。「何が分からないか分からない」状態になると、AIへの質問すら作れなくなります。 バイブコーディングが機能するのは、土台がある人だけです。

入場条件を正直に書くと

最低限これがあれば前に進めます：

WordPressを触ったことがある人なら、この3つはすでに持っています。
構造は、WEBを作る発想と似ています。

もし今これがない人は、 JavaScriptの基礎だけ先にやっておくといいです。Progateの無料部分で十分です。変数・関数・配列・オブジェクトの4つが頭に入れば、コードが「読める」ようになります。読めれば、AIに正しい質問ができます。正しい質問ができれば、前に進めます。

Remotionは「誰でも簡単」な道具ではありません。でも入場条件を満たした人にとっては、持っていた技術の使い道が静かに広がる道具です。できたときは、相当嬉しいはずですから。 

フレームワークを効率よく使える開発環境はどれだ？

1週間じっくりやってみました。結果、皆さんが普段から使っているツールは、どれもRemotionのことを理解しています。

で全部試しました。
メッチャ良かったです。
Hello Remotion！から試してください。

そこから、好きなLLMに家庭教師を依頼してみてください。

連携って楽しい！

VOICEVOXが使えたのは、
REST-APIが実装されているからです。

エンジニアの方でしたら、「curlで叩いてみてください」。
コツを掴めたら、TypeScriptから使う方法を試してください。
そこまで行けたら、もう、Remotion（React）は
自由自在になります。

 
Remotion、ここまで読めた
あなたなら届く。
 

#Remotion #動画制作 #バイブコーディング
#ゆっくり解説 #ずんだもん #フロントエンド #道具道