③ Remotionでの動画作成・編集方法

🎬

このマニュアルで学べること

AntiGravity + Remotionの環境が整ったら、いよいよ動画制作です。このマニュアルでは、「AIへの指示の出し方（プロンプト）」「Remotion Studioの操作方法」「動画の修正・編集方法」「MP4などへのエクスポート方法」を、初心者でもわかるよう丁寧に解説します。

コピペで使えるプロンプトテンプレート集
Remotion Studioの各ボタン・操作の説明
AIへの修正指示の出し方
MP4・GIF・WebMへのエクスポート手順

こんな動画が作れます

📢

SNS広告動画

Instagram・TikTok用の縦型動画

🏷️

ロゴアニメーション

ブランドのロゴをアニメーション化

📊

データビジュアライゼーション

グラフ・数字のアニメーション

🎓

教育・解説動画

テキストとアニメーションで説明

🎵

音楽ビジュアライザー

音楽に合わせた映像

🌟

イントロ・アウトロ

YouTube動画のオープニング

1

動画作成の基本ワークフロー

必読

🔄 AntiGravity + Remotion の動画制作サイクル
              1
AntiGravityのPlaygroundに動画の内容を日本語で指示
「〇〇な動画を作って」とテキストで伝えるだけ

              2
AIが自動でReactコードを生成・ファイルを編集
src/フォルダ内のファイルが自動更新される

              3
Remotion Studio（ブラウザ）でリアルタイムプレビュー
localhost:3000 で動画の仕上がりを即確認

              4
気に入らない部分を「〇〇を変えて」と追加指示
何度でも修正・改善できる

              5
完成したらMP4・GIFなどでエクスポート
SNS・YouTube・資料などに使用

💡

事前準備：ターミナルで npm run dev を起動しておく

動画作業を始める前に、必ずターミナルで cd my-video && npm run dev を実行してRemotionサーバーを起動しておいてください。ブラウザで localhost:3000 が開いていることを確認しましょう。

2

コピペで使えるプロンプト集

実践

AntiGravityのPlaygroundに貼り付けて使えるプロンプトテンプレートです。「」の中を自分の内容に変えるだけでOKです。

🟢 かんたん（初心者向け）

かんたん タイトルアニメーション

「シンプルなタイトルアニメーションを作ってください。背景は白、テキストは「MEBUKI ACADEMY」を大きく表示して、下からフェードインするアニメーションをつけてください。フォントはボールドで、色は #00BFDF にしてください。動画の長さは3秒です。」

→ テキストが下からふわっと現れるシンプルな動画が生成されます

かんたん カウントダウン動画

「5秒のカウントダウン動画を作ってください。5・4・3・2・1・GO! と数字が1秒ごとに大きくズームインして表示されます。背景は黒、テキストは白で、最後の「GO!」だけ黄色にしてください。」

→ SNSのライブ配信開始や動画オープニングに使えます

🟡 ふつう

ふつう SNS告知動画（縦型）

「Instagram・TikTok用の縦型（9:16）告知動画を作ってください。背景はグラデーション（#00BFDF から #0099b5）、上部に「🎓 MEBUKI ACADEMY」のロゴテキスト、中央に「副業も起業も、ぜんぶ叶える。」というキャッチコピーが大きく表示されます。テキストは1文字ずつタイプライター風に表示されるアニメーションで、最後に「詳細はプロフィールから」というサブテキストがフェードインします。全体で6秒の動画にしてください。」

→ SNSのストーリーズ・リールに使えるプロ品質の動画が生成されます

ふつう 数字カウントアップ動画

「実績紹介の動画を作ってください。3つの数字が順番にカウントアップするアニメーションです。①「受講生数 1,200名以上」②「副業収入達成率 87%」③「満足度 98%」の3つを、それぞれ2秒ずつ表示します。背景は濃いネイビー（#1a1a2e）、数字は大きく白、ラベルテキストはシアン（#00BFDF）にしてください。全体で8秒です。」

→ 実績・成果を印象的に伝えるマーケティング動画が生成されます

🔴 応用

応用 YouTube イントロ動画

「YouTubeチャンネルのイントロ動画を作ってください。5秒の動画で、以下の演出を含めてください：①最初の1秒：画面全体が黒から始まり、中央に光の粒子が集まってくる ②1〜3秒：粒子が集まって「MBA」の文字を形成し、文字が輝く ③3〜4秒：「MEBUKI ACADEMY」のテキストが下からスライドインし、シアン色（#00BFDF）で表示 ④4〜5秒：「副業も起業も、ぜんぶ叶える。」のサブタイトルがフェードイン。背景は黒、全体的にモダンでプロフェッショナルな雰囲気にしてください。」

→ プロのYouTuberのようなブランドイントロが生成されます

💡

プロンプトを上手に書くコツ

①サイズ・秒数を明記する（例：「16:9、10秒」）　②色コードを具体的に指定する（例：「#00BFDF」）　③アニメーションの動きを言葉で説明する（例：「下からフェードイン」「タイプライター風」）　④雰囲気を伝える（例：「モダン」「温かみのある」「プロフェッショナル」）

3

Remotion Studio の操作方法

基本操作

localhost:3000 で開くRemotionStudioの各部分の説明です。

🎬 Remotion Studio — localhost:3000

COMPOSITIONS

📹 MyComposition

📹 HelloWorld

ASSETS

🖼️ logo.png

🎵 bgm.mp3

