見出し画像

動画作成の「めんどくさい」を、Aiスタックで完全自動化にてみた話。Remotion×Claude Code×Flova AI

はじめに:なんとか動画作成を自動化したい・・・

そろそろインスタを充実させたいなぁ、と思っていて、日本語学習のショート動画を週に2〜3回投稿しよう!と年始に決めたんです。今までは、Midjourney、Nanobanana、Canvaなどを組み合わせて動画を作っていました。自分でスマホで撮った動画は、Editsで編集して音をつけて投稿してました。
でも、正直に言うと、かなりめんどくさい。文章はだいぶGPTやGeminiに通ってもらえるので、だいぶ簡単になってきているとは思うのですが、、、やはり動画の文字を見やくしたり、字幕の幅を整えたり、、というのは細かい作業だし、結構時間がかかります。

というのは、自分は動画を作るのが本職ではない。これはあくまで活動を広めるためのツール。1本ごとにテロップの位置を調整して、プロンプトを打ち込んで、BGMを選んで。。。1本なら楽しくても、これが10本、20本となると、もはやクリエイティブというよりは「修行」に近い。この非効率なループから、なんとかして脱出したい!という切実な願いが、今回のプロジェクトの始まりでした。


1章:動画作成プログラム Remotion

そこで調べていて出会ったのが、Remotionです。
「Remotion?」とは、、、 普通、動画編集といえばAdobe Premiere ProやCapCutのように、タイムラインにクリップを並べてマウスで操作しますよね。でもRemotionは全く違います。「Webサイトを作るように、コード(React)で動画を書く」という一風変わったツールなんです。
しかも、自分の得意(?)なReactベースというのはとっつきやすそう。

「10フレーム目にこの文字をアニメーションつけながら出す」「音量に合わせて背景を揺らす」といった指示をすべてプログラミングで記述します。一見難しそうですが、これが量産には最強。なぜなら、一度「型」のコードを書いてしまえば、中身のテキストを入れ替えるだけで、同じクオリティの動画を100本でも1000本でも自動生成できるからです。

まずは、調べながらプロジェクトを作成して、動画作ってみました。

何回かGeminiで壁打ちしながらClaude Codeで作ってみたのがこれ。婚鉄のアイデアはGeminiですが、動画のキャラ・フォント・色・配置などはすべてRemotionに作ってもらっています。


2章:Flova AI を組み合わせる

やはり動画のクオリティを左右する映像素材。ここを全部ゼロからプログラムで作るのは大変なので、そこは生成AIのFlovaに任せます。
FlovaはAIコミュニティの友人が使っていたことから、その存在を知ったのですが、使ってみたらとても面白い!

今回のテーマは「お花見」。ちょうど外国の友人とのチャットもこの話題で盛り上がっていたので、即決。日本人男性とインドネシア人女性が、桜の下で楽しそうに会話しているシーンをプロンプトで生成しました。

Flovaで画像を動画を作成

ポイントは、この背景映像を「使い回す前提」で、1本だけ汎用的に作ること。Flovaは文字をオブジェクトとして重ねることができないので、文字はRemotionで入れることにしました。字幕を載せる位置をあらかじめ計算して、中央に余白(Copy Space)がある構図を指定します。
BGMも同時にFlovaで作ってしまい、それを動画の「固定資産」にする。いつも和風の雅楽なサウンドは見つかけるのに苦労していたので、素材探しに迷う時間がゼロになり、アカウントとしてのトーン&マナーも勝手に統一されるという、一石二鳥の戦略です。

3章:Googleに「喋り」を任せる贅沢

動画に命を吹き込むのは、やっぱり「声」ですよね。でも、自分で録音するのは準備も録り直しも大変だし、かといって外部の読み上げソフトで毎回ファイルを書き出すのも、これまた「めんどくさい」の温床になります。

