Claude Codeに仕組みの説明動画を作らせる方法。元記事を読み、私の記事づくりの流れで試した

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は、musoukunさんがZennに書いた、Claude Codeに仕組みの説明動画を作らせる方法を書いた記事を紹介します。

この記事は、私が保存したブックマークです。元記事のリポジトリを10月23日に取り込んで、AIに頼んで、私の記事づくりの流れを動画にして確かめました。あなたがお客さんや仲間に、仕事の仕組みを説明したい場面を思い浮かべながら読んでください。

読み方の筋は4つです。元記事の説明、リポジトリで確かめた事実、私が10月23日に試した結果、そして私ならこう使う、の順に進みます。元記事の主張は「musoukunさんは」、リポジトリの内容は「リポジトリの手引き（SKILL.md）によると」と分けて書きます。私の手元の記録として書くのは、10月23日に試した分だけです。

Zenn記事「仕組みを理解する動画を、Claude Codeに作らせると便利すぎる」（musoukunさん（株式会社エクスプラザ・元記事の筆者）の記述・「最近は動画で説明資料を作っている」の節）

最近はjavascriptを用いて、Claudeで動画を生成しやすくなったので、アプリの操作と、その裏で起きている処理を交互に見せる解説動画を作って説明に使っています。

元記事が言っているのは、アプリの操作と、その裏の処理を交互に見せる解説動画を、JavaScriptでClaudeに作らせて、説明に使っているということです。

書いたのは、musoukunさん（株式会社エクスプラザ）です。2026年10月21日に、Zennへ出した記事です。

あなたがお客さんに、仕事の仕組みを説明する場面を思い浮かべてください。構成図や文章で見せるのが、一般的ですよね。

musoukunさんも、アプリの仕組みを説明するとき、構成図やHTML、Markdownで見せるのが一般的だと書いています。そこに、動画という手を足した形です。

紹介されているのは、Claude Codeに作らせる指示テンプレートと、動画の作りです。

使うのは、GitHubのリポジトリ musoukun/skills にある、animated-arch-diagramです。

これはスキルと呼ばれます。Claude Codeに入れて使う、作り方の手順のまとまりです。入れ方は、フォルダを ~/.claude/skills/ にコピーするだけだと、元記事にあります。

完成形は、44秒の動画だ。架空のみどり町図書館の、本探しチャットをダミーで作り、同じ指示で作り直したそうです。画面の本や数字は、すべてダミーのものだ。

動画の流れは、元記事の説明と字幕によると、こうです。「猫が出てくる小説を読みたい」と打ちます。文が9語に区切られて、「猫」「小説」だけが強調されます。

次に、10冊の点数の棒が伸びて、並べ替わります。1位と2位の差が1点なので、上位3冊を候補にする、という字幕が出ます。ボタンで選ぶと、棚の場所（2階 A-11）が返ります。

リポジトリの手引き（SKILL.md）によると、このスキルが入れる型は2つです。箱と線で見せる構成図型と、1つのデータが手順を通って変わる様子を見せる運搬型です。

書き出すのは、MP4（1920×1080・30fps）とGIFです。

で、ここからが私の読みです！10月23日に、このリポジトリを取り込んで、手引きを読みました。

確かめた事実が1つある。この版の手引きと運搬型の書式には、元記事の「操作→仕組み→操作→仕組み」の交互が出てきません。

モック画面（本物そっくりに作った見本の画面）も、Screen Studio風のズーム（クリックした場所に自動で寄る動き）も、同じく出てきません。

私の推測では、元記事の動画は、同じ仕組みの上に、この指示テンプレートで別に作られたのだと思います。

私が今回試したのは、運搬型だ。元記事と同じ形の動画は、作っていません。先に言っておきます！

Zenn記事「仕組みを理解する動画を、Claude Codeに作らせると便利すぎる」（musoukunさん（株式会社エクスプラザ・元記事の筆者）の記述・「指示テンプレート（サンプル）」の節）

画面に出す数字や例は実データから取る。

元記事が言っているのは、画面に出す数字や例を、作り話にせず、アプリが実際に出した記録から取る、ということです。

手順は、入れる、渡す、記録を取る、の順です。1つ目は、スキルを ~/.claude/skills/ にコピーします。

2つ目は、説明したいアプリのディレクトリで、指示テンプレートのアプリ名を書いて、Claude Codeに渡します。

