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

最近は動画で説明資料を作っている アプリの仕組みをお客さんに説明するとき、構成図とかHTML・Markdownで、説明するのが一般的かと思いますが 最近はjavascriptを用いて、Claudeで動画を生成しやすくなったので、アプリの操作と、その裏で起きている処理を交互に見せる解説動画を作って説明に使っています。 めちゃくちゃ便利なので、Claude Code に作らせる指示テンプレートと、動画の作りを紹介します。 上記の 「animated-arch-diagram」スキルです。 完成形 まずこんな感じの動画が出ます（44秒）。 この記事では、架空の図書館の本探しチャットをダミーで作り、同じ指示で動画を作り直しました。（画面に出てくる本や数字は、すべてこのダミーアプリのものです。） 方法 手順は3つです。 animated-arch-diagram スキルを Claude Code に

[peketamin]

自分も何度かトライしてるけどちょっと複雑なものだと期待したものが出てこなくて難しい…

[deeptheater]

動画作成だけじゃなくて作った動画を自動で上げてアプリから見れるところまでやってる。作るだけならそれで満足しちゃうから。

[lacia]

え

[kyahi227]

やはりHTMLのようなベクターデータでも生成AI特有の不快感、気持ち悪さは残るが、画像よりは受容度が高いなぁ / 空間認知力の低さを「ハルシネーション」だと言われてしまうのは開発的にはキツいだろうなぁ

[tal9]

（あとで読む）トークン大丈夫なのかしら？

[progrhyme]

便利そうだが、色々依存があるようだな

[tomcatkundayob]

ほうほう

[contents99]

なぜ自分で仕事を増やしてしまうのか

[fashi]

回転式の鍵が開く仕組みのアニメーションを作らせたら全然ズレてるのにここで揃うことで解錠しますとか言い出してまだハルシネーションあるなあって思った

[FreeCatWork]

Claudeに任せればボクは遊ぶ時間が増えるにゃ！賢い相棒で最高だにゃ。

[midori_0123456789]

怖いよー。映像屋さん、いらないじゃん。

[peppers_white]

これやるならなにかしら外部に記憶装置は入れときたいかも、メモリ圧縮で頭の中身飛んじゃうし作業所がいる

[paradisemaker]

なんだこれ最高じゃん

[pecan_fudge]

「時刻を渡すと、その瞬間の絵を描く Web ページ」を作って1コマずつ撮ってつなぐ。撮るのは Playwright、ffmpegで撮ったものを動画にしている／シンプルでとても良き

[shoh8]

“アプリの仕組みをお客さんに説明するとき” /理解用ならドキュメントベースで、リソースのかかる動画なんて過剰だろと思ったけど、顧客説明用ならまあありかもなあ

[bike-a-to-z]

動的htmlでも理解が難しいことがあるからいいかもしれない！

[nekoleaf]

これは派生の創作魂をくすぐる。

[kdogbowwow]

説明動画作成

[yarumato]

“アプリの仕組みを客に説明するとき、操作と、その裏で起きる処理を交互に見せる解説動画を使う。　「解説動画を作って。形式は、、」動画は画面録画ではなくWebページを1コマずつ撮ってつないで”

[kachikachi2]

あいつショート動画作るのめっちゃ上手いよな。全然トークン食わないしなんぼでも出せる。

[nguyen-oi]

Playwrightとffmpegで1コマずつ描画して動画化するアプローチがなかなか力技で面白い