Claude Opus 5.5とRemotion：コード生成型プロダクト動画の完全ワークフロー

先に結論です。 Claude Opus 5.5とRemotionの組み合わせは、製品紹介、UIアニメーション、コード解説、データ可視化、リリース動画、再利用可能なマーケティングテンプレートに向いています。Opus 5.5が要件を理解してReact/TypeScriptコードを書き、Remotionがそのコードをフレーム単位で動画にします。どちらも拡散型の動画生成モデルではないため、プロンプトだけで写実的なMP4が返る仕組みではありません。

人物の演技、実写に近い背景、映画的なカメラワーク、コードで安定して記述できない映像が中心なら、その素材は撮影または別工程で生成します。RemotionやHyperFramesは、その後の字幕、トランジション、ブランド表現、複数版の組み立てに使うのが適切です。

本稿は現行の公式ドキュメントに基づく手順です。成功の基準は、自分のPCまたはCIでMP4が実際にレンダーされ、検証に通ることです。未確認のSNSデモ、固定レンダー時間、固定の「1本当たり料金」は根拠として扱いません。

1分で選ぶ

やりたいこと	最初の候補	理由
製品ツアー、UI、コード、グラフ	Remotion	Reactのコンポーネント、props、タイムライン、レンダー手段が成熟
HTML/CSS中心のモーショングラフィックス	HyperFrames	HTMLを直接書けて、Agentからの引き継ぎが軽い
1テンプレートから多数の動画	どちらも候補	入力をパラメータ化すれば決定論的にレンダーできる
人物や場所を写実的に表現	別の素材制作工程	コード生成動画の得意領域ではない
再利用しない短い動画1本	最小プロトタイプ	Batch基盤を先に作る必要はない

判断基準は「AIが動画を作れるか」ではなく、各フレームをコード、素材、データ、時間で説明できるかです。Web画面、スライド、ダッシュボード、コードエディタ、字幕、ブランドアニメーションに近いほど、この方式が有効です。

Claude Opus 5.5が担当する範囲

Anthropicは2026年9月22日にClaude Opus 5.5を公開しました。APIの正確なモデルIDはclaude-opus-5-5です。このワークフローでは次を担当できます。

1. briefをシーン、コンポーネント、時間、合格条件に分解する。
2. RemotionまたはHyperFramesの複数ファイルを編集する。
3. ハードコードされた内容をprops、JSON、マニフェストへ移す。
4. 型チェック、プレビュー、レンダーを実行し、ログから原因を修正する。
5. 複数バリアントでデザインルールを維持する。

重要な境界は、モデルが返すのはテキスト、コード、パッチであり、完成MP4ではないことです。実際のレンダーはローカルPC、CI runner、サーバー、Remotion Lambda、HyperFramesの環境などで行います。モデルのToken料金と、CPU、Chrome、FFmpeg、ストレージ、通信の料金は別に計測します。

プロンプトより先にbriefを固定する

brief.mdに、検証可能な完成条件を書きます。

# 動画ブリーフ

- 目的：ユーザーがAPIキーを作成し、最初のリクエストを送る手順を説明する。
- 対象：初めて製品を評価する開発者。
- 形式：1920x1080、30 fps、8秒、音声なし。
- Composition ID：ProductExplainer
- シーン：
  1. 課題と約束、0〜2秒
  2. 3ステップの製品フロー、2〜6秒
  3. 最終結果とCTA、6〜8秒
- 入力：productName、headline、steps、accentColor、スクリーンショットのパス
- 制約：ローカル素材だけを使い、レンダー中はネットワークにアクセスしない。
- 合格条件：
  - テキストがセーフマージン内に収まる。
  - コンソールエラーがない。
  - CLIからCompositionをMP4へレンダーできる。
  - props.jsonを変えるだけで2つ目のバリエーションをレンダーできる。

解像度、FPS、長さ、Composition ID、素材パス、ネットワーク可否、検証コマンドはAgentに推測させず、入力として明示します。

Remotion公式手順で最小プロジェクトを作る

Node.jsとClaude Codeを用意し、RemotionのCoding Agentsガイドに従って実行します。

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

