HeyGen × HyperFrames 動画制作デモ
クリック / 矢印キーで移動
AI VIDEO WORKFLOW

撮影しない
アバター動画制作

HeyGen、ElevenLabs、Codex、HyperFramesを組み合わせたデモ制作の流れ

2026.06.24Demo deck
PROFILE
AI CREATIVE / DESIGN / MARKETING / HEYGEN AMBASSADOR
ぱんちゃん 新奥 真由子

健康関連業界で営業・広報としてキャリアを積んだ後、インハウスデザイナーへ転身。LIG、パーソルキャリア、AIスタートアップを経て、現在はフリーランスとして独立。

現在はHeyGenアンバサダーとしても活動。AI・クリエイティブ・マーケティングを掛け合わせ、企業支援、研修講師、AI動画や制作ワークフローの設計を行っています。

AI動画HeyGen AmbassadorCreative Automation研修設計
QRコード Xで情報発信しています
ぱんちゃん
01
DEMO

本日紹介するデモ動画

02

この動画は、Codex上で
HeyGenとHyperFramesを組み合わせて作っています。

01
手作業編集なし
タイムライン上で細かく切り貼りするのではなく、HTMLと素材をもとに生成します。
02
撮影なし
アバターと音声クローンを使うことで、撮影日程やスタジオを用意せずに制作できます。
03
テンプレ化可能
型を作っておけば、テーマや台本、素材を差し替えて複数パターンに展開できます。
03
WORKFLOW

作成の全体像

ここから続く各ページの流れに沿って、準備と作成を分けて進めます。

準備
HeyGenでアバターを作り、アバターIDとボイスIDを取得する
HeyGenでAPIを取得し、Agentic SkillsをCodexに渡す
CodexでHyperFramesプラグインを入れる
作成
動画自体のデザインを画像生成で作る
生成した画像を渡し、HyperFramesで動画を作る
デザインを調整する
skill化して再利用できる形にする
04
STEP 01

HeyGenでアバターを作る

HeyGenのアバターとボイスのIDを取得しておきます

05
STEP 02

HeyGenでAPIを取得＋
HeyGenのAgentic SkillsをCodexに渡す

06
STEP 03

CodexでHyperFramesプラグインを入れる

07
STEP 04

動画自体のデザインを画像生成で作る

画像生成で作った動画デザイン案
08
STEP 05

生成した画像を渡し、
「再現しHyperFramesで動画を作って」と指示をする。

09
STEP 06

デザインを調整する

10
STEP 07

skill化して再利用できる形にする

11
APPLICATION

応用すると、こういう動画が作れます

同じ制作型を、研修、サービス紹介、広告、社内ナレッジに広げられます。

12

型を作れば、
動画制作はぐっと楽になる

HyperFrames側に入っているので、まずは既存のHTML・素材・台本を開き、文言や画面を修正して使ってみてください。

hyperframes.dev を見る