HyperFrames Studioの使い方：Claude CodeでPR動画を作る

HeyGenの無料デスクトップアプリHyperFrames Studioを使うと、PR動画づくりをAIコーディングエージェントに任せられます。AIコーディングエージェントとは、自らコードを読み書きしてタスクをこなすツールです。絵コンテの場面を4つ選び、WebサイトのURLを貼り付けると、Claude CodeがHTMLとCSSを書き、ブランドに合ったローンチ動画に仕上げます。手作業での編集は要りません。修正は、プレビューに描き込むか指示を入力して行います。多くの初心者にとって最も分かりにくいのは、編集ではなくファイル管理です。プロジェクトがどこに保存されるのか、自分のフォルダーをどうすればプロジェクトとして認識させられるのか、という点です。

Webのコードで組み立てる動画

HyperFrames Studioの土台は、AI動画プラットフォームのHeyGenが開発したオープンソースのフレームワークHyperFramesです。GitHubでApache-2.0ライセンスのもと公開されており、リポジトリのバッジには6万2700のスター、96人のコントリビューター、そしてJavaScriptツールのパッケージレジストリであるnpmでの週間ダウンロード数81万1600回が表示されています。

HyperFramesはRemotionと同じく、動画をプログラムで、つまりコードで生成します。違いは素材にあります。RemotionがReactコンポーネントで動画を組み立てるのに対し、HyperFramesは標準的なHTML、CSS、Webアニメーションライブラリを使います。そのコードを各プロジェクトの中で直接書き、調整するのは、Claude CodeやOpenAI CodexといったAIコーディングエージェントです。完成した動画はHTML、CSS、JSONのファイルとして残るため、普段の言葉で頼んだ修正を正確に反映でき、同じやり方で何度でも繰り返せます。

HyperFrames Studioは、このフレームワークを軸に、AIコーディングエージェントと人が同じ動画に取り組めるよう作られた編集ツールです。macOS（Apple SiliconとIntel）、Windows（x64とarm64）、Linux（debとAppImageのパッケージ）向けのデスクトップアプリとして動作します。アプリは完全に無料で、必要なのは無料のHeyGenアカウントだけです。HeyGenのAPIキーは任意です。必要になるのは、アバターやナレーション、音声クローンといったHeyGenクラウドの上位機能を使うときだけで、これらの機能には課金対象のAPIクレジットがかかります。

導入：アプリとエージェント用のスキル

アプリを入れるだけでは足りません。コーディングエージェントには、HyperFramesのスキルも必要です。スキルとは、特定の種類のタスクのこなし方をエージェントに教える、パッケージ化された指示のことです。HyperFrames Studioを開く前に、ターミナルからインストールしておきます。Macでの手順は次のとおりです。

1. HyperFrames Studioのダウンロードページから使っているOS向けのインストーラーを入手し、インストールします。macOS版はDMGディスクイメージで提供されています。
2. ターミナルでnpx skills add heygen-com/hyperframesを実行し、対話式のセットアップを始めます。スキルはプロジェクトのGitHubリポジトリから取得されます。
3. HyperFramesのコアスキルのカテゴリーを選び、スペースキーでコアスキルをすべて選択してから、Returnキーで確定します。
4. スキルを入れるエージェントを選びます。一覧にはClaude Code、Cursor、Codex、Gemini CLI、GitHub Copilot、Kilo Code、OpenCode、Zedが並んでいます。インストール方法は推奨のシンボリックリンク方式を選びます。各エージェントを1つのスキルのコピーにリンクする方式なので、今後スキルのリポジトリが更新されると、すべてのエージェントに自動で反映されます。
5. セキュリティ評価を確認し、インストールを完了させます。
6. claudeコマンドでClaude Codeを起動し、/hypと入力します。オートコンプリートのメニューにHyperFramesのスキルが表示されれば、連携できています。

初回起動時には役割や普段使うコーディングエージェントについて質問されますが、Skip allで飛ばせます。続いて、ブラウザーで無料のHeyGenアカウントにサインインします。たとえばGoogleアカウントで認証すると、デスクトップアプリに戻ります。左下の歯車アイコンを押すと設定画面が開きます。最初に押さえておきたいのは次の3つのタブです。

