Remotion セットアップは何をしますか？

新しい Remotion プロジェクトをスキャフォールディングし、残りのワークフローが「Claude にプロンプトを送るだけ」になるように設定します。これは一度だけ行う環境構築作業です。プロジェクトごとに一度実行すれば、その後 remotion-compose や remotion-render は直接クリエイティブなループに入ります。

積極的にトリガーしてください。ユーザーが Claude で動画を作る ことについて何か言った場合 – 「Remotion をセットアップ」「Remotion プロジェクトを作成」「Claude で製品動画を作りたい」「動画プロジェクトを開始」 – このスキルを実行します。

ステップ 1 – ツールチェーンの確認

Remotion はヘッドレス Chromium でレンダリングするため、スキャフォールディングの前に Node を確認します：

node --version   # >= 16 が必要。アクティブな LTS リリースを推奨

Node が 16 より古い場合は停止し、ユーザーにアップグレードするよう伝えてください（nvm：nvm install --lts && nvm use --lts）。また npx が利用可能であることも確認します（npm 5.2+ に同梱）。

ステップ 2 – プロジェクトのスキャフォールディング

npx create-video@latest

これは対話形式です。Blank（Hello World）テンプレートを推奨します – 製品動画に最もクリーンなベースです。CLI がプロジェクトディレクトリとパッケージマネージャーを尋ねるので、ユーザーに選んでもらい、新しいフォルダに cd してインストールします：

cd <project-name>
npm install

ステップ 3 – Remotion エージェントスキルのインストール

Claude Code がこのリポジトリで Remotion 独自のスキルコンテキストを利用できるようにします：

npx remotion skills add remotion

これにより Remotion のエージェントスキルファイルがプロジェクトに配置されます。インストールされている Remotion バージョンでコマンドが利用できない場合は、ユーザーに新しい @remotion/cli を案内し、続行します – これは便利機能であり、必須の依存関係ではありません。

ステップ 4 – フォルダ規約の確立

後続のスキルが常に場所を認識できるように、レイアウトを標準化します：

src/
  Root.tsx              # すべての <Composition> を登録（エントリレジストリ）
  index.ts              # registerRoot(RemotionRoot)
  compositions/         # ビデオごとに 1 つの .tsx ファイル – remotion-compose がここに書き込む
public/
  assets/               # 画像、ロゴ、音声 – staticFile() 経由で参照

テンプレートが作成していない場合はフォルダを作成します：

mkdir -p src/compositions public/assets

src/Root.tsx がレジストリです。すべてのビデオはここに登録された <Composition> です：

// src/Root.tsx
import { Composition } from "remotion";
import { HelloWorld } from "./compositions/HelloWorld";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="HelloWorld"
      component={HelloWorld}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

// src/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

登録する際の適切なデフォルト：ランドスケープ製品動画には 30 fps、1920x1080（縦型ソーシャルには 1080x1920）、短い尺 – 30 fps で 90 フレームは 3 秒で、ほとんどの製品デモ動画は 15 ～ 60 秒（450 ～ 1800 フレーム）に収まります。

ステップ 5 – Google Font の読み込み

Remotion は Google Fonts を第一級でサポートしており、テキストが決定的にレンダリングされます。一度インストールして読み込みます：

npm install @remotion/google-fonts

// コンポジションファイルの先頭付近で読み込む
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// その後： <div style={{ fontFamily }}>...</div> のように使用

loadFont() はフォントの準備ができるまでレンダリングをブロックするため、画面テキストがスタイル未設定のフォールバックで一瞬表示されることはありません。ブランドに合ったフォントを選んでください – Inter を Poppins、Roboto などに置き換えてください。

ステップ 6 – スモークテストのコンポジション

環境がエンドツーエンドでレンダリングされることを確認するために、簡単なコンポジションを書きます：

// src/compositions/HelloWorld.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B0B0F", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontFamily, color: "white", fontSize: 90, opacity }}>
        It works.
      </h1>
    </AbsoluteFill>
  );
};

これが src/Root.tsx（ステップ 4）に登録されていることを確認し、レンダリングします：

npx remotion render src/index.ts HelloWorld out/smoke-test.mp4

最初のレンダリングではヘッドレス Chromium をダウンロードします（数百 MB – 通常の回線で数分の一度だけの待ち時間が発生します）。その後、この 90 フレームのスモークテストは 1 分以内にレンダリングされるはずです。out/smoke-test.mp4 がフェードインするタイトルを再生できれば、環境は正常です。レンダリングに失敗した場合、ほとんどの原因は (a) Chromium のダウンロード/パーミッション、(b) コンポジションが Root.tsx に登録されていない、(c) ステップ 1 の Node バージョンの問題です。

ステップ 7 – プレビュー用に Remotion Studio を起動

インタラクティブプレビュー（タイムラインのスクラブ、編集のホットリロード）の場合：

npx remotion studio

これにより Studio が http://localhost:3000 で提供されます。create-video テンプレートは npm run dev も同じものに割り当てます。反復作業中は Studio を実行したままにしてください – コンポジションファイルの編集は即座にホットリロードされます。

成果物

ユーザーは動作する Remotion プロジェクトを手に入れます：src/compositions/ + public/assets/ のレイアウトが配置されたスキャフォールド済みリポジトリ、Remotion エージェントスキルのインストール、Google Font の配線、登録済みスモークテストコンポジション、実際に再生できるレンダリング済み out/smoke-test.mp4、そしてプレビュー用に実行中の Remotion Studio。スモークテストの MP4 が存在して再生されるまで、「セットアップ完了」ではありません。

やってはいけないこと

Node チェックをスキップしてスキャフォールディングしない – 16 未満の Node では、Chromium レンダリングの深い部分で混乱するエラーが発生し、インストール時には失敗しません。
スモークテストをレンダリングせずにセットアップ完了と宣言しない – コンパイルはできても MP4 を一度も生成したことがないプロジェクトは、Chromium パイプラインが動作することを証明できていません。
コンポジションやアセットをアドホックな場所に置かない – 後続のスキール（remotion-compose、remotion-render）は src/compositions/ と public/assets/ が存在することに依存しています。
アセットを相対パスや URL で参照しない – public/ から staticFile() を使用してください。そうしないと、ローカルでは動作しても他の場所では壊れます。
画面テキストにシステムフォントや CSS インポートフォントを使用しない – loadFont() でブロックしないと、レンダリングマシンでフォールバックフォントでテキストがレンダリングされる可能性があります。
製品動画に機能過多のテンプレートを選ばない – Blank テンプレートは、後でユーザーが削除する必要のあるデモコードを避けられます。

品質基準

node --version が 16 以上であり、スキャフォールディング前にチェック済みであること。
out/smoke-test.mp4 が存在し、フェードインするタイトルを再生できること。
フォルダ規約が指定通りに正確に存在し、スモークコンポジションが src/Root.tsx に登録されていること。
テキストが @remotion/google-fonts の loadFont() を通じてレンダリングされ、システムフォールバックではないこと。
Remotion Studio が localhost:3000 で起動し、編集をホットリロードすること。

引き継ぎ

スモークテストがレンダリングされ、Studio が起動したら、ユーザーにプロジェクトの準備ができたことを伝え、引き継ぎます：「セットアップは完了しました。希望する動画 – 尺、シーン、ブランドカラー – を説明してください。コンポジション（remotion-compose）を作成し、レンダリングと反復（remotion-render）を行います。」

Remotion セットアップ