1 / 1
MMS公開ワークショップ

AIでつくる
解説・告知ショート動画

Codex・Claude Code × HyperFramesで、何度でも作れる「型」をつくる

2026年8月21日（金）21:00〜23:00 ／ オンライン開催（Zoom）

↓ スクロール、または ↓キーで次へ
今日のゴール

2時間後、この3つがわかっている状態を目指します

①

動画は部品と工程でできている

「動画制作」は1つの作業ではなく、いくつもの部品と工程の積み重ねだとわかる。

②

AIに役割を渡せば作れる

全部を自分で編集できなくても、AIに役割を渡せば動画が仕上がるとわかる。

③

型にすれば量産できる

一度作ったものをテンプレートとして残せば、次からは内容を変えるだけで作れるとわかる。

「すごい動画が1本できた」で終わらせず、動画制作の地図を持ち帰ってもらう回にします。
↓ 次へ
オープニング

この6本、全部AIで作っています

CM風の動画も、キャラクター解説も、日々のAIニュース解説の動画も。同じ仕組みで作れます。

nano banana 2 lite（キャラクター解説）
minecart template（BGM付きテンプレート）
lumiere CM narrated（CM風・ナレーション入り）
キネティックタイポグラフィ
「スキルはプロンプトを保存するだけのものではありません」
「GPT‑5.6の値下げについて」
↓ 次へ
種明かし

実は「表現」を作り分けているだけ

内容が同じでも、デザインテイスト・動き・配色を変えるだけで、まったく違う動画に見える。これが今日いちばん大事な気づきです。
↓ 次へ
分解する

動画は「7つの部品」でできている

① 目的：何のための動画か（告知・解説・広告）

② 内容・台本：何を伝えるか

③ サイズ・尺：縦か横か、何秒か

④ デザイン：色・文字・レイアウト・世界観

⑤ 素材：写真・商品画像・キャラクター・ロゴなど

⑥ 動き：文字を回す・飛ばす・拡大するなどのアニメーション

⑦ 音と仕上げ：BGM・効果音・ナレーション・字幕・書き出し

↓ 次へ
全体像

制作工程はこの9ステップ

企画

台本

ビジュアル設計

素材準備

アニメーション制作

音声・BGM・字幕

レンダリング（動画ファイルへの書き出し）

テンプレート化

量産

今日、プロの動画編集者になる練習はしません。「どこをAIに任せればいいか」を覚える回です。
↓ 次へ
道具の役割

迷ったら「料理」のたとえで考える

たとえだけだと分かりにくいので、実際にいつ・何のために使うかも合わせて説明します。

ChatGPT

試作室：企画・デザイン・台本を一緒に考える

実際に使うとき：作りたい動画の内容や見た目を、日本語で相談して形にする段階

Codex / Claude Code

制作担当：ファイルを編集しながら制作を進める

実際に使うとき：ChatGPTで固めた内容をもとに、実際に動画ファイルを組み立てる段階

HTML / CSS / GSAP

料理の材料と調理：動画の中身そのもの

実際に使うとき：画面の見た目・動きを組み立てる部品。自分で書く必要はない

HyperFrames

調理環境：HTMLの表現を動画にしやすくする

実際に使うとき：Claude Code/Codexが裏側で動かす、動画づくり専用の道具

Chrome

お皿に出す場所：できあがった画面を実際に映す

実際に使うとき：動きを確認する「プレビュー」の画面として

FFmpeg

盛り付けて保存する：映像・音をまとめてMP4にする

実際に使うとき：最後に「動画ファイル」として書き出すとき

全部を自分で操作する必要はありません。Claude CodeやCodexに「作って」とお願いすれば、裏側でこれらを動かしてくれます。役割だけ知っていれば十分です。
↓ 次へ
事前準備

今日使うものは3つ

①

ChatGPT

アカウントのみでOK。特別な設定は不要。企画・デザインを相談する相手。

②

Claude Code または Codex

