user【週刊】今日から始めるAI生活

記事は書けるのに動画制作が苦手な方へ。大手が無料公開した「HyperFrames」に記事を投げるだけで、音声もアニメーションも付いた5分半の解説動画ができました！

ブログもニュースレターも書けるのに、動画だけは手が回らない。私もそうでした。HeyGenが無料公開したHyperFramesに記事を投げるだけで、ナレーションもアニメーションも付いた5分半の解説動画ができます。画像は1枚も生成せず、追加課金も0円。教材がなくても完結する道具一式を、まるごと紹介します
user
テツメモ｜tetumemo
2026/08/20

こんにちは！テツメモです。

2週にわたってお届けしている動画の話、今日が第2回です。前回は「買った教材を自分の環境に合わせ込む」話でしたが、今回は教材なしで完結します。

前回の記事　↓

今回使うSkillsは「Hyper Frames」です。はじめて聞く人も多いと思いますが無料で使えるのにとても素晴らしいSkillsです。

「こんな雰囲気の10秒動画を作って」

そんな言葉をAIに伝えるだけで、AIが動画の構成を考え、文字や画像を配置し、アニメーションまで付けて、実際の動画として書き出してくれる。それを実現するための新しい仕組みが、HyperFrames（ハイパーフレームズ）です。

HyperFramesは、AI動画サービスで知られるHeyGenが公開しているオープンソースの動画制作フレームワーク。

Claude CodeやCodex、CursorなどのAIエージェントに「こんな動画を作って」とお願いすると、AIが裏側で動画を“プログラム”として組み立て、最終的にMP4動画として完成させてくれる。公式も「動画を説明すれば、AIエージェントがHTML・CSS・JavaScriptを書く。コードを書く必要はない」と説明している。

しかも面白いのは、一度生成して終わりではないこと。

「文字をもっと大きく」、「ここだけ3秒長く」、「このグラフを動かして」、「全体をAppleのCMっぽく」とAIに伝えながら、動画を会話で何度も作り直していけます。

これまでPremiere ProやAfter Effectsで人間がタイムラインを細かく操作していた世界に、いよいよ本格的に「AIに動画編集そのものを任せる」という選択肢が”無料”登場しました。

🔗 HyperFrames 公式サイト

🔗HeyGen公式のHyperFrames解説記事

🔗 HyperFrames 公式GitHub

🔗HeyGen公式サイト

Generated image

💡公式のHeyGen公式のHyperFrames解説記事をLilysAIで要約しました

【LilysAIでブログ執筆のハードルを極限まで下げる！】カスタム設定で画像付きnote記事を誰でも簡単に執筆する方法

今回、Hyper Framesのくわしい使い方は公式の記事があるので割愛します。あくまで以下で紹介する”記事や情報を投げるだけで画像を使わずアニメーション付きの解説動画を作る”という点に集中してご紹介します。

💡記事などを投げるだけでこちらのポストで紹介しているようなアニメーション付き解説動画が生成できます　↓

この投稿に付けた5分33秒の動画は、記事を1本投げただけで出てきたものです。しかも今回は、画像を1枚も生成していません。

前回まで、私の動画づくりの待ち時間は、ほとんどが画像の生成待ちでした。スライドの絵をAIに描かせて、それを並べて、動かす。悪くない作り方です。ただ、待つんです。そして毎回、少しずつ絵が変わる。

今回見つけたのは、その工程そのものを外してしまう作り方でした。

この記事で解決したいこと

  • 動画を作りたいけれど、教材も動画編集ソフトも持っていない
  • 画像の生成待ちが長くて、記事を書くたびに動画を作る気になれない
  • 作り直すたびに絵が変わってしまって、シリーズものの見た目が揃わない

この記事では、画像生成を使わずに、記事を投げるだけで講義動画ができる作り方をお伝えします。読み終わる頃には、「自分の記事も、これで動画にできそうだ」という手応えが残るはずです。

📝 tetumemoのLP紹介

image.png.webp

ニュースレターの記事が130本を超えてきて、「あの記事どこだっけ」と自分でも探すのに苦労するようになったのがきっかけで、過去記事が探しやすい自分のポートフォリオサイトを作りました。

今では課題やテーマから過去記事や配布物を検索できるようになっていて、今回のように動画の話を続けたあとで「そういえば似た話、前にも書いたな」と思ったときの道しるべになっています。

🔗tetumemo.com（ポートフォリオサイト）

📝 オススメの教材を紹介

image.png.webp

AIカンパニーを構築する際に、その道のプロを教材を購入してリクルートしてきました。今では顧問として毎日相談しています。

そんな教材ですが、購入前にどんな内容なのか、そして自分でも活用できるのか不安だと思います。その不安を解消するために、私が先に購入して、試して、実際に使ったノウハウを紹介する記事を掲載しています。

🔗テツメモが実践した教材紹介

今回の記事は教材なしで完結しますが、私が記事を投げるだけで講義動画生成ができるようになるきっかけをくれたのはイケハヤさんの動画講義の教材でした。

🔗「AIで動画講義を作る方法」〜 撮影ゼロ・音声代は1本約20円・自分の声のクローンで（Brain・#PR）

教材から専門家を招き入れるというやり方そのものは、少し前の記事で詳しく書いています。

Fable 5解禁の7日間で、Brainの教材から専門家を5人ヘッドハンティングして、約20分でAI組織が完成。Fable 5の7日間の実行ログをシェアします

私の場合、自分の専門外のSkillsは「買う」ようにしています。もちろんAIがあれば自分で作ることもできますが、他の方がトークンを燃やし試行錯誤して作り上げたSkillsを購入したほうが圧倒的に早いです。つまり時間を買ってます。そのおかげでAIカンパニーを作り上げ、AI社員を働かせることができるようになりました。

気になる教材があれば、ぜひこちらもチェックしてみてください。

🔗テツメモが実践した教材紹介

🎙️ AI音声でキャッチアップ

Untitled_Clipping_081926_114855_PM.jpg.webp

