はじめに

Premiere Proは3日で挫折した。CapCutのテンプレは、なんだかどこかで見た仕上がりになる。外注の見積もりを見て、そっとタブを閉じた。──そんな経験、ありませんか。

僕も長いことそこで足踏みしていました。でも、あるオープンソースのツールを触ってから、動画編集ソフトを開く回数がゼロになりました。今では「言葉で指示するだけ」で、告知動画も、解説動画も、SNS用のショート動画も作っています。

この記事は、その環境を実際にあなたのパソコンに構築するための手順書です。理屈の説明で終わらせず、コピー&ペーストで進められるコマンドと、そのまま使えるプロンプトを全部載せています。読み終える頃には、1本目の動画が手元にできているはずです。

必要なものは、パソコン1台と、コピペする指だけ。プログラミングの知識は前提にしません。

ChatGPT Image 2026年8月6日 00_04_38.png

第1章:何が起きているのか

まず、これから触るツールの正体と、信頼して良い理由を説明します。

「HyperFrames」は、AIアバターで知られるHeyGenが開発した、オープンソースの動画レンダリングフレームワークです。一言でいうと、HTMLで書いた画面が、そのままMP4動画になる仕組み。

流れはこうです。あなたが「こんな動画を作って」と言葉で指示する。Claude CodeなどのAIエージェントが、その動画の設計図をHTML・CSS・アニメーション用のライブラリ(GSAP)で書く。それをヘッドレスのChromeが1フレームずつ正確に撮影し、FFmpegという定番ツールがMP4として書き出す。Webページを表示する仕組みを、そのまま撮影スタジオに変えているイメージです。

なぜAIとの相性が異常にいいのか。理由は単純で、AIが世界で一番大量に学習してきたマークアップ言語がHTMLだからです。人間にとって動画をHTMLで書くのは面倒な作業ですが、AIエージェントにとっては母国語で作文するようなもの。自分で書いて、自分でプレビューして、自分で直す、というループが高速で回ります。

同じ指示からは必ず同じ映像が返ってくる「決定論的レンダリング」という設計も特徴です。AIだから毎回違うものが出るのでは、という心配をしなくて済みます。

これがどれくらい本気で作られているツールか、数字で見ておきます。

・ライセンスはApache 2.0(オープンソース)。商用利用OK、レンダリング回数による課金なし

・GitHub上のスター数は3.6万超(2026年8月時点) ・tldraw、TanStackといった著名な開発チームも実務で採用・更新は現在も継続中で、直近のバージョンは2026年7月にリリース済み

一発ネタの実験プロジェクトではなく、実運用されているツールです。対応エージェントはClaude Code、Cursor、Gemini CLI、Codexなど。この記事はClaude Codeを軸に進めますが、他のエージェントでも手順はほぼ共通です。

さらに、ターミナルの黒い画面に抵抗がある人向けに、ブラウザだけで完結する2つの裏ルートも公式に用意されています。この記事の後半で、両方とも手順込みで紹介します。

参考までに、既存の動画編集ソフトとの違いを整理しておきます。

・操作方法 HyperFrames:言葉で指示するだけ / Premiere Pro・CapCut・Filmora:タイムラインを手で操作

・編集の再現性 HyperFrames:同じ指示なら毎回同じ結果 / 他の3つ:手作業なので毎回微妙に変わる

・修正の速さ HyperFrames:一文の指示で即再生成 / 他の3つ:都度、手動で調整し直す

・学習コスト HyperFrames:プロンプトの型を覚えるだけ / Premiere Proは操作の習熟に時間がかかる。CapCut・Filmoraは比較的低い

・素材の要否 HyperFrames:テキストの指示だけで完結 / 他の3つ:撮影素材やテンプレートが前提になりやすい

・ブランド統一 HyperFrames:ファイル(FRAME．md)で自動反映 / 他の3つ:毎回手動で色やフォントを揃える必要がある

・料金体系 HyperFrames:無料(オープンソース) / Premiere Proはサブスク、CapCutは一部課金、Filmoraは買い切りまたはサブスク

Premiere Proのようなプロ向けソフトは自由度が高い分、習熟に時間がかかります。CapCutやFilmoraは手軽な反面、テンプレートに寄るほど既視感のある仕上がりになりがちです。HyperFramesはこの3つと競合するというより、そもそも「タイムラインを触る」という前提自体を外すツールだと捉えてください。

この記事の流れ

・第2章:環境構築(10分・コマンドのコピペのみ)

・第3章:最初の1本を作る

・第4章:ブランドを乗せる仕組み(FRAME．md)

・第5章:用途別レシピ集(そのまま使えるプロンプト7種)

・第6章:ターミナル不要の2つの裏ルート

・第7章:修正指示の出し方(ここが一番重要)

・第8章:発信・収益への繋げ方

・第9章:つまずいたときのチェックリスト

第2章からは、実際に手を動かすパートに入ります。コマンドを1つコピペするだけで、10分後には環境が整い、この日のうちに1本目の動画が完成します。

続きでは、

・そのままコピペできる環境構築コマンド一式

・最初の1本を確実に完成させるプロンプト

・ブランドカラーやフォントを自動で毎回統一させる仕組み

・「解説動画」「告知動画」「実績カード」「音ハメ動画」など目的別に、そのまま貼り付けられる7種類のプロンプト集

・黒い画面が苦手な人向けの、ブラウザだけで完結する2つの裏ルート

・エージェントへの修正指示で、映像の専門用語を一切使わずに済む「一文リテイク」の型

・この仕組みをXやnoteでの発信、収益化にどう繋げるかをすべて、実際に検証済みの内容としてお渡しします。

さらに、購入者特典として次の2つを記事の最後に収録しています。ダウンロードや外部リンクは不要で、そのままコピーして使えます。

【特典1】DESIGN．md / FRAME．md サンプルテンプレート記事中で解説する「ブランドを自動で統一する仕組み」を、ゼロから書かずにそのまま流用できるひな形です。色・フォント・動きのルールを差し替えるだけで、あなた専用のブランドファイルが作れます。

【特典2】全プロンプト・コピペシート記事内に登場する環境構築コマンド、7種類のレシピプロンプト、修正指示の型をすべて1箇所にまとめました。記事を読み返して探す手間なく、必要な指示をそのままコピーして使えます。

ここから先は、実際に手を動かすパートです。次のページを開いた10分後には、あなたのパソコンに「言葉で動画を作れる環境」が出来上がっています。

★ここから先が有料エリアです★