どちらか一方が使えれば十分。デスクトップアプリとして使う、動画を実際に組み立てる担当。

③

HyperFrames

動画づくり専用の道具。自分で操作するのではなく、②のアプリに頼んで裏側で動かしてもらう。

②・③はどちらもデスクトップアプリの中で完結します。難しいコマンド入力は基本的に不要で、日本語でお願いすれば裏側の作業はAIが代わりに行います。準備が当日間に合わなくても大丈夫。ChatGPTだけで最後まで遊べるハンズオン②もあります。
↓ 次へ
事前準備 STEP 1

ChatGPTの準備

chatgpt.com にログインする（アカウントがなければ無料で登録）

今日はこれだけでOK。特別な設定は不要です。

無料プランでも今日の内容は進められます。
↓ 次へ
事前準備 STEP 2

Claude Code または Codex の準備

どちらもデスクトップアプリです。パソコンにインストールして、アプリの中で会話しながら使います。

公式サイトから、デスクトップアプリをダウンロード・インストールする

アプリを起動し、案内に沿ってアカウントでログインする

今日は、このアプリのチャット欄に日本語でお願いするだけで進みます

今日はコマンド入力は基本的に使いません。もし認証などで、どうしてもコマンドの操作が必要になった場合は、アプリの中にサイドバーで開けるターミナルがあります。別のアプリを開く必要はなく、案内が出たらそのサイドバーの中で進めれば大丈夫です。
↓ 次へ
事前準備 STEP 3

HyperFramesの準備

HyperFramesは、開発元HeyGenが提供する「コネクタ／プラグイン」として、アプリの設定画面から1回つなぐだけで使えるようになります。つなぐ途中でHeyGenのアカウント認証（サインイン）が求められます。アカウントがなければ、その場で無料登録できます。

Claude Codeの場合

画面左下の自分のアイコン→「設定」を開く（Macは ⌘ ,）

左側メニューの「コネクタ」を選ぶ

右上の「追加」→「コネクタを参照」

「HyperFrames」で検索し、「HyperFrames by HeyGen」を接続する

Codexの場合

サイドバーの「プラグイン」を開く

「HyperFrames」で検索する

出てきた「HyperFrames by HeyGen」をクリックしてインストールする

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

今日使う共通フォルダを作る

パソコンの中の、わかりやすい場所（デスクトップなど）に、この名前でフォルダを作ってください。

mms-video-studio

デスクトップなど、あとで見つけやすい場所に、この名前で新しいフォルダを作る（右クリック→新規フォルダ、などいつもの方法でOK）

Claude CodeまたはCodexのデスクトップアプリで、そのフォルダを開く

今日作るものは、全部このフォルダの中に育てていきます。
↓ 次へ
ワンポイント（任意）

次も使うなら、中身を整えておくと便利

今日1本作って終わりでもOK。もし「気に入った型を残して、次も使いたい」なら、Claude CodeまたはCodexに、フォルダを開いた状態でこう頼んでおくと後が楽になります。

このフォルダの中に、動画制作を続けていくための構成を作ってください。
・projects（今日作る動画など、1本ごとのプロジェクトを入れる）
・templates（気に入った型を保存しておく）
・output（書き出した動画ファイルを入れる）
・README.md（このフォルダの使い方を書いたメモ）

作ったら、簡単に説明してください。
これは任意です。今日はとりあえず1本作ってみたい、という場合は飛ばして次に進んでも大丈夫です。
↓ 次へ
ハンズオン①

「ノート型」の解説動画を作る

ノートを1ページずつめくりながら説明していく世界観で、1本仕上げます。目指すのはこんな雰囲気です。

ノート型の見本（オープニングで見た1本と同じです）
流れは、ChatGPTで企画・デザインを試作 → Codex/Claude Codeで仕上げる。この一連の体験が、今日いちばんの山場です。
↓ 次へ
① 企画・試作

ChatGPTに渡すプロンプト