「文章を読む時間がなかなか取れない」という方のために、記事の内容をAIが対話形式で解説してくれる音声を用意しています。通勤中や家事をしながら、まずは全体像をつかんでいただけます。

spotify show

私のSpotifyをフォローしていただければ通知が届きますのでチェックしてみてください。

spotify show

🔙 前回：教材でノウハウを学んで、鞘を作りました

m0LiREbf.jpg.webp

前回の記事では、買った教材のSkillを1文字も書き換えずに、外側から自分好みに変える「鞘」の話をしました。

あの記事で私が使っていたのは縦のショート動画を作る教材です。

🔗「AIで動画講義を作る方法」〜 撮影ゼロ・音声代は1本約20円・自分の声のクローンで（Brain・#PR）

で、今回Hyper Framesを使って記事などの解説動画を作ろうと思ったのはイケハヤさんの講義動画を作る教材でした。

🔗「AIで動画講義を作る方法」

これは7月18日に購入してかなり活用していました。

この教材の作り方を、先に軽く説明させてください。あとで比較する場面が出てくるので、ここが伏線になります。

教材のやり方は、ざっくり言うとこうです。スライドの絵を画像生成AI（Imagine Image 2.0等）に描かせて、それをRemotionという道具で動かして、ナレーションを付けて動画にする。パンやズームのエフェクトも自動で付きますし、記事の中にある画像やスクショまで拾って動画に入れてくれます。

つまりしっかり動く、かなり作り込まれた作り方です。私はこの教材で、動画づくりの考え方を一通り学びました。

そのうえで、私は鞘をかぶせました。声を自分の声のクローンではなく無料のVOICEVOXに、キャラを教材のサンプルではなく自作のものに。このとき自分でも気づいていなかったのですが、この判断が今日の話の入り口になります。

🔧 そのあとも、鞘を磨き続けていました

phbVvYg0.jpg.webp

前回の記事を出したあとも、私はこの道具を触り続けていました。1か月弱のあいだに投稿した記録が残っているので、時系列で並べてみます。道具は作って終わりではなく、育て続けるものだという話でもあります。

ここは一旦Hyper Framesでの作り方ではなく、イケハヤさんの教材を使い、どのように私が講義動画を作っていったのかを振り返ります。

7月19日：「上位モデルでないと動かない」を疑ってみた

この教材には、はっきりと前提が書かれています。推奨はFableクラス（その時点の最上位モデル）。教材のパイプラインは全部そこで組み上げて検証した、と正直に書かれていました。

ただ、前回のショート動画作成教材同様、私は引っかかりました。最上位モデルは、いつも使えるとは限らないからです。

そこで手持ちのモデルで動かせないか試したところ、動きました。そのときの投稿がこちらです。

理由も一緒に書いてあります。

Fable 5推奨でしたが、私の場合クローンボイスではなく、AI音声なのでOpusでも安定して作れるように調整

これ、あとで気づいたのですが、前回の記事でVOICEVOXにした判断が、そのままここに効いていました。声のクローンを作る工程を外したぶん、AIが処理する仕事が軽くなって、最上位モデルでなくても走り切れるようになったんです。

音声代を節約するつもりでやったことが、モデルの縛りまで外していた。狙ってやったわけではないので、これは結果論です。でも、こういう副産物があるんだなと思いましたね。

VOICEVOXって何？という方は前回の記事のチェックをお願いしますね。

🔗VOICEVOX（公式サイト）

7月24日：記事を投げて15分放置

次は実際に自分のニュースレターを1本投げてみた回です。Claude Opus 4.8で、字幕付きの5分以上の動画ができました。

このスレッドに、私はこう書いています。

記事をなげて、動画を作ってと依頼。15分くらい放置したら完成しました！

15分。この数字、あとで効いてきます！投げてから完成するまでのほとんどが、画像を生成する待ち時間でした。

7月25日：Opus 5に替えたら、途中で詰まらなくなった

翌日にはClaude Opus 5を試しています。

Claude Opus 5メチャ良いな
ニュースレターの記事を投げ解説動画完成
5分〜10分くらい放置して、完全自動でここまで仕上げてくれる
VOICEVOXの音声だからClaudeのサブスクだけで作れる。APIは不要

このときの手応えははっきり覚えています。Opus 4.8でも作れてはいたのですが、たま～に途中で止まることがあったんです。それがOpus 5では詰まらなくなりました。放置時間も15分から5〜10分に縮んでいます。

そして「Claudeのサブスクだけで作れる、APIは不要」という一文。ここが地味に大きいです。動画1本ごとに従量課金が乗らないので、失敗しても気にせず作り直せます。

7月31日：他社のモデルでも動くようになった

さらにこの日、CodexのGPT-5.6 Solでも作れるところまで持っていきました。

作業はClaude CodeのClaude Opus 5か、CodexのGPT-5.6 Solで作れちゃう
記事を投げればスクショも、記事内画像もいい感じに取り込んでくれるから便利！

Claude系だけでなく、他社のモデルでも動く。ここまで来ると、「どのAIを契約しているか」で詰まる人がかなり減ります。

ちなみにこの投稿にある「スクショも記事内画像も取り込んでくれる」は、教材の作り方が持っている強みです。今日これから紹介する私の作り方には、この機能がありません。そこは正直に、後半で比べます。

8月13日：下位モデルでも作れました

そして先週、GPT-5.6 Lunaという下位モデルでも1本仕上がりました。

Fable 5推奨だった道具が、Opus 4.8で動き、Opus 5で安定し、他社のGPT-5.6 Solでも動き、最後は下位モデルまで降りてきた。1か月弱で、ここまで間口が広がりました。

📢ここ、試行錯誤したポイントです：モデルを替えるたびに「動くかどうか」を確かめるのではなく、詰まった箇所のログをそのままAIに見せて「なぜ止まったか」を聞くようにしました。そうすると「この工程が重いので分割しましょう」と提案が返ってきます。人が原因を推理するより、止まった記録を渡すほうが早いです。

🚧 ここまでは全部「教材を持っている人の話」でした

nr9L5xtM.jpg.webp

