RemotionとAntigraivty Skillsで動画作成に挑戦してみよう

こんにちは、むなかたです。

今回はRemotion公式が提供してくれているAgent Skillsを活用して、誰でも簡単にショート動画を作れる手順を紹介していきます！

この記事ではAntigravityを想定して解説していますが、ClaudeCodeやCodexといった他のエージェントでも同様の手順で操作可能なので、ぜひ参考にされてみてくださいね。

Antigravityをまだ使ったことがない方はこちらの記事で設定方法や使い方を解説しているので、あわせてご確認ください！

動画でも解説したので、実際の操作手順を確認したい方はこちらもあわせてご確認くださいませ！

はじめに

Remotionって？

Remotionとはプログラムコードを使って動画を作成できる、オープンソース（プログラムが公開されている）動画生成ツールです。

特徴としては、マウス操作やタイムライン操作ではなく、プログラムを使って動画を作ることができる点です。

つまり、AIプログラミングと組み合わせることで、ツールの使い方や事前の知識などは不要、かつ日本語の指示だけで動画が作れるようになるという、AI時代にピッタリのハイパーツールです！

AgentSkills（スキル）って？

スキルとは「この作業のときにはこの手順・このデータを使って進めてね」とAIに示してあげる指示書のようなものです。

（過去に作成したnote記事もどうぞ）

今回はRemotion公式からスキルが配布されましたが、つまりこれはRemotionの使い方をAIに教えてくれる説明書が配布されたという状況です。

配布されたスキルを活用することで、AIが迷わずにRemotionを扱えるようになり、RemotionとAIを組み合わせた動画作成のハードルがぐっと下がったということになります。

事前準備

Step1. 作業フォルダを作成

まずは作業場所となる空のフォルダを作成してください。

Remotionで作成した動画のデータが保存されていく場所となるので、今後なるべく移動しない、わかりやすい場所に作っておくのがオススメです。

Step2. Antigravityで作業フォルダを開く

続いてAntigravityを起動して作業フォルダを開きましょう。

TOPビューの「Open Folder」から開いてもいいですし、メニューの「ファイル」>「フォルダーを開く」から開いていただいても大丈夫です。

始めて開いたときには「作成者を信頼しますか？」という確認が入りますが、「はい、作成者を信頼します」を選択すればOKです。

Step3. ターミナルを起動

Antigravityメニューの「ターミナル」>「新しいターミナル」を選択すると、画面の下に「ターミナル」という画面が追加されます。

次からのインストール作業はこちらのターミナル内で操作を行っていきます。

Step4. Node.jsのインストール

Remotionのスキルをインストールするために「Node.js」というプログラムが必要なので、まずはNode.jsがインストールされているかどうかを確認しましょう。

こちらのコマンドをコピーしてターミナルに貼り付け → Enterを押してみてください。

node -v

以下のようにバージョンが表示されていたらインストール済みなので、Step5に進んでいただいてOKです。

v24.10.0

コマンドが見つからないようなエラーが出た場合にはインストールが必要です。

公式サイト https://nodejs.org にアクセスして、「Install Node.js」ボタンをクリックして進みましょう。

ダウンロードページに遷移するので、画面の少し下にあるこちらの欄からご自身にあった環境を選択してインストーラーをダウンロードしてください。

ダウンロードしてきたインストーラを起動し、指示に従ってインストールを行えばセットアップ完了です。

再度以下のコマンドを実行してバージョン番号が表示されるか確認してみましょう。

node -v

Step5. Remotion Skillsのインストール

それでは続いてRemotion Skillsのインストールを行います。こちらのコマンドをコピーし、ターミナル内に貼り付けでEnterで実行しましょう。

npx skills add remotion-dev/skills

実行すると最初に「SKILLS」というロゴといくつかメッセージが表示されます。

███████╗██╗  ██╗██╗██╗     ██╗     ███████╗
██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝
███████╗█████╔╝ ██║██║     ██║     ███████╗
╚════██║██╔═██╗ ██║██║     ██║     ╚════██║
███████║██║  ██╗██║███████╗███████╗███████║
╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝

⋮

Need to install the following packages:
skills@1.0.10
Ok to proceed? (y)

最初に「進めていい？」と質問されるので、キーボードで「y」を入力してEnterを押してみましょう。

Ok to proceed? (y) y

続いてどのAIのスキルをインストールするかを聞かれるので、上下矢印キーで移動、スペースでON/OFFで切り替えして「Antigravity」を選んだ状態でEnterを押してください。

デフォルトでは全てが選択されている状態なので、そのままEnterでもOKです。

