Claude Opus 5.5 がコードで描いた手描き MV:制作の裏側と、オープンソースのテンプレートで自作する方法

X ユーザーの NotinReality が歌詞と音声を Claude Opus 5.5 に渡すと、Claude は JavaScript を書いて 156 秒の水彩手描き MV を 1 フレームずつ描き上げました。画像生成・動画生成モデルは一切使っていません。本記事では 2 ラウンドの生成結果の違い、モデルが章に分けて並列作業した仕組みを解説し、作者がオープンソース化した ClaudeAnimationBase で自分のアニメーションを作る手順を丁寧に紹介します。

著者:NotinReality(GitHub:JohnHeibel)09-24 · 約 15 分⚑ チュートリアル

このアニメーション MV は、Claude がコードを書いて描いたものです。既存の AI 動画生成モデルは一切使わず、Claude Opus 5.5 に直接 JavaScript のコードを書かせ、Web キャンバスのエンジンで 156.6 秒の手描き水彩アニメーションを 1 フレームずつ描画しています。

MV のタイトルは『I'm Upping My P(doom)』です。P(doom) は AI 界隈の言い回しで「AI が人類に破滅的な災厄をもたらす確率」を指し、曲名は「自分の終末確率を引き上げている」という意味になります。MV の作者は X ユーザーの NotinReality です(元の投稿、YouTube 版)。映像は昔の絵本のような質感で、水彩紙のテクスチャ、かすかに揺れる筆の墨線、ビートに乗った動き、そして豊かな表情の演技が特徴です。

NotinReality が制作した 156.6 秒の水彩手描き風の完成版『I'm Upping My P(doom)』

この曲にはもともと、別のクリエイター @slimer48484 が投稿した 3D MV が付いていて、踊っているのはヒマワリの頭をした人型キャラクターでした。NotinReality 版は同じ曲を使ったリメイクです。

slimer48484 による 3D のオリジナル MV『Claude-Pop:I'm Upping My P(Doom)』

作者の NotinReality はオリジナルの音源をそのまま使い、歌詞と音声を Claude に渡しただけです。指示したのは Clawd というキャラクターを使うこと、歌詞の一行ごとに面白い絵と場面転換を付けることだけで、シーンのアイデアは何も指定していません。リポジトリ内のものはすべてモデルが生成しました(ソースコードは PDoomVideo)。その後、作者はこのアニメーション制作パイプライン一式を、スターターテンプレート ClaudeAnimationBase としてオープンソース化しました。

普段コードを書かない人でも、このチュートリアルに沿ってパソコンに基本ツールを用意すれば、Claude Code(または他のコーディング Agent)を使って自分だけの手描き風アニメーションを作れます。


第1部 制作の裏側:この手描き MV はどうやって生まれたのか

作者が公開した制作過程はわずか 2 ラウンドで、コードはすべてモデルが書いています。

1. Flash 風から水彩絵本へ

第 1 世代(Gen 1、コードはリポジトリの legacy/ ディレクトリに残っています)を作ったとき、作者は歌詞と音声ファイルを Claude に貼り付けて「かわいいアニメーション」を作るよう頼んだだけで、推論レベルは Medium(中程度) でした。

