HTMLで動画が書ける時代-HyperFramesで5秒スポット動画をってみた

読了目安: 7分　　対象: 動画制作に興味あるノンエンジニア／AIで動画を作りたい人

「動画を作る」と聞くと、Premiere Pro や After Effects、最近ならCapCutが頭に浮かぶ方が多いと思います。今回ご紹介する HyperFrames は、これらとはまったく違うアプローチです。

HTMLを書くと、動画になる。

それも、AIに「こういう動画を作って」とお願いすると、HTMLを勝手に書いてくれる前提で設計されています。AI時代の動画制作ツール、と言ってもいいかもしれません。

実際にラピットくんが、AppTalentHubの旗印「読める化」をテーマに5秒のスポット動画を作ってみました。完成までの過程を、進化していく動画と一緒にご紹介します。

HyperFramesって何？

HyperFramesは、HeyGen社（AIアバター動画で有名な米国企業）がオープンソースで公開している動画レンダリングフレームワークです。

特徴をひとことで言うと:

• 書くのはHTML+CSS+GSAP（ウェブ制作と同じ技術）
• 再生するとMP4動画ができる
• AIエージェント（Claude CodeやCursor）と最初から連携できる

「ウェブサイトの作り方で動画が作れる」という発想です。React や After Effects のような専用知識を学ぶ必要はありません。

環境の準備（5分）

HyperFramesを動かすのに必要なものは2つだけです。

• Node.js （バージョン22以降）
• FFmpeg （動画書き出し用）

Windows なら両方とも公式インストーラから5分で入ります。あとはターミナルで:

npx hyperframes init my-video
cd my-video

これでプロジェクトの雛形ができあがり。

完成までの5ステップ——進化していく動画たち

Step 1: HTMLを書いて最初のレンダリング

最初に作ったのは、こういう構成です。

• 8つのフォルダアイコンが画面に散らばっている
• 1秒後にスッと整列する
• 「読める化」のタイトルが現れる

これをHTMLとGSAP（アニメーションライブラリ）で書いて、npx hyperframes render を実行すると——

たった3秒ですが、最初に動いたときは「本当にHTMLから動画ができた」と少し感動しました。ここまで初期化から含めて約10分です。

Step 2: 効果音（SE）を乗せる

無音だと味気ないので、効果音を足します。効果音ラボ から商用フリーの音を2つダウンロード:

• フォルダが整列する瞬間の「シュッ」
• タイトルが出る瞬間の「キラッ」

HyperFramesでは、HTMLに <audio> タグを書くだけで音声がタイムラインに乗ります。

<audio class="clip"
       data-start="1.0"
       data-duration="1.6"
       data-track-index="11"
       src="assets/swoosh.mp3"></audio>

「シュッ」「キラッ」が入るだけで、一気に商用クオリティに近づきます。音の力は本当に大きい。

Step 3: BGMでブランド感を出す

次は背景音楽（BGM）です。ATHブランドに合いそうな曲を探して、甘茶の音楽工房 の「モノローグⅡ」というジングル系BGMを採用しました。

甘茶の音楽工房は、商用利用OK・クレジット表記不要の太っ腹サイト。BGM素材集めの定番です。

音量は控えめ（35%）に設定して、効果音やナレーションを邪魔しないようにします。

雰囲気がぐっと締まりました。コーポレート動画らしくなってきます。

Step 4: AI音声でナレーションを入れる（ハマりどころあり）

最後にナレーションを乗せます。HyperFramesには kokoro-onnx というローカルAI音声合成エンジンが標準搭載されています。

ところが——ラピットくんのマシン（Surface Laptop 7 ARM64版）では libsndfile.dll が見つからず動かない、というトラブル発生。

そこで切り替えたのが、Windows標準搭載の音声合成「Microsoft Haruka」。日本語Windowsには元から「Haruka」という音声が入っているので、PowerShellからすぐ呼び出せます。

Add-Type -AssemblyName System.Speech
$synth = New-Object System.Speech.Synthesis.SpeechSynthesizer
$synth.SelectVoice('Microsoft Haruka Desktop')
$synth.SetOutputToWaveFile('narration.wav')
$synth.Speak('読める化')

動きはしましたが、Harukaは少し機械的で硬い印象。「もっと若くて元気な声がいい」となり、次の手段へ。

Step 5: Edge TTSでもっと自然な声に

Microsoft Edgeブラウザに搭載されている ニューラル音声（Nanami） を使う edge-tts というツールに切り替えました。

edge-tts --voice ja-JP-NanamiNeural \
         --rate +5% \
         --pitch +12Hz \
         --text 'フォルダを、読める化に。' \
         --write-media narration.mp3

ピッチを少し上げて若々しく、テンポも標準より気持ち早めに。

ここでもう一つ細かい調整:「読める化」の最後が疑問形のように上がってしまう問題が発生。語末を「読める化に。」と助詞「に」で終わらせることで、自然に下がる発音に着地しました。

これが完成版。全行程で初期設定から正味2時間くらいでした。今後は、AIに聞けば自在に音楽がつくれるので作る時間だけなら数分で作成できそうです。

作ってみてわかったこと

良いところ

1. 驚くほど早い ——アイデアから動画化まで2時間。Premiere Proで同じものを作ろうとしたら半日コースです
2. AIとの相性が抜群 ——HTMLは AIが最も得意な言語の一つ。「もっと派手にして」「タイトルを2倍に」みたいな指示が秒で通ります
3. 再現性が高い ——同じHTMLからは毎回同じ動画ができる。バージョン管理もGitでOK
4. コストゼロ ——ツールも素材も全部無料で完結

注意点

1. AIアバターは作れない ——HyperFramesはあくまで「HTMLを動画化する」ツール。HeyGen本体（有料）と組み合わせる前提です
2. 長尺は不向き ——5秒〜30秒のロゴ・スポット動画用途がベストフィット
3. 日本語フォント・音声で少し試行錯誤あり ——ARM64マシンや日本語環境ならではの罠が点在

どんな用途に使えそう？

こんごは、こんな展開を考えています:

• 研修教材の章イントロ動画（全18章を同じテンプレートで量産）
• 読める化シリーズの啓蒙動画（SNS・LP埋め込み）
• 企業ロゴアニメーション（クライアント案件用）

特に「同じテンプレートで内容だけ差し替えて量産」できるのは、HTMLベースだからこその強み。AIに「次の章のイントロ動画作って」と指示するだけで、章番号と章タイトルを差し替えた動画が次々できあがります。

まとめ

HyperFramesは「HTMLが書ける（書かせられる）人なら、動画も作れる」という発想転換を体現したツールでした。

特にAI時代において、「AIに動画を作ってもらう」という用途では、現時点で最もシンプルで、かつ自由度の高い選択肢の一つです。

試してみたい方へ

公式サイト・GitHubはこちら:

• 公式ドキュメント: https://hyperframes.heygen.com/
• GitHub: https://github.com/heygen-com/hyperframes

「まずは触ってみる」が一番。ターミナルで npx hyperframes init my-video するだけです。

AppTalentHubでは、こうしたAI時代のツールを実務にどう活かすかを DX-NoCodeBootCamp® で半年間伴走しながらお伝えしています。気になる方はこちらから。