活用事例一覧へ
2026年7月27日資料作成・デザイン検証時期:2026年4月

Remotionで口パク動画を作る|立ち絵1枚から自動生成する全工程【AI活用検証vol.125】

Remotionで口パク動画を作る|立ち絵1枚から自動生成する全工程【AI活用検証vol.125】

キャラクターが喋る動画を作るとき、口の動きを手作業で合わせるのは現実的ではありません。音声から自動で口パクを生成できれば、ナレーション動画を量産できます。

この記事では、立ち絵1枚から口パク動画を作るまでの全工程を、素材準備と実装の2フェーズに分けて整理します。

この記事の概要

作成日

2026年4月28日

やること

立ち絵1枚 → 表情差分4枚 → 音声解析 → 口パク動画

使用ツール

Remotion / FFmpeg / 表情差分生成ツール / 画像生成AI

所要目安

表情差分の生成は慣れると約3〜5分

全体フロー

[立ち絵1枚]
    ↓ 表情差分生成ツール
[表情差分4枚(2×2グリッド)]
    ↓
[Remotionプロジェクト]+[音声ファイル]+[FFmpeg]
    ↓ 口パク解析スクリプト
[mouth-cues.json]
    ↓ Composition.tsx
[口パク動画]

結論:口パクは「フレームごとの0/1」に還元できる

この手法の核心はここです。

音声を解析して、フレームごとに口が開いているか閉じているかを 0/1 の配列にします。

{
  "fps": 30,
  "mouthByFrame": [0, 1, 1, 0, 1, 0, ...]
}

あとはフレーム番号でこの配列を引き、対応する画像に差し替えるだけです。

import { useCurrentFrame } from 'remotion';
import mouthCues from './lipsync/mouth-cues.json';

// フレームに対応する口の状態を取得
const frame = useCurrentFrame();
const isMouthOpen = mouthCues.mouthByFrame[frame] === 1;

// 状態に応じて画像を切り替える
const mouthImage = isMouthOpen ? 'eye-open_mouth-open.png' : 'eye-open_mouth-close.png';

複雑に見える口パクが、中間表現をJSONに落とすことで単純な画像切り替えになります。

PHASE 1:表情差分を4枚用意する

ステップ1:立ち絵をグリッド化

キャラクター画像を2×2グリッド形式に変換して保存します。

ステップ2:画像生成AIで表情差分を作る

グリッド画像を参考画像として添付し、4パターンを1枚の2×2画像として生成するよう指示します。

位置

内容

左上

未使用(元画像のまま)

右上

目開き

左下

目閉じ・口閉じ

右下

目閉じ・口開き

品質を安定させるコツがあります。

  • 差分の品質が微妙な場合は新規チャットで再生成する
  • ベース画像は「目と口が同じ状態」のものが推奨
  • 慣れると約3〜5分で完成

ステップ3:パーツ抽出して4パターンを保存

生成画像を分割・位置合わせし、ブラシで目と口の領域をマスクして4パターンを一括保存します。

ファイル

表情

eye-open_mouth-close.png

目開・口閉

eye-open_mouth-open.png

目開・口開

eye-close_mouth-open.png

目閉・口開

eye-close_mouth-close.png

目閉・口閉

目と口を独立して組み合わせるため、4枚で足ります。瞬きと口パクを別々に制御できます。

PHASE 2:Remotionで実装する

プロジェクト構成

project/
├── public/
│   └── audio/
│       └── narration.wav       ← 音声ファイルをここに配置
├── scripts/
│   └── generate-lipsync.mjs    ← 音声解析スクリプト
└── src/
    ├── lipsync/
    │   └── mouth-cues.json     ← 生成されるJSONデータ
    └── Composition.tsx         ← メインのコンポーネント

音声解析スクリプトの仕様

パラメータ

FPS

30

サンプルレート

16000

出力先

src/lipsync/mouth-cues.json

FFmpegで音声を解析し、フレームごとの口開閉データをJSONで出力します。

実行はコマンド1つです。

node scripts/generate-lipsync.mjs

動作確認

開発サーバーを起動してブラウザでプレビューを確認します。解像度の調整が必要な場合はComposition設定で変更します。

AIにコードを書かせる場合の分け方

参考にした記事では、3パターンのプロンプトを用意する方法が推奨されています。

パターン

用途

統合版

スクリプト(.mjs)+TSXを一括生成

スクリプト単独版

音声解析スクリプトのみ生成

TSX単独版

コンポーネントのみ生成

重要なのは渡し方です。各プロンプトにファイルパス・fps・サンプルレート・出力形式を明記して渡します。

数値と出力先を先に固定しておくと、生成物同士が噛み合います。片方だけ生成し直しても整合が取れます。

つまずきポイント

  • FFmpegは必須。PATH設定が通っていないと解析スクリプトが動かない
  • 表情差分はベース画像の「目と口の状態」を統一しておくと差分品質が安定する
  • 解像度調整はAIへの追加指示で対応可能
  • 口パクの精度はFFmpegの音声解析精度に依存するため、クリアな音声ファイルを用意する

最後の項目が品質を左右します。ノイズの多い音声では、口の開閉判定が乱れます。素材の段階で決まる部分です。

よくある質問

表情差分は何枚必要ですか?

4枚です。目の開閉と口の開閉を独立して組み合わせるため、2×2の4パターンで足ります。

口パクはどう実現していますか?

音声を解析して、フレームごとに口が開いているかを0/1の配列にします。あとはフレーム番号で配列を引き、対応する画像に差し替えるだけです。

精度を上げるには?

クリアな音声ファイルを用意することです。口パクの精度は音声解析の精度に依存するため、素材の段階で品質が決まります。

AIにコードを書かせられますか?

できます。ただしファイルパス・fps・サンプルレート・出力形式を明記して渡してください。数値と出力先を固定しておくと、スクリプトとコンポーネントの整合が取れます。

まとめ

  • 口パクは「フレームごとの0/1配列」に還元できる。中間表現をJSONに落とすのが要点
  • 表情差分は目×口の2×2で4枚あれば足りる
  • 差分生成はベース画像の目と口の状態を統一すると品質が安定する(慣れると3〜5分)
  • FFmpegは必須。PATHが通っていないと解析が動かない
  • AIにコードを書かせるならパス・fps・サンプルレート・出力形式を明記する
  • 最終的な品質は音声素材のクリアさで決まる

複雑に見える処理も、中間表現を挟むと単純な処理の組み合わせになります。どこで形式を固定するかが、実装のしやすさを決めます。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業のコンテンツ制作へのAI活用を支援しています。ご相談はお問い合わせフォームから、継続的な伴走支援についてはAI参謀をご覧ください。

関連する検証事例

© 株式会社AI棒 All Rights Reserved.