仕組みを理解する動画を、Claude Codeに作らせると便利すぎる

ARANK

最近は動画で説明資料を作っているアプリの仕組みをお客さんに説明するとき、構成図とかHTML・Markdownで、説明するのが一般的かと思いますが最近はjavascriptを用いて、Claudeで動画を生成しやすくなったので、アプリの操作と、その裏で起きている処理を交互に見せる解説動画を作って説明に使っています。めちゃくちゃ便利なので、Claude Code に作らせる指示テンプレートと、動画の作りを紹介します。 上記の「animated-arch-diagram」スキルです。完成形まずこんな感じの動画が出ます（44秒）。この記事では、架空の図書館の本探しチャットをダミーで作り、同じ指示で動画を作り直しました。（画面に出てくる本や数字は、すべてこのダミーアプリのものです。）方法手順は3つです。animated-arch-diagram スキルを Claude Code に入れます。説明したいアプリのディレクトリで、指示テンプレートのアプリ名を記載して、Claude Code に渡します。スキルは上のリポジトリの animated-arch-diagram フォルダを、~/.claude/skills/ にコピーすれば使えます。2.の記録は、送った質問、途中の結果（区切った語、10冊の点数）、返事を JSON にしたものです。動画に出す数字は、全…