MEBUKI ACADEMY

副業も起業も、ぜんぶ叶える。

①

▶ 再生

②

⏮ 先頭

⏭ 末尾

③

12 / 30f

FPS: 30

|

1920×1080

|

1.0s / 3.0s

📤 Render

④

①

プレビューエリア
動画のリアルタイムプレビューが表示されます。コードが変更されると自動で更新されます。

②

再生ボタン
クリックで動画を再生・一時停止できます。スペースキーでも操作可能です。

③

タイムライン（シークバー）
ドラッグして任意のフレームに移動できます。特定の瞬間のデザインを確認するのに使います。

④

Render（エクスポート）ボタン
クリックすると動画ファイルのエクスポート設定画面が開きます。MP4・GIFなどを選択できます。

4

動画を修正・編集する

実践

AIが生成した動画を修正するには、AntiGravityのPlaygroundに追加の指示を出すだけです。

よく使う修正プロンプト

色を変える

「背景色を白（#ffffff）に変えて、テキストの色を #00BFDF にしてください。」

テキストを変える

「メインのタイトルテキストを「MEBUKI ACADEMY」から「副業アカデミー」に変えてください。」

アニメーションを変える

「テキストのアニメーションを「下からフェードイン」から「左からスライドイン」に変えてください。」

長さ・サイズを変える

「動画の長さを3秒から5秒に変えてください。また、サイズを1920×1080（横型）から1080×1920（縦型）に変更してください。」

要素を追加する

「動画の最後に「詳細はこちら →」というCTAテキストをフェードインで追加してください。右下に小さく表示してください。」

⚠️

修正がうまくいかない場合

「さっきの変更を元に戻して、〇〇だけ変えてください」と具体的に指示し直してください。また、AntiGravityの「Undo」機能（Ctrl+Z）でコードの変更を元に戻すこともできます。

5

動画をエクスポートする

最終ステップ

動画が完成したら、MP4などのファイルとして書き出します。

エクスポート形式の選び方

🎬

MP4

YouTube・SNS・資料に最適

方法①：Remotion Studio からエクスポート（かんたん）

1

Remotion Studio（localhost:3000）を開く
ブラウザでRemotionStudioが開いていることを確認します。
2

右上の「Render」ボタンをクリック
画面右上または下部コントロールバーの「📤 Render」ボタンをクリックします。
3

エクスポート設定を選ぶ
「Format」で「MP4」を選択します。品質は「High」推奨。出力先フォルダを確認します。
4

「Render」をクリックして待つ
レンダリングが開始されます。動画の長さや複雑さによって数秒〜数分かかります。
5

完了！出力フォルダからファイルを取得
プロジェクトフォルダ内の out/ フォルダに動画ファイルが保存されます。

方法②：コマンドラインからエクスポート（高品質）

ターミナル（プロジェクトフォルダ内）

# MP4でエクスポート（基本） $ npx remotion render MyComposition out/video.mp4 Rendering 90 frames... ✓ Rendered successfully: out/video.mp4 # GIFでエクスポート $ npx remotion render MyComposition out/video.gif --codec=gif # 縦型（1080×1920）でエクスポート $ npx remotion render MyComposition out/vertical.mp4 --width=1080 --height=1920

📁

出力ファイルの場所

エクスポートされた動画は my-video/out/ フォルダに保存されます。Finderまたはエクスプローラーで確認してください。

6

上級テクニック・便利な使い方

応用

🖼️ 画像・ロゴを動画に入れる

画像ファイルを public/ フォルダに置いてから、AIに指示します。

「public/logo.png の画像を動画の中央上部に配置して、フェードインするアニメーションをつけてください。」

🎵 BGM・効果音を追加する

音楽ファイルを public/ フォルダに置いてから指示します。

「public/bgm.mp3 を動画のBGMとして追加してください。音量は0.5（50%）にしてください。」

🔄 複数シーンを組み合わせる

複数のシーンを連続させた長い動画も作れます。

「3つのシーンからなる15秒の動画を作ってください。①0〜5秒：タイトル表示 ②5〜10秒：3つの特徴をリスト表示 ③10〜15秒：CTAとWebサイトURL表示」

📐 複数サイズで書き出す

同じデザインを横型・縦型・正方形で書き出してSNSに対応できます。

「現在の動画を縦型（1080×1920）バージョンとして作り直してください。テキストのレイアウトを縦型に最適化してください。」

7

MBA受講生の作例集

インスピレーション

SNS告知動画 / 6秒

副業で月10万円

達成者続出中！

Instagram Story用 9:16

実績紹介動画 / 10秒

1,200+

受講生が副業を開始

YouTube用 16:9

ロゴアニメーション / 3秒

MBA

MEBUKI ACADEMY

ブランドイントロ用

🚀

あなたも今日から動画クリエイターに！

AntiGravity + Remotionを使えば、デザインやプログラミングの知識がなくても、プロ品質の動画が作れます。まずは簡単なプロンプトから試してみましょう！

🎉 動画制作マスターチェックリスト

npm run dev でRemotionサーバーを起動できた
AntiGravityのPlaygroundに動画プロンプトを入力した
AIが自動でコードを生成し、プレビューが表示された
Remotion Studioで動画を再生・確認できた
修正プロンプトで動画を改善できた
MP4ファイルとしてエクスポートできた
SNSや資料に動画を活用した

3冊のマニュアルを完走おめでとうございます！副業・起業の武器が整いました。