今日は「自己紹介ショート動画」を題材にします。【　】の中だけ、自分の内容に書き換えてコピーしてください。

以下の内容で、15秒の自己紹介ショート動画のデザインとアニメーションを作ってください。
HTMLで作成し、その場でプレビューできるようにしてください。

【名前】ここに書く
【趣味】ここに書く
【好きな食べ物】ここに書く
【仕事・活動】ここに書く

【台本・構成について】
上の内容をもとに、見せる順番・シーン構成・尺配分はおまかせします。

【サイズ】
正方形 1:1（1080×1080）で作ってください。

【デザインの指示】
画面全体を1冊のリングノートに見立てます。紙面が主役です。

・配色（この色をそのまま使ってください）
背景：#F7F9FB
紙：#FFFDFB
インク（文字色）：#365064
リング（ノートの表紙部分）：#7FD8D4
マーカー：#F7B6C7
付箋：#FFE8F0
差し色：#FFE6B7

・素材：白い罫線紙、リングノートの綴じ目、うっすらした紙の質感。鉛筆や付箋を前景に軽く添える
・文字：見出しは太めの日本語ゴシック体（Zen Kaku Gothic Newがおすすめ）。手書き風フォントは使わず、手書きらしさはマーカーや丸囲みの「動き」で表現する
・強調：重要な言葉の下に、ピンクのマーカーで左から右へサッと線を引く。数字や結論はSVGの手描き楕円（少し傾けた二重線）でゆっくり囲む
・見出しの文字は一文字ずつ紙に書き込まれるように現れる
・場面の切り替えは、ページが一度だけ柔らかく持ち上がってめくれ、次のページへ着地する動き
・下3分の1を空白のままにせず、番号・比較・イラストなど、内容を理解する補助を置く
・避けること：ダークで硬いデザイン、カードを並べるだけの構成、全ページ同じレイアウト、派手なステッカー、急な回転やズーム、1画面に長い文章を詰め込むこと

最初に、シーン構成・演出・タイムラインを短く設計してから、実装してください。
内容は自由に書き換えてOKです。自己紹介以外に、好きなテーマがあればそちらでも構いません。
↓ 次へ
② 持ち出す

気に入ったらZIPにする

ChatGPTの画面上で、動きを確認してから伝えます。

この内容で決定します。CodexまたはClaude Codeで続きを制作できるよう、必要なソース・素材・仕様書をまとめてZIPにしてください。
ZIPファイルはダウンロードフォルダに保存されます。
↓ 次へ
③ 制作担当へ渡す

ZIPファイルをそのまま渡す

共通フォルダ（mms-video-studio）を開いた状態の、Claude CodeまたはCodexのチャット画面を用意する

ダウンロードしたZIPファイルを、そのままチャット欄にドラッグ＆ドロップする（またはファイル添付ボタンから選ぶ）

下のプロンプトを一緒に送る

このZIPファイルを、このフォルダの中に展開してください。
中身はHyperFramesの動画プロジェクトです。
ChatGPTで作ったデザイン・アニメーションを土台に、このあと字幕・ナレーション・BGMを足していきます。
まず現在の構成を短く説明してから、次の指示を待ってください。
ファイルの展開・配置はAI側にお願いすればOKです。フォルダの中を自分で操作する必要はありません。
↓ 次へ
④ 仕上げる

音まわりを足してもらう

この動画に、字幕・ナレーション・BGMを足してください。
・ナレーションの声：落ち着いた雰囲気
・BGM：邪魔しすぎない、静かなもの
・字幕：ナレーションと同じ内容を画面下に表示
・素材は、HyperFramesで使える無料の音源・音声からその場で選んで進めてください（候補の提示は不要です）
「候補を提案して」と頼むとやり取りに時間がかかるため、今日はAI側に選んで進めてもらう指示にしています。仕上がりが気に入らなければ、あとから「BGMを変えて」のように言い直せば大丈夫です。
↓ 次へ
⑤ 完成

プレビューして、書き出す

