メインコンテンツへスキップ
最初の60秒動画を作る
レッスン 2 / 6|14分で読めます

最初の60秒動画を作る

フォルダ作成から一言指示、プレビュー、スチル検証、レンダリングまで。コピペで使える指示文と全コマンドを、つまずき対処つきで再現する

ここからは手を動かします。

このレッスンの画像は、私が実際に作った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の設計が一発で安定します

逆に色や動きの細部は、まだ指定しなくて構いません。あとからいくらでも直せるのがコード動画の強みです。

1本目の動画の統計シーン。31コース・282レッスン・248点の図解という3枚の数字カードが並ぶ
「数字を3枚のカードで見せる」という構成も、AIが提案したものです。

ここでAIが書くコードの「骨格」だけ、雰囲気を見ておきます。読めなくてまったく問題ありません。どこを直してほしいか指させるようになることが目的です。

<Composition
  id="MyVideo"          // 動画の名前
  component={MyVideo}    // 画面の設計図
  durationInFrames={1800} // 長さ: 1800コマ = 60秒
  fps={30}               // 1秒あたり30コマ
  width={1920}
  height={1080}
/>

たとえば尺を半分にしたければ、durationInFrames900 にするだけです。「durationInFramesを900にして」と言葉で指示してもいいし、自分で書き換えても構いません。

ステップ3:プレビューで「動き」を見る

コードができたら、レンダリングの前に動くプレビューで確認します。

npx remotion studio

ブラウザに編集スタジオが開き、動画を再生・一時停止・コマ送りできます。実際の画面がこれです。

Remotion Studioの実際の操作画面。中央に動画プレビュー、左にコンポジション一覧、下部にタイムラインとBGM・効果音の音声トラックが表示されている
本物のRemotion Studio。下部のタイムラインに、シーンや音声(bgm.wav)が積まれているのが見えます。

中央が動画のプレビュー、下の帯がタイムライン(シーンや音の時間配置)です。ここで見るのは動きのタイミングだけです。「ピルが出るのが遅い」「シーンの切り替えが急だ」といった感想を、そのまま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本目の動画のコース紹介シーン。番号付き見出し、3つの箇条書きピル、右側にブラウザ風ウィンドウ内の図解
スチルで確認した1コマ。この段階で文字サイズや余白を直しておきます。

「スチルで全シーン確認してから、レンダリングは最後に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本作ってみましょう。

  1. ステップ0〜2を実行する(題材はあなたのサービス・部署・趣味、何でも可)
  2. npx remotion studio で再生し、感想を3つAIに伝えて直してもらう
  3. スチルを全シーン書き出し、チェックリストの5項目を確認する
  4. レンダリングして、できたmp4を自分のスマホに送って見てみる

スマホで見る、が地味に重要です。視聴者の9割はスマホで見ます。文字の小ささは、スマホで初めて気づきます。