Claude Codeで作る「ホワイトボードアニメ」日本語版一式つき

※この記事は有料設定ですが、「日本語版一式のダウンロード」以降を除いてすべて無料で読めます。

まず、30秒だけ見てください。

※音は入っていません

この動画、動画生成AIは1フレームも使っていません。

Claude Codeだけで作りました。

用意したのは、イラスト1枚だけです。

この記事を読むと、こんなことがわかります

• 手描きアニメの「正体」がわかる（動画生成AIも、絵の技術も要らない理由）

• 失敗する絵の条件が6つわかり、素材づくりで遠回りしなくなる

• Claude Codeに置くだけで動く日本語版一式が手に入り、初日から1本作れる

1｜用意したのは、イラスト1枚だけです

ホワイトボードアニメ、作ってみたいと思ったことはないでしょうか。

白い紙の上を手が動いて、線が引かれて、絵ができあがっていく。 説明動画でよく見る、あの演出です。

調べると、だいたい同じところで止まります。 専用サービスは月額が高いし、テンプレの素材は日本語の動画に合わない。

でも実は、そこは本質ではありませんでした。

あの映像は、絵を描いているのではありません。

すでに完成している1枚の絵を、領域ごとに順番に見せているだけです。

例えるなら、スクラッチカード。 完成した絵の上に全面カバーがかかっていて、ペン先が通った場所から削れていく。

だから、下から出てくる絵は最初から完成しています。 こちらが指定しているのは、削る順番だけです。

AIを使う場所は、はっきり分かれています。

• 絵を1枚描く → 画像生成AI（ChatGPTなど）

• 段取りを組んで動かす → Claude Code

• 映像そのものを作る → AIは使わない。普通のプログラムの仕事

ここに地味な利点があります。

同じ素材と設定なら、何度動かしても同じ映像が出ます。

当たりが出るまで回す必要がありません。 尺も1フレーム単位で決まります。上の動画は、ちょうど30.00秒でした。

もうひとつ、先に言っておきます。 音の処理は一切含まれません。 出てくるのは無音の映像だけです。

2｜使えるのに、日本語の情報がありませんでした

この仕組みは、GitHubで無料公開されています。 geeklee/srt-whiteboard-animation というリポジトリで、MITライセンスです。

つまり、誰でもタダで使えます。 それなのに日本語の解説がほとんど見当たらない。

理由は、開いてすぐ分かりました。

中身が中国語だからです。

しかも説明が中国語というレベルではありませんでした。 AIに読ませるマニュアルの中に、こう書かれていたのです。

「ユーザー向けの説明、設定、画面テキストはすべて中国語を使用すること」

これが効きます。 日本語で頼んでも、Claude Codeが中国語で返してくるのです。

作業ログも中国語、設定パネルも中国語。 日本語の動画を作りたいのに、手元だけ全部中国語になります。

そこで、こう直しました。

• マニュアル本体を全文日本語化（出力言語の指定を中国語から日本語へ反転）

• ブラウザで動く領域エディタのUIを日本語化

• スクリプトのバグを2件修正

• 容量削減のため、サンプル動画だけ削除

この一式を、有料パートで配布します。

▼Claude Codeの他の記事もどうぞ

3｜失敗する絵には、共通点が6つあります

ここが、無料パートで一番お伝えしたい部分です。

やってみるまで、こう思っていました。 「きれいな絵を用意すれば、きれいな動画になるだろう」と。

逆でした。

きれいで情報量の多い絵ほど、この仕組みでは破綻します。

理由は構造にあります。 領域は四角い枠で指定するので、枠どうしが重なると、先に描いた絵が後の枠に食われます。

だから、絵の側に条件が出ます。 何本か通して分かったのが、この6つです。

① 要素は5つまで

6つ以上入れると、要素同士が必ず近づきます。 近づけば枠がぶつかり、順番に開けなくなります。

② 要素同士を触れさせない

抱きしめる、手をつなぐ、寄り添う。 こういう構図は物理的に不可能です。離して、浮かせて配置します。

③ 地面・空・床を描かせない

これが最大の落とし穴でした。

地面の線が画面を横切ると、その領域の四角い枠が他の全要素を飲み込みます。 順番に開けるという前提が、そこで壊れます。

やっかいなことに、生成AIは「かわいい絵」を頼まれるほど地面を描きたがります。 何も言わなければ、まず出てきます。

④ 文字を一切入れない

AIは看板や本の表紙に、勝手に文字を入れます。 その文字は高い確率で崩れていますし、線が密なので描画も不自然に長くなります。

⑤ 色は淡いパステルで

線画だけだと着彩の工程が見えず、動画が単調になります。 かといって濃い色は線を埋めてしまう。淡いパステルがちょうどいい。

⑥ 上下の端を空ける

生成した画像はトリミングします。端に置いた要素は切れます。

手元の絵を1枚選んで、この6項目で採点してみてください。 4つ以上当てはまるなら、素材に向きません。作り直したほうが早く終わります。

▼動画編集・イラスト作成するなら一家に一台

ここから先は、実際に動かす話です

仕組みと素材の条件は、ここまでで足りていると思います。

ただ、正直に言うと、このツールは素直には動きませんでした。

コンソールが中国語で日本語版Windowsが落ちる。 領域を小さく作るとスクリプトがクラッシュする。 描く手が、描かれる女の子より大きくなる。

原因が分かればどれも一瞬ですが、分かるまでに時間が溶けました。

ここから先で公開しているのは、次のものです。

• 日本語版一式のZIP（全文日本語化・UI日本語化・バグ修正・動作確認済み）

• 導入手順（Claude Codeが使えるなら10分）

• Claude Codeへの頼み方（そのままコピーできる指示文つき）

• つまずいた7件と、その回避策

• そのまま貼れる画像生成プロンプトとSRTテンプレート

同じ場所で止まる時間を、丸ごと省くための記事です。

尚、僕のPCはWindows11ですので、Macではテストしていません。
これ以降の手順もWindows11を基準にしています。

---（ここから有料）---