動きを確認したいので、プレビューを開いてください。
問題なければ、動画ファイル（MP4）として書き出してください。
プレビューはブラウザで自動的に開きます。書き出された動画ファイルの場所は、Claude CodeまたはCodexが教えてくれます。ここまでで、ハンズオン①は完成です。
↓ 次へ
ふりかえり

今、裏側で何が起きていたか

1本作り終えたところで、さっきの「道具の役割」をもう一度、今の体験に重ねて振り返ります。

ChatGPTが、自己紹介の内容から「ノート型」の画面デザインと動きを考えた

Claude Code / Codexが、そのデザインをもとにファイルを組み立て、字幕・ナレーション・BGMを追加した

HyperFramesが、それらのHTML・音声・字幕を動画として扱えるようにまとめた

FFmpegが、最後にすべてを1本のMP4ファイルに書き出した

見た目は「AIにお願いしただけ」でも、裏側ではこの4つが順番に働いています。この順番を知っているだけで、次に何かうまくいかなかったとき「どこで困っているか」を伝えやすくなります。
↓ 次へ
ハンズオン②

キネティックタイポグラフィとは

文字そのものが動いて、主役になる表現のことです。回る・拡大する・入れ替わる、といった動きで言葉を魅せます。もう一度、見本で確認します。

キネティックタイポグラフィ
MMS受付開始
こういう動きのある表現を作るときは、「ズーム」「フェード」「回転」のような専門用語を知っていると伝えやすくなります。ただ、こうした用語は数も多く、ニュアンスまで覚えるのは大変です。
↓ 次へ
用語を覚えなくていい理由

「魅せ方」を選ぶだけで、専門的なお願いに変換してくれるツール

そこで、専門用語を知らなくても、日本語の感覚（「ぐるぐる回る」「ドン！と大きく」など）を選ぶだけで、AIへの指示文を作ってくれるツールを用意しました。

Motion Design Prompt Builder

デザインの雰囲気・動き・配色・フォント・サイズを選ぶと、AIに渡せる映像表現のプロンプトが自動でできあがります。

https://mms-motion-prompt.pages.dev/

↓ 次へ
やってみる

好きな言葉で、動く文字を作る

好きな名言・今日覚えたこと・サービス名など、入れたい言葉を1つ決めてから始めます。

上のリンクから Motion Design Prompt Builder を開く

見た目・動き・配色・フォント・サイズを選ぶ（迷ったら「おすすめ」でOK）

「AIへの渡し方テンプレート」タブをコピーして、ChatGPTに貼り付ける

【作りたい動画の内容】の欄に、決めた言葉を書いて送る

動く文字が返ってくる。気に入るまで選び直してもOK

これはChatGPTだけで完結します。Claude Code・Codex・HyperFramesの準備が間に合っていなくても、ここは全員で楽しめます。
↓ 次へ
発展例

ここまでできると、こんなことも

今日は作りません。「仕組みは同じ」であることだけ体感してください。

360度背景 × 商品画像 × コピー × カメラワーク × タイポグラフィ × BGM

見た目はまったく違っても、目的→台本→デザイン→素材→動き→音→レンダリングという工程は今日やったことと同じです。
↓ 次へ
まとめ

今日持ち帰る「地図」

SNS投稿

イベント告知

商品PR

サービス紹介

解説動画

LP内の説明動画

自分自身のブランディング

広告クリエイティブ

テーマを変えるだけで、同じ工程がそのままどこにでも応用できます。
↓ 次へ
おわりに

今日からできること

一度作った型は、内容だけ変えて何度でも量産できます。テーマを変えれば、仕事にも使えます。

参考・関連リンク

・Motion Design Prompt Builder（Workshop Edition）：https://mms-motion-prompt.pages.dev/

・HyperFrames：Claude Code/Codexが裏側で動かす、動画制作専用の道具

・今日見た6本：MIRAICHI miraiのAI活用応援チャンネル（YouTube）