商品・サービスPR／CM
商品写真、アプリ画面、機能、価格、申込導線を15〜30秒に整理。実物を見せやすく、目的も絞りやすい。
Introduction
最初に知っておきたいこと
AIエージェントへ一言伝えるだけでも動画は作れます。ただし、「ファイルができた」と「人に見せられる」は別の段階です。
試作
まず動くものを出す
画面、字幕、音、動きが一通り入り、最後まで再生できる状態。
公開品質
目的に合わせて磨く
冒頭、実物素材、文字、音、事実確認、権利を確認し、SNSで見ても意味が通る状態。
この教材のゴールは、最初からプロの映像制作者になることではありません。動画制作の全体像を持ち、試作を見て「次にどこを直すか」を判断できる状態になることです。
Chapter 1
この方法は、何に使える？
公式のテンプレートや制作ワークフローでは、商品紹介、SNS動画、字幕つき切り抜き、データ動画、音声の可視化、画像と音声から作る物語などが代表例として挙げられています。
ノウハウ・雑学ショート
「3つのコツ」「1分で分かる用語」など。原稿、図、出典、ナレーションを型にして継続しやすい。
イベント・講座告知
参加後にできること、日時、対象、申込導線を短く見せる。MIRAICHIの告知動画もこの型。
画像で見せる短い物語
生成画像3〜5枚をパン・ズームし、字幕、ナレーション、音楽で20〜45秒の物語へ。人物と世界観の一貫性が鍵。
YouTube・セミナー切り抜き
文字起こしから見どころを選び、縦型へ再構成。字幕、見出し、話者名、補足カードを加える。
データ・レポート動画
ランキング、グラフ、進捗、数字の変化を動画化。データ差し替えで定期レポートにも使える。
ポッドキャスト・音声可視化
波形、引用字幕、話者名、写真を組み合わせたオーディオグラムや短い紹介動画。
音楽・歌詞・MV
ビートに合わせた画像切り替え、歌詞、波形、モーショングラフィックス。音源の利用権を確認する。
3D・プロダクト演出
スマホやカードを立体的に見せる、カメラが回り込む、仕組みを空間で説明する。目的を決めて使う。
最初の一本には、商品PR・ノウハウ／雑学・イベント告知がおすすめです。画像物語は、動画生成から始めず「静止画3〜5枚＋カメラ移動＋字幕＋音声」にすると完成しやすくなります。
YouTubeやセミナーの切り抜きは、技術的に作れることと公開してよいことが別です。元動画の利用許諾、発言の文脈、顔・声・資料の権利を確認します。
根拠：Remotion公式TemplatesのPrompt to Video、TikTok captions、Audiogram、Music Visualization、3D、Overlay等／HyperFrames公式のproduct launch、social video、data visualization、talking-head recut等。
Chapter 2
動画制作は、企画から投稿まで7工程
RemotionやHyperFramesは重要ですが、担当するのは全工程の一部です。先に全体地図を持つと、道具の便利さが理解できます。
01目的誰に何を感じ、何をしてほしい？
02台本何秒で何を見せ、何を言う？
03素材写真、動画、画面、音、ロゴ、数字
04画面設計色、書体、余白、順番、動き
05組み立て字幕、映像、音声、BGMを配置
06確認スマホ、音量、事実、権利を確認
07投稿・学習反応を次の一本へ戻す
Remotion／HyperFramesは主に「05 組み立て」と「06 確認・書き出し」を担います。Claude Code／Codexは、1〜7を一緒に考え、コードやファイルを作り、修正を実行する伴走役です。
Chapter 3
AIエージェントと、2つの動画制作基盤
| 名前 | 役割 | たとえるなら |
|---|---|---|
| Claude Code / Codex | 企画、素材整理、コード作成、実行、確認、修正を進めるAIエージェント | 制作を一緒に進める担当者 |
| Remotion | React／TypeScriptで、画面・音・時間を動画として組み立て、レンダリングする基盤 | React製の編集・書き出し工房 |
| HyperFrames | HTML／CSS／JavaScriptとseek可能なアニメーションを、MP4へレンダリングする基盤 | HTML製の編集・書き出し工房 |
Chapter 4
RemotionとHyperFramesの違い
どちらも、ブラウザで表現できる画面や素材をフレーム単位で動画へ書き出します。違いの中心は、動画を組み立てる言語と制作環境です。
| 比較軸 | Remotion | HyperFrames |
|---|---|---|
| 動画の組み方 | Reactコンポーネント＋TypeScript | HTML＋CSS＋JavaScript＋seek可能なアニメーション |
| 得意な入口 | React開発、部品化、propsやデータ差し替え、動画生成アプリ | AIエージェントとのHTML編集、短い告知・説明、Web表現の動画化 |
| プレビュー | Remotion Studioでcompositionを確認 | ブラウザプレビュー、Studio、Playerで確認 |
| 3D | React Three Fiber等と組み合わせられる | Three.js等のframe adapterを使える |
| 量産 | props、データ、サーバー、Lambda等で強い | variables、テンプレート、CLI、CI、Lambda等で可能 |
| 初学者の読み方 | Reactの部品構造を理解すると強い | HTMLの構造と見た目を追いやすい |
| 無料利用 | 個人・一定規模以下等は無料条件。組織規模により会社ライセンスを確認 | セルフホストのCLI・runtime・adapterはオープンソースで無償。任意のマネージドクラウドは別 |
| 最初に選ぶ目安 | Reactで育てたい、既存アプリやデータと深くつなぎたい | AIと画面を直しながら、まず一本完成させたい |
この1時間はHyperFramesを使います。品質がRemotionより高いからではなく、HTMLを見ながら「試作 → 確認 → 修正」を体験しやすいためです。
Chapter 5
「おしゃれに」だけでは、品質は上がらない
高品質化の鍵は、形容詞を増やすことではなく、AIが判断できる材料を渡すことです。
伝える設計
目的・相手・一番伝えること・実物
何のための動画か、誰が見るか、何を一つ持ち帰るか、何を証拠として見せるか。
見た目の設計
参考・色・書体・余白・動き・音・制約
参考動画は「文字の出方」「余白感」など、真似したい理由まで具体化する。
プロンプト1｜実装前に動画企画を固める
15〜20秒のSNS向け動画を作ります。 まだ実装せず、最初に動画企画を整理してください。 【目的】 見た人に最後にしてほしい行動： 【相手と場面】 誰が、どんな時に見る動画か： 【一番伝えること】 この動画を一文で言うと： 【見せる実物】 画面録画、写真、完成画面、数字、ロゴなど： 【見た目の方向】 参考にしたい動画、色、書体、余白、雰囲気： 【動きと音】 ゆっくり／キビキビ、字幕、ナレーション、BGM： 【制約】 尺、縦横比、投稿先、必ず入れる情報、避けたいこと： まず次を作ってください。 1. 視聴者に伝える一つのメッセージ 2. 秒数ごとの構成 3. 必要素材の一覧 4. 品質確認項目 5. 不明点と、制作側で仮定すること 確認できるまで動画の実装と書き出しは始めないでください。
Chapter 6
ハンズオン｜HyperFramesで最初の一本を作る
最初の完成条件は「冒頭3秒で意味が分かり、最後に次の行動が一つある15〜20秒動画」です。
- プロンプト1を使い、動画企画を固める。
- 使ってよい写真・画面・ロゴ・音声を一つのフォルダへ置く。
- プロンプト2を使い、HyperFramesで画面、字幕、音、動きを組む。
- 代表フレームを見て、「文字・素材・動き」のうち一番弱い一項目を直す。
- MP4を書き出し、スマホで確認する。
プロンプト2｜決めた企画からデモ動画を作る
HyperFramesを使って、プロンプト1で確認した動画企画に沿った15〜20秒のデモ動画を作ってください。 制作順： 1. 企画内容をBRIEFとして保存する 2. 素材の有無と利用条件を確認する 3. 秒数ごとの画面構成を作る 4. 字幕、ナレーション、BGM、アニメーションを組む 5. 代表フレームを確認する 6. 文字切れ、コントラスト、音量、尺を検査する 7. MP4を書き出す 品質条件： - 冒頭3秒でテーマが分かる - 1画面1メッセージ - スマホで字幕が読める - 実物素材または具体的な価値が見える - 音なしでも意味が通る - 日時、価格、URL、固有名詞は元資料と照合する - 未確認の実績や効果を足さない - 元素材を上書きしない 判断が必要な場合は、採用した案と理由を制作記録へ残してください。
Chapter 7
投稿前の6問
- 無音でも、最初の3秒で何の動画か分かる？
- スマホで字幕を読める？
- 実画面、写真、数字など、信頼できる材料がある？
- 一番伝えたいことは一つに絞れている？
- 日時、価格、固有名詞、URLに間違いはない？
- 画像、映像、顔、声、音楽、フォントの利用条件を確認した？
プロンプト3｜完成動画を一項目ずつ改善する
完成した動画を、作り直す前に診断してください。 次の順で確認します。 1. 冒頭3秒の分かりやすさ 2. 文字量、文字サイズ、表示時間 3. 実物素材と具体性 4. 場面ごとの情報の優先順位 5. 動きが伝達を助けているか 6. ナレーション、BGM、効果音のバランス 7. 日時、URL、固有名詞、権利 出力： - 最も良い点 - 最も弱い一項目 - その一項目だけを直す修正案 - 修正前後で確認する代表フレーム - 再書き出し後の確認項目 一度に全部を変更せず、最も効果の大きい一項目から直してください。
高品質化は「派手なエフェクトを追加すること」ではありません。試作を見て、最も弱い一項目を直し、次の一本にも使える判断を残すことです。
Chapter 8
用途が決まった後に使う、応用プロンプト
ここからは共通の制作手順ではありません。「画像で物語を作る」「元動画を切り抜く」と用途が決まった時だけ使います。
応用A｜画像で短い物語を企画する
縦型9:16、30秒以内の短い物語動画を企画してください。 条件： - 生成画像は3〜5枚 - 同じ主人公、服、色、世界観を保つ - 画像を高速で切り替えず、パン・ズーム・奥行きで見せる - 冒頭3秒で状況が分かる - 中盤で一つだけ変化が起きる - 最後に余韻または小さな結論を置く - 字幕だけでも意味が通る - ナレーションとBGMの役割を分ける まず実装せず、 1. 一文の物語 2. 5カット以内の絵コンテ 3. 各画像の生成指示 4. ナレーション原稿 5. 画像の一貫性を確認する項目 を出してください。
応用B｜YouTube／セミナー切り抜きの計画
この元動画から、30〜60秒の縦型切り抜き候補を作ります。 まだ編集せず、最初に次を確認してください。 1. 元動画の長さ、解像度、音声 2. 文字起こしの有無 3. 発言が単独でも誤解されない候補 4. 冒頭3秒に置ける問いまたは結論 5. 前後の文脈を残す必要がある箇所 6. 固有名詞、数字、字幕の要確認箇所 7. 顔、声、資料、BGMの公開許諾 候補ごとに、 - 開始時刻と終了時刻 - 一文のテーマ - 冒頭字幕 - 残すべき文脈 - 追加する図・見出し - 公開前の確認事項 を表で出してください。 元動画は変更・上書きせず、候補確認後に短いプレビューから作ってください。
References
確認した公式情報
- HyperFrames公式GitHub README — 仕組み、対応ワークフロー、用途、Remotion比較。
- HyperFrames Frame adapters — GSAP、Lottie、Three.js等のフレーム同期。
- HyperFrames Pricing — セルフホストと任意のクラウド。
- Remotion Fundamentals — React component、composition、frame単位の動画設計。
- Remotion Templates — TikTok字幕、Prompt to Video、Audiogram、Music Visualization、3D等。
- Remotion License, Pricing and Compliance — 無料利用条件と会社ライセンスの確認先。
- tsugite 日本語README — manifest、Gate 1〜3、生成adapter、Remotion／HyperFrames backend、必要環境。