AntigravityでRemotion環境を作る方法｜Gemini Agentで動画制作準備まで

1. Antigravityをインストール
2. Gmailでログイン
3. Remotion用の作業フォルダを作る
4. Antigravityでそのフォルダを開く
5. Remotionプロジェクトを作成
6. Antigravity上で動作確認
7. PROJECT_RULES.mdを作成
8. Gemini Agentでフォルダ構成を準備
9. テスト用の台本・字幕・シーンデータを作成
10. 次回、Claude Codeとの連携に進む

Antigravityを導入する

まず公式サイトから入り、ダウンロードページから自分のOSを選びます。

https://antigravity.google/download

Google公式Codelabでは、AntigravityのダウンロードページからOSに合うインストーラーを選び、インストール後に起動する流れが案内されています。

Windows版には「Download for x64」と「Download for ARM64」があります。
通常のIntel CoreやAMD Ryzen搭載PCの場合は、基本的に Download for x64 を選びます。

確認する場合は、Windowsの「設定」→「システム」→「バージョン情報」を開き、
「システムの種類」に x64 ベース プロセッサ と表示されていれば、x64版で大丈夫です。

一方、Surface Pro X や Snapdragon 搭載PCなどで ARM64 や ARM ベース プロセッサ と表示される場合は、ARM64版を選びます。

Antigravityをインストール

1.Antigravity.exeをダブルクリックしてインストーラーを起動します。

2.同意するにチェックを入れて「次へ」をクリックします。

3.インストール先が表示されるので「次へ」をクリックします。

4.スタートメニューのフォルダの指定が表示されるので、そのまま「次へ」をクリックします。

※変更したい場合は「参照」をクリックして、お好みのフォルダを指定してください。

5.デスクトップに起動用のアイコンを表示したい場合はここで「デスクトップ上にアイコンを作成する」にチェックを入れて「次へ」をクリックします。

6.ここで、インストール先フォルダなど設定した環境が表示されるので、インストール前に確認しましょう。

基本的にこのままで大丈夫なので「インストール」をクリックします

7.インストール実行中

8.インストール完了

この画面がでたらインストール完了ですので［完了］をクリックしましょう

初回起動時の設定

インストール直後にAntigravityの初回セットアップ画面が表示された場合は、そのまま「Next」で進めて大丈夫です。

PATHの反映が必要になるのは、主にターミナルからコマンドで起動する場合です。
通常のアプリ起動や初回設定は、PCを再起動する前でも進められます。

もし後でターミナルからコマンドが認識されない場合は、Antigravityを閉じてターミナルを開き直すか、PCを再起動してください。

起動したら、基本的には以下の流れです。

1.Antigravityの初回起動時に、VS Codeの設定を引き継ぐか、新規設定で始めるかを選ぶ画面が表示されます。

すでにVS Codeを使っている場合は「Import from VS Code」を選ぶと、テーマや一部設定を引き継げます。
ただし、初めてAntigravityを試す場合や、Remotion用に新しい環境を作りたい場合は、まずは Start fresh を選ぶのがおすすめです。
新規設定で始めた方が、あとで問題が起きたときに原因を切り分けやすくなります。

2.エディタのモードを選択する画面がでてくるので、お好みのエディタを選択して［Next］をクリックします。

3.Antigravityの初回設定では、Agentをどの程度自動で動かすかを選択します。

初めて使う場合は、推奨設定のReview-driven development を選ぶのがおすすめです。
AIが作業案を出し、人間が確認してから進めるため、勝手にファイル変更やコマンド実行が進みにくくなります。

 

各モードの意味

Strict Mode
かなり慎重なモードです。
AIの自由度を低くして、細かく確認しながら進めたい場合向けです。

Review-driven development
おすすめのバランス型です。
AIが作業案を出し、人間が確認しながら進めます。初めて使うならこれが一番安全です。公式のCodelabでも、AntigravityはAgentが計画・コード作成・ブラウザ確認まで行える開発環境として説明されているので、最初は確認ありで進めるのが安心です。