モデルはすぐに基本的なアニメーションを返してきました。フラットな単色ベタ塗り、太い輪郭線、そして大量の文字ラベルや吹き出し(「AGI?」「LOSS」「don't eat me!」など)が並ぶ画面で、全体として 2000 年代の Flash アニメに近い雰囲気でした。

2 ラウンド目で、作者は次の要求を出しました。

  1. 推論レベルを最上位(xhigh reasoning)に上げる。
  2. p5 のブラシスタイルを使う(p5.brush、p5.js に水彩や筆のタッチを加えるライブラリ)。
  3. シーンをもっと面白く、どのシーンにも見どころを作る。
  4. すべてのシーンを次のシーンへ転換でつなぐ。

2 ラウンド目では、Opus が自分で書いた絵コンテ STORYBOARD.md の中で方針を決めています。画面の文字は控えめにし、全編で使うのは少数の大きな擬音文字(FOOM、CHOMP など)だけ。ラベルや説明文は入れず、歌詞を繰り返す看板も作らない。カラオケ字幕がすでにあるからです。そのため完成版の文字は、主に画面下部の歌詞字幕と P(DOOM) の小道具の看板だけになっています。

作者によると、このラウンドは約 45 分かかりました。同じ歌詞の場面を比べてみます。

同じ歌詞の場面の 2 世代比較:左が第 1 世代のフラットなベクター風、右が第 2 世代の水彩ブラシ風
同じ時点での比較(4、10、20、25、120、150 秒):左が第 1 世代(Medium 推論)でフラットな色面、画面に文字ラベルが多数。右が第 2 世代(xhigh 推論)で水彩ブラシ、画面の文字はほぼ下部の歌詞字幕のみ。左のスクリーンショットはリポジトリの legacy/ にある Web ページを私たちがローカルでレンダリングして撮影したもの、右は完成版の同じ時点から取ったものです

2. 2 ラウンド目の制作構成:絵コンテの構想、章分け、サブ Agent の並列作業

2 ラウンド目の作業分担は次のとおりです。まず Opus が STORYBOARD.md を書き、作品全体を「暴走する舞台劇」として構想しました。幕が開いて始まり、幕が下りて終わる。Clawd はモニターの中の小さな落書きから少しずつ惑星サイズにまで成長し、研究者を引きずりながら歌詞に出てくるさまざまな AI 終末ネタの間を駆け抜けます。P(doom) 温度計は舞台上の実物の小道具として登場し、サビのたびに空気入れで押し上げられていきます(8→34→61→86→99.9)。そして最後の一行「Was it all for show?」で、すべてが舞台上の演出にすぎなかったことが明かされます。次に Opus は曲全体を 9 つの章に分け、章ごとに 1 つのコードファイルを割り当てました。さらに並列で動くサブ Agent 向けのブリーフィングとして ANIMATION_GUIDE.md を書きました。各サブ Agent は自分の担当章だけを修正し、共有ファイルでバグを見つけても報告するだけで直しません。最後に render.mjs がヘッドレス Chrome で 1 フレームずつレンダリングし、ffmpeg で MP4 に合成します。

3. スターターパックに入っているルールブック

MV の完成後、作者はスターターパックも公開しました。パックに含まれる「アニメーション制作ガイド」(ANIMATION_GUIDE.md)は、この MV のコードと、「モデルが何を上手くこなし、何が苦手だったか」の分析をもとにまとめられたものです。ガイドはまず 3 つの目標を掲げています。

  • 手作り感:誰かが 1 フレームずつ手で描いたように見せる。筆のタッチ、かすかに揺れる墨線、平面的な 2D、文字は書かない。
  • 生きている:画面の中で常に何かが動き、何かが起きている。表情は演技で見せ、キャラクターは十分に大きく描く。
  • ひとつの作品:短編映画であって、断片の寄せ集めではない。描く前に計画し、すべてのシーンを次へつなげる。

3 つの目標の下には、もう 1 つの最低ラインがあります。観客が理解できること。ガイドは特に、テンポ(タイミング)こそモデルが最も失敗しやすいところだと注意しています。以下は具体的なルールの中でも特に重要なものです。

ルール 1:純粋に平面的な手作りの質感(Solid Medium & Boil)

  • 通常の幾何図形は絶対に使わない:p5.js 標準の rect()、ellipse() や普通の単色塗りつぶしは禁止です。それで描くと 2000 年代の Flash アニメのようになってしまうからです。すべて p5.brush で描き、キャラクターや小道具は平塗りの色面(wash)に墨線の輪郭、空や丘や影はにじんだ縁と絵の具のテクスチャを持つ水彩(fill)で表現します。
  • 墨線を「沸騰」させる(Boiling Linework):伝統的な手描きのコマ撮りアニメでは、線を毎フレーム手で描くため、筆致の縁がわずかに揺れます。テンプレートでは線のランダムな揺れを 1 秒に 12 回切り替え(BOIL)、すべての線がかすかに震えることで、1 フレームずつ手描きしたように見せています。
  • 3D 投影は断固として使わない:三次元の透視回転はせず、WebGL 3D で立体を装うこともしません。キャラクターの振り向きは伝統的な手描きの設定資料を完全に踏襲し、あらかじめ描いた正面、斜め前(4 分の 3)、真横、斜め後ろ(4 分の 3)、真後ろの 5 つのキービュー(Key Views)を切り替えることだけで表現します。
  • 色は絵の具のように混ざる:p5.brush の色は本物の絵の具のように混ざり合い、青の上に黄色を塗ると緑になります。そのため光るものには一律で glow() を使います。これは本当に光を加算するので、濁った緑色に混ざってしまうことがありません。

ルール 2:画面内の文字は禁止(No Text)

  • 大規模言語モデルはアニメーションを生成するとき、「文字ラベル」に極端に頼りがちです(キャラクターが道に迷ったら「迷子になった」と書いた看板を掲げる、など)。ガイドはこのやり方を典型的な失敗例と明確に位置づけています。
  • 「書くのではなく、見せる」:すべての感情はキャラクターの動き、視線、小道具、そして視覚記号(汗のしずく、はてなマーク、ハート、頭上の電球、雨雲など)で表現しなければならず、画面に吹き出しを出すことは禁止です。
  • 例外:本当に文字が必要なとき(たとえば名前や、それ自体がオチになっている看板など)は、letter() で 1〜2 語をシーン内に描き込んでよく、使うのは 1 回だけです。ユーザーが字幕を明示的に求めた場合も、ユーザーの指示に従います。

ルール 3:観客の目に合わせてテンポを設計する(Timing: Model the Viewer)

コードで生成した動きが最も陥りやすい欠点は「機械的」になることです。何もかもが等速で動き、すべての出来事が一度に詰め込まれ、観客がよく見る前に終わってしまいます。ガイドが掲げる中核原則は、「設計するときは、常に頭の中で観客をモデル化すること(Timing: model the viewer)」です。

  • 認知の単位に分解する(Write the reads):1 つのカットの中で、観客が理解すべきことはいくつあるか。一度に起きることは 1 つだけにします。
  • 動作は速く、意味はゆっくり(Fast actions, slow meanings):動作そのものは一瞬で終わってかまいません(バットを振る、転ぶなど)。しかし動作の前には必ず「予備動作」(Anticipation、たとえばパンチの前に体を反らして腕を引く)を入れ、動作の後には十分な「間(Hold)」を取り、観客が結果を見届けて感情的に反応できるようにします。
  • 実例:ガイドは最後に実際の例を挙げています。サンプル映像のラストの初版では、星を投げる、星が戻ってくる、きらめく、恋に落ちる、手を振って別れる、星が応える、締めくくる、という流れがすべて約 1.3 秒に詰め込まれ、誰も理解できませんでした。その後、順番に現れる 6 つの情報ポイントに作り直し、約 4 秒(6.95〜11.0 秒)に引き延ばして、どの情報ポイントも観客が見届けられる時間を確保しました。

その他の 4 つのルール

  • どのカットでも何か 1 つの出来事を起こす:カットの始まりと終わりの間には変化が必要です。たとえば、欲しがる、見つける、試す、失敗する、反応する、手に入れる、など。「Clawd が草原に立ってかわいくしている」だけではカットになりません。原因があってから反応があり、張った伏線は回収します。
  • 画面を生かし続ける:待機中の小さな動き、ゆっくりとしたカメラの移動、揺れる草など、常に何かが動いているようにします。完全に静止した画面はバグのように見えます。ミドルショットでは Clawd を十分に大きく描き、すべての動きが 1 つのビートを共有します。
  • すべてのつなぎ目に転換を入れる:冒頭、カットとカットの間、ラストのすべてに必要で、ハードカットも唐突な停止も禁止です。転換はストーリーと関係のあるものにし、毎回同じ手法を使わないこと。選択肢はブラシワイプ、円形マスク、スウィッシュパン、形の一致によるマッチカット、動作の途中でのカットなどです。
  • コードを書く前に全体の構想を立てる:手を動かす前に絵コンテを書き、作品全体で何を語るのか、何を繰り返し登場させるのか、ラストで冒頭にどう呼応させるのかを考え抜きます。
PDoom リポジトリのトップページに置かれた短いループ映像

第2部 実践編:ClaudeAnimationBase で初めての手描きアニメーションを作る

作者は MV の完成後、磨き上げたアニメーションエンジン一式を切り出し、誰でもそのまま遊べる土台(スキャフォールド)として整理しました。それが ClaudeAnimationBase です。

p5.js を自分で調整したり、複雑な低レベルのレンダリング処理を書いたりする必要はありません。テンプレートにはキャラクター、31 種類の表情、ビート用のツール、バックグラウンドでのレンダリングスクリプトがすでに用意されています。

ClaudeAnimationBase の作者が公開した 10 秒のデモ:草原で手を振り、まばたきし、ぐらりと倒れる Clawd

1. 環境の準備

用意するものは 4 つです(Mac、Windows、Linux のいずれでも使えます)。

  1. Node.js(スクリプトの実行用)
  2. Google Chrome ブラウザ(キャンバスをオフラインで 1 フレームずつレンダリングするため)
  3. ffmpeg(生成した連番画像と音声を MP4 動画にエンコードするため)
  4. Claude Code(またはファイルの読み書きとターミナルコマンドに対応した他の AI コーディングツール)

ハードウェア性能についての注意: 独立 GPU がない場合、水彩の塗りつぶしが 1 フレームあたり数秒かかるほど遅くなることがあります。その場合はモデルに水彩の塗りつぶしを置き換えさせることができます。参考までに、私たちが M3 Max(独立 GPU を持たない Apple シリコン)で試したところ、サンプルは 1 フレームあたり約 0.16 秒でした。

2. インストールとプロジェクト構成

パソコンのターミナルを開き、次のコマンドを順に入力してテンプレートをダウンロードし、依存パッケージをインストールします。

# 1. スターターリポジトリをクローン
git clone https://github.com/JohnHeibel/ClaudeAnimationBase.git
cd ClaudeAnimationBase

# 2. プロジェクトの依存パッケージをインストール(p5.js、p5.brush、puppeteer-core を含む)
npm install

プロジェクトの主要ファイル一覧:

  • ANIMATION_GUIDE.md:中核となる制作ルールと API リファレンス(必ず最初に AI に読ませてください)。
  • src/clawd.js:主人公 Clawd の描画ロジック(視点、顔のパーツ、帽子、動作、感情を含む)。
  • src/core.js:低レベルの水彩ブラシ、カメラのズーム・パン、ビート計算、ライティングの補助ツール。
  • src/timeline.js:複数カットの連結と転換(ブラシでなぞるワイプ転換 brushWipe など)。
  • src/config.js:全体設定。総尺(duration)、曲のテンポ(bpm)、音声ファイルのパスなど。
  • src/scenes/:自分で書いたアニメーションのカットファイルを置く場所(demo.js 付き)。
  • render.mjs:オフラインレンダリング用スクリプト。サムネイル一覧、部分拡大のチェック画像、最終的な MP4 を出力できます。
  • studio.html:ローカルのデバッグ用 Web ページ。Chrome で開けば、シークバーをドラッグしてプレビューできます。

3. 主人公 Clawd と 31 種類の感情設定

テンプレートのデフォルトの主人公は Clawd(Claude Code のマスコットで、テラコッタ色の小さな四角いキャラクター)です。体は幅 10 単位、高さ 6 単位のテラコッタ色のブロックで、4 本の短い脚、2 本の小さな手、そして細長いスリット状の目が 2 つあります。

テンプレートには 31 種類もの生き生きとしたプリセット感情 が組み込まれているので、表情を自分で描く必要はありません。

Clawd の 31 種類のプリセット感情一覧
テンプレートに組み込まれた 31 種類の表情設定シート

31 種類の表情は、うれしい、得意げから、激怒(弁当箱のようにふたがパカッと開いて歯が見える)、めまい、KO まで幅広く、多くには描き込まれた小さな記号(汗のしずく、はてなマーク、ハート、電球、zzz、雨雲)が付いています。

表情の切り替えは演技として見せるもので、一瞬でパッと変わるわけではありません。表情を変えるには emotions() を使い、時間と表情の並びを与えると、予備動作、目を細める、驚きのリアクション、元に戻る反動を自動で付けてくれます。たとえば emotions(lt, [[0, 'bored'], [1.2, 'surprised'], [1.7, 'excited']]) のように書きます。一方 feel() は、各感情に付属する待機中の小さな動きです。

4. Claude に新しいアニメーションを作らせるプロンプトテンプレート

準備ができたら、プロジェクトのディレクトリで Claude Code を起動します。作者が示した例は、実はたった一文です。

Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.
(まず ANIMATION_GUIDE.md を読み、それから Clawd がチョウを捕まえようとする 15 秒の動画を作ってください。)

README によると、この一文だけでモデルはまず絵コンテを書き、カットを 1 つずつ制作し、サムネイル一覧をレンダリングしてセルフチェックし、最後に out/video.mp4 を出力します。

以下の 2 つは、私たちがガイドに沿って書き広げたバージョンです。「まず絵コンテを出し、あなたが確認してからコードを書く」を 2 段階に分けたので、途中で絵コンテを修正しやすくなっています。README 自体も、モデルに先に絵コンテを出させてから手を動かさせる方法を勧めています。

ステップ 1:Claude にガイドを読み込ませ、絵コンテを作らせる(プロンプトテンプレート)

まずプロジェクトのルートディレクトリにある ANIMATION_GUIDE.md を最後までしっかり読み、手描き水彩の画風、画面内の文字の禁止、画面を常に動かし続けること、そして「観客の視点で時間のテンポをモデル化する(Timing: Model the viewer)」といった中核ルールを深く理解してください。

15 秒の短いアニメーションを作りたいと考えています。テーマは「Clawd が陽射しの降り注ぐ草原で光るチョウを追いかけ、飛びついて空振りして転んでしまうが、最後にはチョウが Clawd の鼻先にとまり、見つめ合って微笑む」です。

いきなりコードを書かないでください。まずルールに従って絵コンテ文書 STORYBOARD.md を作成してください。
1. 一文で表すストーリーの主軸(Logline)、ビジュアルの世界観(World)、カラーパレットを決める;
2. 作品全体を通した Clawd の感情の弧(Emotional Arc)を計画する;
3. 具体的なカット(A、B、C...)に分解し、各カットの開始・終了時間、入り・出の転換方法、カットの焦点となる出来事(Event)、観客の認知単位(Reads)、視線誘導の経路を明記する。
絵コンテができたら報告し、私の確認を待ってください。

ステップ 2:絵コンテを確認したら、シーンのコードを生成させる

Claude が妥当な絵コンテを出してきたら、2 つ目の指示を送ります。

絵コンテ案、とても素晴らしいです!では、コーディングを始めてください。
1. src/config.js で正しい尺を設定する;
2. src/scenes/ に専用のシーンファイル(例:butterfly.js)を新規作成し、demo.js の構成を参考にして絵コンテをカットごとに実装する。すべてのフレームが時間 t の純粋関数になるようにし、boilSeed(key) を正しく使ってノイズの線画が異常に揺れないようにする;
3. studio.html で読み込んでいるスクリプトを新しいシーンファイルに更新する;
4. サムネイル一覧のレンダリングコマンドを実行して、いくつかの重要な瞬間のサムネイル一覧(Contact Sheet)を生成し、動きのシルエットがはっきりしているか、ルール違反の文字がないか、転換が滑らかかをセルフチェックする。

作者は README で、ほかにもいろいろな使い方を試すよう勧めています。

  • 先に絵コンテを出させてからコードを書かせる;
  • 指示をとても大ざっぱにする、あるいはとても具体的にする、の両方を試す。作者によれば、ごくわずかな指示でもたくさんのものを作ってくれ、具体的に求めたときも正確に作ってくれたそうです;
  • サブ Agent を使って並列で作らせる;
  • Clawd を別のキャラクターに差し替えたり、新しい表情や衣装を追加させたりする;
  • 自分の参考画像を渡す。

5. 品質チェックのセルフレビューループ(The Review Loop)

これがコードでアニメーションを生成するうえで最も重要な秘訣です。AI も人間も、コードだけを見て画面を想像してはいけません。必ず重要なフレームを画像としてレンダリングし、「自分の目で確認」する必要があります。

render.mjs には 3 種類のチェック画像があり、レンダリングは高速です(ガイドによると、一覧画像は 1 フレームあたり約 0.1〜1 秒)。

# 1. サムネイル一覧(Contact Sheet):作品全体の重要なテンポのポイント(たとえば 1、4、8、12 秒)をすばやく確認
node render.mjs --sheet=1.0,4.0,8.0,12.0 --cols=4 --w=320 --out=out/check/sheet.jpg

# 2. 連続動作のフィルムストリップ(Strip):ジャンプ、振り向き、表情の急変などのつながりを 1 フレームずつ確認(2.0 秒から 2.5 秒をチェック)
node render.mjs --strip=2.0:2.5 --cols=6 --w=320 --out=out/check/strip.jpg

# 3. 部分的な高解像度クロップ(Crop):顔の表情の細かな動き、足が地面に着いているか、手に持った小道具が浮いていないかを確認
node render.mjs --sheet=4.5 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg

ガイドはモデルに対し、これらの画像を実際に開いて見るよう求めています。Claude Code は画像を読めるので、自分で画像を見て問題を探します。

6. ローカルでの実測データと最終的な書き出し

私たちの手元のマシンで実測しました(実行環境:M3 Max チップ搭載の MacBook、Node.js v22、インストール済みの Chrome を自動検出)。

  • 6 フレームのサムネイル一覧によるサンプルチェック:所要時間はわずか 14.3 秒(1 フレームのレンダリングは約 73〜307 ミリ秒)。
  • テンプレート付属の 11 秒のデモ映像(264 フレーム @ 24fps)をフルレンダリングして MP4 に書き出し:総所要時間 47.5 秒(1 フレームあたり平均 157 ミリ秒)、10.8MB の高画質 MP4 ファイルが出力されました。
ローカル実測による 6 フレームのサムネイル一覧のレンダリング結果
手元のマシンで実測生成したサムネイル一覧(夜空、草原の丘、Clawd が寝て泡を出す → 飛び起きる → 星をつかむ → ハートの目)
手元のマシンで 47.5 秒かけてフルレンダリングした 11 秒のデモ動画

同じ速度で見積もると、156.6 秒(約 3758 フレーム)のフル MV をオフラインレンダリングするには約 10 分かかる計算です(実測はしておらず、シーンが複雑になるほど遅くなります)。

調整に満足したら、コマンド 1 つで最終版を書き出せます。

# 全フレームをそのままオフラインレンダリングし、ffmpeg で MP4 にまとめる
node render.mjs --clip --out=out/my_animation.mp4

# BGM がある場合は、src/config.js で音声を設定するか、直接引数を付ける:
node render.mjs --clip --audio=assets/music.mp3 --out=out/my_mv.mp4

7. MV に仕上げる:自分の曲を付ける

アニメーションを 1 本の完全な MV に仕上げたい場合は、ガイドの音楽に関するルールと NotinReality のやり方が参考になります。

  1. 手順:曲を assets/ に入れ、src/config.js で bpm(1 分あたりの拍数)と offset(最初の強拍の秒数)を設定すると、待機動作、跳ねる動き、ダンスがすべてビートに乗ります。カット割りや大きな動きは拍に合わせ、フレーズごとに独自の絵を付けます。
  2. 歌詞字幕:ガイドのデフォルトは「歌詞は画面に出さず、演技で歌詞の意味を表現する」です。NotinReality のようなカラオケ字幕や歌詞のモーショングラフィックスが欲しい場合は、プロンプトではっきり伝える必要があります。ガイドには、ユーザーの要求が優先されると書かれています。
  3. 権利についての注意:公開するなら使用許諾のある曲を使いましょう。この曲について作者自身がたどれたのは、2024 年のある YouTube 動画だけでした。

コピーして使える MV 用プロンプトテンプレート:

まずルートディレクトリにある ANIMATION_GUIDE.md を読んでください。

ある曲の完全な手描きアニメーション MV を作りたいと考えています。音声は assets/music.mp3 に置いてあります。以下はタイムライン付きの歌詞です:
[歌詞とタイミングを貼り付け]

制作の要件と流れは次のとおりです:
1. まず曲の BPM と最初の強拍の秒数 offset を測定し、src/config.js に記入する;
2. まず絵コンテ STORYBOARD.md を書いて私に見せる。歌詞の一行ごとに面白い絵を付け、すべてのシーンを次のシーンへ転換でつなぐ。画面下部にはカラオケ字幕を残す;
3. 確認後、章ごとに分割し、サブ Agent で並列に制作する。1 章につき 1 ファイル;
4. 各章が完成したらサムネイル一覧とフレームごとのストリップをレンダリングしてセルフチェックし、動きとつながりに問題がないことを確認する;
5. 最後にレンダリングスクリプトを実行して MP4 に合成する。

第3部 応用編:Donald Jewkes のハイブリッドな手法

NotinReality の MV が公開されてから 1 日も経たないうちに、Donald Jewkes がそれを引用して、Opus 5.5 で作った自分の新バージョンを投稿し、リプライにプロンプトの全文を貼りました。

「Opus 5.5 と 1 つのプロンプトでこれを作った。パソコンに向かって 5 分しゃべったら、Claude が 12 時間働いて、目が覚めたらこれができていた。」

Donald Jewkes 版(141.5 秒)

1. Donald のプロンプトが求めたもの

  1. 擬人化した主人公と設定:プロンプトが求めたのは「Claude のヒマワリのキャラクターに着想を得た、より擬人化された、女性ボーカルに合うポップシンガーの主人公」で、K-pop をビジュアルの参考にし、ピクサー風には寄せすぎない(Donald はそれがややありきたりだと感じていました)というものでした。キャラクター設定、バックダンサー、シーンは fal(AI による画像生成・動画生成の API プラットフォーム)で生成します。
  2. Seedance の下絵と JS によるトレース再構築:曲を区切って Seedance 2.5(ByteDance の動画生成モデル)に渡し、口の動きとタイミングを合わせます。自前で検証フローを組んで生成を繰り返し、動きと物理の下絵となる映像を作ります。そのうえで Claude に Seedance の下絵を土台として、JavaScript でゼロから画面を再構築したオーバーレイを作らせます。最終的に見えるのは JS の手描きレイヤーだけで、下絵は見えません。実写を撮ってからその上に描く、ロトスコープ(rotoscoping)に近い手法です。
  3. 音と映像のディテールと高密度な情報:冒頭の歌詞は大きく見せて注意を引くフックにし、構図には歌詞のためのスペースを空けておく。効果音には ElevenLabs を使ってよい。作品全体を繰り返し見て、スクリーンショットで区間ごとにチェックすること。Claude Max プランの利用枠を使い切るよう指示し、さらに約 2000 ドル分の fal クレジットも使えるとしています(実際にいくら使ったかは公開されていません)。
  4. 大量の画面テキストと界隈のミーム:文字をほとんど置かない NotinReality のやり方とは正反対に、Donald は歌詞を大きなモーションフォントで出すよう求め、さらにテック界隈の時事ネタを詰め込むよう指示しました。プロンプトでは、ナビエ–ストークス方程式のような「AI が数学の難問を平らげた」という X で話題になったネタや、エヴァのシンジのミームを名指しし、「インターネット・ブルータリズム」風に素材をそのまま貼り付けることも許可しています。完成版には論文のスクリーンショット、「400,000 GPUs」、秘密保持契約(NDA)騒動、「What did Ilya see?」などの場面が登場します。

このプロンプトの狙いもはっきり書かれています。観客はサンフランシスコのテック界隈の X ユーザーで、X でバズる 1 本を作ること。さらに高い目標は「誰も見たことがないほど良いもの」です。Donald は画面上の文字が注目を引きつけておく最良の方法の 1 つだと考えており、冒頭は大きな文字でフックを作り、ほかの部分では大きな文字と字幕風の小さな文字を交互に使っています。

プロンプトの最後には NotinReality の MV のソースコードが添付され、「悪くないが、まだまだ遠く及ばない」として、Claude にそれを土台にして上を目指すよう求めています。つまり Donald 版は、NotinReality のコードにさらに上乗せしたものです。

注意したいのは、このプロンプトが Donald の手元で事前に用意された /asic という作品フォルダ、mesh という参考素材ライブラリのスキル、video scoring スキル、Seedance 2.5 のドキュメントと API キーも参照している点です。つまり「1 つのプロンプト」は、既存のツールチェーン一式の上に成り立っており、一般の読者がこのプロンプトをそのままコピーしても動きません。

2. 2 つの創作哲学の比較

観点 NotinReality 路線(純粋なコードによる手描き) Donald Jewkes 路線(複数モデルのハイブリッドパイプライン)
中核の仕組み Claude が p5.js/p5.brush のコードを書いて 1 フレームずつ描画。画像生成・動画生成モデルは一切使わない fal で画像生成、Seedance で動画生成して下絵を作り、Claude が JS で描き直して覆う(プロンプト上の設計)
画風 水彩絵本、舞台劇、水彩のにじみ、線画のかすかな揺れ オフホワイトの紙、網点、紺・ピンク・オレンジの配色による二次元コラージュ風
文字の使い方 画面にはほとんど文字を置かず、下部の歌詞字幕のみ。動きと表情で物語を語る 文字を大量に使用:大きな歌詞のモーション、論文のスクリーンショット、技術ネタ
コントロール性とコスト 同じ時点では常に同じフレームが描かれ、特定の 1 フレーム単位まで修正できる。Claude 以外に画像生成・動画生成の追加費用は不要 情報量が多くインパクトが強い。fal、Seedance、ElevenLabs など追加の有料サービスと事前に組んだツールが必要で、Claude は 12 時間動いた

完成版では大きな歌詞、ミーム、紙の質感が確認できますが、本当に Seedance の下絵に JS で描き直しているのかは、外部からはプロンプトと完成版しか見えず、途中の過程は確認できません。

自分で手を動かしたいなら、NotinReality の ClaudeAnimationBase のほうが現実的な出発点です。コードはオープンソースで、必要なのは Claude といくつかの無料ソフトだけ。テンプレート付属のサンプルは、私たちの手元のマシンで実際に動かせることを確認済みです。


第4部 おわりに:コードによる手描きアニメーションの勘どころ

この手法の本当の勘どころは、「モデルがコードを書いて全フレームを描く + レンダリングしたスクリーンショットを自分で見る + 章ごとに並列で作る」という仕組みに、美意識とテンポをはっきり書き出したルールブックを組み合わせることです。作者の観察では、推論レベルが高いほど、モデルが作るシーンは豪華になり、ディテールへのこだわりも増すそうです。読者の皆さんには、まず 15 秒の短い作品で絵コンテ、サムネイル一覧によるセルフチェック、レンダリングの流れを一通り試してから、曲 1 本分の制作に挑戦することをおすすめします。

実践用持ち帰り資料

Markdown をスクロールして確認し、コピーしてチーム向けに調整できます。

Markdown · 会員
Markdown を読み込み中…
↑ 本文ここまで
✓ この記事は全文無料です

メンバーは全文 Markdown のコピー・保存に加え、自分の AI に購読・質問させることができます。

原文を読む ↗
📮 新着解説をメールでいち早く

役に立ちましたか?メールを登録すると、新着解説を公開と同時にお届けします。解除はいつでも。