ClaudeにHyperFramesをつなぎ、HTMLからアニメ動画とスライドを作る

HyperFramesコネクタでできること

HyperFramesは、HTMLのコードを動画に変換するHeyGen製のオープンソースです。Claudeにコネクタとして追加すると、アニメーション付きのスライド、解説動画、モーショングラフィックスを会話だけで作れます。

Connectorsディレクトリでの表示は次のとおりです。

ツールは compose(作る)と render_video(書き出す)の2つです。この経路はベータ版で、提供状況、画面の文言、機能、クレジット、必要なプランが変わることがあります。

動画の中身はHTMLなので、文字組みやレイアウトの指示がそのまま効きます。一方でプレビューの出方はClaudeの画面側に依存します。特定のプレビュー表示を期待せず、返ってきたツール結果に従います。

Claudeのチャットに追加する手順

Claudeへは、カスタムコネクタとして追加します。必要なものはHeyGenのアカウントとHyperFramesコネクタへのアクセスです。

https://mcp.heygen.com/mcp/hyperframes/

Connectorsディレクトリの掲載ページにあるコネクタURLは、末尾のスラッシュがない https://mcp.heygen.com/mcp/hyperframes です。ディレクトリ経由で追加するなら入力は不要で、Add to Claudeから進めます。手入力するときは、ドキュメント側の本番アドレスをそのまま使います。

カスタムコネクタを追加できるかどうかは、Claudeのプランとワークスペースの権限で決まります。メニューが見つからないときは、HyperFrames側の不具合と決めつける前に、まず自分のプランと権限を確かめるのが先です。

最初の動画を頼み、会話で直して書き出す

頼み方は、編集者に口頭で伝えるのと同じ要領です。たとえば、長さ、向き、対象、雰囲気、見せたいもの、最後の一文を並べた指示になっています。

15秒の縦型で、瞑想アプリの紹介動画を作ってください。
対象: なかなか寝つけない人
雰囲気: 静かで余白があり、あたたかい
呼吸タイマーを見せ、最後に「Rest starts here.」で終わる

作ったあとの修正は、同じ会話の中で続けます。コツは、気になる点と望む結果を名指しすることです。毎回ゼロから指示し直す必要はありません。

商品の登場を2秒早めてください。
色はそのまま。
字幕は小さくして、最後のトランジションはゆっくりに。

仕上がったら書き出しの形式を指定します。

MP4で、30fpsで書き出してください。

形式の使い分けは、MP4が共有向けの標準です。WebMはWeb配信や透過オーバーレイ向け、MOVは別の編集ソフトに渡すときに向きます。書き出しはHeyGenのクラウド上で走るので、ツールが返した作品や書き出しの識別子は控えておきます。後から同じ作品を指して頼めます。

スライド用途では、1枚ずつの見た目を言葉で決めてから、アニメーションの入り方(順番に表示する、強調を動かす)を足す順序が無理がありません。

Claude Codeではコネクタとプラグインのどちらを使うか

Claude Codeから使う場合、HyperFramesのドキュメントが案内しているのはMCPコネクタではなくプラグインです。ローカルに動画プロジェクトのフォルダを作り、MP4も手元で書き出します。

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

インストール後は新しいセッションを始めるか、/reload-plugins を実行します。使い方は次のように頼むだけです。

Using /hyperframes:hyperframes, make a 10-second product intro for https://example.com.

必要なものはNode.js 22以上とnpm、書き出し用のFFmpegです。npx hyperframes doctor で環境を確かめられます。作ったあとは npx hyperframes preview でブラウザーのエディターが開き、npx hyperframes render --output final.mp4 でMP4を作れます。

ホスト型のコネクタをClaude Codeに足したい場合、HyperFramesのドキュメントにはClaude Code向けのMCP登録手順は載っていません。Claude Code側のドキュメントには、Connectorsディレクトリにあるリモートサーバーは claude mcp add で追加できるとあります。形式は次のとおりで、HTTP方式のサーバーを名前とURLで登録します。

claude mcp add --transport http hyperframes \
  https://mcp.heygen.com/mcp/hyperframes/

認証の操作はclaude mcp login/logoutの手順にまとめています。ただし、Claude Codeからホスト型コネクタを使う構成には、Claude Code向けの案内がありません。動画をプロジェクトとして残したい用途なら、プラグインのほうが素直です。

課金・制限・つまずきの切り分け

費用の線引きは2層に分かれます。HyperFrames本体のフレームワークとCLI、スキルはApache 2.0のオープンソースで、手元での書き出しは無料でアカウントも要りません。ホスト型コネクタはHeyGenのアカウントに接続するため、プラン・上限・課金はHyperFrames本体とは別に変わることがあります。繰り返しの書き出しや長い書き出しの前に、アカウント側で確かめておくと安心です。

データの扱いは、手元で書き出す場合は動画の中身がマシンの外に出ません。コネクタ経由ではHeyGenのアカウント内で作られます。クラウドでの書き出しはプロジェクトをHeyGenにアップロードします。Claude側のプロンプトはAnthropicに送られるので、非公開の素材を入れるかは目的に応じて判断します。

ホスト型の制限は4点あります。

• 書き出しはHeyGenのインフラで動く
• ツール一覧と結果の見え方は、配備されたサーバーとホスト次第
• ローカルのプロジェクトフォルダやブラウザーのエディターは使えない
• ピクセル単位の精密な編集はローカル側の領分

どんな用途ならこの経路が合うか

短い告知動画、SNS用の縦動画、プレゼンの動きのある導入部のように、1本を会話で素早く作りたい用途は合います。逆に、ブランドのフォントや素材を使い込む動画、繰り返し作る定型の動画、社内の自動化には、プロジェクトが手元に残るプラグイン経路が向いています。用途の線引きは、ホスト型とローカルの機能差から導けます。

静止画やテンプレートからの量産なら、別のコネクタで足りる場面もあります。たとえばOG画像や広告バナーを差し替え式で量産するならClaudeとOrshotの連携、動画生成のAPIをアプリに組み込むならClaude CodeのRunwayプラグインが近い選択肢です。Markdownからスライドだけ作るならMarpをClaude Codeで使う手順も軽く済みます。

HTMLで動画を作る発想の利点は、Claudeが得意なコード生成の延長で、動きまで指示できる点です。逆に言えば、動画編集ソフトのような手作業の微調整は、会話だけでは詰めにくい前提で始めたほうが期待外れになりません。