3つ目は記録です。送った質問、途中の結果（区切った語、10冊の点数）、返事を、JSONという形式にまとめます。動画に出す数字は、全部ここから取る。

リポジトリの手引きも、同じ向きです。説明用に作った例ではなく、実物を1回流した記録から中身を取る、とあります。

指示テンプレートは、5項目です。1つ目は操作の場面。実画面の録画ではなく、モック画面でよく、クリックや入力に合わせてズームします。

2つ目は仕組みの場面です。送った文字を画面いっぱいに広げて、処理の様子を動きで見せます。文字が区切られる、順位表の棒が伸びて並べ替わる、といった動きです。

3つ目は構成図で、操作の合間に、該当する部分だけ差し込みます。4つ目は数字と例で、実データから取ります。5つ目は字幕で、下に小見出しと一行を置きます。

言葉を2つ言い換えます。モック画面は、本物そっくりに作った見本の画面だ。Screen Studioは、クリックした場所に自動で寄ってくれる画面録画アプリです。

今回のダミーアプリで、元記事が書き換えたのは、次の所です。アプリ名は、みどり町図書館の本探しチャット。使いたい質問例は、「猫が出てくる小説を読みたい」。使わない例は、実在する本のタイトルです。

AI氣道『Claude Opus 5.5でモーション動画を頼む方法。テツメモさんが紹介したSkillryとMotion Video Kitで6つ試した』より

「書かなかった所は、AIの好みで埋まります。一行で頼むのは、その全部をAIに任せることなんです。」

この向きを、私は『Claude Opus 5.5でモーション動画を頼む方法。テツメモさんが紹介したSkillryとMotion Video Kitで6つ試した』で書いています。

正直、ここが一番大事だと読みました！この書き換えが、AIの好みで埋めさせない線になっているからです。

実在する本のタイトルは使わない。例は実データから取る。先にこう決めておくと、AIが空白を想像で埋める所が減ります。元記事は、そう読める作りです。

あなたが仕事の流れを動画にしたいときも、同じだと私は読みました。何を書き換えて、何を使わないか。渡す前に決めておきます！

Zenn記事「仕組みを理解する動画を、Claude Codeに作らせると便利すぎる」（musoukunさん（株式会社エクスプラザ・元記事の筆者）の記述・「作り」の節）

動画は画面を録画していません。「時刻を渡すと、その瞬間の絵を描く Web ページ」を作って1コマずつ撮ってつないでいます。

元記事が言っているのは、動画は画面を録画したものではなく、1コマずつ絵を描いて撮って、つないだものだ、ということです。

作りはこうです。時刻を渡すと、その瞬間の絵を描くWebページを作る。次に、Playwrightというブラウザを自動で動かす道具で、1/30秒ずつ時刻を進めて、1コマずつ撮ります。

撮ったコマは、ffmpegという動画を作る道具でつなぐ。44秒の動画は1314コマで、書き出しは、元記事の筆者の手元のMacで、だいたい45秒でした。

コマとは、動画を作る1枚1枚の絵のことです。1秒に30コマ並べると、動いて見える。

何度書き出しても同じ動画になる点が良い、とmusoukunさんは書いています。

リポジトリの手引きにも、同じ仕組みが書いてあります。時刻tを入れると必ず同じ絵が出る関数（ARCH.render(t)）で、乱数や実時間を使いません。

だから、PCの速さに関係なく、カクつかない動画になるそうだ。

AI氣道『Claudeで動画制作、動画生成AIを使わずコードで映像を作る方法』より

「私は2026年10月10日、インスタ用の動く投稿を、動画生成AIを使わずに7本作りました。Mac の中のHTMLのアニメを1コマずつ撮り、ffmpeg でつないだ形です。」

HTMLのアニメを1コマずつ撮ってffmpegでつなぐ話は、私が10月10日に『Claudeで動画制作、動画生成AIを使わずコードで映像を作る方法』で書いています。

元記事の作りと、私が10月10日に書いた作り方は、考え方が同じだ。時間を1コマずつ進めて、そのたびに撮ってつなぎます。

ただし、10月10日の7本は、別の作り方の話です。今回の動画と同じ体験として、混ぜません。

ここから、私の手元の記録です。10月23日に、AIに頼んで、運搬型で私の記事づくりの流れを動画にしました。