別のターミナルで同じリポジトリを開きます。

cd my-video
claude

最初から大規模な動画プラットフォームを依頼せず、外部素材に依存しない8秒のCompositionを1つだけ作ります。

編集前にbrief.mdを読み、既存のRemotionプロジェクトを確認してください。
正確なIDがProductExplainerのCompositionを1つ作成してください。
1920x1080、30 fps、240 framesを使用します。
React、CSS、inline SVGだけで、3シーンの簡潔な製品説明動画を作成してください。
CompositionはproductName、headline、steps、accentColorをpropsとして受け取り、
Studioプレビュー用の適切なdefault propsも持たせてください。
すべてのテキストを120pxのセーフマージン内に収め、レンダー時にリモート素材を取得しないでください。
各frameを決定論的に再現できるよう、frameベースのRemotion APIでアニメーションしてください。
編集後に変更ファイル、プレビューコマンド、正確なレンダーコマンドを報告してください。
レンダーコマンドがexit code 0で終了するまでは成功と報告しないでください。

Composition IDを固定すると自動化が安定します。アニメーションをフレーム基準にすると再現性を保てます。最初はローカル素材だけにすることで、CORS、ネットワーク、期限切れURLを切り分けから外せます。

プレビュー、レンダー、成功判定

Remotion StudioでProductExplainerが最後まで再生されることを確認し、CLIで出力します。

npx remotion render ProductExplainer out/product-explainer.mp4

最低限の成功条件は次の通りです。

1. コマンドの終了コードが0。
2. out/product-explainer.mp4が存在し、再生できる。
3. 文字切れ、空フレーム、未読込素材がない。
4. ターミナルとブラウザコンソールに未処理例外がない。
5. 2本目はコンポーネントを変更せず、propsの変更だけでレンダーできる。

メタデータも確認します。

ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration \
  -of json out/product-explainer.mp4

これによりCIは、長さ0、誤った解像度、動画ストリームなしのファイルを拒否できます。

propsでテンプレート化する

props.jsonを作成します。

{
  "productName": "Acme API",
  "headline": "3ステップで最初のリクエスト",
  "steps": [
    "APIキーを作成",
    "モデルを選択",
    "リクエストを送信"
  ],
  "accentColor": "#6D5EF9"
}

レンダーします。

npx remotion render ProductExplainer out/acme-api.mp4 --props=props.json

Remotionは、WindowsのShellではインラインJSONの引用符が壊れる場合があると説明しています。クロスプラットフォームではファイル渡しが安全です。多言語版ではコンポーネントを複製せず、表示と内容を分離します。

src/
  components/
  ProductExplainer.tsx
  Root.tsx
content/
  en.json
  ru.json
  de.json
public/
  screenshots/
render-manifest.json

コンポーネントが見た目と動きを担当し、言語ファイルがテキストと素材パスを担当し、マニフェストがlocale、props、出力名を結びます。

レンダー失敗の切り分け

まず詳細ログを有効にします。

npx remotion render ProductExplainer out/debug.mp4 --log=verbose

並列処理でログが重複する場合は一時的に1スレッドにします。

npx remotion render ProductExplainer out/debug.mp4 \
  --log=verbose \
  --concurrency=1

次の順で確認します。

1. Composition IDの大文字小文字を含む完全一致。
2. まずdefault props、次に外部JSON。
3. 動画、フォント、グラフ、複雑な効果を1つずつ外す。
4. 対話ブラウザとheadless Chromeの差、CORS、証明書、GPU/WebGLを確認する。
5. 非同期素材の待機が終了するか確認する。
6. コマンド、props、commit、最初の原因エラー、環境バージョンを保存する。

Agentへ戻すときは、重複した数百行ではなく、正確なコマンドと最初の原因を渡します。原因説明、最小パッチ、同じ検証コマンドの再実行を求めます。

Remotion、HyperFrames、拡散型動画の選択

HyperFramesはHeyGenのオープンソースHTMLネイティブ動画フレームワークです。HTML、CSS、メディア、seek可能なアニメーションを決定論的なMP4へ変換します。

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