Agent-driven development
AIにかなり任せるモードです。
スピードは出ますが、ターミナル操作やファイル変更の確認が少なくなる可能性があるので、最初はおすすめしません。

Custom configuration
自分で細かく設定するモードです。
慣れてからで大丈夫です。

4.キーボード操作と拡張機能の設定を選びます

5.エディタ設定画面では、キーボード操作と拡張機能の設定を選びます。
普段からVimを使っていない場合は、Keybindingsは Normal のままで大丈夫です。
Extensionsは、最初はRecommendedを選んでおくと、必要な拡張機能が自動で設定されるため分かりやすいです。

画面の意味
Keybindings

これは キーボード操作の種類 です。

Normal
普通の操作方法です。
VS Codeや一般的なエディタと同じ感覚で使えます。

Vim
Vimという特殊なキーボード操作に慣れている人向けです。
普段からVimを使っていないなら選ばなくてOKです。

なので、ここは Normal のままで大丈夫です。

Extensions

これは 拡張機能を入れる設定 です。

Recommended
おすすめの拡張機能を自動で入れる設定です。

Configure
自分で細かく選ぶ設定です。

今回は初回設定なので、Recommended のままで大丈夫です。

6.Gmailアカウントでログイン

 「Sign in with Google」 をクリックして、Googleアカウントでサインインします。

7.アカウントが表示されたら、ご自身のアカウントをクリックします。

8.次にログインをクリックします。

9.確認画面が表示されたら

Googleアカウントでログインすると、ブラウザ側で「Antigravityを開きますか？」という確認画面が表示される場合があります。
これは、ログイン完了後にAntigravityアプリへ戻るための確認です。
「Antigravityを開く」 をクリックして進めます。
チェックボックスは、今後同じ種類のリンクを常にAntigravityで開くための設定です。
初回はチェックを入れずに進めても問題ありません。

10.ログインに成功すると「You have successfully authenticated.」と表示されています。

 

自動で戻らない場合は、画面中央の Click hereをクリックするか、タスクバーからAntigravityの画面を開いてください。

11.Googleログインが完了すると、Antigravityアプリ側に戻り、利用時の注意事項が表示されます。
この画面では、Agentによるコード実行やデータ取り扱いに関する注意が表示されます。
機密情報を扱わないこと、Agentの操作内容を確認しながら進めることが大切です。
内容を確認したら、Nextをクリックして次へ進みます。

Antigravity – Terms of Use
利用時の注意事項の画面です。

内容としては、

• Antigravityには一定のセキュリティ上の制限がある
• データ流出やコード実行などのリスクに注意する
• 機密情報は扱わない方がよい
• Agentの動作は確認しながら進める
• 利用状況などの一般的なデータは収集される場合がある

という注意書きです。

Antigravityで作業フォルダを作る

先に作業用フォルダを作成します。

例：

①Documents/remotion-projects/youtube-remotion-test

Cドライブでない場合、以下のように常時接続されている内蔵SSD/HDD であればOKです。

※外付けHDDやUSBメモリは避けましょう

②F:\remotion-projects\youtube-remotion-test

悪い例は以下で、日本語＋空白入りがあったりするものです。

F:\動画 制作\テスト動画

また、フォルダ名には日本語や空白をできるだけ入れない方が、RemotionやNode.js系ではトラブルが少ないです。

まだフォルダを作っていない場合は、先にWindows側で作ってから、Antigravityでそのフォルダを開くと分かりやすいです。

次に、「Open Folder」をクリックしてRemotion用の作業フォルダを選択します。

ボタンの意味

Open Folder
自分のPC内の作業フォルダを開く。
今回使うのはこれです。

Open Agent Manager
Agentの管理画面を開くものです。

Documents/remotion-projects/youtube-remotion-test

先ほど作成した作業フォルダを、Antigravityで開きます。

私はFドライブに作成したため、以下のようになっています。ご自身が作成したフォルダを選択してください。

ここが、動画制作の作業場になります。