出来た動画は、1920×1080で40.2秒、1206コマだ。MP4は4,798,083バイト（約4.8MB）、GIFは約13.2MBでした！

書き出しは、Macで1回あたり約45〜59秒でした。元記事の約45秒と、近い数字です。

同じ時刻の静止画を、2回の書き出しで比べると、同じ画像でした！ハッシュ（画像の中身から作る確認用の短い文字列）が一致しています。元記事の「何度書き出しても同じ動画になる」と合う。

あ、そうだ。数字を並べておきます。元記事は44秒・1314コマ、私は40.2秒・1206コマです。中身が違う動画なので、長さも違う。

私の読みでは、録画との一番の違いは、直したい所だけを直して、同じ手順でまた作り直せる点です。

Zenn記事「仕組みを理解する動画を、Claude Codeに作らせると便利すぎる」（musoukunさん（株式会社エクスプラザ・元記事の筆者）の記述・「動画の作り方」の節）

場面ごとに「何秒目に何をするか」を並べて書きます。

元記事が言っているのは、動画の作り方を、場面ごとに「何秒目に何をするか」の一覧として書く、ということです。

操作1の場面の例は、7行です。時刻の順に、1つずつ言い換えます。

0.5秒で、カーソルを入力欄へ動かします。0.8秒かけて動きます。0.7秒で、入力欄に1.8倍で寄ります。1.0秒かけて寄ります。

1.4秒で、入力欄をクリックします。1.6秒から、記録の質問を、1秒に6文字のペースで打ちます。

4.1秒で、カーソルを送信ボタンへ動かします。4.7秒で、ボタンをクリックして、送った吹き出しが出ます。5.0秒で、出た吹き出しに2.0倍で寄ります。

式の中のRは、アプリの記録だ。質問の文章も、字幕の数字も、Rから取る。

字幕の例は、6.2秒に小見出しCHOOSEを出し、「1位と2位の差が（記録の差）点なので、上位3冊を候補にする」と出す一行です。差の数字は、記録の「R.gap」から入ります。

アプリを直して流し直せば、字幕の数字も一緒に変わる、と元記事は添えています。数字を手で書かず、記録から入れているからです。

リポジトリの手引きによると、運搬型は、駅（stations）、線（paths）、出来事の並び（beats）を書く形です。何秒滞在して何を見せるか、を並べる点で、考え方は同じです。

吹き出しは2〜4行、字幕は1文が目安だと、手引きにあります。

時刻と倍率を数字で書いておくから、直したい所だけを直せる。私はそう読みました。

でね、ここから、私が今回書いた運搬型の仕様です！駅は5つです。元の記事、読んで下書き（AI）、検査する（プログラム）、下書きを置く（プログラム）、公開を決める（私）。

検査が止めたら「読んで下書き」へ戻る線を、1本引きました。動画の中では、1周目で止めて、2周目で通します。

AIとプログラムと私で、役割ごとに色を分けました。最後の一言は「書くのは AI、止めるのはプログラム、決めるのは私」です。

あなたが説明したい流れが5つの段なら、駅も5つです。段を決めて、戻る線の有無を決める。そこが仕様の中心になります。

Zenn記事「仕組みを理解する動画を、Claude Codeに作らせると便利すぎる」（musoukunさん（株式会社エクスプラザ・元記事の筆者）の記述・「指示と動画の対応」の節）

9語、10冊の点数、差1点、棚の場所は、アプリの記録のまま

元記事が言っているのは、動画に出てくる数字は、作った人が考えたものではなく、アプリの記録そのままだ、ということです。

元記事の対応表（指示→動画）から、順に読みます。クリックや入力に合わせてズームする指示は、入力欄やボタンを押す前に、そこへ寄る動きになります。

処理の様子を動きで見せる指示は、文が9語に区切られ、10冊の棒が伸びて並べ替わる動きになります。構成図は該当部分だけ、の指示は、操作のあとに、いま通った箱だけが光る動きになります。

数字は、9語、10冊の点数、差1点、棚の場所です。全部、アプリの記録のままだ。

リポジトリの手引きにも、同じことが書いてあります。「実データで作る」。説明用に作った例ではなく、実物を1回流した記録から中身を取る。取れないときは、止まって聞く。

AI氣道『Claude Code 装備とは、パソコンで使える道具のこと。動画と声の仕上がりが変わる理由と入れ方』より