ここまで読んで、こう思われた方がいるはずです。

「面白いけれど、その教材を持っていない」

🔗「AIで動画講義を作る方法」

そのとおりなんです。ここまでの話は全部、教材のSkillがあることが前提でした。前回配った鞘も、被せる相手がなければ意味がありません。

私は、ここが気になっていました。ニュースレターを書いている方や、ブログを書いている方に「記事を投げるだけで解説動画ができますよ」とお伝えしたい。でも「まず教材を買ってください」から始まると、試すまでの距離が遠すぎます。

だから、教材を持っていない人が、今日から試せる形を別に作ることにしました。それが紹介する「Hyper Frames」になります。前置きが長くなりましたが、ここからが記事の本題です。

先に、正直な断りを2つだけ。

1つ目。今日紹介する作り方には、Node.jsという土台のインストールが必要です。ただ、AIでVibe Codingをしている方ならすでに導入済みの方がほとんどだと思います。

まだ未導入の方は前回のVOICEVOXより、ほんの少しだけ手間が増えます。ただし入れるのは最初の1回だけで、確認からインストールまでAIに丸投げできる文を用意してあります。とはいえ、Hyper Framesを導入する時、AIが「Node.jsが必要なので導入しても良いですか？」と聞いてくれると思いますし、聞いてこない時は「Hyper Framesを動かすため、私の環境で不足している部分があれば提案してください」と聞けば大丈夫です。

2つ目。この記事の内容が難しいと感じたら、記事ごとAIに投げてください。今回も記事をまるごとZIPファイルで提供します。それをAIに投げたり、Gemini Notebook（NotebookLM）に投げて専用の質問箱を作ったりして、「これを読んで、私の環境で同じことをやりたい。まず何をすればいい？」と聞けば、あなたのAIが案内役になります。詰まったら、エラーの文章をそのまま貼るのがいちばん早いです。

🛠 見つけたのは、画像を作らない作り方でした

2dY22Wpz.jpg.webp

8月8日、私はある無料の道具を見つけて、そのまま夢中になりました。HyperFrames（ハイパーフレームズ）といいます。

HeyGenという会社が作って、オープンソースとして公開している道具です。ライセンスはApache 2.0で、商用利用もできて、無料です。

何をする道具かというと、HTMLで書いた画面を、そのまま動画（MP4）に書き出すというものです。ここだけ聞くと地味に思えるかもしれません。私も最初はそう思いました。

でも触ってみて、これは根本から違うと気づきました。

大きな違いは「画像を作らない」こと

私がこれまで使ってきた作り方と、HyperFramesの作り方。この2つは、土台からして違います。表にしてみます。


これまで（教材の作り方）

HyperFrames

スライドの作り方

画像生成AIに絵を描かせる

HTMLで組む（絵を描かせない）

動きの土台

Remotion（パンやズームも自動）

HyperFrames

絵の素材

生成した画像＋記事内の画像やスクショも取り込む

手描き風アイコンを呼び出す（後述）

待ち時間

画像の生成待ちがある（実測：投げて約15分）

生成待ちがない

作り直したとき

絵が少し変わる

同じ入力なら、同じ映像

直すとき

画像を作り直す

文字を直すだけ

費用

画像生成の課金

0円

私が「これだ」と思ったのは、費用のところではありません。正直、そこも嬉しいのですが。

効いたのは、画像を作る工程そのものが無くなったことでした。

待ち時間が消えると、何が変わるのか

前の章で「記事を投げて15分放置」と書きました。あの15分の中身は、ほとんどが画像の生成待ちです。スライドが20枚あれば、20枚ぶん待つことになります。

HyperFramesは絵を描かせないので、この待ちがまるごと消えます。書き出し自体は、5分半の動画で2分半ほどでした（私のノートPCでの実測です）。

そして地味に効くのが、作り直しやすさです。

画像生成だと、1文字だけ直したいときでも絵を作り直すことになります。しかも作り直すと、少し違う絵が出てくる。HyperFramesは文字を書き換えるだけなので、直したところ以外は1ピクセルも変わりません。

シリーズものの動画を作っていると、この「毎回同じになる」が想像以上にありがたいです。第1話と第5話で、見た目がきちんと揃います。

絵（スライド内のアイコン）はどこから来るのか

image.png.webp

「画像を生成しないなら、絵は何を使うの？」と思われますよね。私も同じ疑問を持ちました。

答えは、Koboyo（コボヨ）という手描き風アイコンのサービスです。実はこのサービス、少し前にポストで紹介したことがあります。思っていた以上に反応をいただきました。

このときは7万点ほどでしたが、いま公式の利用条件ページを見ると13万点を超えていました。半月ほどの間に倍近くまで増えています。

私が驚いたのは、数より条件のほうでした。商用OK、クレジット表記も不要、登録も不要。プロジェクトの数にも制限がなく、色も自由に変えられます。（声のVOICEVOXのほうは表記が必要です。そちらは記事の後半で整理します）

🔗Koboyo（アイコンを探す場所）

🔗Koboyo 利用条件

AIが、自分で選んで取ってきます

image.png.webp

ここが今日の話とつながるところです。Koboyoはエージェントから直接呼び出せる仕組み（MCP）に対応しています。Claude、Cursor、Manusといった相手が、アイコンを自分で探して持ってこられるわけです。

つまり、AIが「この場面にはこのアイコン」と選んで、取ってきて、配置するところまでやってくれます。私は1つも指定していません。動画がそれなりに見栄えするのは、ほとんどこの部分のおかげです。

ただ、今日お渡しする道具では、あえてこの仕組みを使わない作り方にしました。呼び出せるようにするには設定が要るので、「受け取ってすぐ動く」が壊れてしまうからです。代わりに、公開されているURLから取ってくる小さな道具を入れてあります。登録もインストールも要りません。

すでにMCPを使える方は、そちらへ切り替えたほうが速いです。最初にカスタムしてほしいところの1つです。

使っていい線も読んでおきました