作業フォルダを開くと、「このフォルダ内のファイルを信頼しますか？」という確認画面が表示されます。
自分で作成したフォルダであれば、Yes, I trust the authors を選びます。

Remotionプロジェクトを作成する

Antigravityのターミナルで、Remotionプロジェクトを作成します。
上のメニューから、Terminal → New Terminalの順にクリックするとターミナルが開きます。

Remotionを使う前にNode.jsとGitを確認する

Node.jsがインストールされているか確認する

Remotionを使うには、事前にNode.jsが必要です。
すでにNode.jsが入っている環境もあるため、まずはインストール済みか確認します。

Antigravityのターミナル、またはWindowsのコマンドプロンプトを開き、次のコマンドを入力します。

node -v

次のようにバージョン番号が表示されれば、Node.jsはインストールされています。

v24.15.0

一方で、「node は認識されません」などのエラーが表示される場合は、Node.jsが入っていないか、PATHが正しく設定されていない可能性があります。
その場合は、Node.jsの公式サイトからLTS版をインストールします。

Node.jsのインストール方法はこちら

Remotionでは npm や npx も使うため、あわせて次のコマンドも確認しておくと安心です。

npm -v
npx -v

node、npm、npx の3つでバージョン番号が表示されれば、Remotionを始める準備ができています。

補足：スクリプト実行ポリシーのエラーの場合以下のような画面が赤文字で表示されます

