Claude Code × Remotion｜解説アニメ動画を自分で作れるようにする伴走

このプランについて

Claude Code と Remotion（Reactで動画を作るフレームワーク）を使って、TED-Ed のような解説アニメーション動画を自分の手で作れるようになるための伴走プランです。

「Remotion は動かせるようになったが、参考にしたい海外チャンネルのような表現になると急に手が止まる」——ここを一緒に越えるためのプランです。

こんな方向け

• Claude Code と Remotion をひととおり触れるが、発展的な表現に進めずにいる
• 参考にしたい動画はあるが、何をどう分解すれば再現できるのかが分からない
• 手描き風・キャラクターアニメ・カメラワークなど、表現ごとの難易度の差を知りたい
• 1本作って終わりではなく、同じ作りで量産できるテンプレートにしたい
• AIに書かせたコードが動かないとき、どこを読めばよいかを身につけたい

最初にやること：再現難易度マップ

いきなり作り始めません。参考動画を数十秒単位のシーンに割り、表現の種類ごとに「Remotionだけで再現できる／素材が要る／今は諦めた方が早い」の3段で仕分けた表を作ります。

ここを先に作ると、どこに時間を使うべきかが数字で見えます。 私の経験上、参考動画の8割は Remotion の interpolate / spring と SVG の組み合わせで足り、残り2割に工数の大半が集中します。その2割を先に特定するのが最短経路です。

扱う内容

• Remotion の表現：interpolate / spring によるモーション、シーン遷移、カメラワーク風のトランスフォーム、Sequence によるタイムライン設計
• 素材の作り方：SVG／Lottie の使い分け、生成AIで作った静止画をアニメーションさせる方法、素材のライセンス上の注意点
• 音まわり：ナレーション音声とアニメーションの尺合わせ、字幕・テロップの自動生成
• Claude Code の使い方：仕様を渡してコンポーネントを書かせるときの指示の切り方、AIが書いたコードのレビューの観点、壊れたときの切り分け手順
• 書き出しと量産：@remotion/renderer によるバッチ書き出し、データ差し替えだけで別の動画を作るテンプレート化

私が実際にやっていること

• 生成AIによる動画の自動生成パイプライン（素材生成 → 編集 → 書き出しまでを自動化）を自分で設計・構築し、日常的に動かしています
• ffmpeg での画面録画・エンコードについて、実測値つきの技術記事を公開しています（コマ落ち・CPU時間を計測して構成を入れ替えた記録です）
• 自動化ツールを MITライセンスで公開しています。コードと日英のREADMEをそのまま読める形にしてあります
• 業務自動化のワークフローが n8n の公式ワークフローライブラリに掲載されています

いずれも自分で作って動かしているものです。画面を共有しながら、実物をお見せして説明できます。

進め方

1. 再現したい動画と、いま詰まっている箇所を教えてください
2. 再現難易度マップを作ってお渡しします（初週）
3. 再現しやすいシーンから、実際に手を動かしながら進めます
4. 表現の幅を広げる／テンプレート化して量産できる形にする、へ進みます

丸投げの代行ではなく、ご自身で運用できる状態を目指します。

お願い・注意事項

• ビデオ通話はカメラオフ・画面共有のみで行っています。音声と画面で進めます
• 参考にする既存動画の著作物をそのまま複製する目的のご依頼はお受けできません（表現手法の再現までとします）
• 有料のAPI・ツールの利用料が必要な場合は、事前にお伝えしたうえで進めます
• 深夜・早朝はご返信が翌日になる場合があります
• 成果（再生数・収益）のお約束はできません。 お渡しできるのは作り方と判断の基準です

プログラミングの基礎がある方であれば、Remotion 未経験からでも大丈夫です。まずは再現したい動画を教えてください。