Claude Codeで45秒、手元Macで動画自動生成は本当に効率的か

Claude Codeを使い、javascriptで操作画面と処理構成図を交互に表示する解説動画が手元のMacで約45秒で作れる。編集部は動画制作の自動化が一段と進んだと評価する。

出典：zenn.dev（2026年10月21日）

スレの流れ

1. ニュースデスク「アプリの仕組み説明に使う動画を、Claude Codeがjavascriptを用いて自動生成できるようになった。動画は操作画面と裏処理の構成図を交互に表示し、44秒の動画で1314コマを生成。動画は画面録画ではなく、Webページの絵を1コマずつ描いて撮影する手法だ。撮影はPlaywrightとffmpegを活用し、何度書き出しても同じ動画が得られる。制作は手元のMacで約45秒。GitHubに指示テンプレートとサンプルコード「animated-arch-diagram」が公開されている。編集部は、こうした動画制作の自動化が開発者の説明負担軽減につながると見る。」
2. 名無しさん「「時刻を渡すと、その瞬間の絵を描く Web ページ」を作って1コマずつ撮ってつなぐ。撮るのは Playwright、ffmpegで撮ったものを動画にしている／シンプルでとても良き」
3. 名無しさん「“アプリの仕組みをお客さんに説明するとき” /理解用ならドキュメントベースで、リソースのかかる動画なんて過剰だろと思ったけど、顧客説明用ならまあありかもなあ」
4. 名無しさん「動的htmlでも理解が難しいことがあるからいいかもしれない！」
5. 名無しさん「自分も何度かトライしてるけどちょっと複雑なものだと期待したものが出てこなくて難しい…」
6. 名無しさん「これは派生の創作魂をくすぐる。」
7. 名無しさん「あいつショート動画作るのめっちゃ上手いよな。全然トークン食わないしなんぼでも出せる。」
8. 名無しさん「Playwrightとffmpegで1コマずつ描画して動画化するアプローチがなかなか力技で面白い」

反応の出典：はてなブックマーク（229件）

編集部の井戸端会議

※編集部スタッフ（佐倉・ミナ・タケシ）による会話形式のまとめです。実在の受講者・卒業生の発言ではありません。

ミナ「これ、動画を自動生成って何がすごいの？怖くない？」

タケシ「今はJavaScriptで1コマずつWebページを描く方式。45秒で1300コマ作れるのがポイントだ。」

ミナ「なるほど。でも動画作るのって結構時間かかるんじゃないの？」

タケシ「手元のMacで45秒。何度書き出しても同じ動画ができる安定性もある。」

ミナ「じゃあ誰に役立つの？」

佐倉「開発者がアプリ構成を説明するとき、文章や静止画より伝わりやすい。説明負担が減る。」

タケシ「記事にもあるように、操作画面と裏処理の構成図を交互に見せる動画で理解促進できる。」

ミナ「動画制作の効率化は確かに歓迎されるね。」

佐倉「ただ、動画が重い環境や単純な説明ならドキュメントで十分かもしれないな。」

ミナ「スレでも「動画は過剰」とか「複雑なものは期待通りにいかない」って意見があったよね。」

タケシ「そう、動的HTMLでも理解困難な場合がある。動画生成の制約は見落とせない。」

佐倉「さらに自動生成には細かい調整が必要で、誰でも簡単とは言い切れない。」

ミナ「なるほど。じゃあ今プログラミングやAI学ぶ人はどうすればいいの？」

佐倉「実務で説明が多い人は今月中にツールを試し、そうでなければ様子見が効率的だ。」

出典

• 仕組みを理解する動画を、Claude Codeに作らせると便利すぎる（zenn.dev、2026年10月21日）

あわせて読みたい

• 給付金対象のプログラミングスクールおすすめ｜実質負担額と申請手順を解説
• AI研修に払った分は戻るのか。ROI試算と未経験採用の現実から読む3つの動き
• 「AIより人を雇う方が安い」は本当か。Gartnerが警告した85%予算超過の中身
• SQLを覚える前に分析が終わる？ChatGPT Work「Data agent」の使いどころ
• 古いGPUで公式APIより速く。DeepSeek v4.1 Flashの”裏技”が学ぶ人に示すこと
• Qiita7万記事が示した、AI以後に”読まれる技術文章”の条件