이해를 돕는 설명 영상을 Claude Code로 만들면 정말 편리하다

AI で仕組みを説明する動画を作る

筆者は、アプリの仕組みを説明するときに動画を使っています。動画は、アプリの操作と、その裏で起きている処理を交互に見せます。Claude Code に専用のスキル（決まった作業をまとめた道具）を入れて、指示を渡すだけで動画ができます。今回は、架空の図書館の本探しチャットを例に作り直しています。

動画と記録の数字

• 動画の長さは 44 秒です。
• 動画は 1314 コマでできています。1 秒に 30 コマです。
• 手元の Mac で、書き出しにかかった時間は 45 秒ほどです。
• 例の質問は「猫が出てくる小説を読みたい」です。文は 9 語に区切られます。
• 10 冊の本に点数がつき、1 位と 2 位の差は 1 点です。

動画の作り方のしくみ

動画は画面を録画していません。時刻を渡すと、その瞬間の絵を描く Web ページを作ります。そして 1 コマずつ撮って、ffmpeg（動画を作るソフト）でつなぎます。撮影には Playwright（ブラウザを自動で動かす道具）を使います。同じ指示から、何度作っても同じ動画ができます。アプリの数字は、アプリが残した記録からそのまま取ります。

なぜ大事か

これまでは、構成図や文章で説明することが一般的でした。この方法を使うと、動画でも分かりやすく説明できます。Claude に指示するだけで作れるので、動画づくりの手間が大きく減ります。記事の筆者は、AI でこうした動画をすぐに出せるようになり、制作がしやすくなったと感じています。

これから注目したいこと

• アプリを直して流し直すと、字幕の数字も一緒に変わります。
• 指示テンプレートの書き方で、動画の見え方がどう変わるかに注目できます。
• スキルは GitHub で公開されています。