◆  Select agents to install skills to
│  ◼ Antigravity (.agent/skills)
│  ◼ Claude Code
│  ◼ Codex
│  ◼ Cursor
│  ◼ Gemini CLI
│  ◼ Kiro CLI
│  ◼ Windsurf
└

続いてスキルをどの範囲でインストールしたいか聞かれます、こちらも上下矢印キーで選択してEnterで決定できます。

2026年1月現在、AntigravityではGlobal Skillが調子悪そうなので、今回は 「Project」を選んで進んでいきます。

◆  Installation scope
│  ● Project
│  ○ Global (Install in home directory (available across all projects))
└

続いてインストール方法の質問です。「Symlink」だと更新が楽なようなので、上の「Symlink」の選択肢を選んで進めていきます。

◆  Installation method
│  ● Symlink (Recommended) (Single source of truth, easy updates)
│  ○ Copy to all agents
└

最後にインストール設定の確認が表示されるので、左右矢印キーで「Yes」を選択してEnterを押せばインストールが行われます。

◇  Installation Summary ────────────────────────────────────────────────────╮
│                                                                           │
│  ~/.agents/skills/remotion-best-practices                                 │
│    symlink → Antigravity, Claude Code, Codex, Cursor, Gemini CLI +2 more  │
│                                                                           │
├───────────────────────────────────────────────────────────────────────────╯
│
◆  Proceed with installation?
│  ● Yes / ○ No
└

少し待って「Done」というメッセージが表示されれば終了です。

左メニューの「エクスプローラー」のところにファイルが追加されていることが確認できれば無事スキルのインストールは完了です！

Remotionによる動画作成

Step1. 動画作成を指示

それでは実際に動画を作成してみましょう。

Antigravityの右側の入力欄で作って欲しい動画の詳細を指示してみます。今回は例としてニュース解説動画を作らせてみましょう。

今日あったニュースを解説する動画を作成してください

指示をすると、Antigravityが自動で作業を進めてくれます。数分程度かかると思うので気長に待ちましょう。

しばらく待ち、右下のボタンが「■」から「→」に変わっていたらAntigravity側の作業が終了している合図です。

Step2. 動画を確認

続いて作成された動画を確認してみましょう。

ここが少しややこしいのですが、Remotionには「動画を確認するコマンド」と「動画を書き出すコマンド」が用意されていて、先ほど使ったターミナルで実行する必要があります。

作業が完了した時点でコマンドを教えてくれていることが多いのですが、もしも見当たらなければ以下のように質問して、コマンドを教えてもらいましょう。

動画を確認するコマンドを教えて下さい

実行の手順としてはコマンドをコピーし、画面下部のターミナルから「＋」ボタンを押して、入力欄にコマンドを貼り付けてEnterを押せばOKです。

コマンドを実行するとブラウザが自動で立ち上がり、画像のような再生ビューが表示されるはずです。

左メニューから動画を選択し、画面中央の再生ボタンを押すと実際に出来上がった動画を再生できます。

Step3. 動画を修正

気になる箇所があった場合、Antigravityで変更指示を行えばそのまますぐに反映されます。

今回は生成された動画内のテキストが全て英語だったので日本語に変更してもらいましょう。

動画内のテキストを全て日本語にしてください

Antigravity側の修正が終わると、ブラウザ側の動画も自動で切り替わります。

このような修正を繰り返して理想の動画を作っていきましょう！

Step4. 動画の書き出し

一通り動画が完成したらあとは書き出すだけです。画面右の「Render」ボタンをクリックしましょう。

書き出し設定ダイアログが表示されるので、必要に応じて設定を変更いただきつつ「Render video」から動画を書き出すことができます。

少し待つと「Renders」タブの中に書き出された動画の情報が表示されます。

一番右のフォルダボタンを押すとファイルが保存されている場所を開くことができるので、ここから動画を好きな場所にアップロードすればOKです！

ちなみに今回の記事で出来上がった動画がこちらです。作業時間としては10分程度、動画知識が一切不要でサクッと作ることが出来ました！

【追記】
noteを見ていただいたy̆̈aaizzy̑̈さんが、音声＋画像付きの動画を作ってくださいました！こちらもぜひ制作の参考にされてみてください！

今回紹介したのはあくまで基本的な使い方ですが、これを応用して

• 自分流の動画フォーマットを決めてSkillとして書き出し

• 台本や音声の文字起こしを渡して一発で動画作成

• 一連の作業を半自動化

なんかも出来ちゃうと思うので、ぜひご自身の発信やSNS運用などにお役立てくださいね！