キャラクターが喋る動画を作るとき、口の動きを手作業で合わせるのは現実的ではありません。音声から自動で口パクを生成できれば、ナレーション動画を量産できます。
この記事では、立ち絵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パターンを一括保存します。
ファイル | 表情 |
|---|---|
| 目開・口閉 |
| 目開・口開 |
| 目閉・口開 |
| 目閉・口閉 |
目と口を独立して組み合わせるため、4枚で足ります。瞬きと口パクを別々に制御できます。
PHASE 2:Remotionで実装する
プロジェクト構成
project/
├── public/
│ └── audio/
│ └── narration.wav ← 音声ファイルをここに配置
├── scripts/
│ └── generate-lipsync.mjs ← 音声解析スクリプト
└── src/
├── lipsync/
│ └── mouth-cues.json ← 生成されるJSONデータ
└── Composition.tsx ← メインのコンポーネント音声解析スクリプトの仕様
パラメータ | 値 |
|---|---|
FPS | 30 |
サンプルレート | 16000 |
出力先 |
|
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参謀をご覧ください。
