Subscriber Bonus
AIに文章で頼むだけで動画を作れるhyperframesの入れ方と、良い動画を短時間で作ってもらうための素材リストを1ページにまとめました。
動画編集ソフトを開かずに、AIへの指示だけで動画を作るためのツールです。
HeyGenが無料公開しているオープンソースのツールで、Claude CodeやCodexなどのAIコーディングエージェントに「スキル」として追加して使います。動画はHTMLから生成される仕組みで、処理はすべて自分のパソコンの中で動きます。
Node.jsやFFmpegが入っているかわからなければ、導入のときにAIへ「Node.jsとFFmpegが入っているか確認して、なければ入れて」と一緒に頼んでしまえば大丈夫です。
コマンドを覚える必要はありません。エージェントにこの一文を貼り付けてください。
https://github.com/heygen-com/hyperframes のスキルを、このプロジェクトに導入して。Node.jsとFFmpegが入っているかも確認して、なければ入れて。
npx skills add heygen-com/hyperframes --full-depth
スキルが反応しない：スキルがショートカット（シンボリックリンク）として置かれ、リンク切れになっていることがあります。「導入したスキルがリンク切れになっていないか確認して、実ファイルとして置き直して」とAIに伝えると直せます。
動画の書き出しで止まる：Node.jsが22より古い、またはFFmpegが入っていないことが原因になりやすいです。「Node.jsのバージョンとFFmpegの有無を確認して、足りなければ入れて」とAIに頼んでください。
リポジトリのサンプル素材まで取得したい：公式リポジトリはGit LFSという仕組みを使っているため、そのままcloneすると失敗することがあります。スキルを使うだけなら影響ありませんが、素材も欲しい場合は「git-lfsを入れてからcloneして」と伝えてください。
動画を作り終えたあとに「良い動画を短時間で作るなら何があるといい？」と聞いて教えてもらったリストです。頼む前に揃えておくと仕上がりが安定します。チェックはこの端末に保存されます。各項目の詳しい準備方法は、下の素材準備ガイドをご覧ください。
動画を作ってくれたAIに書いてもらった、項目別の準備ガイド全文です。すべて揃える必要はありません。用意できる素材が多いほど、制作が速くなり、実物に近い動画になります。
最初に決めたいのは、誰に何を伝え、見た人に何をしてほしいかです。
「格好よく」だけでは方向が定まりません。「信頼感を出したい」「若い人向けに明るくしたい」のように、狙いを一言添えると判断しやすくなります。
ロゴは、背景が透明なPNGかSVGが適しています。小さなJPEGしかない場合、拡大すると輪郭がぼやけます。
あると助かるもの：
ロゴがない場合は、サービス名を文字だけで見せる構成にできます。
アプリやWebサービスの紹介では、実際の画面が最も強い素材です。トップ画面だけでなく、特徴が伝わる操作前、操作中、完了後の画面を用意します。
操作を見せる動画では、完成後のMP4より、編集前の画面録画を渡すほうが使いやすくなります。
操作を速く見せたい場合でも、収録時はゆっくり操作します。編集時に速度を上げるほうが自然です。
可能なら、SNS用は最初から縦向きで撮影します。横動画を縦に切り抜くと、人物や商品が画面外へ出やすくなります。
アプリで加工した動画より、カメラから出した元ファイルのほうが色や画質を調整しやすくなります。
写真は、SNSやメッセージアプリで送る前の元画像を使います。圧縮済み画像やスクリーンショットは避けます。
素材がない場合は画像生成で補えます。ただし、実在する商品、人物、店舗を正確に見せる用途では、実物の写真を優先します。
画像を新しく作る場合、参考画像、希望する色、避けたい雰囲気を伝えます。「青と生成り」「紙の質感」「人物なし」「高級感より親しみやすさ」のように指定します。参考画像は二、三枚で十分です。どの部分が好みなのかも添えてください。
自然さを最優先するなら、人が収録した音声が最も確実です。音声合成を使う場合は、感情や間を扱えるニューラル音声を選びます。
依頼時に伝えること：
二十秒の動画なら、日本語原稿は百文字から百二十文字程度が目安です。英字や固有名詞は読み方一覧を添えます。
HyperFrames：ハイパーフレームズ HTML：エイチ・ティー・エム・エル AI：エーアイ MP4：エムピー・フォー
高価なマイクがなくても、静かな部屋とスマートフォンで収録できます。
音声はMP3よりWAVやM4Aの元ファイルが適しています。
画面に表示する文章は、ナレーション原稿とは分けて用意します。一画面につき一つの要点に絞り、固有名詞、数字、漢字の表記を確定させます。自動文字起こしを使う場合も、商品名、人名、数字は必ず人が確認します。
希望する雰囲気を言葉か参考曲で伝えます。曲名だけでなく「軽い電子音」「テンポは速め」「落ち着いたピアノ」のように特徴を添えます。手元の曲を使う場合は、動画利用が認められているか確認してください。BGMがない場合は、動画に合わせて生成できます。
効果音は、画面切り替え、ボタン操作、ロゴ表示など、意味のある箇所にだけ使います。短い動画へ大量に入れると落ち着きがなくなります。
グラフは画像ではなく、CSVや表計算ファイルなどの元データがあると正確に作れます。数値の単位・対象期間・比較対象・出典・強調したい数値を添え、公開前に数値が最新か確認してください。伝えたい数字を一つに絞るほうが動画向きです。
参考動画は二、三本で十分です。「この動画と同じにして」ではなく、好きな点と避けたい点を添えます。
InstagramやTikTokでは、画面の上下や右側に操作ボタンが重なります。重要な文字やロゴは端へ寄せません。
素材が足りなくても制作は始められます。分からない項目は空欄のままにせず、「おまかせ」と書いてください。判断が必要な箇所が明確になります。
用意するのは手元にある文章1つだけ。顔出しも、自分の声の録音もせずに、テロップ・ナレーション付きの動画を作る実践ガイドです。
文章の分割、音声の作成、hyperframesでの組み立て、ブラウザ確認、書き出しまでを順番にまとめました。テロップ分割から書き出しまでを1回で頼める共通プロンプトと、音声生成用プロンプトは、クリックしてコピーできます。音声の規約で確認する項目も掲載しています。
実際に使った指示文や、かかった時間・AI利用量の実測は、記事で読めます。
動画編集スキルなしでも、AIに頼むだけでテロップ付きの動画ができました
このページの内容は2026年7月時点のhyperframes・Codexの仕様に基づいています。