自分の動画やスライドの一部として使うぶんには、商用でも問題ありません。禁止されているのは、アイコンだけを集めて配り直すことと、売ることです。

だから今日の配布物には、アイコンのファイルそのものを入れていません。代わりに「取ってくる道具」だけを入れてあります。この判断の話は、配布物の章でもう一度ふれます。

📢ここ、試行錯誤したポイントです：アイコンは英語の名前（スラッグ）で探すのですが、AIが推測した名前が的外れなことがあります。私の場合、メモのつもりで「note」と指定したら音符のアイコンが出てきました。だから配布する道具には、「取れても絵柄が意図どおりか、書き出す前に必ず目で見る」という手順を組み込んであります。

この比較は、優劣の話ではありません

ここは誤解されたくないので、はっきり書いておきます。

教材の作り方が劣っているという話ではありません。あちらはあちらで、しっかり動きます。パンやズームのエフェクトも自動で付きますし、何より記事の中にある画像やスクショを拾って動画に入れてくれるという、今日の作り方には無い強みがあります。

絵を自由に作りたい。自分のキャラを喋らせたい。記事のスクショをそのまま見せたい。そういう動画なら、教材の作り方のほうが向いています。

今日紹介するのは、そこと引き換えに「速さ・確実さ・手軽さ」を取った作り方です。どちらが上ではなく、選ぶ話だと思っています。

🖥 ブラウザで直せます：Studioという編集画面

Wirz5hHy.jpg.webp

ここまで読んで、「結局プログラムを書くんでしょう？」と身構えた方がいるかもしれません。

そこが、この道具のいちばん面白いところでした。

HyperFramesには「Studio」というブラウザの編集画面が付いています。コマンドを1つ打つと、ブラウザが自動で開いて、動画編集ソフトのような画面が出てきます。

npx hyperframes preview

これだけです。コマンドを打たなくても、AIに

HyperFramesの「Studio」を開いて編集中の動画を見せて

とお願いしても大丈夫です。

何ができる画面なのか

実際の画面がこちらです。

image.png.webp
画像

見ていただくと分かるとおり、動画編集ソフトそのものです。

真ん中にプレビューがあって、再生ボタンで動きを確認できます。下にはタイムラインが並んでいて、スライドが何秒から何秒まで出るのかが目で見えます。右にはデザインやレイヤーのパネル、左には素材とカタログ。

しかもファイルを直すと、その場で画面が更新されます。いちいち書き出し直す必要がありません。

もう1枚、別の場面です。

画像
image.png.webp

こちらはスライドの中身が図解になっている場面です。書き出す前に、この画面で全部確認できます。

私が驚いた機能

ここからが本題です。

この画面で要素をクリックして選ぶと、その選択をAIが読み取れます。

つまり、こういう頼み方ができます。

「この文字、もう少し大きくして」
「選んでいるカードの色を変えて」

「この」「選んでいる」で通じるんです。どこを指しているかを、AIが画面から読み取ってくれるからです。座標を説明したり、ファイル名を伝えたりする必要がありません。

さらに画面の右側には「Describe a change to the agent（変更をAIに伝える）」というボタンまで用意されています。編集画面から直接、AIに修正を頼めます。

「AIに丸投げか、自分で作るか」の二択が壊れました

私はこの画面を見て、考え方が少し変わりました。

これまで、AIに何かを作ってもらうときは、だいたい二択でした。全部お任せするか、自分でファイルを開いて直すかです。前者は細かいところが思いどおりになりません。後者は面倒で続きません。

Studioは、その真ん中を通ります。AIに作ってもらって、気になるところだけ画面で指差して直す。指差した先はAIが分かっているので、あとは言葉で頼むだけです。

正直に言うと、私も最初は「プログラマー向けの画面だろう」と思って身構えていました。開いてみたら、パワポやCanvaを触るのと変わらない感覚でした。

📢ここ、試行錯誤したポイントです：この画面を開いたまま作業を続けていると、動画を書き出すコマンドが途中で止まることがあります。そのときは一度Studioを閉じてから書き出してください。私はこれで数分悩みました。

🎬 記事を投げると、5分33秒の講義動画が出てきます

mtt4NKF5.jpg.webp

道具の話が続いたので、そろそろ現物をお見せします。

これは私が8月17日に投稿した動画です。5分33秒、スライド25枚。元にしたのは、6月に配信した「Claude Designでデザインシステムを作った」という自分の記事です。

投稿にはこう書きました。

誰でも無料で使える「Hyper Frames」Skillが楽しい
Claude CodeやCodexに記事を投げるだけでアニメーション付きのスライドが作れちゃいます。少しアレンジすれば音声付きにもできる
今回はClaude Designの記事を投げ、アイコン付きのアニメーションスライドに仕上がりました。音声は無料のVOICEVOXがコスパ最強！

この動画を作るために私がやったことは、記事のファイルを渡して「動画にして」と頼んだこと、それと2回の確認に答えたことだけです。

私がやったのは「別で組み上げること」でした

ここは言葉を選んで書きます。

私は、教材の道具を作り替えたわけではありません。教材ではノウハウを学びました。そのうえでHyperFramesという優れた無料の道具を見つけて、購読者の方に「記事を投げるだけでスライドができる」体験をしてほしくて、別に組み上げました。

なぜ別に作ったかというと、教材の道具に手を入れる形だと、どうしても「まず教材を買ってください」が入口になってしまうからです。それでは今日の目的（教材なしで試せる形）に届きません。

だから、独立した道具として作りました。中身は、私がこの日1日で6回作り直したものです（その記録は、このあとの章で全部書きます）。

できあがるのは、動画だけではありません

実際に手元に残るものは3つあります。

1つ目は動画（MP4・1920×1080）です。章の区切りと、画面下の字幕と、ナレーションが付いています。

2つ目は台本です。

image.png.webp

スライドごとのナレーション文が、表の形で残ります。これがあると、あとから「あの動画で何を喋らせたか」を探せます。音声を別のソフトで作り直したいときにも、この台本をそのまま渡せます。

3つ目は音声ファイルです。動画とぴったり同じ長さで作ってあるので、動画編集ソフトに持ち込みたい方はこれを使えます。

