使い方ガイドへスキップ
HyperFrames作者 HeyGen

HyperFrames スキル。

アニメーションツールの山からではなく、必要な動画から始めましょう。HyperFramesは、プロジェクトの状態を読み取り、適切な制作ワークフローを選び、HTMLコンポジションを動画にするために必要な機能を呼び込むエントリーポイントのスキルです。

  • HTMLから動画へ
  • ワークフローのルーティング
  • 動画制作
ソースレビュー · hyperframesSKILL.md
タスク 動画制作 生成物 • 選択されたワークフローと、新規作成用のブリーフ • そのワークフローを通じたHTMLコンポジションとプレビュー • レンダリングを依頼して完了した場合のレンダリング済み動画 開始前に CLIにはNode.js 22以上とFFmpegが必要です。まずコアスキルから始め、作成用ワークフローは必要に応じてインストールされます。メディアサービスやクラウドレンダリングには追加の要件がある場合があります。
編集部による要約 · ソース確認日 2026-10-12 · 生成された例ではありません

01 できること

ひとつの入口、異なる制作ワークフロー

メインスキルが作業の進め方を選びます。実際のコンポジション、メディア、レンダリングは、選択されたワークフローとドメインスキルが担当します。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

製品ローンチ、キャプション追加、インタラクティブなデッキは、どれもモーションを含んでいても別の成果物です。HyperFramesは依頼された成果によってルーティングします。ウェブサイト主導のプロモ、既存映像へのシンプルなキャプション、ビートに同期した音楽、短いモーショングラフィック、カスタムコンポジションには、それぞれ別の経路があります。ソースには、Remotionソースを移植するための明示的な経路も用意されています。

既存のプロジェクトは白紙の状態とは扱われません。ルーターはブリーフとプロジェクトの成果物を確認し、記録されたワークフローを再開するか、依頼された操作だけを実行します。新規作成では、意図をBRIEF.mdに記録し、選択したワークフローをインストールして、必要な場合にのみ専門的な機能を読み込みます。

期待される成果物

  • ワークフローの選択と、新規作成用のBRIEF.md
  • 編集可能なHTMLコンポジション。ワークフローに応じて、プレビューや関連するプロジェクトファイルも含まれます
  • 依頼した場合のレンダリング済み動画。操作可能なデッキやレビュー済みストーリーボードが別の最終成果になることもあります
ブリーフ例を見る

依頼から制作まで

  1. 01
    プロジェクトの状態を見極める

    新規作成か、編集か、レンダリングのみの操作か、既存のブリーフがあるプロジェクトかを区別します。ヒアリングをやり直さず、記録済みの設定を再利用します。

  2. 02
    成果物で選ぶ

    依頼された成果をワークフローの契約に照らして選びます。キャプション付きの既存映像は新規の解説動画ではなく、BGMがあるだけではミュージック主導のプロジェクトにはなりません。

  3. 03
    必要な機能を読み込む

    選択した作成用ワークフローを必要に応じてインストールします。すべてのワークフローを既定でインストールするのではなく、実際の作業に必要なコンポジション、モーション、メディア、オーディオ、CLIのガイダンスを取り込みます。

  4. 04
    確認してから意図的にレンダリングする

    ワークフローのプレビューとチェックを使い、合意した成果物をレンダリングします。HTMLの検証は結果を実際に見ることの代わりにはならず、レンダリングのみの明示的な依頼はその操作のままです。

02 使う場面

使う場面

動画の依頼に適切な制作経路が必要なとき、または既存のHyperFramesプロジェクトを文脈を失わずに再開したいときに、ルーターを使います。

向いているケース

  • 主題が明確な新規動画ウェブサイト、PR、トピック、映像、音楽トラックを用意し、意図する成果を説明してください。ルーターが、専門的なワークフローか汎用のワークフローかを判断します。
  • 既存プロジェクトへの復帰保存されたブリーフ、プロジェクト設定、ストーリーボードがあれば、エージェントは同じ質問を繰り返さず、確立された方向性のまま作業を続けられます。
  • 複数の制作レイヤーを組み合わせる作品には、HTMLのタイミング、シーク可能なモーション、メディア、オーディオが必要になることがあります。ルーターはこれらの機能をつなぎ、ひとつのアニメーション技法が作業全体だと決めつけません。

確認すべき制限

  • 単体のアニメーションプリセットではないこのスキルはオーケストレーションの入口です。その指示をインストールしても、選択されたワークフロー、CLI、レンダリングの依存関係、メディア素材の代わりにはなりません。
  • すべての依頼がMP4で終わるわけではない操作可能なプレゼンテーション、承認済みストーリーボード、プレビューのみのタスクは、最終成果が異なります。レンダリング済みファイルが本当に必要かどうかを明示してください。
  • 外部サービスには別の要件があるソースでは、作成中に利用状況を確認します。メディア生成やホスト型サービスには、アカウント、利用可能な枠、追加の認可が必要な場合があります。オープンソースライセンスだからといって、すべてのサービスが無制限になるわけではありません。

用意する入力

  • 意図する成果物対象者、主題、アスペクト比、おおよその長さ、最終フォーマットを示してください。プロモ、キャプション追加、デッキ、解説動画、カスタム編集のいずれかも明確にしてください。
  • 使用できる素材承認済みのコピー、映像、製品スクリーンショット、音楽、ソースURLを提供してください。主張と素材の権利を明確にしてください。生成されたメディアは、事実に基づく製品の証拠の代わりにはなりません。
  • 既存プロジェクトとレビューの制限作業を続ける場合は、BRIEF.mdと関連するプロジェクトファイルを共有してください。承認のチェックポイント、ローカルのみという制約、レンダリングや公開が許可されているかも指定してください。

