ここからは手を動かします。
このレッスンの画像は、私が実際に作った1本目の動画(マスコットがまだ手描きのおばけだった頃のバージョン)のスクリーンショットです。最初の1本はこのくらいの素朴さで十分、という実例として見てください。
進め方は入門編と同じです。あなたは日本語で指示を出し、コードはAI(Claude または Claude Code)が書きます。このレッスンの指示文は、すべてそのままコピペで使えるように書きました。
ステップ0:作業フォルダを「同期の外」に作る
最初の一歩で、いちばん大事な注意をします。
作業フォルダは、iCloudやDropboxの同期範囲の外に作ってください。「デスクトップ」と「書類」フォルダは、Macの設定によってはiCloud同期の中です。
理由を説明します。動画のレンダリングは、数千個のファイルを猛烈な速度で読み書きします。同期ソフトはその最中にファイルを転送・退避しようとして、処理とぶつかります。結果、ビルドが途中で黙って死にます。
私はこれを知らずに一晩で4回ビルドを失敗させ、原因究明に1時間溶かしました。
安全な場所の例です。ターミナル(Macなら「ターミナル.app」)でこの2行を打てば、ホーム直下に作業場ができます。
mkdir -p ~/videos/my-first-video
cd ~/videos/my-first-video
mkdir -p は「フォルダを作る」、cd は「そこへ移動する」です。ターミナルが怖い方は、この2行だけ覚えれば足ります。あとはAIに任せられます。
ステップ1:環境を整える(指示文コピペ可)
必要なものは Node.js だけです。入門編でアプリを作ったときに入れたもので、未導入なら https://nodejs.org からLTS版を入れてください。確認はこの1行です。
node -v
v22 など数字が出ればOKです。あとはAIにこう指示します。
このフォルダにRemotionのプロジェクトを作って。
- React 19、Remotion 4系
- 日本語はシステムフォント(Hiragino Sans)で表示
- 1920x1080・30fpsの空のコンポジションをひとつ
- package.json に preview / still / render のスクリプトを定義して
AIが package.json(プロジェクトの設計書)を書き、npm install で部品を取り寄せます。1〜2分で終わります。
フォントについて補足。Macなら Hiragino Sans(ヒラギノ)が最初から入っているので、日本語表示に追加の設定は不要です。Windowsの方は指示文の該当行を「日本語は Noto Sans JP をWebフォントで」に差し替えてください。
ステップ2:一言指示で構成とコードを作らせる
けんすうさんの指示は「なんかGoogle I/Oについての動画を作ってよ」でした。実は、この丸投げでもそれなりのものが出ます。
ただ、私のおすすめは参考にしたい動画の特徴を3行だけ添えることです。1本目で私が出した指示の実物がこちらです。
AMPL learnの紹介動画を作って。60秒・1920x1080・30fps。
参考: 情報番組風の解説動画。クリーム色のドット背景、
番号付き見出し、箇条書きが順に飛び出す、下部に黒い字幕バー。
構成は タイトル → 数字で実績 → 紹介項目を順に → 締めにURL。
ポイントは最後の1行です。構成(シーンの並び)まで渡すと、AIの設計が一発で安定します。
逆に色や動きの細部は、まだ指定しなくて構いません。あとからいくらでも直せるのがコード動画の強みです。

ここでAIが書くコードの「骨格」だけ、雰囲気を見ておきます。読めなくてまったく問題ありません。どこを直してほしいか指させるようになることが目的です。
<Composition
id="MyVideo" // 動画の名前
component={MyVideo} // 画面の設計図
durationInFrames={1800} // 長さ: 1800コマ = 60秒
fps={30} // 1秒あたり30コマ
width={1920}
height={1080}
/>
たとえば尺を半分にしたければ、durationInFrames を 900 にするだけです。「durationInFramesを900にして」と言葉で指示してもいいし、自分で書き換えても構いません。
ステップ3:プレビューで「動き」を見る
コードができたら、レンダリングの前に動くプレビューで確認します。
npx remotion studio
ブラウザに編集スタジオが開き、動画を再生・一時停止・コマ送りできます。実際の画面がこれです。