確認は2回だけにしました

これは意識して設計したところです。AIが何度も質問してくると、作業が止まります。前回の記事で「鞘」を作った理由もそこでした。

今回の道具では、AIが聞いてくるのは2回だけです。（構築環境によって変わる可能性あ）

1回目は「長さと色」。3〜7分の講義モードか、60秒のダイジェストか。色は5種類の見本画像を見せて選んでもらいます。色名だけを並べて「どれにしますか」と聞かれても選べないので、実際の見た目を出すようにしました。

2回目は「構成案と台本」。どのスライドで何を語るか、ナレーションはこの文でいいか。ここでOKを出せば、あとは書き出しまで自動です。

📢ここ、試行錯誤したポイントです：最初は確認を1回にまとめようとしたのですが、色が決まっていないと構成案の見え方が想像できないと気づきました。だから「先に色、あとで中身」の順に分けています。順番を変えただけで、判断がずいぶん楽になりました。

もう1本、この記事のために作りました

いま読んでいただいているこの記事の配布物を試すために、別の記事でも1本作っています。3分58秒、スライド20枚です。

この2本を比べると、記事の長さに合わせて動画の長さも変わることが分かります。長い記事は長く、短い記事は短く。無理に引き伸ばしません。

📖 教材は、土台でもあり、次の一歩でもあります

RbGnK2lQ.jpg.webp

ここで、今日ずっと後ろに置いてきた話をします。

私がこの道に入れたのは、イケハヤさんの「AIで動画講義を作る方法」という教材のおかげです。

今日お配りする道具は教材なしで動きます。それは事実です。でも、動画講義というものをどう組み立てるのか、台本はどう書くのか、音声はどう扱うのか。その考え方は全部、この教材で学びました。土台がなければ、今日の道具は作れていません。

どんな教材なのかサクッと紹介

買わなくても読める無料エリアの範囲で、概要をお伝えします。

撮影はしません。顔出しもしません。音声代は1本あたり約20円。自分の声のクローンを作って、その声で講義動画を作る、という内容です。

構成は全10回のテキスト教材と、各回の動画講義。4つの部に分かれています。

部

中身

第1部 設計編

「録画しない動画づくり」の全体設計。直しのコストを文章の直しと同じにする考え方

第2部 中身編

台本の型／HTMLスライドのテンプレート方式／図解・バナー／動く講師（丸窓カム）

第3部 声編

音声サービスの選び方と聴き比べ／声のクローン実装／不良品を自動ではじく検収／商用利用の規約整理

第4部 配信編

動画の組み立て／全文テロップの自動焼き込み／配信とプレーヤー／全工程を1コマンドに束ねる量産の型

各工程に、そのままコピーして使える依頼文（プロンプト）が置いてあります。

そして特典として、Claude Code用のSkill「video-lecture-maker」が同梱されています。販売ページには正直にこう書かれていました。

このスキルを入れれば、本文を読まなくても動画講義はかなり作れます

前提も明記されています。推奨はFableクラス（その時点の最上位モデル）。教材のパイプラインは全部そこで組み上げて検証した、と書かれています。

私はこの前提に対して、記事の前半で書いたとおり調整を重ねて、下位モデルでも動くところまで持っていきました。教材の前提を否定したいわけではありません。検証済みの道を歩きたい方は、推奨どおり最上位モデルを使うのがいちばん確実です。私は自分の環境の都合で、別の道も通れるようにした、という話です。

「約20円」が「0円」になった読み替え

前回の記事でも同じ構造の話をしました。ショート動画の教材は「1本約50円」でしたが、私はVOICEVOXにして0円にしました。

今回の講義動画の教材も同じです。音声代は1本約20円（声のクローンを使う場合）。私はここもVOICEVOXに置き換えて、0円にしています。

ただ、誤解のないように書いておくと、声のクローンには、無料の音声では出せない価値があります。自分の声で喋る動画は、聞き手との距離が明らかに近い。私は「毎週の量産に耐える形」を優先して無料の音声を選んだだけで、この選択がいつでも正しいとは思っていません。

教材を足すと、こうなります

実は先週、教材の道具と、今日紹介しているHyperFramesを組み合わせた動画も作っています。

誰でもアニメーション付きの動画が作れる「Hyper Frames」のSkillsって本当に優秀
私の場合、記事を投げるだけで解説動画が作れるSkillsをベースに、Hyper FramesのSkillsを組み合わせてHTML形式の動画に仕上がりました

3分30秒のこの動画には、私のキャラクターが出てきて喋っています。今日お配りする道具だけでは、ここまでできません（キャラを出す仕組みが入っていないためです）。

つまり、こういう順番があるわけです。

今日の道具で「記事を投げるだけで動画ができる」を体験する。そのうえで、台本の書き方や構成の型をもっと学びたくなったら、教材が次の一歩になります。キャラを出したい、自分の声で喋らせたいとなれば、教材の領域です。

土台でもあり、次の一歩でもある。私にとってこの教材は、そういう位置にあります。

🔨 6回作り直した記録

yW6D09jb.jpg.webp

実は私がHyper Framesで作ったSkills、最初から記事を投げるだけでサクッと動画ができたわけではありません。トークンを山ほど消費して時間と労力をかけて今回提供するSkillsまで仕上げました。

今日お配りする道具は、1日で6回作り直しました。私が「こうしてほしい」と言うたびに、AIが作り直す。それを見て私がまた注文を出す。その往復の記録です。

なぜこれを書くかというと、AIに何かを作らせるときの現実が、ここに全部詰まっているからです。1回で完成することは、まずありません。

ただ、失敗と経験をシェアする章ですので、早く動画を作りたい方は読み飛ばしていただいても大丈夫です！

1回目：形はできた。でも「置き場所」がなかった

最初にできたのは、AIに読ませる手順書と、そのまま動くテンプレートと、アイコンを取ってくる小さな道具。27秒のサンプル動画も付いてきました。

動くには動きます。でも私は、こう返しました。