そこで、Google CloudのText-to-Speech APIをシステムに直接つなぎました。日本語のテキストを流し込むだけで、Googleのサーバーが瞬時にナレーションを生成してくれます。今回は「日本人男性(講師)」の声をつけてみました。
ちなみに、以前にTTSでインドネシア語の音声を再生させてインドネシアの友人に聞いてもらったところ「単語の発音はだいぶ自然。でも文章はちょっと機械っぽい」とのことでした。

文章はGeminiで量産できるので、それを動画に埋め込むのと音声を付与できるのも全自動でできるのはとても楽です。

4章:動画作成AIチーム

というわけで、GUI(画面操作)ではなく、コードで動画を組み上げるというアプローチです。今回結成した「最強のAIスタック」がこちら。

  • Gemini:脚本家

  • Cursor / Claude Code: 開発の脳。指示を出すだけで複雑なコードを書いてくれる。

  • Remotion: 今回の主役。React(プログラム)で動画の動きを制御できるライブラリ。

  • Flova: 映像とBGMの「魂」を生成するAI。

  • TTS:音声の読み上げ

このチームの何がすごいって、一度「仕組み」を作ってしまえば、あとは「編集作業」という概念そのものが消えることです。マウスでポチポチする代わりに、AIと会話しながら動画の設計図を引いていく。そんな、エンジニアリングとクリエイティブが融合した新しい制作スタイルです。

5章:Remotionで「動くテキスト」をデザイン

Remotionの開発環境はCursor です。remotionはあくまでWEB上で動作するフロントのプログラムなので、通常の開発風景と変わらないです。ただし、プログラムの実装量は多くなく、ほとんどがFlovaで作った動画の質でディペンドします。

開発はCursor × Claude Code

Remotionではテロップや装飾を「コード」で自在に操れます。単に文字を置くだけじゃ面白くないので、インスタのリール映えを意識して、モダンな太字フォントと弾むように登場する吹き出しを実装しました。
これ、普通の編集ソフトだとテキストごとにアニメーションの設定をしていく必要がありますが、Remotionならコードを書くだけ(正確には「書かせる」だけ)。あとは文字数に合わせて、吹き出しのサイズもAIが勝手に計算して調整してくれます。

locaohost で動作させると動画のタイムラインを見ることができます。繰り返しになりますがここでは内容は文字の位置や色、サイズ、タイミングなどを確認するだけです。修正はあくまでプログラム上でするので、ピクセル単位の制御でマウスを酷使する必要はありません。

Remotionのタイムライン画面

6章:JSONを書き換える。はい、動画完成。

システムが完成してからの私のルーティンは、もはや動画編集ではありません。data.json という設定ファイルに、新しく教えたいフレーズを書き込むだけ。

「お花見はにぎやかですね!」 「おいしいです!」など、(Geminiが)テキストを書き換えるだけです。

