Claude Design＋HyperFramesでSNSテロップ動画を作る方法｜After Effectsの代わりに月$20で何本作れるか

この記事はClaude Pro/Max契約者でテロップ動画を量産したい個人クリエイター向け。
After EffectsやCapCutを触ったことがあれば読めます。

HeyGen公式ガイド・GitHub README・Anthropic公式を横断して再構成しました。

出典URLは各セクションに明示しています。

そもそもClaude Design × HyperFramesって何の話？

Anthropicが2026年4月17日にClaude Designを公開しました。

これはAnthropic Labs部門の研究プレビュー製品です。

同じ日にHeyGenがHyperFramesをオープンソース化しています。

この2つを組み合わせると、Webページを作るのと同じノリで動画が作れる。

これが今回の話の中心。

Claude Design単体だとスライド・LP（ランディングページ。
サービス紹介の1枚ページ）・マーケ素材までが射程です。

動画は将来ロードマップに載っている段階で、本体には入っていません。

"Write HTML. Render video. Built for agents."

（HTMLを書け。動画にレンダリングしろ。エージェント向けに作った）

— HyperFrames公式サイト（hyperframes.heygen.com）

つまりHyperFramesはHTML/CSS/JSをMP4にエンコードする外部レンダラ。

Claude Designが書き出したHTMLを受け取ります。

そしてローカルPC上で動画ファイルに変換する係です。

「Claude Designに動画機能が内蔵された」と読める英語記事も出回っています。

正確には別物の合体です。

ここを最初に押さえないと話が詰まります。

仕組みは2段構え。「プロンプト1文で動画」ではない

HeyGen公式ガイドが明示しているフローを引きます。

Claude DesignとHyperFramesは役割分担が決まっています。

片方だけでは動画は出ません。

Claude Design担当: 初稿（ブランド・レイアウト・アニメーション・トランジションの全体設計）。

Claude Code担当: 磨き込み（イージング・スタッガー・シェーダー差し替えなど細部）。

Claude Designはlintを実行できない（サンドボックス制約）。

— HeyGen公式ガイド（github.com/heygen-com/hyperframes）

正しいワークフローを表にすると次の通り。

段階	担当	やること	出力
Step1	Claude Design（クラウド）	テロップ・アニメをHTML/CSS/JSとして第1稿生成	ZIP（4ファイル）
Step2	Claude Code（ローカル）	イージングやスタッガーの細部だけ調整	修正後のindex.html
Step3	HyperFrames CLI（ローカル）	npx hyperframes render でMP4書き出し	output.mp4（1920×1080 / 30fps）

3段構えと数えてもいいです。

重要なのは「Claude Designの中だけでは完結しない」点。

私はここを誤解させる英語記事が多いと感じています。

「会話だけで動画作れる神ツール」と紹介して、
初手で詰まる読者を量産している構図です。

Claude Designで動画の第1稿を作る手順

HeyGen公式ガイドの導入手順を、日本語クリエイター向けに再構成します。

1. STEP1: ガイドファイルをダウンロード。GitHubのdocs/guides/claude-design-hyperframes.mdを↓ボタンで保存します。これはClaude Designに「HyperFrames向けHTMLの書き方」を教える説明書です
2. STEP2: Claude Designを開く。claude.ai/designにアクセス。Pro/Max/Team/Enterprise契約者なら左メニューに「Design」が出ます。出ない場合は段階的ロールアウト中なので数日待ちます
3. STEP3: ガイドを添付してプロンプトを送る。STEP1で保存した.mdをチャットに添付します。作りたい動画の尺・テロップ文・ブランドカラーを文章で説明します
4. STEP4: ZIPをダウンロード。Claude Designが書き出すのは4ファイル構成のZIP。中身はindex.html・preview.html・README.md・DESIGN.md（AIに見た目のルールを覚えさせるテキストファイル）

ここまでがクラウド側の作業です。

Claude Designの週次クォータ（プランごとの利用回数枠）を消費します。

引っかかりやすいのは「Designメニューが出ない問題」。

Anthropic公式は「段階的展開なので数日後に再確認」とアナウンスしています。

