システム構成図

全体アーキテクチャ

┌─────────────────────────────────────────────────────────┐
│                    入力レイヤー                           │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐   │
│  │  画面収録 #1  │  │  画面収録 #2  │  │ 字幕スクリプト │   │
│  │   (MOV)      │  │   (MOV)      │  │  (JSON)      │   │
│  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘   │
└─────────┼─────────────────┼─────────────────┼───────────┘
          │                 │                 │
          v                 v                 v
┌─────────────────────────────────────────────────────────┐
│                   前処理レイヤー                          │
│  ┌────────────────────────┐  ┌────────────────────────┐ │
│  │  FFmpeg 動画変換        │  │  VOICEVOX 音声合成      │ │
│  │  - MOV → MP4           │  │  - テキスト → 音声      │ │
│  │  - 解像度正規化         │  │  - 音素情報取得         │ │
│  │  - FPS 正規化           │  │  - タイミング算出       │ │
│  └───────────┬────────────┘  └───────────┬────────────┘ │
└──────────────┼───────────────────────────┼──────────────┘
               │                           │
               v                           v
┌─────────────────────────────────────────────────────────┐
│               Remotion コンポジションレイヤー              │
│                                                         │
│  ┌─────────────────────────────────────────────────┐    │
│  │  <VideoComposition>                              │    │
│  │  ┌───────────────────────────────────────────┐   │    │
│  │  │  <Sequence> 動画 #1                        │   │    │
│  │  │    ├─ <OffthreadVideo src="video1.mp4" />  │   │    │
│  │  │    ├─ <SubtitleOverlay text="..." />        │   │    │
│  │  │    ├─ <ZundamonCharacter phoneme="a" />     │   │    │
│  │  │    └─ <Audio src="voice1.wav" />            │   │    │
│  │  └───────────────────────────────────────────┘   │    │
│  │  ┌───────────────────────────────────────────┐   │    │
│  │  │  <Sequence> 動画 #2                        │   │    │
│  │  │    ├─ <OffthreadVideo src="video2.mp4" />  │   │    │
│  │  │    ├─ <SubtitleOverlay text="..." />        │   │    │
│  │  │    ├─ <ZundamonCharacter phoneme="i" />     │   │    │
│  │  │    └─ <Audio src="voice2.wav" />            │   │    │
│  │  └───────────────────────────────────────────┘   │    │
│  └─────────────────────────────────────────────────┘    │
└─────────────────────────┬───────────────────────────────┘
                          │
                          v
┌─────────────────────────────────────────────────────────┐
│                   出力レイヤー                            │
│  ┌─────────────────────────────────────────────────┐    │
│  │  Remotion Renderer                               │    │
│  │  → output.mp4 (1920x1080, H.264)                │    │
│  └─────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

コンポーネント関係図

Root
 └── VideoComposition (props: videos, subtitles, voices)
      ├── Sequence[0] (from=0, durationInFrames=video1Duration)
      │    ├── OffthreadVideo (video1.mp4)
      │    ├── SubtitleOverlay (segments[0..n])
      │    ├── ZundamonCharacter (phonemes[0..n])
      │    └── Audio (voice1.wav)
      │
      ├── TransitionEffect (fade, 30frames)
      │
      └── Sequence[1] (from=video1Duration, durationInFrames=video2Duration)
           ├── OffthreadVideo (video2.mp4)
           ├── SubtitleOverlay (segments[n+1..m])
           ├── ZundamonCharacter (phonemes[n+1..m])
           └── Audio (voice2.wav)

実行環境

┌─────────────────────────────────┐
│  ローカルマシン (macOS)          │
│                                 │
│  ┌───────────────────────────┐  │
│  │  VOICEVOX Engine          │  │
│  │  http://localhost:50021   │  │
│  └───────────────────────────┘  │
│                                 │
│  ┌───────────────────────────┐  │
│  │  Node.js 20+              │  │
│  │  ├── Remotion CLI         │  │
│  │  ├── FFmpeg (システム)     │  │
│  │  └── スクリプト実行        │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