AI活用マップAIと働くための設計図
なぜAI活用が必要かAI活用度チェックコラムお問い合わせ

トップHyperFramesで動画を作る

操作手順本文

HyperFramesで動画を作る

情報この手順でできるようになること

私の事例で紹介しているHyperFrames（Webページを作る技術で動画を組み立てるツール）を、AIコーディングエージェントから使える状態にする手順です。事例で紹介している「AI活用マップ」紹介動画（30秒プロモ）も、この手順でセットアップしたHyperFramesで作られています。動画編集ソフトの操作は一切なく、作りたい動画の内容を日本語で伝えるだけで進められます。

前提

普段使っている環境によって、下記2つのどちらかを選びます。作業場を作るで扱った、デスクトップアプリ・IDE・CLIという入り方の違いと同じ分け方です。

セットアップ

普段使っている環境で選んでください。順番に試す手順ではなく、どちらか1つを選ぶ選択肢です。

CLIやVSCodeなど、ターミナルで動くAIツールを使っている場合

  1. ターミナルで、普段使っているAIコーディングエージェント（Claude Code・Codex等）を開きます
  2. npx skills add heygen-com/hyperframes --full-depth を実行します
  3. 導入が終わると、そのパソコンに入っている複数のAIコーディングツール（Claude Code・Codex・Cursor・GitHub Copilot・Gemini CLI等）すべてで、同時にHyperFramesが使えるようになります。1つのツールにインストールし直す必要はありません。ここはCLIがAIツール横断で動く作業環境になっている、という話と同じ仕組みです
  4. 更新したいときは npx hyperframes skills update を実行します

まだCLIを導入していない場合は、先にCLIをインストールするを済ませてください。

Claudeアプリ（デスクトップアプリ・claude.ai）を使っている場合

ターミナルやコーディングエージェントを一切使わず、チャット形式のアプリだけで完結させたい場合はこちらです。HyperFramesは開発元HeyGenが「コネクタ」として提供していて、アプリの設定画面から1回つなぐだけで使えるようになります。つなぐ途中でHeyGenのアカウント認証が求められます。アカウントがなければその場で無料登録できます。

Claude Desktopアプリ（またはclaude.ai）の場合

  1. 画面左下の自分のアイコンから「設定」を開きます（Macは⌘,）
  2. 左側メニューの「コネクタ」を選びます
スクリーンショット - コネクタメニューの位置
  1. 右上の「追加」→「コネクタを参照」をクリックします
スクリーンショット - コネクタを参照を選ぶ
  1. 「HyperFrames」で検索し、「HyperFrames by HeyGen」を接続します

接続の途中でHeyGenのサインイン画面が開いたら、案内に沿ってログイン（またはアカウント作成）し、「アクセスを許可」を選べば完了です。すでに接続したことがあり「再接続」と表示されている場合は、それをクリックすればOKです。

Codexのアプリを使っている場合（同じくチャット形式の入り方です）

  1. サイドバーの「プラグイン」を開きます
  2. 「HyperFrames」で検索します
  3. 出てきた「HyperFrames by HeyGen」をクリックしてインストールします

メモ「コネクタ」はClaude Codeとは別物です

この「設定→コネクタ」という操作は、ターミナルで動くClaude Code（CLIで導入するもの）には存在しません。チャット画面で使うClaude Desktopアプリ・claude.ai側の機能です。ターミナルでClaude Codeを使っている方は、上の「CLIやVSCodeなど、ターミナルで動くAIツールを使っている場合」を選んでください。

使い方

作りたい動画の内容を日本語でAIに伝えるだけで、内容の相談→構成案づくり→完成までを会話で進められます。

例AIへのプロンプト例

「HyperFramesを使って、〇〇のサービスを紹介する30秒のプロモ動画を作りたいです。視聴者は中小企業の経営者です。タイトルカードと3つの特徴、最後にURLへの誘導で構成してください」

  1. 上記のようにAIに動画の内容を伝えます
  2. AIが構成案を提示してくるので、確認しながら進めます。細かい調整のやり取りを減らしたい場合は「その場で選んで進めてください」のようにAIに一任する指示を出せます
  3. プレビューを確認します
  4. 「動画ファイル（MP4）として書き出してください」と指示すれば、自動的にMP4形式で出力されます

動画にナレーションを付けたい場合は、VOICEVOXで原稿を読ませるやIrodori-TTSでボイスクローンを作るで作った音声と組み合わせられます。私の事例で紹介している事例も、HyperFramesとIrodori-TTSを組み合わせて作ったものです。