03 重要な判断

重要な判断

  1. ブリーフが方向性を引き継ぐ

    新規作業では、意図を確認するプロセスはBRIEF.mdで終わります。以降の制作は、元の依頼を何度も解釈し直すのではなく、記録された選択に従うべきです。

  2. HTMLのタイミングはシーク可能でなければならない

    フレームワークは、タイミングを持つコンポジションから個々のフレームをレンダリングします。モーションとメディアは、通常のブラウザ再生で正しく見えるだけでなく、そのオーサリング契約に従う必要があります。

  3. ワークフローのインストールは必要なものに絞る

    文書化されたスタンドアロンのセットアップでは、コアセットをインストールし、選択時に作成用ワークフローを追加します。プラグインパッケージには独自の同梱カタログと更新マネージャーがあり、2つのインストール方法は互換ではありません。

04 絞ったブリーフを試す

絞ったブリーフを試す

以下のブリーフ例はテストされていません。使用する前に、スキルのセットアップを確認してください。

コアスキルをインストールする

以下のコマンドは、エージェントや非対話での利用向けにREADMEで示されているコアセットのインストール方法です。

文書化されたコアセットのインストール
npx hyperframes skills update

CLIにはNode.js 22以上とFFmpegが必要です。対話式の代替手段はnpx skills add heygen-com/hyperframesで、その後Core Skillsを選択します。Claude Codeには、別途文書化されたプラグインのインストール方法もあります。作成用ワークフローは必要に応じて読み込まれます。このページはインストールをテストしたとは主張していません。

範囲を絞った動画リクエストから始める

以下のテストされていないブリーフを使って、主題、素材、出力、終了条件を明確にしてください。既存プロジェクトでは、現在のブリーフと設定を含めてください。

ブリーフ例
HyperFramesのエントリーポイントを使って、私が提供する承認済みのスクリーンショットとコピーから、20秒、16:9の製品紹介動画を計画してください。それらの素材と主張だけを使い、音楽、ナレーション、追加のメディアは生成しないでください。まず、このフォルダにすでにBRIEF.mdまたはhyperframes.jsonがあるかを確認し、記録済みの決定事項を維持してください。新規作業では、対象者とワークフローを確認し、ブリーフを書いてから、HTMLコンポジションとローカルプレビューを準備してください。プロジェクトはローカルに保ってください。レンダリングの前に、プレビューを見せ、実際に実行したチェックを報告してください。公開や有料サービスの利用はしないでください。必要なワークフロー、依存関係、利用状況の確認が利用できない場合は、完了したふりをせず、制限を説明してください。

最終レンダリング前に確認する

選ばれた経路、素材の使い方、プレビュー、報告されたチェックを確認してください。レンダリング済みファイルが生成された場合は視聴し、レンダリングと公開は分けて扱ってください。

  • 選択されたワークフローが依頼された成果物に合い、既存のプロジェクトの決定事項が維持されている。
  • プレビューは提供された主張と素材を使用し、文字が読みやすく、シークしても機能するタイミングになっている。
  • 依存関係、利用状況、レンダリングの結果が明示されている。ローカルプレビューが、公開済みまたはレンダリング済みの動画として説明されていない。

OpenDesignは、コーディングエージェント向けのローカルなデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェアの依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、以下にリンクされた固定のソースリビジョンについて説明しています。上流の挙動や要件は変更されることがあります。

ソースの所有者
HeyGen
リポジトリ
heygen-com/hyperframes
スキルファイル
skills/hyperframes/SKILL.md
ライセンス
Apache-2.0
確認したスナップショット
2026-10-12 · 2905162d925f
編集部によるソース要約
HyperFramesは、HTMLネイティブな動画ワークフロー群のためのルーティングとプロジェクト再開のエントリーポイントです。制作経路を選び、ドメインの機能を読み込みますが、それ自体は単一のアニメーション効果でも、記録された結果でもありません。

リンク先のソースに基づく、OpenDesignによる独自の要約です。リポジトリのスター数は日付付きの人気の指標であり、スキルの利用状況や品質スコアではありません。

06 始める前の質問

始める前の質問

メインスキルはhyperframes-animationとどう違いますか?

メインスキルはプロジェクトの状態を判断し、制作ワークフローを選びます。アニメーションスキルは、そのワークフローが必要とするときにモーションのルールとランタイムのガイダンスを提供します。エンドツーエンドの動画リクエストでは、メインのエントリーポイントから始めてください。

Reactや公開されているすべてのスキルが必要ですか?

Reactは不要です。HyperFramesは、シーク可能なアニメーションを使ってHTMLでコンポジションを作成します。スタンドアロンのREADMEでは、まずコアセットを推奨し、作成用ワークフローは必要に応じてインストールします。プラグインのインストールには独自のカタログが同梱されています。

既存のプロジェクトをレンダリングするだけでもできますか?

はい。ソースでは、特定のレンダリング、検査、検証、プレビューの依頼は範囲の限られた操作として扱われ、新規作成のヒアリングをやり直しません。ただし、プロジェクトには必要なCLIとレンダリング環境が必要です。

HyperFrames

必要な動画から始めましょう

範囲を絞ったブリーフか既存のプロジェクトを用意してください。適切なワークフローを選び、プレビューを確認し、レンダリングや公開のタイミングは明示的に決めましょう。

文書化されたコアセットのインストール
npx hyperframes skills update