フォルダに一式、参照資料、素材、入力、出力のような構造になっているようにしてください。その方が後で材料とアウトプットの把握がしやすいです。

道具が動くことと、人が使えることは別なんですよね。記事を入れる場所も、動画が出てくる場所も決まっていないと、使う人は毎回迷います。だからアセットをひとまとめにしてもらう指示をしました。

2回目：入口と出口を作り、色を5種類にした

カラバリ見本.png.webp

そこで構造を組み直しました。人が最初に開く1枚、AIが読む手順書、詰まったときの資料、記事を入れる input フォルダ、動画が出てくる output フォルダ。

色も5種類のテーマにしました。ここで私は、既定の色を自分のブランド色から中立の色に変えています。配布する道具が私の色を背負っていると、使う人が自分のものにしにくいと思ったからです。

3回目：長さが根本的に間違っていました

ここで私は、かなり強めに指摘しました。

それ、根本的に間違ってますね。私の希望は基本5分。記事の長さにもよるけどこれがデフォルト

AIが最初に組んだのは、25秒から50秒の短い動画でした。私が普段作っているのは5分前後の講義動画です。この前提が伝わっていませんでした。

作り直して、記事の章立てに沿って3〜7分になる形に変えました。60秒のダイジェストは、SNS告知用のオプションとして残しています。

4回目：スライドの型が2種類しかなかった

5分の動画ができるようになって、実物を見て、また引っかかりました。

せっかくHyper Framesを使っているのにスライドのパターンが少なすぎる。プロのデザイナー視点で見ても不十分では？型はこのようなパターンで用意してください。→型の例に続く、、、

そのとおりでした。本文で使えるレイアウトが実質2種類しかなくて、5分の動画では同じ絵が10回以上繰り返されていたんです。

そこで型を5種類から12種類に増やしました。大きな数字を1つだけ見せる型、ビフォーアフターを並べる型、記事の名言を引用する型、時系列を見せる型など。全部の型を1枚ずつ収めた「見本帳」も作って、配布物に同梱しています。

同時に「同じ型を3回続けて使わない」「1本で最低5種類は使う」という決まりも書き足しました。

5回目：声を付けました

ここで私は相談しました。前回の記事でVOICEVOXを紹介しているのだから、今回も声を付けられたほうが自然ではないか、と。

そこで気づいたことがあります。声を後から付けると、字幕と必ずズレるんです。

理由は単純で、読み上げの長さは文によって全然違うからです。3秒で終わる文もあれば、9秒かかる文もある。なのに秒数を先に決めてしまうと、後から入れた声が合いません。

だから順番を逆にしました。先に音声を作って、1文ずつ長さを測って、その実測から秒数を決める。

この変更の効果が、数字ではっきり出ました。AIが勘で決めていた設計は276秒。実際に音声を作って測ったら238秒。38秒もズレていたんです。もし後から声を付けていたら、動画の後半では字幕と声が完全に離れていました。

6回目：絵が止まっていました

最後の指摘は、完成した動画を見ていて気づいたことでした。

右に余白がありすぎてモッタイナイ気がする

指摘は余白のことだったのですが、掘ってみると問題はもっと深いところにありました。最初に全部の項目が出そろって、あとは下の字幕だけが変わる。つまり、20秒近く絵が動いていなかったんです。

これでは、ただの退屈なスライドショーです。動画にする意味がありません。

そこで、台本の文が切り替わるたびに、いま話している項目だけを濃くして、他を薄くする仕組みを入れました。項目の並んだスライドでは、右の余白にその項目のアイコンが大きく表示されて、話が進むと切り替わります。

余白が埋まっただけでなく、「いまどこを話しているか」が目で分かるようになりました。

この6回で、私が学んだこと

AIは、言われたことは正確に作ります。言われていないことは作りません。

長さを言わなければ短い動画を作りますし、型の数を言わなければ最小限で組みます。絵が止まっていることも、指摘されるまで問題として認識しません。

だから大事なのは、できあがったものを自分の目で見て、違和感を言葉にすることでした。「もったいない気がする」でも十分です。そこから掘れば、本当の問題（絵が止まっている）にたどり着けます。

重要なのは1回の指示を作り込んで完ぺきに仕上げようとしないこと。まずは当たりを付けて動くものを作る。そこから気づきをAIと対話しながら詰めていく。この流れがオススメです。

📢ここ、試行錯誤したポイントです：作り直しのたびに、前の版を消さずに _旧 を付けて残しました。あとで「あのときの方が良かった」と思ったとき、比べる相手がいないと戻れません。私は実際に、色の見本を作るとき前の版と見比べています。

🚨 検査に通っても、読めるとは限りません

Uh6idQgv.jpg.webp

ここからは、この道具を作る過程で踏んだ落とし穴の話をします。3つあります。どれも、あなたが同じことをやれば踏む可能性のあるものですので、私の失敗談を先に経験しちゃいましょう！

1つ目は、チェックツールが通っても安心できないという話です。

HyperFramesには検査の機能があって、文字の色と背景の色のコントラスト、要素の重なり、エラーの有無などを自動で調べてくれます。これが「合格」と出ます。

でも私は、この合格を信じて痛い目に遭ったことがあります。

縦動画のときの話

これは今回より前、縦のショート動画を作っていたときの話です。読みやすさの国際基準（WCAG）で19項目すべて合格。それなのに、できあがった動画は読めませんでした。

理由は単純で、検査は「文字と背景のコントラスト」しか見ていないからです。文字が小さすぎることも、画面の端で切れていることも、この検査は見ていません。

今回も、2回やられました

同じことが今回も起きました。

1回目はアイコンです。AIが「メモ」のつもりで note という名前のアイコンを取ってきたら、音符のアイコンでした。検査は当然合格します。画像として正常に表示されているからです。間違っているのは意味のほうで、機械はそこを見ていません。

2回目は、せっかく入れた仕掛けが消えていたというものです。話している項目を強調する仕組みを入れたのに、スライドで登場するアニメーションが後から走って、上書きしていたんです。これも検査は合格。動きとしては正常だからです。

