remotion-motion-graphics

Remotion モーショングラフィックス

Remotion は React コンポーネントを動画にレンダリングします。useCurrentFrame() は、コンポーネントが描画しているフレームを伝えます。アニメーションはすべて、その数値だけを基にした純粋関数です。タイムラインもキーフレーム UI もありません。そのため、グラフィックスをデータ駆動型で再利用可能にでき、アルファチャンネル付きで実際にレンダリングできます。

すでに、十分なモーションコードを書く方法はご存じでしょう。このスキルは、見落としやすく、間違えると修正に手間がかかる次の 3 つに取り組むためのものです。磨き込む前に実際のバグを見つけること、作ったものを検証すること、そして気付かないうちに失敗する落とし穴を避けることです。

装飾する前に原因を特定する

グラフィックが「平坦に感じる」「PowerPoint のように見える」ときは、スプリングを追加する前に欠陥を探してください。「感じ」の問題は、ユーザーには見えていても、うまく言葉にできない実際のバグであることがよくあります。

実例があります。統計のコールアウトがカウントアップした後、「そのまま止まってしまう」という問題です。実際の原因は、クランプを指定せずに interpolate(frame, [0, 60], [0, 12400]) を使っていたことでした。Remotion はデフォルトで外挿するため、数値は 12.400 で止まらず、最終フレームでは 30.793 まで増えていました。統計値が間違っていたのです。弾むような登場アニメーションを加えていたら、誤った数値を表示する美しいグラフィックを出荷していたでしょう。

まず既存のコードを読み、フレーム 0、中間フレーム、durationInFrames - 1 で実際に何が計算されるかを確認し、壊れている部分を修正してください。その後で美しく仕上げます。references/traps.md には、ソースコードを見るだけでは問題がなさそうに見える失敗例がまとめられています。アニメーションコードを変更する前に読み、作業後にも自分の成果物を照らし合わせて確認してください。

作ったものを検証する

全編をレンダリングして間違いに気付くのは時間のかかる方法です。まず静止画を確認してください。

npx remotion still <CompId> out/check.png --frame=45

数分ではなく、数秒で済みます。登場の途中、見せ場、中間の静止、退場の途中など、重要なフレームを確認し、ファイルが存在することを確かめるだけでなく、画像を見てください。最も省略されやすい一方で、恥ずかしいミスを見つけられる手順です。要素が登場しない、グローがフレーム 0 から点灯したまま、テキストがコンテナに切り取られている、といった問題を検出できます。

アルファについては、Studio のチェッカーボードが証拠になります。エディターに拒否される ProRes をレンダリングする前に、そこで確認してください。

ツールチェーンを本当に実行できない場合は、まとめにその旨を明記してください。「これまで一度も実行されていない」は重要な情報であり、脚注ではありません。

仕上がりのチェックリスト

デフォルトで適用してください。判断に迷うケースについては、その理由が references/polish.md に記載されています。

• 登場 → 静止 → 退場を完成させる。 フレーム 0 では画面に何もなく、最後のフレームでは動いているものが残らないようにします。退場の時間は再生時間の中に確保してください。素人っぽさが最もはっきり出る点です。
• リニアにはしない。 まず spring() を使います（予備動作、オーバーシュート、収束）。interpolate が必要な場合は Easing を使います。
• ずらして配置する。 30fps で 3～5 フレームずつ間隔を空け、登場と退場の両方で同じ順序にします。
• 静止中にも動きをつける。 ゆるやかな浮遊、ゆっくりしたグローの脈動、光の走査など。感じられる程度にとどめ、目立たせすぎないようにします。
• 重要な瞬間を際立たせる。 キーとなる瞬間にスケールのポップ、グロー、リング、サウンドを加えます。
• クリップアートではなく、幾何学的な光を使う。 フラッシュ、拡大するリング、細い光の筋、ブルームなどを使います。絵文字や粒子のクリップアートは、すぐに安っぽく見えます。アクセントは 1 つにし、3 つも使わないでください。
• 読みやすさを保つ。 タイトルセーフエリアとして 5～10% の余白を確保します。映像の上にテキストを重ねる場合は、その背後にスクリーンやシャドウを配置します。主役となる要素は 1 つにします。長い文字列ははみ出させず、縮小して折り返します。
• コンテンツに合わせてタイミングを調整する。 短い行を読む時間として、1 行あたり約 1 秒を目安にします。指定された長さを守ってください。
• データ駆動型にする。 テキスト、色、数値、画像を props として扱い、zod スキーマと defaultProps を用意します。そうすれば、コードに触れずに Studio からスタイルを変更できます。
• キャンバスに対する相対サイズ（useVideoConfig()）と、タイミング指定に sec() を使います。そうすれば、4K や縦型のクロップでもレイアウトが崩れません。

サウンド

無音のグラフィックは、最もよくある不足要素です。サウンドは仕上がりの印象の約半分を占めますが、誰かが強く求めない限り、追加されることはありません。登場時の柔らかなシュッという音、重要な操作時のクリック音、成功時のチャイム音、退場時のスッという音などです。

<Sequence from={sec(0.5)}>
  <Audio src={staticFile('audio/whoosh.mp3')} volume={0.6} />
</Sequence>

ソースファイルの先頭にある無音部分をトリミングしてください。80msの無音部分があるファイルは、Sequenceをどこに配置しても80ms遅れて再生されます。これは、アニメーションは正しく見えるのに音声が「ずれている」と感じる、よくある原因です。タイピングやカウントには、再生時間全体を通して連続する柔らかな音を使ってください。文字ごと、数字ごとに同じ効果音を鳴らすと耳障りになります。

public/audio/がない場合は、勝手に作らないでください。サウンドは次に効果の大きいアップグレードだとユーザーに伝え、ファイルを追加してもらえれば組み込むことを提案してください。

モード

Remotionプロジェクトがない場合（remotion依存関係がない場合）→ スキャフォールドを作成します。references/scaffold.mdを参照してください。

プロジェクトがあり、新しいグラフィックを作成する場合 → src/compositions/にコンポジションを作成し、コンポーネント、スキーマ、defaultPropsをエクスポートして、Root.tsxに一意のIDで登録します。各パターンの動作するコードは、references/patterns.mdを参照してください。

「平坦な印象がする」場合 → まず診断し（上記を参照）、次に優先順位に沿ったアップグレードの手順について、references/polish.mdを参照してください。

方向性が定まっていない場合は、推測するよりも、2〜3種類のスタイルを手早く試すほうが効果的です。方向性を間違えたまま磨き込むことが、ここでは最も大きな損失になります。

レンダリングとエクスポート

# Full scene → MP4
npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=18

# Overlay with real alpha → Premiere / FCP / DaVinci / AE
npx remotion render <CompId> out/<name>.mov --codec=prores \
  --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png

# Overlay → PNG sequence (CapCut and friends)
npx remotion render <CompId> out/<name>/frame-%04d.png --image-format=png

# Live preview
npm run studio

参考資料

• references/traps.md — サイレントな失敗について説明しています。アニメーションコードを書く前に読んでください。
• references/patterns.md — 動作するコード：登場／退場、スプリング、スタッガー、アルファ、音声、フォント、自動フィット、シーン。
• references/polish.md — 平坦な印象のグラフィックを、効果の大きさに応じてアップグレードする手順。
• references/scaffold.md — プロジェクトをゼロから作成します。