- 👥 対象読者
- 動画制作チームの新規メンバー・ディレクター・マーケター・外注パートナー
- ⏱ 制作時間
- 実作業 8〜18時間 / カレンダー 5〜7営業日（生成待ち含む）
- 🎯 難易度
- ★★★☆☆（AIツールの操作とプロンプト調整に慣れが必要）
- 🛠 必要なもの
- Mac本体・Claude Code・ChatGPTアカウント・Google Labs / Flowアカウント
- 💰 1本あたり総原価
- $440〜960（月10本制作・時給$50想定の場合）
- 📦 何ができる
- 縦型1080×1920・28秒・8シーンのリール動画を企画から公開まで自前で制作できるようになる
このガイドについて
このページは AIツールを組み合わせた縦型リール動画制作スキルの業務フロー解説 です。Instagram リール・TikTok・YouTube Shorts 向けの縦型ショート動画を、ChatGPT 2.0（静止画生成）→ Google Labs / Flow（画像→動画化）→ HyperFrames（構成組み立て）の3段構成で制作する全工程をまとめています。
題材は 「セルフまつパ・神ロッド紹介リール」（28秒・全8シーン）。実際に制作した案件をベースに、汎用化したフローと、まつパ・美容系の専用テンプレも内蔵しています。
読み終えると：1本の縦型リール動画を、企画 → キャラ生成 → 動画化 → 構成組み立て → プレビュー → レンダリング → 配信まで、自分の手で進められるようになります。
用語集
このページに頻出する用語を最初にまとめます。
- リール / ショート動画 — Instagram・TikTok・YouTube Shorts に投稿する縦型のショート動画。15〜30秒が一般的
- HyperFrames — HTML/CSS/JSベースで動画を組み立てるOSSツール。npm経由で起動するローカルCLI
- ChatGPT 2.0 — OpenAI の画像生成機能。同一キャラを複数枚生成するのに使う
- Google Labs / Flow — Google の動画生成サービス（Veo系）。1枚の画像から8秒MP4を生成
- Claude Code — AIコーディングCLI。HyperFrames の構成ファイル（index.html）の自動生成を担当
- コンポジション — HyperFrames で動画全体を表すHTMLファイル（index.html）。シーンと時系列が定義される
- シーン — 動画を構成する小さな単位。1シーンあたり2〜4秒、合計8シーン前後で動画を組む
このスキルで何ができる？
縦型1080×1920・28秒・8シーンのリール動画を、AI生成素材とHyperFramesで「自前で量産できる体制」を作れます。
- 撮影スタジオ・モデル・編集ソフトなしで縦型動画を制作
- AI生成のキャラクター（同一人物）で8シーン分の俳優カットを作成
- 静止画 → 動画 → テロップ付与までを AI と Claude Code でほぼ自動化
- ジャンル別テンプレ（まつパ / 美容系 / サロン / 物販など）で再現性を担保
実行イメージ
Claude Code のチャットでこう打つだけで、スキルが起動します。
セルフまつパみたいなリール作りたい
→ Claude が必要な情報をヒアリングし、台本作成 → 静止画生成プロンプト出力 → 動画化プロンプト出力 → 構成組み立て → プレビュー起動まで一気通貫で進めます。
途中で ユーザーが止まるポイントは2か所だけ：
- 台本レビュー(クライアントOK取りのため)
- プレビュー確認(フォント・色・配置のチェック)
それ以外は自動進行します。
使用例・ユースケース集
このスキルは 任意のジャンル で動作します。
シーン1：美容系商品紹介
「セルフまつパ」「ヘアケア」「スキンケア」などの商品レビュー型リール。Before-After や使い方の8シーン構成。
シーン2：サロン・店舗紹介
ネイル・エステ・整体などのサロン紹介動画。施術内容を8シーンで紹介し、最後にCTAで予約導線へ。
シーン3：物販・EC商品紹介
ガジェット・コスメ・ファッションの新商品紹介。商品の特徴を3〜4シーンで見せ、口コミ・実演・CTAで完結。
シーン4：飲食・店舗系
飲食店の人気メニュー紹介。料理の映像と店内雰囲気を8シーンで構成。
構成（ざっくり）
[1] 企画・台本（ディレクター）
↓ ★クライアント確認
[2] 静止画生成（ChatGPT 2.0）
↓
[3] 画像→動画化（Google Labs / Flow）
↓
[4] 構成組み立て（Claude Code + HyperFrames）
↓ ★クライアント確認
[5] プレビュー & 微調整
↓
[6] レンダリング（自動）
↓
[7] 配信（SNS担当）
各工程の所要時間：
| # | 工程 | 主担当 | 実作業時間 |
|---|---|---|---|
| 1 | 企画・台本 | ディレクター | 1〜2h |
| 2 | 静止画生成 | 制作AD | 1〜2h |
| 3 | 画像→動画 | 制作AD | 2〜4h（生成待ち含む） |
| 4 | 構成組み立て | エンジニア + Claude Code | 2〜4h |
| 5 | プレビュー&微調整 | ディレクター + エンジニア | 1〜3h |
| 6 | レンダリング | エンジニア | 5〜15分（自動） |
| 7 | 配信 | SNS運用 | 0.5h |
実作業合計: 8〜18時間 / カレンダー 5〜7営業日
月額コスト目安
月額固定費（複数案件で按分）
| 項目 | プラン例 | 月額 |
|---|---|---|
| ChatGPT Plus | Plus | $20 |
| Google Labs / Flow | Gemini Pro / Ultra | $20〜$250 |
| Claude Code | Pro / Max | $20〜$200 |
| BGM/SE（任意） | Suno / Epidemic | $15〜30 |
| 月額小計 | $75〜500 |
1本あたり総原価（月10本制作・時給$50想定）
| 項目 | 金額 |
|---|---|
| 月額按分（固定費 ÷ 10本） | $7.5〜50 |
| 変動費（ストック画像など） | $0〜20 |
| 人件費（8〜18h × $50） | $400〜900 |
| 1本あたり合計 | $440〜960 |
※自社の契約プラン・時給に置き換えてご活用ください。
事前に必要なもの
セットアップを始める前に、以下を揃えておきましょう。
ハードウェア
- Mac本体（Linux・Windowsでも動作可）
ソフトウェア
- Node.js 18 以上
- Chrome 系ブラウザ
- Claude Code（VS Code拡張 / JetBrains拡張 / CLI のいずれか）
アカウント類
- ChatGPT 2.0（静止画生成・Plus推奨）
- Google Labs / Flow（画像→動画変換）
- Claude Code（Pro / Max いずれか）
- HyperFrames はインストール不要（npm経由で都度起動）
一番ラクな方法：Claude Code にまるごと頼む
ここから先は 「業務フローの詳細」 を解説していきますが、 その前に重要なお知らせ があります。
手順を1つずつ追わなくていい
このスキルは Claude Code に「リール作って」と頼むだけ で全工程を案内してくれます。 非エンジニア・新規メンバーにとって 一番ラクで現実的な方法 です。
ユーザー：「セルフまつパみたいなリール作りたい。商品名は〇〇」
↓
Claude が自動で：
① ジャンル判定（まつパ系 → 専用テンプレを採用）
② 8シーン構成表を作成 → ★ここで一度クライアント確認
③ ChatGPT 2.0 用のキャラ生成プロンプトを出力
④ Google Labs / Flow 用の動画化プロンプトを出力
⑤ HyperFrames プロジェクトの初期化
⑥ index.html を自動生成（台本＋素材から）
⑦ プレビューサーバー起動 → ★ここで微調整
⑧ レンダリングして最終MP4出力
ターミナルでのコマンド入力や HTML 編集を、 1文字も触らずに済みます。
チャットで頼む実例3つ
例1: 新規案件をゼロから作る
セルフまつパ案件で、商品「ねじねじ神ロッド」のリール作って。
ターゲットは30代女性、訴求は「不器用でもサロン級」。
→ Claude が ジャンル判定 → 台本作成 → 各種プロンプト出力 → 構成組み立てまで一気に進めます。
例2: 既存テンプレを別ジャンルに転用
まつパテンプレを参考に、エステサロン紹介のリール作って。
店舗名は〇〇エステ、訴求は「手ぶらで通える」。
→ Claude が ジャンル差し替え → 訴求軸を反映した8シーン構成を提案。
例3: 微調整だけ依頼
今のリールのシーン5のテロップを画面上部に移動して
→ Claude が CSS の flex-end / flex-start 切替で対応、プレビューにホットリロード反映。
Claude に頼むときのコツ
| ポイント | プロンプトに含める例 |
|---|---|
| ジャンル明示 | 「まつパ系」「サロン紹介」「物販」 |
| 商品・サービス名 | 「ねじねじ神ロッド」「〇〇エステ」 |
| ターゲット | 「30代女性」「忙しい主婦」「美容意識高い20代」 |
| 訴求軸 | 「時短」「不器用でも」「サロン級」 |
| 尺の希望 | 「20秒」「28秒」「30秒」 |
必ずチェックすべきこと
Claude が生成した内容は 必ず中身を確認 してください。
- [ ] 台本のセリフが薬機法・景表法に抵触していないか
- [ ] キャラ設定がターゲット層に合っているか
- [ ] 訴求軸がブレていないか
- [ ] CTA が明確か
警告：「自動でやってくれた」を理由に 中身を確認せずに公開するのは危険 です。 特に薬機法・景表法（「治る」「100%」「絶対」などの表現）には注意してください。
この先の章はこう読む
「とりあえず動かしたい人」 → 上記のチャットだけで動きます。 中身は後から下記を読み返せばOK。
「中身を理解してから自分で進めたい人」 → 以下の業務フローを順番に読み、 各工程で何をやっているかを把握してから実践へ。
業務フロー詳細（自分で進めたい人向け）
所要時間: 約 8〜18 時間（実作業）。
Phase 1/7 企画・台本（1〜2時間）
リールの黄金フォーマット: 「フック1秒 → 共感 → 驚き → 解決 → CTA」
ルール:
- 1シーン2〜4秒、合計20〜30秒
- セリフは1シーンあたり10〜15文字（テロップ前提）
- 8シーン構成表をスプレッドシートで管理
台本サンプル（まつパ案件）：
| シーン | 尺 | 役割 | セリフ |
|---|---|---|---|
| 1 | 3.2s | フック | 「セルフまつパ、片目ずつ閉じるのむず過ぎん？」 |
| 2 | 3.5s | 共感 | 「時間かかるし、左右も差出るし、不器用な私は限界感じてた…」 |
| 3 | 3.0s | 解決提示 | 「そんな悩みを吹き飛ばす 神ロッド爆誕！」 |
| 4 | 3.0s | 権威性 | 「元アイリストの私が検証して、思わず唸った。」 |
| 5 | 3.5s | WOW | 「なんと、目を開けたままパーマができる！」 |
| 6 | 3.2s | ベネフィット | 「置き時間もスマホを見たり家事ができるって嬉しすぎ。」 |
| 7 | 3.6s | 自信 | 「失敗知らずで、サロン級の仕上がりが自宅で叶う。」 |
| 8 | 5.0s | CTA | 「賢いセルフ派の新常識。」 |
フックが弱いとそもそも見てもらえません。1秒目で「えっ？」「むず過ぎん？」のように、視聴者の心の声を代弁する問いかけが効きます。
Phase 2/7 静止画生成（ChatGPT 2.0、1〜2時間）
8シーン分のキャラクター画像を生成します。
コツ： 1枚目で気に入った画像を 「キャラ参照画像」として固定し、以降のプロンプトで毎回添付する。「同じ人物で、表情だけ変えて」と明示することで一貫性を保ちます。
プロンプト例（共通設定）：
日本人女性30代、ナチュラルメイク、白T、明るい部屋、
カメラ目線、写真風リアル、9:16 縦構図、バストアップ
シーンごとに 「表情・動き・感情」だけ を差し替えていきます。
キャラの顔が毎回違うと「同じ人物の動画」に見えません。それでも完璧な一致は難しいため、輪郭・髪型・服装が一致していれば採用、くらいに採用基準を緩めるのが現実的です。
Phase 3/7 画像→動画化（Google Labs / Flow、2〜4時間）
1枚のPNG → 8秒MP4（720×1280 / 24fps）を生成します。
コツ：
- リップシンクは諦め、テロップで意味を伝える
- 動きは小さく、目と口元の表情変化で意味を伝える
- 過度な動き（激しいパン・指先の動き）は顔崩れの原因
プロンプト例：
参照画像のキャラを基準に、軽くうなずきながら笑顔。
目はゆっくり細められ、口角が上がる。
カメラは固定、背景は静止。8秒、24fps、720x1280。
動画生成はキュー待ちで時間がかかります。8本まとめて発注 → 翌日確認の運用にすると、待ち時間中に他工程を進められます。リテイク発生率は30〜50%を見込んでスケジュールを組みましょう。
Phase 4/7 構成組み立て（HyperFrames、2〜4時間）
HyperFrames プロジェクトを初期化し、index.html でシーンを時系列に配置します。
Claude Code に頼む場合（一番ラクな方法）：
台本（シーン構成表）と素材（actor-s1.mp4〜actor-s8.mp4）から、
HyperFramesスキルで縦型リールのindex.htmlを作って
→ Claude が hyperframes スキルを呼び出して index.html を自動生成。
自分で書く場合（中身を理解したい人向け）：
mkdir my-reel && cd my-reel
npx hyperframes init
# assets/ に画像・動画を配置
# index.html を手で書く
各シーンは data-start / data-duration で時系列を指定。テロップは class="line emph" などで強調表現を制御します。
Phase 5/7 プレビュー & 微調整（1〜3時間）
npm run dev
http://localhost:3002 でホットリロード付きプレビュー。
このフェーズでフォント・色・配置を詰めます。クライアント確認も必須。
プレビューURLは外部公開されません。クライアント確認用には途中レンダリングを書き出して MP4 で共有しましょう。
Phase 6/7 レンダリング（5〜15分・自動）
npm run check # lint + validate + inspect
npm run render # MP4 出力
renders/ ディレクトリに最終 MP4 が出力されます。
Phase 7/7 配信（0.5時間）
Instagram / TikTok / YouTube Shorts にアップロード。キャプション・ハッシュタグ・商品リンクを設定。
業務フロー完了チェックリスト
- [ ] Phase 1: 台本のクライアント確認OK
- [ ] Phase 2: 静止画8枚で同一キャラに見えるか確認
- [ ] Phase 3: 動画8本で顔崩れがないか確認
- [ ] Phase 4: index.html がプレビューで再生できる
- [ ] Phase 5: プレビューでクライアント確認OK
- [ ] Phase 6: renders/ にMP4が出力された
- [ ] Phase 7: 各SNSへの投稿完了
品質基準（リテイク判断OK/NG早見表）
静止画（Phase 2）
| 項目 | ✅ OK | ❌ NG |
|---|---|---|
| キャラの顔 | 8枚通して同一人物に見える | 輪郭・年齢感が大きく変化 |
| 服装 | 全シーン共通 or 自然な変化 | 突然違う服 |
| 表情 | 台本の感情と一致 | セリフと表情が不一致 |
| 質感 | 写真風リアル | アニメ調・3D風 |
動画（Phase 3）
| 項目 | ✅ OK | ❌ NG |
|---|---|---|
| 顔の崩れ | 動き中も同一人物 | 途中で顔が変形・別人化 |
| 動き | 自然な小動作 | 不自然なテレポート・指の崩壊 |
| 表情変化 | 台本意図に沿う | 意図しない変化 |
| 背景 | 安定 | 突然破綻 |
構成（Phase 4-5）
| 項目 | ✅ OK | ❌ NG |
|---|---|---|
| テロップ位置 | 顔・商品にかぶらない | 重要部分を隠している |
| 文字サイズ | スマホで読める（48px以上） | 小さすぎる |
| 縁取り | 視認性確保 | コントラスト不足 |
| 尺 | 各シーンが詰まりすぎない | 読み切れない |
日常的な使い方
基本操作（新規案件）
〇〇案件で、商品△△のリール作って。ターゲットは□□、訴求は☆☆
バリエーション
| 発話例 | 動作 |
|---|---|
| 「まつパのリール作って」 | まつパ専用テンプレで起動 |
| 「サロン紹介リール作って」 | 汎用テンプレで起動 |
| 「シーン5のテロップを上部に」 | CSSを部分的に修正 |
| 「フォント変えて」 | Web Fonts を差し替え |
| 「もう一回レンダリングして」 | npm run check + render を実行 |
よくある質問
Q. ChatGPT 2.0 と Google Labs / Flow は他のツールで代替できますか？
→ できます。画像生成は Midjourney / nano-banana、動画生成は Runway / Kling / Sora など、お好きなツールに差し替え可能です。スキルの templates 配下のプロンプトをそのツール向けに書き換えれば対応できます。
Q. 28秒以外の尺で作れますか？
→ 作れます。15〜60秒の範囲で柔軟に変えられます。Claude Code に「20秒のリール作って」と伝えればシーン数と各シーンの尺を自動調整します。
Q. 横型動画（YouTube用）も作れますか？
→ HyperFrames は任意のアスペクト比に対応していますが、本スキルは縦型1080×1920に最適化しています。横型ならスキル発動時に「1920×1080の横型で作って」と指定するか、別スキルの作成を推奨します。
Q. リテイクが多くて時間がかかります
→ AI動画生成はリテイク発生率30〜50%が標準です。前日中に動画生成を発注しておく運用にすると、待ち時間を他工程に充てられます。完璧を求めすぎず、採用基準を緩めるのもコツです。
Q. 薬機法・景表法が心配です
→ 「治る」「100%」「絶対」などの断定表現はNG。「サロン級」「〇〇できる」までは表現として許容範囲ですが、最終的には社内のリーガルチェックを通すフローを推奨します。
トラブルシュート
プレビューが起動しない
→ node --version で Node.js 18 以上か確認。npm run dev で EADDRINUSE が出たら 3002ポートが使用中。他のプロセスを終了するか別ポートで起動。
レンダリングが途中で止まる
→ npm run check で先にlintエラーを確認。data-start / data-duration の不整合が原因のことが多い。
動画生成のキュー待ちが長い
→ Google Labs / Flow のプランをアップグレードするか、別ツール（Runway / Kling）の併用を検討。
キャラの顔が毎回違う
→ ChatGPT 側で「先ほどのキャラと同じ人物で、表情だけ変えて」と明示し、参照画像を毎回添付する。それでも完璧な一致は難しいので採用基準を緩めるのが現実的。
まとめ
このスキルを使えば、 AIツール × HyperFrames × Claude Code の組み合わせで、 縦型ショート動画を 1本あたり実作業8〜18時間 で量産できる体制が作れます。
- 撮影・モデル・編集ソフト不要
- 同一キャラで8シーンの俳優カットを AI 生成
- 構成組み立ては Claude Code に丸投げ
- ジャンル別テンプレで再現性確保
次のステップ：
- Claude Code を起動
- 「リール作って」と話しかける
- ヒアリングに答えて台本を確認
- 静止画 → 動画 → 構成 → プレビュー → レンダリングまで一気通貫
ぜひ実案件で試してみてください。