動画、自動で作りたい。ずっとそう思ってた。
HeyGenで動画を生成して、Whisperで字幕をつけて、Cloudinaryにアップして、Instagramに投稿する。このパイプラインはもう動いてる。
でも「動画の中身そのもの」、つまりスライドのアニメーションや情報カードは、まだ手が入っていた。
Claude Codeに愚痴ったら、「それ、HyperFramesで全部解決できますよ」と言ってきた。
HeyGenが2026年4月17日にリリースした新しいツール。HTMLを書くと動画になる。AIエージェントのために作られた、オープンソースの動画レンダリングフレームワーク。
試した。結果、世界が変わった。
HyperFramesって何？ まずClaude Codeに3行で聞いた
コードを書かない私でも理解できるよう、Claude Codeに噛み砕いてもらった。
「HTMLと、CSS、普通のアニメーションを書けば、それがそのままMP4動画になります。AIはHTMLを普通に書けるので、AIと動画を作る相性が最高です。」
要するに、AIが得意な言語（HTML）で動画を作れるツール。
従来のRemotionはReactというプログラミング知識が必要で、AIエージェントが使うにしてもビルド時間が4分以上かかってた。HyperFramesは違う。ビルド不要。60秒でMP4が完成する。
ライセンスはApache 2.0。完全無料で商用利用もできる。
私がやってみた手順。コード分からなくても大丈夫
Claude Codeに全部お願いした。私がやったことは、日本語で指示を出しただけ。
まず「蒼井詠のAI自動化Tips動画を作って。縦型9:16、15秒、クールなダークテーマで」と伝えた。
Claude Codeが数分でHTMLファイルを書いてくれた。それを npx hyperframes preview で確認。ブラウザに動画のプレビューが表示された。
「タイトルの文字をもっと大きく」「フェードインを速く」「最後にInstagramアカウント名を表示して」と口頭で追加指示。
修正が入るたびにリアルタイムで反映される。タイムラインを触ったことが一度もないのに、ちゃんと「詠っぽい動画」が出来上がった。
最後に npx hyperframes render –output final.mp4 を実行したら60秒でMP4が完成。このファイルをCloudinaryにアップして、既存の投稿パイプラインに流した。
HyperFramesの自動化フローと、従来のRemotionとの比較をまとめた。
蒼井詠プロジェクトでどう使えるか。具体的に3つ
Claude Codeに「このプロジェクトへの活用方法」を聞いた。返ってきた答えが鋭かった。
① SNS用の定型スライド動画を自動生成
「AI Tips」「今日の自動化術」みたいなシリーズ動画。テキストをHTMLに流し込むだけで量産できる。週5本でも、AIが全部書ける。
② データビジュアライゼーション動画
Instagramのインサイトや株価のグラフを、動くアニメーション動画として自動生成。数字を食わせれば、動くインフォグラフィックが出てくる。
③ HeyGen動画との組み合わせ
現在のパイプラインはHeyGenのアバター動画が主軸。HyperFramesで作ったイントロやアウトロをFFmpegで結合すれば、動画の個性をさらに強化できる。
コードを書かない私でも、AIと組み合わせれば全部実現できる。
注意点。まだalpha版、本番投入は慎重に
HyperFramesは2026年4月17日リリース。まだalpha版。
仕様変更の可能性がある。本番のクライアント案件に全面導入するのは、もう少し様子を見てから。
ただし、GitHubでは公開から72時間で5,200スターを獲得。コミュニティの勢いは本物。
対応AIエージェントはClaude Code、Cursor、Gemini CLI。主要どころが全部サポートしてるのは、開発元の本気度の表れ。
今は自分のプロジェクトで試して、感触を掴む段階。実績が出たら、また記録を書く。
今日の結論
動画制作、まだ手でやってる？
HyperFrames、今すぐ試す価値がある。AIがHTMLを書き、60秒でMP4が出る。コードが分からない私でも、Claude Codeに頼めば動く。
非効率は罪。
あなたもやってみて。
Instagramでも自動化の進捗を発信中。 @aoi___ei をフォローして、一緒に効率化しよう。