現行READMEの要件はNode.js 22+とFFmpegです。GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI、独自アダプターを利用できます。

比較軸	Remotion	HyperFrames	拡散型動画
オーサリング	React/TypeScript	HTML/CSS/JS	テキスト、画像、動画プロンプト
再現性	入力固定なら高い	設計上高い	低め
得意分野	UI、コード、データ、複雑なテンプレート	Web系モーション、Agent引き継ぎ	人物、実写風の場所、映画的映像
パラメータ	props、データ、コンポーネント	data attributes、HTML、Script	モデル設定と素材
主な費用	開発とレンダー	開発とレンダー	生成と後処理

Reactチームや長期運用する複雑な部品にはRemotion、読みやすいindex.htmlで十分なWeb系表現にはHyperFramesを試します。写実素材は別工程で作り、最後の組み立てにコード動画を使います。

大量生成ではAPIは1工程にすぎない

安全な構成は次の5層です。

ブリーフ / 素材 / ブランドルール
            ↓
Claude API：コードやパッチの生成・修正
            ↓
検証：schema、allowlist、typecheck、lint、レビュー
            ↓
RemotionまたはHyperFramesのレンダーワーカー
            ↓
ffprobe / 目視確認 / 保存 / 公開

モデル出力をそのまま本番サーバーで実行しません。書き込み先を制限し、秘密をプロンプトに入れず、依存関係を固定し、新しいコマンドを審査し、隔離環境でビルドします。AnthropicのMessage Batches APIはMessagesリクエストを非同期処理する機能であり、動画レンダーキューではありません。

API Keyを表示せずに読み取ります。

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

python -m pip install anthropic

briefs.json：

[
  {
    "id": "launch-en",
    "brief": "content/en.jsonを使って英語版のパッチを作成してください。"
  },
  {
    "id": "launch-de",
    "brief": "content/de.jsonを使ってドイツ語版のパッチを作成してください。"
  }
]

作成、endedまでのpolling、custom_idごとの保存を行う完全な例です。返却順は入力順と一致しない場合があります。

#!/usr/bin/env python3
import json
import time
from pathlib import Path

import anthropic
from anthropic.types.message_create_params import MessageCreateParamsNonStreaming
from anthropic.types.messages.batch_create_params import Request

MODEL = "claude-opus-5-5"
briefs = json.loads(Path("briefs.json").read_text(encoding="utf-8"))
client = anthropic.Anthropic()

requests = []
for item in briefs:
    requests.append(
        Request(
            custom_id=item["id"],
            params=MessageCreateParamsNonStreaming(
                model=MODEL,
                max_tokens=8000,
                system=(
                    "あなたはコード生成動画プロジェクトを保守します。 "
                    "簡潔な実装計画とunified diffを返してください。 "
                    "秘密情報や、未知のコードをダウンロードして実行するコマンドを含めないでください。"
                ),
                messages=[{"role": "user", "content": item["brief"]}],
            ),
        )
    )

batch = client.messages.batches.create(requests=requests)
Path("batch-id.txt").write_text(batch.id, encoding="utf-8")
print(f"作成: {batch.id}")

while True:
    current = client.messages.batches.retrieve(batch.id)
    if current.processing_status == "ended":
        break
    print(f"処理中: {current.request_counts}")
    time.sleep(60)

out_dir = Path("batch-results")
out_dir.mkdir(exist_ok=True)

for result in client.messages.batches.results(batch.id):
    outcome = result.result
    if outcome.type == "succeeded":
        text = "".join(
            block.text for block in outcome.message.content if block.type == "text"
        )
        (out_dir / f"{result.custom_id}.txt").write_text(text, encoding="utf-8")
        print(f"保存: {result.custom_id}")
    else:
        print(f"未保存: {result.custom_id} -> {outcome.type}")

レビューしてパッチを適用した後、検証済みディレクトリをCIでレンダーします。

