🎬

AIで作る業務動画 Day 9｜キャラクター素材を準備して統合テストする

に公開
AI
Windows
Remotion
リップシンク
動画制作
tech

今日のゴール

キャラクター素材（口パク6種類）を準備して、音声・リップシンクJSON・素材の3要素がRemotionで使える状態か確認する。

Day 6でRhubarbをインストールし、Day 7で日本語音声7ファイルのリップシンクJSONを生成、Day 8で口形状のマッピングを整理した。

今日はいよいよ、実際に使うキャラクター素材を準備して、Phase 2の総仕上げとなる統合テストを行う。

キャラクター素材の準備

必要な素材

Day 8で整理した通り、日本語の口パクに必要なのは6種類の口形状。

シェイプ 日本語母音 口の形状
A （閉じ） 唇を軽く閉じた状態
B い 横に引き、歯が見える
C え 中程度に開いた口
D あ 大きく開いた口（最大開口）
E お 丸く開いた口
F う 唇をすぼめた口

素材の選択肢

キャラクター素材をどう用意するか、いくつかの選択肢を検討した。

選択肢 難易度 品質 ライセンス
フリー素材を使用 低 中-高 要確認
AI生成（画像生成AI） 中 中 生成物は自由
仮素材を自作（図形） 低 低 自由
イラストを発注 高 高 契約次第

最初はAI生成で口パーツだけ抜き出す方法を検討したが、技術的に困難だった。口の部分だけをきれいに分離するには、元画像にかなりの工夫が必要になる。

結局、フルフレーム方式を採用した。

フルフレーム方式とは

「口パーツだけ」ではなく「キャラクター全体の画像」を6枚用意して、口形状ごとに画像を切り替える方式。

mouth-A.png → キャラクター全体（口を閉じた状態）
mouth-B.png → キャラクター全体（い口）
mouth-C.png → キャラクター全体（え口）
...
メリット デメリット
実装がシンプル 背景が固定される
画像切り替えだけで口パクが実現 表情変化（目パチ等）を追加しにくい
既存素材をそのまま使える

将来的に目パチなどを追加したくなったら、パーツ分離方式に移行すればいい。今回はまずシンプルに始める。

準備した素材

AI生成の白いフクロウキャラクターを使用。各口形状を表現した6枚を用意した。

ファイル サイズ 口の形状
mouth-A.png 158KB くちばし閉じ
mouth-B.png 160KB くちばし横開き（舌が見える）
mouth-C.png 161KB くちばし中程度開き
mouth-D.png 159KB くちばし大きく開く
mouth-E.png 162KB くちばし丸く開く
mouth-F.png 159KB くちばしすぼめ

フクロウのくちばしで口パク表現するのは少し変わっているが、形状の違いがはっきりわかるので検証には向いている。

素材の技術要件

Remotionで使う素材として、以下の要件を満たしているか確認した。

項目 要件 実測値 判定
形式 PNG PNG OK
サイズ統一 6枚同一 全て同一 OK
ファイル命名 mouth-A〜F.png 統一済み OK

Phase 2 全体フロー

ここまでの成果物がどう繋がるか、全体像を整理する。

Phase 1で生成した音声を、Phase 2でRhubarbに通してリップシンクJSONを得る。キャラクター素材と合わせて、Phase 3のRemotionに渡す流れだ。

今日の統合テストでは、Phase 3に渡す前の「材料が揃っているか」を確認する。

統合テスト

テスト対象

Phase 1-2で作成した全コンポーネントを組み合わせて、Remotion実装の準備が整っているか確認する。

カテゴリ ソース ファイル数
音声ファイル Day 3-5 7ファイル
リップシンクJSON Day 7 7ファイル
キャラクター素材 Day 9 6ファイル

検証項目

  1. 音声ファイルの存在確認
  2. リップシンクJSONの構造検証
  3. キャラクター素材の仕様検証
  4. 形状マッピングの整合性確認

結果サマリー

