【Claude Code】動画を作る方法を初めての1本から上級者向けの仕組み作りまで紹介
公開日: 2026年10月15日 · 読了目安 18 分
Claude Code と Claude Opus 5.5 で、モーショングラフィックスの動画を作る方法です。動画ができる仕組み、準備、一行プロンプトから始める初心者向けの手順、seek(t) で描く自作エンジン、バネの動き、音の同期、自己チェック、スキル化までを、コード付きで紹介します。
Claude Code で動画を作る人が X で一気に増えている
最近の X のタイムラインで、AI が作ったプロダクト動画を見かけることが増えました。文字が弾み、画面が形を変えながら切り替わる、あの動画です。
その多くは、動画生成 AI ではなく Claude Code で作られています。Claude Opus 5.5 にプロンプトを渡すと、動画を描くプログラムを書いてくれます。
ただ、同じプロンプトを試しても、思ったような動画にならなかった人も多いはずです。上手な人の動画とは、何が違うのでしょうか。
答えは、プロンプトの外側にある「仕組み」です。描く・書き出す・見て直すという流れを Claude Code に持たせると、仕上がりが大きく変わります。
この記事では、次の内容を順に紹介します。
Claude Code で動画ができる仕組み
初心者向け：準備と、一行プロンプトで作る最初の1本
中級者向け：自社サービスの動画にするための指示の出し方
上級者向け：自作のレンダラー、バネの動き、音の同期
長い動画の作り方、自己チェック、スキル化まで
はじめての人は前半だけでも動画を作れます。すでに作っている人は、後半から読んでも大丈夫です。
Claude Code で動画ができる仕組み
Claude は文章や画像を返すモデルで、MP4 ファイルを直接は作れません。そのかわり、動画の1コマ1コマを描くプログラムを書きます。
流れは次の3段階です。
Claude が、時刻を渡すとその瞬間の絵を描く関数を書く
ブラウザを画面なしで動かし、1コマずつ撮影する
撮影した画像を、ffmpeg という変換ツールで動画にまとめる
15秒を1秒60コマで作るなら、900枚の画像を撮ってつなげることになります。人の手では大変な作業ですが、Claude Code なら自分で実行できます。
動画の質はプロンプトより周りの仕組みで決まる
参考にした記事の筆者は「プロンプトは動画の1割にすぎない」と書いています。残りは、描く・確かめる・直すを回す仕組みのほうです。
チャットで頼んでも、アニメーションのコードは書いてくれます。けれど書き出しも確認もできないので、一発勝負になります。
Claude Code は自分でコマンドを動かし、書き出した画像を見られます。この「見て直す」ができるかどうかが、仕上がりの差になります。
何も指定しないと HTML 1枚で作られることが多い
参考記事によると、Opus 5.5 は特に指定がなければ、ライブラリを使わずに HTML ファイル1枚で動画を組むことが多いそうです。
Remotion や HyperFrames のような動画用の仕組みを使いたいときは、プロンプトで名前を出して指定します。それぞれの違いは、後の章で紹介します。
Claude Code で動画を作る前の準備
まずは道具をそろえます。慣れていれば10分ほどで終わります。
Claude Code を使うには、Claude の Pro・Max・Team・Enterprise のいずれかのプラン、または Console のアカウントが必要です。無料プランでは使えません。
Claude Code と動画用の道具を入れる
Claude Code は、公式の手順のとおりにインストールします。Mac・Linux は curl、Windows は PowerShell の1行で入ります。
動画づくりに使う道具は、次の4つです。
Node.js 22 以上：書き出し用のスクリプトを動かす
ffmpeg：画像の連番を動画にする。音を合わせるのにも使う
Playwright と Chromium：画面なしでブラウザを動かして撮影する
Python と librosa：音楽の拍を測る（音を合わせたいときだけ）
全部を自分で入れなくても大丈夫です。Claude Code に「動画を作る環境を整えて」と頼めば、足りないものを確かめて入れてくれます。
# Claude Code（Mac / Linux）
curl -fsSL https://claude.ai/install.sh | bash
# Claude Code（Windows PowerShell）
irm https://claude.ai/install.ps1 | iex
# 作業用フォルダで、撮影用のブラウザを入れる
mkdir my-video && cd my-video
npm init -y
npm i -D playwright
npx playwright install chromium
# 音を扱うなら
pip install librosa soundfile numpyCLAUDE.md に動画づくりのルールを書いておく
CLAUDE.md は、Claude Code が作業を始めるたびに読む決まりごとのファイルです。フォルダの一番上に置きます。
毎回プロンプトに書くルールを、ここにまとめておきます。たとえば次のような内容です。
# 動画スタジオのルール
- 動画は index.html の window.seek(t) で描く。絵は時刻 t だけで決まるようにする
- Math.random() や Date.now() は使わない。乱数が要るときは種を固定する
- 書き出しは node render.mjs。標準は 1080×1920、60fps
- 動きは spring() を使う。一定の速さの移動や、ただのフェードインは避ける
- 文字は画面の端から 80px 以上離す
- 書き出したら一覧画像を作って自分で確かめ、直してから報告する
- API キーは .env から読む。プロンプトやコードに直接書かない使うモデルは Claude Opus 5.5 にする
動画づくりは、絵の構成と細かな調整の両方が必要です。Claude Code の中で /model と入力し、Opus 5.5 を選んでおきます。
起動するときに claude --model claude-opus-5-5 と指定しても同じです。
動画づくりを助けるスキルを入れる（任意）
スキルは、特定の作業の手順書を Claude Code に持たせる仕組みです。動画向けには、次のようなものが公開されています。
Remotion の公式スキル：React で動画を組むときの書き方を教える
HyperFrames：HTML と CSS で書いた動画を MP4 にする HeyGen のオープンソース
claude-animation-skill：手描き風のアニメーションを作るスキル
最初は何も入れなくても作れます。気に入った方向性が見つかってから足すので十分です。
初心者向け：一行プロンプトで Claude Code に最初の動画を作らせる
準備ができたら、まずは短いプロンプトで1本作ってみます。目的は、動画が書き出されるまでの流れを一度通すことです。
Claude Code が作れるモーショングラフィックスの見本として、
15秒の縦型ショーリールを作って。
カットごとに違う動きの技を見せて、一番いいカットを最初に置くこと。
書き出しまで全部やって、out.mp4 を作って。全力で。短いプロンプトでも動画になる理由
「ショーリール」は、テンポよくカットをつなぐ見本動画のことです。決まった型がある言葉なので、短くても完成形が伝わります。
15秒は、1回の作業で仕上げやすい長さです。だいたい6〜8カットに分かれます。
最後の「全力で」は、手を抜かずに作り込んでほしいという合図になります。
一行プロンプトの次に試したい言い換え
慣れてきたら、条件を1つずつ足してみてください。
長さと向きを変える：「60秒、横型 16:9、ピアノの曲に合わせて」
AIっぽさを避ける：「中央に文字を置いてフェードするだけの演出は禁止」
物語にする：「ある発明の歴史を、縦型で語るように見せて」
役を与える：「あなたは賞を取ったモーションデザイン事務所の監督です」
一行プロンプトの限界
一行プロンプトで分かるのは、仕組みがきちんと動くかどうかです。伝えたい内容までは表現できません。
また、同じ一行を使う人が多いため、似た雰囲気の動画になりがちです。次の章からは、自分だけの動画にする方法を紹介します。
Claude Code で自社サービスの紹介動画を作る
一行プロンプトに、自社サービスの情報を足します。参考記事では、次の3点を加えるだけで紹介動画を作った例が紹介されています。
サービスの URL
「実際のスクリーンショット・ロゴ・素材を使うこと」
「音楽を必ず付けること」
その例では、以前は制作会社に1,000ドル以上払っていた動画を、30分足らずで作れたそうです。
ブランドごとに会話を分けて続ける
1本目を作った会話には、書き出しの仕組みとブランドの情報がそろっています。同じ会話で2本目を頼むと、1本目より早く仕上がります。
反対に、別のサービスの動画は新しい会話で始めます。色やロゴが混ざるのを防げます。
ナレーションや音声を足すときは API キーの扱いに注意する
ElevenLabs などの音声合成を使えば、キャラクターにしゃべらせることもできます。そのときは API キーを .env に書き、名前だけをプロンプトで伝えます。
本物のキーをプロンプトに貼るのはやめましょう。プロンプトを人に見せたり、SNS に載せたりしたときに漏れてしまいます。
参考画像を渡して Claude Code の動画から AIっぽさを消す
参考を何も渡さないと、AI はありがちな絵を選びます。グラデーションの背景に、中央の文字がふわっと現れる動画です。
これを避けるには、見せたい雰囲気を画像や動画で渡します。渡し方は3通りあります。
参考の渡し方は1枚・動画・画像集の3通り
画像1枚：色・文字の形・質感をまねさせる。写っている内容はまねさせない
参考動画：ffmpeg でコマを切り出させ、カットごとのテンポを文章にさせる
画像集：先に style_guide.md を書かせ、それを動画づくりのルールにする
参考は、Dribbble のモーション作品や、他社のローンチ動画から探せます。
# 参考動画から 0.5 秒ごとにコマを切り出す
mkdir ref
ffmpeg -i reference.mp4 -vf fps=2 ref/%03d.png道具ではなく見た目と条件を伝える
「p5.js で作って」のように道具を指定するより、「紙を切り貼りしたような質感で」と見た目を伝えるほうがうまくいきます。
Claude が見た目に合う描き方を自分で選べるからです。道具を指定するのは、チームで決まったものがあるときだけで十分です。
Claude Code に雰囲気ではなく動画の「状態」を伝える
アプリの画面がなめらかに変形していく UI アニメーションは、特に人気があります。こうした動画は「かっこよく」と頼んでもうまくいきません。
かわりに、時刻ごとに画面がどんな状態にあるかを一覧にして渡します。XML 風のタグで区切ると、Claude が読み違えにくくなります。
<video>
<format>1080x1920、60fps、12秒。最後のコマを最初と同じにしてループさせる</format>
<look>白い背景、黒い文字。差し色は #7c5cff の1色だけ</look>
<states>
0.0s 丸い「保存」ボタン。カーソルが近づく
1.5s クリック。ボタンが縮んで、読み込み中の円になる
3.0s 円が横に伸びて、進捗バーになる
5.0s バーが広がって、完了を知らせるカードになる
8.0s カードが閉じて、最初のボタンに戻っていく
</states>
<rules>
- 図形は1つだけ。カットで切り替えず、大きさ・角丸・色の変化でつなぐ
- 変化のきっかけは、必ずカーソルの動きにする
</rules>
<watch-out>
- 箱が変形している途中で、中の文字をはみ出させない
</watch-out>
</video>1つの図形を最後まで切らずに変形させる
この型の要は、1つの図形がボタン・読み込み中・グラフと姿を変えながら、最後まで途切れないことです。
カーソルが変化のきっかけを作り、最後のコマが最初と同じ形に戻ります。こうすると、SNS で繰り返し再生されても継ぎ目が見えません。
画面の変形を物語として見せる応用
同じ考え方で、アプリの画面を舞台に見立てた短い物語も作れます。登場人物のかわりに、ボタンやカードが動きます。
状態の一覧を「場面」と考えると、書きやすくなります。
上級者向け：Claude Code で seek(t) の動画エンジンを持つ
ここからは、動画を描く仕組みそのものを自分のフォルダに持つ方法です。一度作れば、どの動画でも使い回せます。
中心になるのは、時刻 t を渡すとそのコマを描く関数 seek(t) です。前のコマに頼らず描けるので、どの瞬間からでも書き出せます。
最小構成は index.html と render.mjs の2ファイル
index.html には、1080×1920 のキャンバスと seek(t) を書きます。次のコードは、円が弾んで現れ、見出しがせり上がる4秒の例です。
<!doctype html>
<html>
<body style="margin:0;background:#0b0b0f">
<canvas id="c" width="1080" height="1920"></canvas>
<script>
const ctx = document.getElementById("c").getContext("2d");
const W = 1080;
const H = 1920;
// 時間 t（秒）だけで値が決まるバネ。0 から 1 へ、少し行き過ぎて止まる
function spring(t, { stiffness = 170, damping = 18 } = {}) {
if (t <= 0) return 0;
const w = Math.sqrt(stiffness);
const z = damping / (2 * w);
if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
const wd = w * Math.sqrt(1 - z * z);
return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + ((z * w) / wd) * Math.sin(wd * t));
}
const lerp = (a, b, p) => a + (b - a) * p;
// 指定した時刻のコマを描く。同じ t なら、何度呼んでも同じ絵になる
window.seek = (t) => {
ctx.fillStyle = "#0b0b0f";
ctx.fillRect(0, 0, W, H);
// 0.2 秒：円が弾むように現れる
const pop = Math.max(0, spring(t - 0.2));
ctx.fillStyle = "#7c5cff";
ctx.beginPath();
ctx.arc(W / 2, H / 2 - 220, 170 * pop, 0, Math.PI * 2);
ctx.fill();
// 0.8 秒：見出しが下からせり上がる
const rise = spring(t - 0.8, { stiffness: 120, damping: 20 });
ctx.globalAlpha = Math.min(1, Math.max(0, rise));
ctx.fillStyle = "#ffffff";
ctx.font = "700 104px system-ui, sans-serif";
ctx.textAlign = "center";
ctx.fillText("Hello, motion.", W / 2, lerp(H / 2 + 330, H / 2 + 200, rise));
ctx.globalAlpha = 1;
};
window.seek(0);
</script>
</body>
</html>render.mjs で1コマずつ撮影して MP4 にする
render.mjs は、Playwright で index.html を開きます。時刻を少しずつ進めながら seek(t) を呼び、キャンバスを撮影して ffmpeg に流します。
node render.mjs を実行すると、同じフォルダに out.mp4 ができます。
import { chromium } from "playwright";
import { spawn } from "node:child_process";
import { once } from "node:events";
import { pathToFileURL } from "node:url";
import path from "node:path";
const FPS = 60;
const DURATION = 4; // seconds
const OUT = "out.mp4";
// ffmpeg receives PNG frames on stdin and encodes them as H.264
const ffmpeg = spawn(
"ffmpeg",
["-y", "-f", "image2pipe", "-framerate", String(FPS), "-i", "-",
"-c:v", "libx264", "-crf", "16", "-pix_fmt", "yuv420p", OUT],
{ stdio: ["pipe", "inherit", "inherit"] },
);
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1080, height: 1920 } });
await page.goto(pathToFileURL(path.resolve("index.html")).href);
const canvas = page.locator("#c");
const total = FPS * DURATION;
for (let i = 0; i < total; i++) {
await page.evaluate((t) => window.seek(t), i / FPS);
const png = await canvas.screenshot({ type: "png" });
if (!ffmpeg.stdin.write(png)) await once(ffmpeg.stdin, "drain");
}
ffmpeg.stdin.end();
await once(ffmpeg, "close");
await browser.close();
console.log(`書き出し完了: ${OUT}（${total} コマ）`);
書き出しの設定と動きのブレを出す工夫
上のコードは、1秒60コマ・H.264・画質の目安 CRF 16 で書き出します。CRF は数字が小さいほど高画質で、16 はかなり綺麗な設定です。
速い動きに残像を付けたいときは、1秒240コマで撮ってから、4枚ずつ重ねて60コマに落とします。ffmpeg の tmix という機能で重ねられます。
キャンバスだけを撮るなら、screenshot のかわりに toDataURL で画像を受け取ると速くなります。
Remotion や HyperFrames を使う方法もある
動画用の仕組みを使えば、プレビュー画面や書き出しのコマンドが最初からそろっています。
Remotion：React の部品として動画を書く。npx create-video@latest で始められる
HyperFrames：HTML と CSS で書き、npx hyperframes render で MP4 にする
Remotion は、会社で使う場合にライセンスの条件があります。使う前に公式サイトの規約を確認してください。
自作の2ファイル構成は、中身を全部自分で把握できるのが強みです。迷ったら自作から始め、足りなくなったら乗り換えるのがおすすめです。
Claude Code の動画をバネの動きで高級に見せる
安っぽく見える動画の多くは、動きが一定のカーブで決まっています。始まりと終わりが毎回同じ速さで、重さを感じません。
高級に見える動きには重さがあります。加速して、少しだけ行き過ぎて、すっと止まる動きです。これをバネ（spring）の計算で作ります。
バネは時間だけで値が決まる式で書く
バネの動きは、前のコマの位置から少しずつ計算する方法もあります。ただその方法だと、途中のコマだけを描くことができません。
上の index.html の spring() は、経過時間だけで位置が決まる式です。seek(t) のどの瞬間からでも、同じ絵を描けます。
途中で行き先が変わる動きはバネを重ねる
カーソルのように、行き先が何度も変わるものもあります。その場合は、行き先が変わるたびに新しいバネを1本ずつ足していきます。
それぞれのバネは、自分の開始時刻から動き出します。足し合わせると、途切れずになめらかにつながります。
要素ごとにバネの硬さを使い分ける
すべての要素を同じバネで動かすと、単調になります。要素の重さに合わせて、硬さと揺れの量を変えましょう。
ボタンやスイッチ：硬く、すばやく止まる
カードや画面の移動：標準の硬さ
大きな文字やロゴ：重く、ゆっくり止まる
キャラクターやステッカー：柔らかく、わざと大きく揺らす
Claude Code で動画の音をビートに合わせる
音が付くと、動画の印象は一気に変わります。合わせ方は2通りです。
手元の曲を使い、拍の位置を測ってから映像を合わせる
映像の流れに合わせて、効果音や曲をコードで作る
librosa で曲の拍の位置を測る
次のスクリプトは、曲の BPM と、拍の時刻を beats.json に書き出します。python beats.py music.mp3 のように使います。
downbeats は、4拍ごとの小節の頭の目安です。曲の始まり方によってはずれるので、耳でも確かめてください。
import json
import sys
import librosa
import numpy as np
y, sr = librosa.load(sys.argv[1])
tempo, frames = librosa.beat.beat_track(y=y, sr=sr)
beats = librosa.frames_to_time(frames, sr=sr).tolist()
json.dump(
{
"bpm": round(float(np.atleast_1d(tempo)[0]), 1),
"beats": beats,
"downbeats": beats[::4],
},
open("beats.json", "w"),
indent=2,
)拍の時刻にカットと効果音を置く
beats.json を Claude に読ませて、「カットの切り替えは小節の頭に、小さな動きは拍に合わせて」と頼みます。映像と音の時刻が、数値でそろいます。
クリック音やシュッという効果音は、Node.js で波形を計算して作れます。素材サイトを探す手間がなく、権利の心配もありません。
映像と音を1本にまとめる
最後に ffmpeg で、映像と音を合わせます。SNS 向けなら、音量の目安を -14 LUFS にそろえておくと、他の動画と並んでも音の大きさが浮きません。
ffmpeg -i out.mp4 -i music.wav \
-af loudnorm=I=-14:TP=-1:LRA=11 \
-c:v copy -c:a aac -b:a 192k -shortest final.mp4Claude Code に長い動画を任せるための指示書の書き方
1分を超える動画は、短いプロンプトでは作れません。監督が制作チームに渡すような、長い指示書を書きます。
参考記事では、約9,500文字の指示書を渡して寝ている間に142秒の音楽動画ができた例が紹介されています。
指示書に入れておきたい項目
一言でいうと何の動画か
参考にする画像・動画
使ってよい道具と API キー、使ってよい金額の上限
登場するキャラクターの見た目と性格
秒ごとの流れ。最初の2秒でつかみ、3〜5秒ごとに見せ場を置く
画面に出す文字のルール
途中で止まって確認する場所と、自分で見直す手順
最後に渡してほしいもの（解像度・向き・ファイル名）
サブエージェントで場面ごとに分けて作る
Claude Code には、別の Claude に作業を任せるサブエージェントという仕組みがあります。長い動画は、場面ごとに分けて同時に作らせると早く終わります。
そのときは、全体の描き方をまとめたガイドを1つのファイルに書いておきます。どの場面も同じルールで作られるので、つないだときに雰囲気がそろいます。
動画生成 AI と組み合わせる方法もある
人物の動きや物理的な表現は、コードで描くのが難しい部分です。参考記事では、まず動画生成 AI で下書きの映像を作る方法が紹介されています。
その映像を見本にして、Claude にコードで描き直させます。最終的な絵がコードになるので、あとから自由に直せます。
Claude Code に自分の動画を見てチェックさせる
Claude は画像を読めるので、自分が書き出した動画を見て直せます。上手な動画と普通の動画の差は、ここで一番大きく開きます。
動画のままでは見られないので、ffmpeg で確認用の画像を作らせます。
# 0.5 秒ごとのコマを 6 列 × 5 段に並べた一覧画像（15 秒分）
ffmpeg -i out.mp4 -vf "fps=2,scale=270:-1,tile=6x5" -frames:v 1 sheet.png
# スマホの小さな画面での見え方を確かめる
ffmpeg -i out.mp4 -vf "scale=360:-2" small.mp4
# ループのつなぎ目：最初と最後のコマを書き出して比べる
ffmpeg -i out.mp4 -frames:v 1 first.png
ffmpeg -sseof -0.1 -i out.mp4 -frames:v 1 last.png
# 2 回書き出して、まったく同じ映像になるかを確かめる
ffmpeg -i out.mp4 -map 0:v -f md5 -点数を付けさせて低い所から直す
一覧画像を見せたら、項目ごとに10点満点で採点させます。項目の例は次のとおりです。
最初の2秒で目を引けているか
スマホの大きさでも文字が読めるか
動きが止まって見えるコマがないか
数秒ごとに新しい変化があるか
画面の配置が整っているか
ブランドの色やロゴが正しいか
音と動きのタイミングが合っているか
点が低い3つだけを直し、直した部分だけを書き出し直します。全項目が8点以上になるまで、これをくり返させます。
下の画像は、この記事のサンプル動画から作った一覧画像です。コマの変化が一目で分かります。
時間をかけるほど仕上がりは良くなる
参考記事では、7時間近くかけて160回以上やり取りした水彩風の短編も紹介されています。
最初の書き出しは下書きと考えましょう。チェックと修正を何周も回すことが、上手な動画への近道です。
Claude Code の動画を複数サイズで書き出してスキルにする
完成したら、SNS ごとのサイズで書き出します。縦型 9:16・正方形 1:1・横型 16:9 の3つがあれば、ほとんどの場所に載せられます。
切り抜かずにサイズごとに配置し直す
縦型の動画を切り抜いて横型にすると、文字が切れたり、余白が間延びしたりします。
座標を数値で決め打ちせず、画面の幅と高さから位置を計算する関数を通しておきましょう。そうすれば、1つの流れからサイズごとに配置し直せます。
一連の手順をスキルにして1行で呼び出す
うまくいった手順は、Claude Code のスキルにまとめておきます。.claude/skills/motion-reel/SKILL.md に、次のように書きます。
---
name: motion-reel
description: サービスの URL から紹介動画を作る。「動画にして」「リールを作って」と頼まれたときに使う
---
# 手順
1. URL を開き、ロゴ・スクリーンショット・ブランドの色を assets/ に集める
2. style_guide.md に、色・文字・動きのルールをまとめる
3. 音楽があれば beats.py で拍を測る
4. 拍に合わせて、カットの一覧を shots.md に書く
5. index.html の seek(t) で描く
6. 一覧画像を作って採点し、8 点未満の項目を直す
7. 9:16・1:1・16:9 で書き出し、音を合わせる
# 受け取る情報
$ARGUMENTS（URL・長さ・向き・参考画像）スキルを使うと次の動画は1行で頼める
スキルを置いたあとは、/motion-reel https://example.com 20秒 9:16 のように1行で頼めます。
参考記事では、こうして作った動画を制作サービスとして売っている人の例も紹介されています。
Claude Code で作られた動画とプロンプトを DesignLayer で見る
自分で作る前に、ほかの人がどんなプロンプトで作ったのかを見るのも近道です。DesignLayer の動画ページでは、Claude で作られたプロダクト動画を再生できます。
たとえば Moritz Kremb さんの「SaaS Launch Video」は、Opus 5.5 が1つのプロンプトから作った46秒の紹介動画です。Opus 自身が題材に Notion を選び、素材を集めて機能紹介の動画に仕上げています。
それぞれの動画には、作るときに使ったプロンプトが付いています。プロンプトのコピーは1日1回まで無料で、Plus なら無制限です。https://design-layer.com/ja/videos
自分で作った動画を載せることもできます。GitHub でログインし、動画とプロンプトを送ると、確認のあとに公開されます。
Claude Code での動画づくりについてよくある質問
Claude Code を使うには、Claude の有料プラン（Pro 以上）か Console のアカウントが必要です。ffmpeg・Playwright・librosa は無料で使えます。
音声合成などの外部サービスを使う場合は、それぞれの料金がかかります。
まとめ：Claude Code で動画を作る流れ
Claude は動画を描くプログラムを書き、ブラウザで撮影して ffmpeg でまとめる
道具をそろえ、CLAUDE.md に動画づくりのルールを書く
最初は一行プロンプトで、書き出しまでの流れを通す
自社の URL・素材・音楽、参考画像、状態の一覧を足して自分だけの動画にする
seek(t) とバネの動きで、仕組みを自分のフォルダに持つ
書き出した動画を Claude 自身にチェックさせ、8点以上になるまで直す
うまくいった手順はスキルにまとめ、次からは1行で頼む
まずは一行プロンプトから、最初の1本を書き出してみてください。ほかの人の作品とプロンプトは https://design-layer.com/ja/videos で見られます。
参考：Claude Code の動画づくりで参照した記事とリンク
この記事は、Movez さん（@0xMovez）の X の記事「How to build motion design studio with Opus 5.5 ( Full-course )」を参考に、日本語で再構成したものです。事例の数字は、元の記事で紹介されている内容です。
Claude Code のインストール：https://code.claude.com/docs/ja/setup
Claude Code のスキル：https://code.claude.com/docs/ja/skills
Claude Code の CLAUDE.md：https://code.claude.com/docs/ja/memory
Playwright：https://playwright.dev/docs/intro
ffmpeg：https://ffmpeg.org/
動画用の仕組みやスキル、作品集は次のとおりです。
Remotion の AI スキル：https://www.remotion.dev/docs/ai/skills
Remotion のライセンス：https://www.remotion.dev/docs/license
HyperFrames：https://github.com/heygen-com/hyperframes
claude-animation-skill：https://github.com/buildwithhanif/claude-animation-skill
ClaudeAnimationBase：https://github.com/JohnHeibel/ClaudeAnimationBase
awesome-ai-motion（プロンプト集）：https://github.com/guanmo-ai/awesome-ai-motion
awesome-opus-5-5-videos（作品集）：https://github.com/athemeroy/awesome-opus-5-5-videos