srt-whiteboard-animationとは？字幕から手描き動画を作るSkillを試してみた動いた

配布元: https://github.com/geeklee/srt-whiteboard-animation 　／　2026-09-19 時点で確認

この日に実際に動かした結果です。内容の誤りに気づかれた場合はお問い合わせください。確認のうえ訂正します。

使う前に分かること

SRT字幕（動画の字幕ファイルの形式）を渡すと、白板に手描きで絵が浮かび上がっていくような動画を作ってくれるツールがあります。中身はClaude CodeやCodexのようなコーディングエージェント向けのSkillです。Skillというのは、エージェントに「こう頼まれたらこう動け」とあらかじめ教えておく手順書のことです。本来は線画（色を塗っていない、輪郭の線だけの絵）そのものをこのSkillに描き起こしてもらうところから始まりますが、今回はすでに用意した線画1枚を渡し、自分で書いた日本語の字幕から、絵をどの順番でどのタイミングで見せるかをエージェントに考えてもらって、11.5秒の動画1本ができるところまで試しました。

線画と字幕を用意する

用意したのはこの1枚です。岩山の上で子ザルがバナナを食べているところに大きなサルが走ってきて横取りし、取られた子ザルが追いかけ、それを見ていた子どもたちが笑う、という線画で、Skillに同梱されているサンプル画像をそのまま使いました。

字幕は、この絵の流れに合わせて自分で書いた日本語のSRTファイルです。

1
00:00:00,300 --> 00:00:03,000
サル山の岩の上で、子ザルがバナナを食べています。

2
00:00:03,000 --> 00:00:06,200
そこへ体の大きなサルが走ってきて、バナナを横取りしました。

3
00:00:06,200 --> 00:00:08,800
バナナを取られた子ザルが、あわてて追いかけます。

4
00:00:08,800 --> 00:00:11,800
それを見ていた子どもたちが、手をたたいて笑っています。

Skillを入れる

プロジェクトの .claude/skills/ に、GitHubからそのままクローンして置きます。初回は専用の仮想環境がまだ無いので、作成コマンドを打つと画像処理に使うライブラリが自動で入ります。

mkdir -p .claude/skills
git clone https://github.com/geeklee/srt-whiteboard-animation.git .claude/skills/srt-whiteboard-animation

置いたスキルのフォルダ（.claude/skills/srt-whiteboard-animation）の中に入って、環境を作るコマンドを打ちます。

python3 scripts/prepare_env.py

[miss] opencv-python
[miss] numpy
[miss] av
[miss] Pillow
[..] 安装依赖: opencv-python, numpy, av, Pillow
[ok] 依赖安装完成

エージェントに頼む

線画と字幕のファイル名を伝えて、日本語でそのまま頼んでみました。

assets/whiteboard/saruyama/scene-01-saruyama.png という線画と、story.srt という字幕を用意しました。この字幕に合わせて、線画から白板動画を作ってください。線画はもう用意してあるので、新しく描き起こす必要はありません。作業の区切りごとに私の確認を待たなくて大丈夫です、最後の動画ファイルができるところまで、あなたの判断でそのまま進めてください。

すると、こう返ってきました。

線画とSRTから、字幕の物語順（子猴が香蕉を食べる→大猴が奪う→子猴が追いかける→子供たちが笑う）通りに描画順序を組んだ11.5秒の白板動画scene-01-saruyama-whiteboard.mp4が完成し、実際にレンダリングまで完走しています。途中でSkill付属スクリプトのフォントパスのバグ（Windows専用パス）に当たりましたが、フォールバックを足して解決し、それ以外は一度も詰まらずに最後まで到達しました。

字幕は日本語で書いたのに、返答の中でストーリーの要約だけ中国語（「香蕉」「猴」）になっているのは気になるところで、これは後で分かった理由があります。

絵の割り当てができる

このSkillは、字幕を読んで内容を理解した上で、実際に線画を見て、絵のどの部分をいつ描くかを4つの区画（region）に分けます。区切り方が合っているかを目で確認するための、番号付きの検査画像を作るコマンドも用意されています。

実行すると、まずエラーが出ました。この検査画像を作るスクリプトのフォント指定が C:/Windows/Fonts/msyh.ttc というWindows専用のパスに決め打ちされていて、cannot open resource で落ちます。エージェントはこのスクリプトのフォント読み込み部分を直接書き換え、この環境にあるフォントを順に試すように直してから、検査画像を出し直しました。

区画のラベルの一部が四角や別の文字に化けているのが分かります。これは代わりに使ったフォントに、ラベルの漢字の一部が収録されていなかったためで、検査用の画像だけの見た目の問題です。最終的な動画には文字は描かれないので影響しません。

もうひとつ分かったのは、字幕自体は日本語のままannotation.jsonに残るのに、各区画の名前や「なぜその順番か」の説明は中国語で書かれることです。このSkillの説明書に「表示する文言はすべて中国語にする」という決まりがあり、日本語で頼んでも、字幕以外の部分はそのまま中国語で返ってきます。

動画になる

区画と順番が決まったところで、実際にMP4を書き出すコマンドを実行すると、30秒ほどで動画ファイルができました。

最终视频: assets/whiteboard/saruyama/scene-01-saruyama-whiteboard.mp4  (2.33 MB)
OUTPUT=assets/whiteboard/saruyama/scene-01-saruyama-whiteboard.mp4

1080×600・60フレーム毎秒・長さ11.5秒の動画で、開始直後はベージュの紙だけの何も無い画面から始まり、途中の場面を切り出すと、先に決まった順番どおりに絵が1つずつ増えていくのが分かります。

この場面は字幕3行目までの内容が描き終わり、4行目の子どもたちが描かれ始めたところです。最後まで再生すると4つの要素すべてが揃った1枚の絵になり、途中で後の要素が先に見えてしまうようなことはありませんでした。

領域の位置や表示のタイミングを後から直したい場合、本来はブラウザで assets/preview.html を開いて画面上でドラッグして調整する仕組みが用意されていますが、今回はブラウザでの操作を行わず、代わりにannotation.jsonのregionやstartMsの数字を直接書き換える形で同じ調整をしました。ファイルの中身さえ分かれば、ブラウザを開かずに済ませられます。

まとめ

字幕の内容を読んで絵の登場順を組み立て、実際に「ペン先が動いて線画が浮かび上がる」動画として書き出すところまで、思っていたよりすんなり動きました。詰まったのはフォント周りの1か所だけで、そこも自分で直して先に進んでくれました。線画そのものを新しく描き起こす、このSkillのもう一つの売りの部分は今回試していないので、そこも含めた使い心地はまだ分かりません。中身の説明や区画名が中国語で返ってくるのは、日本語で頼む側からするとやや落ち着かない点でした。字幕付きの解説動画やナレーション動画を、手描き風の見た目で作りたい人には向いていると思いますが、線画を自分で用意できることが前提になります。