# 検証項目 結果
1 音声ファイル存在確認 OK（7ファイル）
2 リップシンクJSON存在確認 OK（7ファイル）
3 JSON構造検証 OK（仕様通り）
4 キャラクター素材存在確認 OK（6ファイル）
5 素材サイズ統一 OK
6 素材命名規則 OK
7 形状マッピング検証 OK
8 フォールバック網羅性 OK

総合判定: PASS

フォールバックマッピングの確認

Day 7で決めたフォールバックが機能するか、実際のJSONデータで確認した。

day05_combined.jsonの形状分布:

形状 出現回数 素材対応
B 89 mouth-B.png
C 72 mouth-C.png
A 38 mouth-A.png
X 24 → A にフォールバック
F 22 mouth-F.png
E 14 mouth-E.png
G 5 → B にフォールバック
H 3 → C にフォールバック
D 0 mouth-D.png（素材は準備済み）

G、H、Xはすべてフォールバック先が定義されているので、6種類の素材で全形状をカバーできる。

Shape Dの出現が0%だったのは少し意外だが、日本語の「あ」は短く発音されることが多いためかもしれない。素材は準備してあるので、別の音声ファイルでは出現する可能性がある。

統合シミュレーション

day05_combined.jsonの冒頭10秒をサンプリングして、フレーム単位でどの画像が表示されるか確認した（30fps想定）。

時間 フレーム 元の形状 フォールバック後 使用素材
0.00秒 0 X A mouth-A.png
0.23秒 7 B B mouth-B.png
0.30秒 9 H C mouth-C.png
0.51秒 15 C C mouth-C.png
0.79秒 24 X A mouth-A.png
0.97秒 29 B B mouth-B.png

フレーム番号から時間への変換、形状のフォールバック、素材ファイルの選択、すべての流れが正しく動くことを確認できた。

Phase 2 振り返り

Phase 2（Day 6-9）の成果をまとめる。

達成したこと

完了条件 達成状況
Rhubarb Lip Syncが動作する 達成
日本語音声からリップシンクJSONを生成できる 達成
口パクマッピング表が完成 達成
キャラクター素材が準備できている 達成
4本の記事を公開 達成（本記事含む）

Phase 2 ゴール: 達成

数値サマリー

指標 値
Phase期間 4日間（Day 6-9）
公開記事数 4本
リップシンクJSON生成数 7ファイル
キャラクター素材数 6ファイル
日本語リップシンク精度 83.5%

技術的な学び

学び 詳細
phonetic modeは言語非依存 英語専用ツールだが、日本語でも実用可能
日本語は6種類で十分 5母音 + 閉じ口
フルフレーム方式が手軽 パーツ分離不要、画像切り替えだけで実装可能

Phase 3への申し送り

Remotionでの実装に必要なものはすべて揃った。

// フォールバックマッピング
const SHAPE_FALLBACK: Record<string, string> = {
  A: 'A', B: 'B', C: 'C', D: 'D', E: 'E', F: 'F',
  G: 'B', H: 'C', X: 'A',
};

// 現在フレームの口形状取得
function getMouthShapeAtFrame(cues, frame, fps) {
  const timeInSeconds = frame / fps;
  const cue = cues.find(c => timeInSeconds >= c.start && timeInSeconds < c.end);
  return SHAPE_FALLBACK[cue?.value ?? 'A'];
}

動作確認チェックリスト

確認項目 結果
6種類の素材が揃っている 達成
全素材が同一サイズ 達成
JSONの全形状がフォールバック可能 達成
統合シミュレーションが正常 達成

今日の成果物

  • キャラクター素材6枚（mouth-A〜F.png）
  • 統合テスト結果（PASS）
  • Phase 2振り返りドキュメント

検証環境

項目 バージョン
OS Windows 11 Pro
Rhubarb Lip Sync 1.14.0
キャラクター素材 AI生成（フルフレーム方式）
検証日 2026-01-09

明日のテーマ: Remotionプロジェクトのセットアップ。Phase 3に入り、いよいよ動画生成の実装を始める。口パクが実際に動く様子を見るのが楽しみ。

シリーズを追いかける

→ 著者ページ（Zenn）

Discussion