出典はAnthropic公式。

HyperFramesでMP4にレンダリングする手順

ZIPを受け取ったあとはローカル端末側の作業です。

HyperFrames公式Quickstartが示している手順を再構成します。

1. STEP1: 前提環境を整える。Node.js 22以上（JavaScript実行環境）とFFmpeg（動画変換ツール）をインストール。Macならbrew install node ffmpeg、Windowsならwinget install OpenJS.NodeJSと公式FFmpegビルドを入れる
2. STEP2: スキルを登録する。npx skills add heygen-com/hyperframesを1回だけ実行。これでClaude CodeなどのAIエージェントがHyperFramesのCLIを呼べるようになる
3. STEP3: ZIPを展開してプロジェクトに置く。Claude Designが書き出した4ファイルを作業ディレクトリに展開する
4. STEP4: lintで構造チェック。npx hyperframes lintでエラーゼロを確認。Claude Design側はこれを実行できないので、ローカルで必ず通す
5. STEP5: プレビューで動きを見る。npx hyperframes previewでブラウザにスタジオが立ち上がる。スクラビング（タイムラインを動かす操作）して破綻がないか確認する
6. STEP6: MP4を書き出す。npx hyperframes render index.html -o output.mp4を実行。デフォルトは1920×1080 / 30fps。縦動画は--resolution 1080x1920、4Kは--resolution 3840x2160、ヌルヌルにしたい時は--fps 60

レンダリング自体はローカルPCのCPU/GPUで走ります。

Claude枠を消費するのはClaude DesignとClaude Codeのプロンプト部分のみ。

HyperFramesのレンダリング処理は無料です。

料金は2系統に分けて理解する

既存の英語記事には「Pro $20でHyperFrames動画生成も含まれる」という記述があります。

これは概念的に間違い。

HyperFramesはローカルCLIなのでClaudeのプラン枠とは別軸です。

正しくは次の通り。

系統	何にお金がかかるか	金額	消費物
Claude Design（クラウド）	HTML第1稿の生成プロンプト	Pro $20/月、Max 5x $100/月、Max 20x $200/月	Claude Design専用の週次クォータ
Claude Code（クラウド）	ローカルでの微調整プロンプト	同上のサブスク枠内	Claude Code枠
HyperFrames（ローカル）	レンダリング自体	無料（Apache 2.0=商用利用可）	手元のPC電力のみ
FFmpeg/Node.js	環境構築	無料（オープンソース）	ディスク容量のみ

HyperFrames側にper-render課金やシート数制限はありません。

これはGitHub READMEで明示されています（GitHub README）。

ただしClaude Design側のトークン消費はそこそこ重い。

Anthropic公式Helpも「研究プレビュー段階のためクォータ調整中」と明記しています。

Claude Design is in research preview.

Pricing and quotas may change.

（Claude Designは研究プレビュー段階。
料金とクォータは変更の可能性あり）

— Anthropic公式Help（Claude Design Subscription Usage）

Pro $20プランの位置づけ。

公式は「Quick explorations, one-off use」と説明しています。

テロップ動画を週10本ペースで量産したい人にはPro枠は厳しめです。

Max 5x ($100/月)以上が現実的なライン。

私はここが地味に効く判断ポイントだと感じています。

After EffectsやRemotionと何が違うのか

Remotion（Reactで動画を書くオープンソースの動画レンダラ）との比較。

これはHeyGen公式が整理しています。

LLMs are trained on HTML, giving them extensive web code knowledge.

React+Remotion represents a tiny fraction of training data.

（LLMはHTMLで大量に学習しているが、
React+Remotionは学習データのごく一部）

— HeyGen公式（HyperFrames vs Remotion）

技術的にはGSAP（GreenSock Animation Platform。
Web上で動きを作る定番ライブラリ）の扱い方が決定的に違います。

項目	HyperFrames	Remotion	After Effects
記述言語	HTML/CSS/JS（GSAP）	React/TypeScript	GUI操作＋エクスプレッション
ビルドステップ	不要（index.html直接実行）	必要（webpack）	不要（GUIアプリ）
GSAPの扱い	seekで決定論的に再生	毎フレームReact再レンダリング	独自エンジン
AI親和性	高い（HTML出力で完結）	中（React知識前提）	低い（GUI前提）
料金	OSS無料	OSS無料（商用は有償）	約3,280円/月（単体プラン）