中央が動画のプレビュー、下の帯がタイムライン(シーンや音の時間配置)です。ここで見るのは動きのタイミングだけです。「ピルが出るのが遅い」「シーンの切り替えが急だ」といった感想を、そのままAIに伝えてください。
2シーン目、カードが出揃うのが遅い。
登場の間隔をいまの半分にして、テンポを上げて。
この往復が、動画づくりの中心作業です。感想は素人の言葉で構いません。「もたつく」「うるさい」「寂しい」で通じます。
ステップ4:スチル検証で「止め絵」を固める
動きの次は、止め絵の品質です。ここで、このレッスンでいちばん効く手順を紹介します。
60秒の動画のレンダリングには数分かかります。出来上がってから「見出しの位置が変だ」と気づくと、修正のたびに数分待つことになります。
そこで、シーンごとに1コマだけ画像として書き出して確認します。
npx remotion still src/index.ts MyVideo preview.png --frame=420
--frame=420 は「420コマ目(30fpsなら14秒地点)を画像にして」という意味です。シーンが9個あるなら9枚、代表フレームを書き出します。AIへの指示はこうです。
各シーンの代表フレームをスチルで書き出して。
私が確認してOKを出したら、フルレンダリングして。
スチルを見るときの確認観点を、チェックリストにしておきます。
- 文字の端切れはないか(特に長いタイトル)
- 文字と背景のコントラストは十分か(薄い色の文字は動画で死にます)
- 要素同士の間隔は揃っているか
- 画面の四隅に変な余白や、はみ出しがないか
- 数字・固有名詞に誤りがないか(拡散してからでは遅い)

「スチルで全シーン確認してから、レンダリングは最後に1回」。この順番にするだけで、待ち時間が10分の1になります。
ステップ5:レンダリングしてmp4にする
スチルがすべてOKになったら、動画にします。
npx remotion render src/index.ts MyVideo out/video.mp4 --concurrency=4 --timeout=120000
オプションを2つ付けています。意味を知っておくと、トラブル時に慌てません。
--concurrency=4:同時に処理するコマ数。パソコンが他の作業で忙しいときは数字を下げると安定します--timeout=120000:1コマあたりの待ち時間上限(ミリ秒)。画像の多い動画では延ばしておくと安全です
数分待つと、out/video.mp4 が生まれます。
完成した1本目が、これです。48秒・無音版。観てみてください。
レッスン1の完成版と比べると、マスコットが手描きで、動きも音もまだ素朴です。それでも、ここまで来れば残りは磨くだけ。この「素朴な1本目」を恐れずに作り切ることが、このレッスンのゴールです。
つまずき対処:実際に起きた3つ
私が実際に踏んだものだけ載せます。
その1:レンダリングが途中で止まる・黙って死ぬ
まずステップ0を疑ってください(同期フォルダの中で作業していないか)。次に --concurrency=4 --timeout=120000 を付けて再実行。それでも駄目なら、他のアプリを閉じてから再実行です。
その2:「Unable to acquire lock」というエラー
前回のレンダリングが異常終了して、鍵(ロックファイル)が残っています。AIに「.next や .remotion のロックファイルを消して再実行して」と頼めば解決します。
その3:日本語が豆腐(□□□)になる
フォントが見つかっていません。Macならステップ1の指示文どおり Hiragino Sans 指定で直ります。それ以外の環境では「Noto Sans JP をWebフォントで読み込んで」と指示してください。
今日のまとめ
3行で振り返ります。
- 作業フォルダは同期の外。これだけで原因不明のビルド死をほぼ全部防げる
- 指示は丸投げより「参考の特徴3行+構成1行」。細部は後から直すほうが速い
- プレビューで動き → スチルで止め絵 → レンダリングは最後に1回。この順番が時短の核心
次のレッスンでは、できあがった画面を6つの部品に分解します。部品の名前を知ると、今日の「感想ベースの指示」が「部品名での指示」に進化します。
演習(30分)
レッスン1で決めた題材で、実際に1本作ってみましょう。
- ステップ0〜2を実行する(題材はあなたのサービス・部署・趣味、何でも可)
npx remotion studioで再生し、感想を3つAIに伝えて直してもらう- スチルを全シーン書き出し、チェックリストの5項目を確認する
- レンダリングして、できたmp4を自分のスマホに送って見てみる
スマホで見る、が地味に重要です。視聴者の9割はスマホで見ます。文字の小ささは、スマホで初めて気づきます。