for dir in variants/*; do
  [ -d "$dir" ] || continue
  (
    cd "$dir"
    npm ci
    npx remotion render ProductExplainer \
      "out/$(basename "$dir").mp4" \
      --props=props.json
  )
done

現在、1 Batchは最大100,000リクエストまたは256 MBです。多くは1時間未満で完了しますが、処理は最大24時間続き、未完了はexpiredになります。結果は作成から29日間利用できます。custom_idで対応付け、errored、canceled、expiredを成功扱いしません。

Token種別ごとに費用を計算する

以下は2026年9月28日に確認した、100万Token当たりUSD、正確なモデルIDclaude-opus-5-5の価格です。

課金項目	Anthropic標準	BetterToken標準実効価格	定義
通常入力	$4.00	$2.72	Cacheから読まれない入力
出力	$20.00	$13.60	モデルが生成するToken
5分Cache書き込み	$5.00	$3.40	5分Cacheへの初回書き込み
1時間Cache書き込み	$8.00	$5.44	1時間Cacheへの初回書き込み
Cache読み取り/更新	$0.20	$0.136	保存済みprefixの再利用

BetterTokenの公開設定は、tierの基本価格に現在のClaudeグループ倍率0.68を掛けます。model_ratio=0を無料と解釈してはいけません。実装前にBetterToken料金とAnthropic料金を再確認してください。

model_cost =
  input_tokens / 1,000,000 × input_price
+ output_tokens / 1,000,000 × output_price
+ cache_write_5m_tokens / 1,000,000 × cache_write_5m_price
+ cache_write_1h_tokens / 1,000,000 × cache_write_1h_price
+ cache_read_tokens / 1,000,000 × cache_read_price

20件のbriefが各30,000入力Token、8,000出力Token、Cacheなしの場合：

• Anthropic標準同期：$5.60
• Anthropic Batch：入力と出力が50%割引なので約$2.80
• BetterToken標準実効同期：$3.808

これは同じToken量でのモデル費用比較であり、完成動画の固定価格ではありません。再試行、CPU/GPU、Chrome、ストレージ、通信、素材制作、目視確認は別です。

BetterTokenを使う場合の境界

BetterTokenはClaude Code向けAnthropic-compatible経路として評価できます。現在のClaude Code Base URLはhttps://bettertoken.aiで、各ユーザーが自分のアカウントとAPI Keyを作成します。Claude.aiやClaude Maxのサブスクリプションではありません。

/v1/messages対応だけでは、BetterTokenがMessage Batchesと互換であることを証明できません。そのため上記Batch例はAnthropic公式APIだけを根拠にしています。BetterTokenがBatch用の契約、endpoint、制限、課金を明示するまでは、Base URLだけ変更して利用可能と判断しないでください。

ロシアの利用者にはロシア語ドキュメントとルーブル支払いがありますが、支払い方法、最低額、為替、手数料、反映時間は決済時の画面が基準です。

本番前チェックリスト

• 目的、対象、形式、シーン、合格条件をbriefに記載。
• 素材をローカル化し、権利、フォント、Screenshot版を固定。
• 1つのCompositionをパラメータ化し、言語内容を分離。
• lockfileをcommitし、CIはnpm ciを使用。
• CLI render、ffprobe、目視確認をすべて通す。
• 失敗時にコマンド、props、log、commit、環境を保存。
• モデルIDをclaude-opus-5-5に固定。
• 入力、出力、Cacheを分けて計測。
• Batch前に1〜2件の同期requestで形式を確認。
• Batch結果をcustom_idで結合。
• モデル費用とレンダー費用を別に監視。

次に行うこと

同じ8秒のbriefを、Remotion BlankプロジェクトとHyperFrames HTMLで1回ずつ作ります。最初の有効MP4までの時間、2版目の修正量、10回連続レンダーの失敗率だけを比較してください。その結果を見てからprops、CI、Batchを追加します。

まず再現可能で、検証済みで、パラメータ化された1本を作ることが、100本への最短ルートです。

公式資料

• Claude Opus 5.5
• Anthropic料金
• Anthropic Messages API
• Anthropic Message Batches
• Remotion Coding Agents
• Remotion CLI render
• Remotion parameterized rendering
• Remotion render troubleshooting
• HyperFrames公式リポジトリ
• BetterToken料金