どちらも、書き出す前のコマを1枚ずつ目で見て見つけました。

だから、二段構えにしました

この経験から、配布する道具にはこう書いてあります。

検査が緑でも安心しない。書き出す前に、各スライドの静止画を必ず目で見る。

検査が見ているのは「エラーがないか」で、人が見るのは「伝わるか」です。この2つは別のものだと、私は身をもって学び”検査”を”仕組み”としてSkillsに組み込んでいます。

🚨 日本語の罠：読み方の指定で2回失敗しました

WxREbdnH.jpg.webp

2つ目の落とし穴は、日本語ならではのものです。今日の記事でいちばん厄介だったのが、これでした。

”きっかけは「BOOTH」でした”という読み方

できあがった動画を聞いていて、違和感がありました。「ブース」と読んでほしい BOOTH が、「ボース」と読まれていたんです。まぁよくありますよね、、、

音声合成は、英語の固有名詞をよく読み間違えます。note を「ノテ」、X を「バツ」と読むこともあります。

そして怖いのは、字幕は正しく出ていることです。画面には「BOOTH」と表示されている。音だけが違う。だから目で見るチェックでは絶対に見つかりません。聞かないと分かりません。

そこで、字幕は表記のまま・音声だけ読み方を指定できる仕組みを作ることにしました。ここから2回失敗します。

1回目の失敗：直前の文まで飲み込まれた

最初に作った書き方は BOOTH{ブース} でした。カッコの中に読み方を書く形です。

これが、見事に壊れました。日本語には単語の切れ目がないからです。

英語なら BOOTH{ブース} の前に必ずスペースがあるので、どこからが対象か分かります。でも日本語だと「リストが育ったら、BOOTH{ブース}で販売します」のように、区切りがありません。その結果、「リストが育ったら、BOOTH」までが丸ごと読み方に置き換えられて、文の前半が消えました。

しかも、字幕は正しく出ています。消えているのは音声だけ。実際、テスト中に「読者が1つの投稿を見る時間は、平均0.3秒から0.5秒です」という文が、音声では「れいてんさんびょう」だけになっていました。

2回目の失敗：表の区切りとぶつかった

そこで書き方を変えました。表記も読み方も両方カッコの中に入れる {BOOTH|ブース} という形です。縦棒で区切るのは、プログラムの世界ではよくある書き方です。

これも壊れました。台本を表の形で書いていたからです。

Markdownという書き方では、表のセルを縦棒で区切ります。つまり {BOOTH|ブース} と書くと、表がそこで切れてしまう。文の後半が別のセルとして扱われて、また消えました。

これは数字で気づきました。動画の長さが238秒から188秒に、50秒も縮んだんです。「なぜ短くなった？」と調べて、やっと分かりました。

最終形：イコールで区切る

Untitled_Clipping_081926_075427_PM.jpg.webp
例）AIを読みやすいように{AI=エーアイ}を表記させる

3回目で {BOOTH=ブース} に落ち着きました。イコールなら、表の区切りともぶつかりません。

さらに、書き方が壊れていたら道具が止めて教えてくれるようにしました。黙って誤読させるのがいちばん怖いからです。

今回のサンプル動画では、27語・32か所に読み方を指定しています。BOOTH、LINE、X、0.3秒、1つ、2ヶ月など。英字と数字は、ほぼ全部あやしいと思ったほうがいいです。

学んだこと

日本語で音声を扱うときは、「目で見て正しい」が「耳で聞いて正しい」を保証しません。

だから配布する道具には、こう書いてあります。できあがった音声は、必ず一度は聞いてください。チェックツールでは絶対に見つかりません。

前回の記事でも、似た事故を書きました。「こんな方も」が「こんなほうが」と読まれた話です。日本語の音声は、毎回どこかで裏切ってきます。

⏱ AIが勘で決めた秒数と、実測の38秒差

pPOUIgDS.jpg.webp

3つ目の落とし穴は、さきほど少し触れた話です。もう少し詳しく書かせてください。どうしても失敗と改善は伝えておきたいんです、、、

音声を付けるまで、AIは秒数を「だいたいこのくらい」で決めていました。1文につき5〜7秒。妥当な見積もりに思えます。

ところが実際に音声を作って測ったら、設計276秒に対して実測238秒。38秒のズレです。

なぜズレるのか

読み上げの長さは、文によってまったく違うからです。

「まずは1本、お手元の記事で試してみてください。」→ 3秒
「読者が1つの投稿を見る時間は、平均0.3秒から0.5秒です。」→ 5.8秒

倍近く違います。これが40文以上積み重なると、数十秒のズレになります。

しかも、ズレは後半にいくほど大きくなります。動画の最初のほうは合っていても、終盤では字幕と声が完全に別のことを言っている、という状態になります。

だから、順番を変えました

私が取った解決策はシンプルです。秒数を人が決めるのをやめました。

台本を書く → 先に音声を作る → 1文ずつ長さを測る → その実測から秒数を決める

この順番にすると、ズレが原理的に起きません。測った値をそのまま使うので、勘の入る余地がないからです。

この考え方、動画に限らず使えると思っています。人が見積もると必ずズレるところは、測ってから決める。当たり前のようでいて、私はずっと勘で決めていました。

✅ ここまでのまとめ

前半でお伝えしてきたことを、整理させてください。

私がこの1か月でやってきたのは、ハードルを1段ずつ下げる作業でした。

段階

やったこと

何が要ったか

①

教材で動画づくりを学ぶ

教材＋最上位モデル

②

鞘をかぶせて自分用にする（第1回）

教材は要る／音声代は0円に

③

モデルを替えても動くよう調整

教材は要る／モデルの縛りが外れた

④

画像を作らない道具を見つける

—

⑤

教材なしで動く形に組み上げる

教材も追加課金も不要

いま、⑤まで来ました。記事を1本渡せば、5分前後の講義動画が、追加課金ゼロでできます。

そして、ここからが後半の話です。私が組み上げた道具そのものを、お渡しします。

📚 あわせて読みたい過去の記事

