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

何が起きたか

筆者は、アプリの仕組みを説明する動画を Claude Code に作らせました。操作の場面と仕組みの場面を交互に見せる形です。今回は架空の図書館の本探しチャットで試しています。

動画はどう作られるか

動画は画面を録画せず、時刻ごとに絵を描く Web ページを使って 1 コマずつ撮り、つなぎ合わせて作られています。撮影には Playwright（ブラウザを自動で動かす道具）、動画作りには ffmpeg（動画を組み立てる道具）を使います。同じ指示なら、何度作っても同じ動画になります。

数字で見る動画

• 完成した動画は 44 秒で、1314 コマあります。
• 手元の Mac で、書き出しにかかった時間はおよそ 45 秒です。
• 送った文は 9 語に区切られます。
• 本の点数は 10 冊分で、1 位と 2 位の差は 1 点です。

なぜ大切か

これまでは構成図や文書で仕組みを説明することが多かったです。今は動画で、操作と処理の流れを分かりやすく見せられます。アプリを直して撮り直せば、字幕の数字も自動で変わるので、説明資料を保つ手間も減ります。

今後の注目点

• スキル animated-arch-diagram が、ほかのアプリでも同じように使えるか。
• 動画の作り方（何秒目に何をするか）を、どこまで細かく書けるか。
• 生成された動画の質が、実際の顧客説明で役立つか。