仕組みを理解する動画を、Claude Codeに作らせると便利すぎる
Claude Codeの使いこなし術について書かれた記事。
- GitHubのanimated-arch-diagramスキルを導入し、説明したいアプリのディレクトリで指示テンプレを渡すだけで作れる。
- 構成は「操作→仕組み」を交互に見せる。モック画面でズームやクリック演出、語の分割やランキングの並び替えなど処理を動きで可視化。構成図は該当部分だけ差し込み、字幕も付ける。
- 数字や例はJSONの実記録から自動で参照し、動画と一貫した値になる。
- 中核は、時刻に応じて絵を描くWebページを1コマずつ撮って動画化。Playwrightで撮影し、ffmpegで連結するため再現性が高い。
- アニメはstepsで時間指定(at/zoom/click/type/cps等)。44秒=約1314コマで、書き出しはMacで約45秒。

zenn.dev