今日の話に関係する記事を、いくつか置いておきます。

前回（第1回）の記事です。教材の道具に鞘をかぶせて自分用にする話で、今日の前提になっています。

今回の動画の題材にした記事です。この記事を投げて、5分33秒の動画ができました。

教材から専門家を迎える考え方は、こちらに詳しく書いています。

Fable 5解禁の7日間で、Brainの教材から専門家を5人ヘッドハンティングして、約20分でAI組織が完成。Fable 5の7日間の実行ログをシェアします

🔐 ここからのコンテンツ

rVIHGZC2.jpg.webp

ここまで、画像を作らない動画の作り方と、私が6回作り直した記録と、踏んだ落とし穴を3つ見てきました。

「仕組みは分かった。でも、自分の環境で動かせるだろうか」

「Node.jsって、私に入れられるんだろうか」

「作れたとして、うちの記事に合う見た目にできるのかな」

ここなんですよね。私も同じところで止まりました。「面白そう」と「自分の手で動く」の間には、思っているより距離があります。

しかも今回は、道具を組み立てる作業が入ります。フォルダを作って、テンプレートを置いて、アイコンを取ってきて、秒数を合わせて。この段取りを毎回ゼロから説明するのは、正直しんどいです。

だから今回は、その段取りごとお渡しします。

何が手に入るか

やること：記事を渡して、2回の質問に答えるだけです。フォルダを作るのも、テンプレートを置くのも、アイコンを取ってくるのも、秒数を合わせるのも、全部AIがやります。

できるようになること：手元の記事を、5分前後の講義動画に変えられます。ナレーションも字幕も付きます。追加課金はありません。作り直しても、テンプレに沿った見た目で出てきます。

誰の何が解決するか：ブログやニュースレターを書いていて、動画も出したいけれど手が回っていない方。動画編集ソフトを持っていない方。教材を買う前に、まず動くところを見てみたい方。

あなたがやらない作業：スライドをデザインする。秒数を計算する。動画編集ソフトを開く。この3つは発生しません。

中身を1つだけ、先に出します

イメージしにくいと思うので、準備のときにAIへ丸投げする文を、そのまま置いておきます。私が実際に配布物に入れているものです。

これから article-motion-slides-v1 というSkillを使います。
次の5つを順に確認して、足りないものがあればインストール手順を教えて、
可能ならインストールまで代行してください。
1. node --version が 22以上か
2. ffmpeg -version が通るか
3. python --version が 3.10以上か
   （Windowsで何も表示されずMicrosoft Storeの画面が開いたときは「入っていない」状態です。
   　py --version も試して、どちらも駄目ならインストール手順を教えてください）
4. npx --yes [email protected] doctor が問題なしと言うか
5. curl -s -m 5 http://127.0.0.1:50021/version で VOICEVOX が応答するか
   （応答しなくてもOK。その場合は「音声なしで作れます」と教えてください）
全部そろったら「準備OK」とだけ教えてください。

これを貼るだけです。何が足りないかも、どう入れるかも、AIが調べて案内してくれます。

「自分で読んで理解するより、AIにも読ませて一緒に進める」

AI時代の学びは、このスタイルがスタンダードだと私は思っています。

先にお伝えしておきたいこと

ebQRPlAI.jpg.webp

ひとつだけ、正直に書いておきます。

この道具は完成形ではありません。私自身、この1日で6回作り直したくらいですから、まだ足りないところがたくさんあります。記事の中の画像を取り込む機能もありません。キャラクターも出ません。

でも、それでいいと思っています。Skillsは永遠のベータ版で、進化するAI、環境で常に変化するものです。むしろ、これをきっかけに皆さんの手でカスタムしてほしいんです。色を変える、型を足す、声を変える。そのやり方も全部書いてあります。

「完成品を配る」ではなく、「出発点を配る」。前回の鞘と同じ考え方です。

それではここから先で、道具一式と、12種類のスライドの型と、導入の手順と、声の付け方をお渡しします。一緒に、あなたの記事が動き出すところを見にいきましょう。

購読中

📝 発行者

📝テツメモ｜tetumemo（Xアカウント）

📝テツメモ｜tetumemo（Xのハイライト）

📝テツメモ｜tetumemo（リンク集）

🔗tetumemo：非エンジニアのためのAI活用ニュースレター

📝テツメモのSubstack：SNS版

📝Substack版ニュースレター：「テツメモ｜AI時代の仕事と発信メモ」

🎤Spotify：AI QUEST（今日から始めるAI生活）

🎤Apple Podcasts：AI QUEST（今日から始めるAI生活）

📹️YouTube：AI QUEST（今日から始めるAI生活）

📝noteでも、たまにAIなどの記事を書いています。

🎟️お得な招待コード

💡Manus（1,000クレジットが獲得できる限定招待コード）

💡AIエージェント「Felo」（月額100円引きの招待コード）

💡Perplexity Pro（初月10ドルの招待コード）

💡Genspark

💡Lovartの招待コード

💡LilysAI（7日間有料プランが使える招待コード）

💡YouWare（アプリを作ってUPして稼ぐ新しい仕組み）

💡リアルタイム翻訳「Felo字幕」（15分無料で試せる招待コード）

💡便利なAI音声入力ツール「Typeless」（5ドルのクレジットがもらえます）

ここから先は有料コンテンツです
この続き：12,226文字 / 画像15枚
2026年08月のバックナンバー
¥1,176 / 税込み
収録されている記事
¥980 / 月額 (税込み)
購読を開始すると有料記事が閲覧できるようになります。バックナンバーは別途購入が必要です。
今月の記事

7,000人以上の方達が購読中

いつでも購読解除可能です

PREVIOUS
ショート動画作りに何度も挫折した私が、教材を購入して専門家をAI会社へリクルート！自分環境へ合わせ込むSkillを配布します
NEXT
Anthropicのチームがよく使う「何でも簡単図解で説明するSkill “ELI5”」をカスタムして、記事を投げると読む図解がそのまま音声つきアニメーション動画になる方法を紹介