npm : このシステムではスクリプトの実行が無効になっているため、ファ
イル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。
詳細については、「about_Execution_Policies」(https://go.microsoft.
com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ npm -v
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecu
rityExcep    tion
    + FullyQualifiedErrorId : UnauthorizedAccess
PS F:\remotion-projects\youtube-remotion-test> npx -v
npx : このシステムではスクリプトの実行が無効になっているため、ファ
イル C:\Program Files\nodejs\npx.ps1 を読み込むことができません。  
詳細については、「about_Execution_Policies」(https://go.microsoft. 
com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ npx -v
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecu 
rityExcep    tion
    + FullyQualifiedErrorId : UnauthorizedAccess

Gitがインストールされているか確認する

Remotionのプロジェクト作成時に、Gitが必要になる場合があります。
そのため、Node.jsの確認が終わったら、Gitが使えるかも確認しておきます。

Antigravityのターミナル、またはWindowsのコマンドプロンプトで、次のコマンドを入力します。

git --version

次のようにバージョン番号が表示されれば、Gitはインストールされています。

git version 2.54.0.windows.1

一方で、git が認識されない場合は、Gitがインストールされていないか、PATHが正しく設定されていない可能性があります。
その場合は、Git for Windowsをインストールします。

Git for Windowsをインストールする

WindowsでGitを使う場合は、Git for Windowsをインストールします。
公式サイトは gitforwindows.org です。

インストール中は基本的に初期設定のまま進めて大丈夫ですが、PATHの設定画面では
Git from the command line and also from 3rd-party software
を選びます。

この設定にしておくと、Antigravityやコマンドプロンプトから git コマンドを使えるようになります。

Gitのインストール方法を詳しく見たい方はこちらから

インストール後は、Antigravityをいったん閉じて開き直し、次のコマンドで確認します。

git --version

Remotionプロジェクト作成時の選択項目

npx create-video@latest my-video を実行すると、Remotionプロジェクト作成用の質問が表示されます。

まず、テンプレートを選択します。
今回は最初の確認用なので、Blank を選びました。

? Choose a template:
> Blank Nothing except an empty canvas

Blank は、余計なサンプルが入っていない空のテンプレートです。
Remotionの基本動作を確認したい場合や、あとから自分で動画構成を作りたい場合に使いやすいです。

Add TailwindCSS?

次に、TailwindCSSを追加するか聞かれます。

Add TailwindCSS? ... No / Yes

今回は、あとで字幕や章タイトル、背景デザインなどを調整しやすくするため、Yes を選びました。

TailwindCSSを使うと、文字サイズ、余白、配置、背景色などをクラス名で指定しやすくなります。
RemotionでYouTube動画用のテロップやタイトル画面を作る場合は、入れておくと便利です。

Add agent skills?

続いて、Agent skillsを追加するか聞かれます。

Add agent skills? ... No / Yes

今回は、AntigravityやGemini、Claude Code、CodexなどのAgentと連携して使う予定があるため、Yes を選びました。

Agent skillsを追加すると、RemotionのベストプラクティスなどをAgent側が参照しやすくなります。
今回のログでは、remotion-best-practices というスキルが検出され、AntigravityとGemini CLIにインストールされました。

Proceed with installation?

Agent skillsのインストール内容が表示されたあと、実際にインストールするか確認されます。

Proceed with installation?
Yes

ここは Yes で進めます。

find-skills skillのインストール

続いて、次のような確認が出る場合があります。

Install the find-skills skill?

find-skills は、Agentが利用できるスキルを探しやすくするための補助機能です。
今回はAgentを使った開発フローを試すため、Yes を選びました。

ログでは、find-skills が複数のAgent向けにインストールされています。

エディタで開く確認が出た場合

最後に、次のような確認が出る場合があります。

💻Open in C:\WINDOWS\notepad.exe? ... No / Yes

これは、作成したプロジェクトをエディタで開くかどうかの確認です。
Antigravityですでに作業フォルダを開いている場合は、ここは No で問題ありません。

もしここでエラーが出ても、プロジェクトフォルダが作成されていれば、そのまま次の手順へ進めます。

作成されたプロジェクトフォルダへ移動する

プロジェクト作成が終わると、次のような案内が表示されます。

Get started by running:
cd my-video
npm i
npm run dev

まず、作成されたプロジェクトフォルダへ移動します。

cd my-video

必要なパッケージをインストールする

次に、Remotionプロジェクトに必要なパッケージをインストールします。

npm i

npm i は、package.json に書かれているRemotion、React、TypeScript、TailwindCSSなどの必要なパッケージをまとめてインストールするコマンドです。

もし npm run dev を先に実行して、次のようなエラーが出た場合も、npm i を実行すれば解決することがあります。

'remotion' は、内部コマンドまたは外部コマンドとして認識されていません

Remotion Studioを起動する

パッケージのインストールが終わったら、Remotion Studioを起動します。

npm run dev

正常に起動すると、ターミナルに次のような表示が出ます。

Server ready - Local: http://localhost:3000

ブラウザで http://localhost:3000 が開けば、Remotion Studioの起動は成功です。

npm run dev 実行後に次のコマンドを入力できない場合

npm run dev を実行すると、Remotion Studio用の開発サーバーが起動し続けます。
そのため、同じターミナルには次のコマンドを入力できません。

別のコマンドを実行したい場合は、Antigravityのターミナルで新しいターミナルを開きます。
Remotion Studioを停止したい場合は、実行中のターミナルで Ctrl + C を押します。

Gitの初回コミットでエラーが出た場合

Remotionプロジェクト作成中に、次のようなエラーが表示される場合があります。

Error creating git repository:
git commit -m Create new Remotion video

Project has been created nonetheless.

これは、Remotionプロジェクト作成後にGitで初回コミットしようとして失敗したという意味です。

ただし、Project has been created nonetheless. と表示されている場合、Remotionプロジェクト自体は作成されています。
そのため、まずはそのまま次の手順へ進んで大丈夫です。

このエラーは、Gitのユーザー名やメールアドレスがまだ設定されていない場合などに表示されることがあります。

Gitのユーザー情報を設定する

Gitの初回コミットエラーを解消したい場合は、次のコマンドでユーザー名とメールアドレスを設定します。

git config --global user.name "Koba"
git config --global user.email "your-email@example.com"

Koba と your-email@example.com の部分は、自分の名前やメールアドレスに変更してください。

設定できたか確認する場合は、次のコマンドを使います。

git config --global user.name
git config --global user.email

あとからコミットしたい場合

Gitの設定が終わったあと、必要であればプロジェクトフォルダ内で次のコマンドを実行します。

git add .
git commit -m "Create new Remotion video"

ただし、Remotionの動作確認だけが目的であれば、最初はGitのコミットまで行わなくても問題ありません。

Remotion Studioが起動したら確認すること

npm run dev を実行して、次のような表示が出ればRemotion Studioは起動しています。

Server ready - Local: http://localhost:3000

ブラウザで http://localhost:3000 が開き、Remotion Studioの画面が表示されれば成功です。

この時点で、Antigravity、Node.js、npm、npx、Git、Remotionの基本準備ができた状態になります。

npm run dev中に次のコマンドを入力したい場合

npm run dev を実行すると、Remotion Studio用の開発サーバーが動き続けます。
そのため、同じターミナルには次のコマンドを入力できません。

別のコマンドを実行したい場合は、Antigravityのターミナルで新しいターミナルを開きます。

1. ＋の右側にある「▼」をクリックします。
2. 新しいターミナルを開く。
3. 必要に応じて cd my-video でプロジェクトフォルダに移動する。

Remotion Studioを停止したい場合は、実行中のターミナルで Ctrl + C を押します。

確認が表示された場合は、Y を入力してEnterを押します。

ここまでで完了したこと

今回の手順で、以下の準備が完了しました。

項目	状態
Antigravity	インストールと初回設定が完了
Node.js	node -v で確認済み
npm	npm -v で確認済み
npx	npx -v で確認済み
Git	git --version で確認
Remotionプロジェクト	my-video フォルダを作成
Remotion Studio	npm run dev で起動

AIエージェントと連携する前に役割分担を決める

Remotion Studioの起動確認ができたら、次はAIエージェントと連携する準備をします。

今回は、Antigravity上でRemotionプロジェクトを開き、Claude CodeやCodexなどのAIエージェントと役割を分けながら作業する流れを想定しています。

ただし、複数のAIエージェントを使う場合、同じファイルを同時に編集させると、変更内容が混ざって分かりにくくなることがあります。

そのため、最初にプロジェクト内へPROJECT_RULES.mdというルールファイルを作成し、どのAIに何を担当させるかを決めておきます。

PROJECT_RULES.mdを作成する

Command Promptで、Remotionプロジェクトのフォルダに移動します。
今回の例では、次の場所にいます。

F:\remotion-projects\youtube-remotion-test\my-video>

この状態で、次のコマンドを入力します。

notepad PROJECT_RULES.md

まだファイルが存在しない場合、メモ帳で次のような確認が表示されます。

ファイル PROJECT_RULES.md が見つかりません。
新しく作成しますか？

ここでは 「はい」 を選択します。

メモ帳が開いたら、以下の内容を貼り付けます。

# Project Rules

## 役割分担

### Claude / Claude Code
- 台本、字幕、章構成、素材リストなどの制作データを作成・整理する
- docs/ と data/ 配下を主に編集する
- src/ 配下のRemotion実装は原則編集しない

### Codex
- RemotionのReact / TypeScript実装を担当する
- src/ 配下を主に編集する
- data/ 配下のJSONやSRTを読み取り、表示に使う
- docs/ 配下の台本本文は原則編集しない

### Antigravity
- 作業フォルダ全体の管理
- ブラウザプレビュー確認
- ターミナル操作
- Agentとのやり取りの確認

## 禁止事項

- Claude CodeとCodexが同時に同じファイルを編集しない
- src/ と data/ の両方をまたぐ大規模変更は、作業前に目的を確認する
- 自動実行コマンドは、内容を確認してから実行する

貼り付けたら、メモ帳の ファイル → 保存 をクリックします。
ショートカットの場合は Ctrl + S でも保存できます。

AIエージェントにプロジェクト構成を提案してもらう

右側のAgent欄に、次のように入力しました。

PROJECT_RULES.mdを読んでください。
このプロジェクトでは、Claude CodeとCodexの役割を分けて使いたいです。

まずは現在のプロジェクト構成を確認し、どのフォルダに台本・字幕・素材データ・Remotion実装を置くのがよいか提案してください。

まだファイルは編集しないでください。

すると、次のようなフォルダ構成が提案されました。

my-video/
 ├─ docs/          ← 台本や素材リストなどのドキュメント
 │   └─ scripts/
 ├─ data/          ← Remotionで読み込む字幕やJSONデータ
 │   └─ subtitles/
 ├─ public/        ← 画像や音声などの素材ファイル
 │   └─ assets/
 └─ src/           ← RemotionのReact / TypeScript実装

この構成にしておくと、Claude Codeは台本や字幕データを整理し、CodexはRemotionの実装を担当する、という役割分担がしやすくなります。

フォルダ作成だけを依頼する

提案された構成で問題なければ、まずはフォルダ作成だけを依頼します。
このとき、既存コードを変更しないように明確に伝えておくと安心です。

はい、その構成でお願いします。
必要なフォルダを作成してください。

ただし、今回はフォルダ作成のみ行ってください。
既存のRemotionコードや package.json は変更しないでください。

Agentが次のようなコマンドを提示した場合は、内容を確認してから実行します。

mkdir -Force docs\scripts, data\subtitles, public\assets

このコマンドは、以下のフォルダを作成するためのものです。

• docs/scripts/：台本用
• data/subtitles/：字幕データ用
• public/assets/：画像や音声などの素材用

フォルダ作成だけであれば、既存のRemotionコードや package.json は変更されません。

テスト用の制作データを作成する

フォルダ作成が完了したら、次にテスト用の制作データを作成します。

今回は、今後CodexでRemotion実装を行う前段階として、台本・字幕・シーンデータを作成してもらいます。

Agentには、次のように依頼しました。

PROJECT_RULES.mdを読んでください。

次はテスト用の制作データを作りたいです。
my-video/docs/scripts/test-script.md
my-video/data/subtitles/test.srt
my-video/data/scenes.json
を作成してください。

内容は、10秒程度のRemotionテスト動画用で構いません。

ただし、今回は docs/ と data/ 配下だけを編集してください。
src/ 配下、package.json、Remotionの実装ファイルは変更しないでください。

この依頼により、以下の3つのファイルが作成されました。

docs/scripts/test-script.md
data/subtitles/test.srt
data/scenes.json

作成されたファイルの役割

ファイル	役割
docs/scripts/test-script.md	テスト動画用の台本ファイルです。オープニング、メイン、エンディングなどの構成を確認できます。
data/subtitles/test.srt	字幕データです。各シーンのタイミングに合わせて字幕を表示するために使います。
data/scenes.json	シーン情報をまとめたJSONデータです。Remotion側で読み込んで、章タイトルや背景などを制御するために使います。

この段階では、src/ 配下のRemotion実装ファイルや package.json は変更していません。

まずはAntigravity上のGemini Agentで、台本・字幕・シーンデータなどの制作データだけを作成してもらう形です。

ここまでで準備できたこと

ここまでの作業で、AIエージェントと連携するための基本構成ができました。

my-video/
 ├─ docs/
 │   └─ scripts/
 │       └─ test-script.md
 ├─ data/
 │   ├─ subtitles/
 │   │   └─ test.srt
 │   └─ scenes.json
 ├─ public/
 │   └─ assets/
 ├─ src/
 └─ PROJECT_RULES.md

これで、今後Claude Codeに台本・字幕・シーンデータを作成させ、Codexにそれを読み込んでRemotionの表示実装を行わせるための準備が整いました。

ここまでで、Antigravity上にRemotionの開発環境を作成し、Gemini Agentを使ってAIエージェント連携用のフォルダ構成とテスト用データを準備できました。

なお、ここまでの作業はAntigravity右側のAgent欄から行っているため、実際に作業したのはAntigravity上のGemini Agentです。
Claude CodeやCodexは、まだ実際にはファイル編集を行っていません。

次の記事では、Claude Codeを連携し、台本・字幕・シーンデータをRemotionで扱いやすい形に整理する流れを確認します。