HeyGen公式ドキュメントが指摘する一番の差分はこれ。

HyperFramesはGSAPをseekするため4秒のアニメが正確に4秒で再生される。

Remotionは毎フレームReactを再レンダリングする。

結果としてGSAPの内部クロックが実時間で走り「アニメが1秒目で完了して残りは空フレーム」問題が生じる。

— HyperFrames公式（hyperframes-vs-remotion）

After Effectsを完全に置き換えるかというと、
そこは無責任に言えない。

短尺テロップ・ロゴモーション・図解アニメは射程内です。

「コードで指示しやすい動き」が得意領域。

フィルム的な質感調整やキーフレームの微妙な動きは当面ソフト側が強い。

これが現時点の妥当な線引きだと、私は見ています。

Claude Design × HyperFramesの公式制約と運用上の注意点

HeyGen公式ガイドとGitHub READMEを横断すると、
運用前に押さえるべき制約があります。

触る前に知っておかないと手戻りになるポイントだけ抜粋します。

1. Claude Designはlintを実行できない

Claude Designはサンドボックス制約でlintを実行できません。

HTMLの構造バリデーションはローカルで通す必要があります。

具体的にはnpx hyperframes lintを必ず実行します。

Claude Design cannot run lint inside the sandbox.

（Claude Designはサンドボックス内でlintを実行できない）

— HeyGen公式ガイド（claude-design-hyperframes.md）

2. 非決定論的コードは禁止

HyperFramesは決定論的レンダリングが前提です。

同じ入力に対して同じ出力が保証される必要があります。

そのため公式ドキュメントが次のコードを禁止しています。

• Math.random()（毎回違う値が出る）
• Date.now()（毎回違う時刻が出る）
• repeat: -1（無限ループ）
• setInterval（時刻依存の繰り返し）

Claude Designに「ランダムにキラキラを散らす」と指示しても無理。

出力されたコードでこの4つは使えません。

代替手段は事前にseed値を固定した擬似乱数で組み立てる方式です。

3. シェーダートランジション前のexit禁止

WebGLシェーダー（HyperShader）でトランジションを組む場合の制約。

直前のシーンのexit animationが使えません。

No exit animation before shader transitions.

（シェーダートランジションの直前にexit animationは置けない）

— HeyGen公式ガイド（claude-design-hyperframes.md）

4. 音声は解釈しない

Claude DesignもHyperFramesも音声を解釈しません。

ナレーション動画を作る場合、音声タイムラインに合わせたテロップ表示は手動です。

具体的には別途Whisper等で書き起こして秒数を測ります。

その秒数を文章でClaude Designに渡す前段階の手間が発生します。

video要素はmuted playsinline必須。

音声は別途<audio>タグでの取り回しになります。

出典はHeyGen公式ガイド。

5. 日本語テロップでNoto Sans JPが使えない

HyperFramesには「禁止フォントリスト」が設定されています。

anti-monoculture（フォント均質化を避ける）方針による制約。

定番フォントが意図的に弾かれます。

禁止フォントは公式ガイドで明示されています。

カテゴリ	禁止フォント
サンセリフ系	Inter / Inter Tight / Roboto / Open Sans / Noto Sans / Lato / Poppins / Outfit / Sora / Nunito / Source Sans / PT Sans / Arimo
セリフ系	Fraunces / Playfair Display / Cormorant Garamond / EB Garamond / Cinzel / Prata / Bodoni Moda
その他	Syne

日本語クリエイター視点で重いのはNoto Sansが禁止リスト入りしている点。

Noto Sans JPは日本語Web/動画の事実上の標準フォントです。

これが使えない。

救いはあります。

Noto Serif JPは禁止リスト外です。

明朝寄りのテロップで良ければそのまま使えます。

カジュアルなSNSテロップでゴシック体が必須なケース。

その場合はGoogle Fontsの他の日本語ゴシックを指定します。