4つの場面とURLでローンチ動画を作る

左サイドバーのSessionsパネルは、ドライブ内にある既存のHyperFramesプロジェクトフォルダーを探し出します。Import projectsを押せば、そのどれでもワンクリックでアプリに取り込めます。新しく作るときは、Make my launch videoを押すか、Get inspiredのテンプレート欄でTake the step by stepを選びます。

HyperFrames Studioはローンチ動画を4部構成のストーリーとして組み立て、各パートに既製テンプレートのライブラリーを用意しています。

Hookは自分で選ぶことも、サイコロのアイコンを押してランダムに選ぶこともできます。週刊のAIニュースレターなら、Hookに手描き風の箱型キャラクター、Proofにすっきりした会話風のカード、それに合うミニマルなトランジション、そしてロゴマークと見出し、ボタンだけのシンプルなアウトロを組み合わせるのが一案です。

次に、Your website or ideaという入力欄にURLを入力します。アプリはそのページを読み込み、配色、フォント、文言、ブランド素材を取り込んでテンプレートを仕上げます。ホームページやニュースレターのアーカイブを指定すれば、デザインのガイドラインを手で書き出す手間が省けます。内蔵のミニプレーヤーで全体の流れをざっと確認したら、Use this cutを押します。新しいプロジェクトフォルダーが作られ、編集用のタイムラインが開きます。

ここからはClaude Codeがバックグラウンドで作業を引き継ぎます。使うモデルはClaude Opus 5.5です。プロジェクトの参考資料を読み、HTMLとCSSを書き、タイムラインのトラックを埋めていきます。その間、右上のインスペクターパネルには、取り込まれた素材やコンポジションが順に並びます。この例では完成までに15分37秒かかりました。以前のテストでは約7分だったので、およそ2倍です。作業ごとに所要時間は変わるようです。

完成した動画は、AIニュースの見出しが流れる帯から始まり、通知バッジ付きの封筒アイコン、号のコーナーごとのカード、過去の号番号が並ぶアーカイブのグリッドを経て、ブランドに沿った購読の呼びかけで終わりました。プロンプト、つまりAIに与える指示で細かな指定をしていないにもかかわらず、仕上がりは見事に洗練されているように見えます。

▲ ローンチ動画の4段階構成

修正は描き込み、コメント、入力で

動画の一部を変えたいときは、プレビュー上で直接その箇所を示せます。

• Draw： 鉛筆アイコンを押し、任意のフレームの上に描き込みます。コンテンツカードを丸で囲み、「これを大きくして」といったメモを添えれば、どの要素を変えるべきかがエージェントに正確に伝わります。
• Comment： キャンバスやタイムラインの好きな場所にコメントのマーカーを固定し、変更したい点を示します。
• Select： 個々の要素やバウンディングボックスをクリックし、修正する素材を1つに絞ります。
• 入力： キャンバスのツールを使わず、Claude Codeのプロンプト欄に変更内容を普段の言葉で書きます。

音も同じ要領です。プロンプト欄で@を入力するか+ボタンを押すと、HyperFramesのテンプレートと素材のライブラリーが開きます。Frameyに説明を伝えて、合う短いクリップや素材を探させることもできます。サウンドデザインの依頼は、具体的に書くほどうまくいきます。

• 明るく前向きな雰囲気の、柔らかなアコースティックギターかフェルトピアノのBGM
• ナレーションもボーカルもなし
• 号のカードやトラック番号が画面に収まるたびに鳴る、控えめなカチッという音
• HeyGenからライセンス音源を買うのではなく、内蔵ライブラリーの無料音楽を使う

Claude Codeはこの依頼を1分足らずで処理し、BGMと歯切れのよい機械的なクリック音を作って、カードの切り替わりに合わせてタイムラインに配置しました。クリック音が多すぎると感じたら、個々のオーディオレイヤーやクリップをミュートするか削除します。商用ライセンス料を避けたい場合は、無料ライブラリーの音楽を使うよう明確に指示しておきます。

