---
title: "Remotionで口パク動画を作る｜立ち絵1枚から自動生成する全工程"
excerpt: "キャラクターの口パク動画を、立ち絵1枚から作る手順をまとめました。核心は音声解析でフレームごとの開閉を0/1配列に還元すること。あとはフレーム番号で引いて画像を差し替えるだけになります。表情差分4枚の作り方と、品質を左右する要素も解説します。"
author: "AI活編集部"
author_username: ai-katsu-editorial
published_at: 2026-04-28T00:00:00+00:00
verified_at: 2026-04-28T00:00:00+00:00
models: ["Imagen"]
tools: ["Remotion"]
tasks: ["資料作成・デザイン", "ツール検証"]
canonical_url: https://ai-katsu.jp/articles/remotion-lipsync-howto
---
# Remotionで口パク動画を作る｜立ち絵1枚から自動生成する全工程

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

この記事では、**立ち絵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活用を支援しています。ご相談は[お問い合わせフォーム](/contact)から、継続的な伴走支援については[AI参謀](/ai-sanbo)をご覧ください。