具体的にはM PLUS 1pなど禁止外のものが現実的。

日本語フォントの明示的サポートは公式ドキュメントに書かれていません。

Claude Designに「Noto Sans JP以外で」と指定して書かせる工夫が必要です。

地味に効く制約。

6. 出力形式はMP4のみ確認可能

公式ドキュメントで確認できる出力形式はMP4（FFmpegエンコード）です。

デフォルトは1920×1080 / 30fps。

GIFやWebMの直接出力は公式ドキュメントでは確認できません。

出典はHyperFrames Quickstart。

結局どんな人に刺さるのか

整理するとこうなる対応表。

タイプ	判断	理由
SNS用テロップ動画を週5本以上作る個人クリエイター	触る価値高	量産機として機能。Max 5x $100/月が現実ライン
YouTubeのオープニング・ロゴモーションを内製したい人	触る価値中	短尺ループ・図解は射程内。色や動きの再利用が効く
本格的な映像制作（CM・MV）が本業の人	サブとして使える程度	音声同期・繊細なキーフレーム制御は当面After Effects優位
動画は月1本程度の個人ブロガー	Pro $20で十分	ただし「Quick explorations」枠なので余裕は薄い
Node.jsもCLIも一切触りたくない人	現時点では非推奨	HyperFrames側はターミナル操作必須

正直、
After EffectsのCC契約（約3,280円/月）を即座に止めるか。

そこは私もそこまで踏み込めない。

用途が完全には被らないからです。

ただ「短尺テロップだけのために高いソフトを契約してた」人は別。

Claude DesignとHyperFramesに移すのは現実的な選択肢になります。

FAQ

Claude DesignとHyperFramesは別物ですか？

別物です。

Claude DesignはAnthropicのクラウドSaaS。

HTMLやスライドの第1稿を生成する役割です。

HyperFramesはHeyGenがApache 2.0で公開したローカルCLI。

HTMLを動画ファイルに変換する役割です。

両方を組み合わせて初めて動画が出ます。

HyperFramesは料金がかかりますか？

レンダリング自体は無料です。

Apache 2.0ライセンスで、商用利用も改変も再配布も無制限。

per-render課金もシート数制限もありません。

お金がかかるのはClaude Design側のサブスクリプションです。

動画の出力形式は何ですか？

公式ドキュメントで確認できるのはMP4（FFmpegエンコード）です。

デフォルトは1920×1080 / 30fps。

--fps 60や--resolution 3840x2160（4K）の指定も可能です。

GIFやWebMの直接出力は公式ドキュメントでは確認できません。

日本語フォントは使えますか？

Noto Sans JPは禁止フォントリストに含まれています。

そのため使用不可。

Noto Serif JPは禁止外なので使用可能です。

日本語ゴシックを使いたい場合はGoogle Fonts内で禁止リスト外のフォントを指定します。

Node.jsを触ったことがなくても使えますか？

HyperFrames側のレンダリングにはターミナル操作が必須です。

Node.js 22以上とFFmpegのインストールが必要。

npxコマンド（Node.jsに付属するパッケージ実行コマンド）の実行も発生します。

Claude Codeに作業を任せれば実質コピペで進む構造です。

研究プレビューとは何ですか？

Anthropicが正式版リリース前の機能を限定公開する形態のことです。

Claude Designはresearch preview状態。

料金・クォータ設定は予告なく変更される可能性があると公式が明記しています。

出典はAnthropic公式Help。

After Effectsの代わりになりますか？

用途次第です。

短尺テロップ・ロゴモーション・図解アニメ・データ可視化は射程内。

フィルム的な質感、
繊細なキーフレーム制御、
音声同期が重い領域は当面After Effects優位です。

「短尺動画のためだけにCC契約していた」層には乗り換え候補になります。

参考リンク

• Anthropic公式: Claude Design発表
• HyperFrames GitHubリポジトリ
• HyperFrames公式サイト
• Claude Design × HyperFrames公式連携ガイド
• HyperFrames Quickstart
• HyperFrames vs Remotion（公式比較）
• Claude Design 料金・クォータ公式Help

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。