書き出しと縦型版

右上のExportボタンを押すと、レンダリングの設定が開きます。

レンダリングしたファイルはローカルに保存され、Finderや任意のメディアプレーヤーで開けます。

モバイル向けの縦型版を作るのに、新しいプロジェクトは要りません。サイドバーのメニューからプロジェクトを複製して名前を変え、Claudeに9:16のアスペクト比へ変換するよう頼みます。エージェントが既存のレイアウトとアニメーションの設定を縦長の画面向けに作り直すので、1つの絵コンテから16:9の横長版と9:16の縦型版の両方ができます。

プロジェクトの保存場所

デスクトップアプリで作ったプロジェクトは、標準ではすべてホームフォルダー内の.hyperframes-studioという隠しフォルダーに保存されます。名前がドットで始まるため、MacのFinderを普通に開いても表示されません。開くには、サイドバーでプロジェクト名の横にある三点メニューを開き、Reveal in Finderを選びます。

各プロジェクトフォルダーには、次のファイルが入っています。

自分のフォルダーをプロジェクトにする

デスクトップの専用フォルダーなど、見つけやすい場所にプロジェクトを置きたいこともあるでしょう。ところが、空のフォルダーをHyperFrames Studioにドラッグしても、HyperFramesのプロジェクトとして認識されないというエラーが出るだけです。有効なプロジェクトには、index.htmlファイルに加えて、hyperframes.json、project.json、meta.jsonのいずれか1つ以上の設定ファイルが必要です。既存のプロジェクトフォルダーを新しい場所にコピーすれば手早く回避できますが、アプリ内のWhat counts as a project?で説明されている正式な方法は、コマンドラインでフォルダーをセットアップすることです。

1. Finderでフォルダーを右クリックし、サービスからNew Terminal at Folderを選びます。
2. npx hyperframes initを実行します。必要なパッケージのインストールを求められたら、yを入力してReturnキーを押します。
3. プロジェクト名を入力し、スターターテンプレートを選びます。選択肢はBlank、Decision Tree、Kinetic Type、NYT Graph、Play Mode、Product Promo、Shaders、Vignelli、Warm Grainの9つです。
4. Blankを選ぶと、AGENTS.md、CLAUDE.md、hyperframes.json、index.html、meta.json、package.jsonが生成され、ブラウザーでWebエディターが開きます。アドレスは、自分のパソコンから配信されるlocalhostです。
5. そのページの右上にある緑のEdit with Frameyボタンを押します。プロジェクトがHyperFrames Studioのデスクトップアプリで開き、正しく認識されて、Claude Codeへのプロンプトを受け付けられる状態になります。

空のフォルダーで出るエラーメッセージは、アプリ上でどうプロジェクトを始めればよいかを初心者に教えてくれません。必要になる前にinitコマンドを知っておくと安心です。

▲ プロジェクトフォルダーとデスクトップアプリの連携

次にやること

HyperFrames Studioでは、PR動画づくりの難所が編集の腕前から、動画で何を伝えるかを決めることへ移るようです。構成はテンプレートが、見た目はWebサイトが担い、制作と修正はClaude Codeが受け持ちます。費用がかかるのは、アバターや音声クローンといったHeyGenの上位機能だけです。試すなら、次の手順で進めます。

1. アプリを開く前に、シンボリックリンク方式でHyperFramesのコアスキルを入れ、Claude Codeで/hypと入力して表示されるか確かめます。
2. 無料のHeyGenアカウントでサインインし、Hook、Proof、Turn、Call to actionを選んで、ホームページかニュースレターのURLを貼り付けます。
3. 変更点はDraw、Comment、Selectの各ツールで示し、音楽は無料ライブラリーのものを使うようエージェントに伝えます。
4. 1080pか4Kで書き出したら、プロジェクトを複製してモバイル向けの9:16版を頼みます。
5. 自分のフォルダーにプロジェクトを置くなら、空のフォルダーをドラッグせず、そのフォルダーでnpx hyperframes initを実行します。