「私なら、道具は絞って入れ、使う条件を確かめ、足したあとは出力を自分の目で見てから、次に進みます。」

足したあとは出力を自分の目で見てから次に進む、という向きを、私は『Claude Code 装備とは、パソコンで使える道具のこと。動画と声の仕上がりが変わる理由と入れ方』で書いています。

いやー、記録が無いと、数字は入れられません！私の図には、実際に流した記録を渡していません。だから、数字を入れていない。

「止まる所があれば」「止まる所がなければ」のように、条件で書きました。図が示すのは、流れだけだ。最初の版に入れていた「1か所」「0件」のような数字は、記録が無いので外しました。

数字が入ると、動画は一気に説得力が出ます。その分、数字が合っているかを、記録で確かめられる形にしておく必要があります。

確かめ方も書きます。動画を出す前に、各場面の終わり近くの静止画を撮って、全部、目で見ました。

すると、直す所が2つ見つかった。折り返しで1文字だけ次の行に残る行と、2周目の吹き出しが重なる所です。

文を短くして、幅と横のずらしを入れました。2周目の吹き出しは、次の駅に着いたら消える設定にして直しました。

直したあとの4つの時刻（15.4秒・26秒・30.5秒・35.8秒）の静止画を、再び撮って、目で確かめました！

足したあとは、出力を自分の目で見てから、次に進む。動画も同じだと、私は読んでいます。

Zenn記事「仕組みを理解する動画を、Claude Codeに作らせると便利すぎる」（musoukunさん（株式会社エクスプラザ・元記事の筆者）の記述・「感想」の節）

Claudeでこういうのがポンと出せるようになって、動画制作がしやすくなっていると思う。

元記事の感想は、短いです。Claudeでこういうのがポンと出せるようになって、動画制作がしやすくなっている、すごく進化している、というものです。

ここで、10月23日に試して分かったことを、順にまとめます。

1つ目。同じ仕組みで、私の仕事の流れも、図の動画にできました。1920×1080・1206コマで、MP4は約4.8MBでした。

2つ目。実際に流した記録が無いと、数字を入れられません。だから私の図は、流れだけになった。

3つ目。動画は、出す前に静止画で全場面を見ます。折り返しの残り文字と、吹き出しの重なりは、そこで見つかった。

改めて、違いを書いておきます。元記事は、操作と仕組みを交互に見せる動画です。私が作ったのは、運搬型の動画だ。形が違います！

元記事の筆者は、アプリを直して流し直せば字幕の数字も変わる、と書いています。私の図は、その手前の、流れを決める段階までです。

ポンと出せると言っても、材料は人が決めます。何を書き換えるか、どの記録を渡すかは、人の仕事です。

そのうえで、私ならこうします。自分の仕事のうち、お客さんや仲間に説明したい流れを、1つ選びます。

次に、その流れを1回、実際に流します。送ったもの、途中の結果、返事を、記録として残します。

その記録の数字だけで、図を作らせます。出す前に、静止画で全場面を見ます。

公開、つまり外に出すかどうかは、私が見て決めます。書くのはAI、止めるのはプログラム、決めるのは私です！

で、あなたが説明したい流れは、何でしょうか。お客さんや仲間から、何度も聞かれる説明が1つあれば、そこが最初の候補になると思います。

musoukunさんの元記事は、Claude Codeに、アプリの操作と裏の処理を見せる解説動画を作らせる指示テンプレートと、動画の作りを紹介していました。44秒の動画は、録画ではなく、1コマずつ撮ってつないだものです。

リポジトリの手引き（SKILL.md）によると、仕組みは、時刻を入れると必ず同じ絵が出る関数です。実データで作ること、取れないときは止まって聞くことも書かれていました。

正直、一番の収穫は、動画より先に記録を残す順番でした！10月23日に、運搬型で私の記事づくりの流れを40.2秒の動画にして、数字は記録が無いので入れませんでした。

でね、元記事と私の動画は形が違います。元記事は操作と仕組みの交互、私は運搬型です。静止画で全場面を見て、2つの直しを入れてから出しました。

あなたが試すなら、自分の説明したい流れを1つ選び、記録を残し、その記録の数字だけで図を作り、静止画で見てから動画にしてみてください

この記事で学んだことを誰かに教えて恩送りして学びを深めよう！