こんにちは、forCreators代表のHarryです！
「AIで動画が作れたらいいのに」——一度は思ったことありませんか。企画を言ったら、動画がポンと出てくる世界。
その問いに、いま僕がいちばん現実的な最短ルートだと思って毎日使っているツールを紹介します。HyperFramesです。動画をまだ作ったことがない人にも「え、こんなのも作れるんだ」と思ってもらえるはずなので、最後まで読んでみてください。
まず大事な話。「AI生成」とはレイヤーが違います
「AIで動画」と聞くと、多くの人はVeoやSora、Runwayのような**“ゼロから映像を生成する”AI**を思い浮かべます。プロンプトを書いたら、見たことのない映像が生えてくる、あれです。
HyperFramesは、そことはレイヤーが違います。
HyperFramesの思想は、「Webサイトを作るように、動画を組み立てる」。中身はHTML/CSSです。ホームページを1枚作る感覚で、その画面を1コマずつ動画に書き出す。HeyGenがオープンソースで公開していて、キャッチコピーがそのまま "Write HTML. Render video."（HTMLを書けば、動画になる）です。
生成AIが「絵を描く」なら、HyperFramesは「組み立てる」。ここを分けて理解すると、一気にクリアになります。
だから「何ができて、何ができないか」がハッキリしている
❌ できないこと（正直に）
- 実写のようなリアルな映像を“ゼロから生成”すること。人物が自然に動く映像、本物の質感——これは生成AIやカメラの領域です。HyperFramesは映像を「生む」ツールではありません（実写やAI生成の“素材”は別で用意して、HyperFramesはそれを組み立てて見せる層）。
⭕️ できること（ほぼ「Webでできること」全部）
- スライド／プレゼン風のレイアウト（PowerPointで作れるものは大体作れる）
- アニメーション・文字の動き（キネティックタイポ）
- 簡単なチャート・グラフ（棒グラフ、数字のカウントアップ、比較表）
- 見慣れたUIの再現（LINE風・2ch風・X風など、Webの見た目はそのまま）
- 実写クリップの上にテロップ・グラフィックを合成
そして、ここがHyperFramesの真骨頂だと僕が思っているのが——スライドを1枚作って、そこに“崩れないテロップ”を乗せていく表現です。自分で絵・素材を作りながら、レイアウトも動きも装飾も、基本ぜんぶCSSで制御・表現できる。「¥1,980」も日本語も1ピクセルも崩れない。生成AIが苦手な“文字化け”が構造的に起きない。「PowerPoint＋Webの表現力」に「動き」と「文字の精度」を足したもの、というのが一番近い説明です。
実際に、こういうものを作っています
言葉より現物です。全部HyperFrames（＝HTML）で組んでいます。
① Amazonの商品紹介動画
うちが実際に作って、自社サイトにも載せているゲーミングモニターの紹介動画です。製品カットの登場、スペックの数字が動く、スライドが切り替わる、比較グラフィック。文字（型番・スペック・コピー）は一切崩れていません。これ、制作コスト100円もかかっていません…。
② 実写素材の編集もできます
実写した素材を渡して、ナレーションに合わせて編集をする——動画編集者さんのような動きも、もちろんできます。撮影した商品カットに「VITATECT／高濃度ビタミンC美容液」のテロップを乗せた例。もちろん文字は1ピクセルも崩れていません。**「素材は実写、演出はHyperFrames」**という組み合わせが、EC動画では一番強いです。
③④⑤ バズっている“フォーマット”を丸ごと再現
UIそのものをHTMLで組めるので、見慣れたあの画面を1ピクセル単位で作れます。架空の美容液「VitaTect」で3つ。
LINE風（既読・時刻まで動く）
2ちゃんねる風（名前色・ID・>>まで）
X投稿風（認証・いいね・表示数まで）
X・TikTok・YouTubeショートで毎日流れてくる型は、だいたいカバーできます。
もっと“ざっくりした一言”でも作れます
ここが面白いところ。HyperFramesはAIに書かせる前提なので、ふわっとした日本語のお願いからでも形になります。実際にやってみた2本を、使ったプロンプトごとお見せします。
デモ1：「僕のプロフィールから、かっこいいイントロ作って」
指示したプロンプト：「僕のXプロフィール（@imharry_so）を読んで、超かっこいいイントロ動画をHyperFramesで作って。ダークでシネマティック、ブランドカラーは緑で。」
……で、出てきたのがこれ。名前がキネティックに出て、肩書きが流れて、最後にコピーが決まる。YouTubeの冒頭に置けそうなイントロが、一言から出てきます。
デモ2：「女子がLINEで僕を褒めてる様子を動画にして」
指示したプロンプト：「僕について、女の子たちがLINEグループでめちゃくちゃ良い噂話をして盛り上がっているチャットの様子を、LINE風の縦動画にして。」
こういうふざけた指示でも、既読・スタンプ・タイピング表示まで含めて、ちゃんと“動くLINE”になります（内容は完全なフィクションです、念のため…笑）。「こんなのも一言で作れるんだ」が伝わると思います。
「それってRemotionと同じでは？」— 今の違いを1枚で
動画を作っている人からは必ずこれを聞かれます。Remotionという、似た用途の有名なOSSがあります。今の違いを1枚にまとめました。
ざっくり言うと——
- 共通点：どちらもブラウザ（HTML/CSS）を動画に書き出す。だから文字が崩れない。
- 書き方：Remotion＝Reactで書く（エンジニア向け）／ HyperFrames＝素のHTML＋AIに書かせる前提（非エンジニアでも）。
- 量産：無人で数百〜数千本を回す“量産”は、Remotion＋Lambda（クラウド並列）が本命。HyperFramesも分散の仕組みは持っていますが、大量無人生産の実績はRemotionが上です。
それでも大体の人は「HyperFramesで十分」
理由はシンプルで、「量産」の意味が違うからです。一週間に1000本以上作る、とかの規模じゃない限り、無人大量並列のインフラは要りません。それより、AIに触らせやすい・非エンジニアのスタッフが回せる・スライド＋テロップの絵作りをCSSで自在にできることのほうが、日々の生産性にずっと効きます。「速いエンジンより、みんなが運転できる車」。いまのうちには、そっちが正解で、超愛用しています。
まずは、あなたの自己紹介動画を作ってみてください
HyperFramesはオープンソース。誰でも無料で使えます。そして一番のハードルだった「コードを書く」は、AIが肩代わりしてくれます。
なので、少しでも気になったら、まずはClaude Codeで、自分の自己紹介動画を1本作ってみてください。 やり方はシンプルで、自分のXアカウントを渡して「これで作って」と言うだけ（HyperFramesのスキルは npx skills add heygen-com/hyperframes で一発で入ります）。そこから、あとは全部、日本語で操作できます。
「AIで動画が作れたら」——その答えは、もう自分の手元まで来ています。まずは1本、作ってみてください。
弊社では、人間の編集とHyperFramesを使い分けています
最後に、自社のブログなので、弊社forCreatorsの制作現場でHyperFramesをどう使い分けているかにも触れておきます。
いま弊社が納品している動画は、人間の編集者が担当しています。やはりBGMの音ハメ、SE（効果音）の入れ方、テロップのアニメーション——こうした「人間の感性に訴える細やかな編集」は、まだ人の方に分があると感じています。
一方で、量産や、グラフィックの作り込みといった工程では、HyperFramesが大活躍しています。
この2つをうまく使い分けることで、動画制作の幅は大きく広がります。そして、どんな会社でも、ある程度のクオリティの動画を内製化できる——そんな世界が、もう現実になりつつあると考えています。
弊社はこの「人 × AI」のクリエイティブ制作を軸に、ECブランド向けの動画・広告クリエイティブを日々つくっています。もしご興味があれば、こうした動画制作システムの導入支援や、実際の制作実務も、forCreatorsで承っています。お気軽にお問い合わせください。
forCreatorsのサービス
社内のAI導入・開発から、クリエイティブ制作まで。
AI導入・内製化と、人×AIのクリエイティブ制作。「うちの業務にも取り入れたい」の相談から承ります。返答は1営業日以内です。