[
  {
    "id": "hanami-01",
    "titleAudio": "hanami-01/title_hanami.mp3",
    "phrases": [
      {
        "ja": "お花見は、にぎやかですね!",
        "jaRuby": [
          { "text": "お" },
          { "text": "花見", "ruby": "はなみ" },
          { "text": "は、\nにぎやかですね!" }
        ],
        "en": "The cherry blossom viewing is so lively!",
        "idn": "Hanami sangat meriah!",
        "adjective": "にぎやか",
        "adjLabel": "Lively",
        "adjColor": "#fbbf24",
        "audio": "audio1.mp3"
      },
      {
        "ja": "お花見のお弁当は、おいしいです。",
        "jaRuby": [
          { "text": "お" },
          { "text": "花見", "ruby": "はなみ" },
          { "text": "のお" },
          { "text": "弁当", "ruby": "べんとう" },
          { "text": "は、\nおいしいです。" }
        ],
        "en": "The cherry blossom viewing lunch box is delicious.",
        "idn": "Bekal saat hanami sangat lezat.",
        "adjective": "おいしい",
        "adjLabel": "Delicious",
        "adjColor": "#34d399",
        "audio": "audio2.mp3"
      },
      {
        "ja": "夜のお花見は、とてもきれいです。",
        "jaRuby": [
          { "text": "夜", "ruby": "よる" },
          { "text": "のお" },
          { "text": "花見", "ruby": "はなみ" },
          { "text": "は、\nとてもきれいです。" }
        ],
        "en": "The cherry blossom viewing at night is very beautiful.",
        "idn": "Melihat bunga sakura di malam hari sangat indah.",
        "adjective": "きれい",
        "adjLabel": "Beautiful",
        "adjColor": "#f472b6",
        "audio": "audio3.mp3"
      }
    ]
  },
  {
    "id": "hanami-02",
    "titleAudio": "hanami-02/title_hanami.mp3",
    "titleText": "お花見でよく使う動詞!",
    "subtitleJa": "よく使う\n動詞!",
    "subtitleEn": "Common Hanami Verbs!",
    "subtitleIdn": "Kata Kerja Umum saat Hanami!",
    "phrases": [
      {
        "ja": "お花見に行きます。",
        "jaRuby": [
          { "text": "お" },
          { "text": "花見", "ruby": "はなみ" },
          { "text": "に" },
          { "text": "行きます", "ruby": "いきます" },
          { "text": "。" }
        ],
        "en": "I go to cherry blossom viewing.",
        "idn": "Saya pergi ke hanami.",
        "adjective": "行きます",
        "adjLabel": "Go / 行く",
        "adjColor": "#60a5fa",
        "audio": "audio1.mp3"
      },
      {
        "ja": "桜の花を見ます。",
        "jaRuby": [
          { "text": "桜", "ruby": "さくら" },
          { "text": "の" },
          { "text": "花", "ruby": "はな" },
          { "text": "を" },
          { "text": "見ます", "ruby": "みます" },
          { "text": "。" }
        ],
        "en": "I watch the cherry blossoms.",
        "idn": "Saya melihat bunga sakura.",
        "adjective": "見ます",
        "adjLabel": "Watch / 見る",
        "adjColor": "#34d399",
        "audio": "audio2.mp3"
      },
      {
        "ja": "お弁当を食べます。",
        "jaRuby": [
          { "text": "お" },
          { "text": "弁当", "ruby": "べんとう" },
          { "text": "を" },
          { "text": "食べます", "ruby": "たべます" },
          { "text": "。" }
        ],
        "en": "I eat the bento box.",
        "idn": "Saya makan bekal makan siang.",
        "adjective": "食べます",
        "adjLabel": "Eat / 食べる",
        "adjColor": "#f97316",
        "audio": "audio3.mp3"
      }
    ]
  },
]

これだけ打ち込んで、ターミナルで「レンダリング開始!」のコマンドを叩く。すると数分後には、美しい背景に乗り、AIが喋り、スタイリッシュな吹き出しが踊る完璧なMP4が出来上がっています。Canvaの画面と睨めっこして「フォントサイズ、あと1ピクセル小さくかな……?」なんて悩んでいた時間は、今ではもっとクリエイティブな「次のネタ探し」の時間に変わりました。

作成した動画はこんな感じです。おなじひな形にjsonの文字だけ変えた状態です。

動画一本目

動画二本目(文字を差し替えるだけ)

 ※動画のサイズのせいかうまく再生できなそうなので、1本目動画のインスタ投稿をリンクしておきます。

7章:作る苦労を卒業して、届ける楽しさを

今回、動画制作を完全に自動化してみて一番の収穫だったのは、「作るのが大変だから今日は投稿を休もうかな……」という、自分への言い訳が通用しなくなったことです(笑)。仕組みさえあれば、投稿を続ける心理的ハードルは驚くほど下がります。

AIとコードをちょっと組み合わせるだけで、個人のクリエイターでも組織に負けない「量産」が可能になる時代。もし皆さんも、動画作りの「めんどくさい」に心を折られそうになっていたら、ぜひこのAIスタックを試してみてほしいです。きっと、「作る苦労」から解放されて、本来の目的である「誰かに何かを届ける楽しさ」に全振りできるようになりますよ!

いいなと思ったら応援しよう!