Remotion コンポジション設計

コンポジション構造

Root.tsx

Remotion のエントリーポイント。メインコンポジションを登録する。

import { Composition } from 'remotion';
import { VideoComposition } from './components/VideoComposition';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MainComposition"
      component={VideoComposition}
      durationInFrames={totalFrames}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        videos: ['video1.mp4', 'video2.mp4'],
        subtitles: [],
        voices: [],
        phonemes: [],
      }}
    />
  );
};

VideoComposition.tsx

メインの合成コンポーネント。動画の連結と各オーバーレイ要素を統合する。

import { Sequence, OffthreadVideo, Audio } from 'remotion';
import { SubtitleOverlay } from './SubtitleOverlay';
import { ZundamonCharacter } from './ZundamonCharacter';

export const VideoComposition: React.FC<CompositionProps> = ({
  videos, subtitles, voices, phonemes
}) => {
  const video1Frames = 301 * 30; // 動画1の長さ x FPS
  const video2Frames = 413 * 30; // 動画2の長さ x FPS

  return (
    <div style={{ width: 1920, height: 1080, background: '#000' }}>
      {/* 動画 1 */}
      <Sequence from={0} durationInFrames={video1Frames}>
        <OffthreadVideo src={staticFile(videos[0])} />
        <SubtitleOverlay segments={getSegmentsForVideo(0)} />
        <ZundamonCharacter phonemes={phonemes[0]} />
        <Audio src={staticFile(voices[0])} />
      </Sequence>

      {/* 動画 2 */}
      <Sequence from={video1Frames} durationInFrames={video2Frames}>
        <OffthreadVideo src={staticFile(videos[1])} />
        <SubtitleOverlay segments={getSegmentsForVideo(1)} />
        <ZundamonCharacter phonemes={phonemes[1]} />
        <Audio src={staticFile(voices[1])} />
      </Sequence>
    </div>
  );
};

レイヤー構成

画面上のレイヤー構成（Z-index 順）:

┌──────────────────────────────────────────────┐
│  Layer 4: 字幕テキスト (z-index: 40)          │
│  ┌────────────────────────────────────────┐   │
│  │ 「ここでファイルを開いているのだ」       │   │
│  └────────────────────────────────────────┘   │
│                                              │
│  Layer 3: ずんだもん顔 (z-index: 30)          │
│                           ┌──────┐           │
│                           │ (＾▽＾) │           │
│                           └──────┘           │
│                                              │
│  Layer 2: 半透明背景帯 (z-index: 20)          │
│  ┌────────────────────────────────────────┐   │
│  │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│   │
│  └────────────────────────────────────────┘   │
│                                              │
│  Layer 1: 画面収録動画 (z-index: 10)          │
│  ┌────────────────────────────────────────┐   │
│  │                                        │   │
│  │         画面収録映像                    │   │
│  │                                        │   │
│  └────────────────────────────────────────┘   │
└──────────────────────────────────────────────┘

画面レイアウト

┌─────────────────────────────────────────────────┐
│                                                 │
│                                                 │
│              画面収録映像                        │
│           (1920 x 1080 全画面)                   │
│                                                 │
│                                                 │
│                                                 │
│                                 ┌─────────┐     │
│                                 │ずんだもん│     │
│                                 │  (顔)   │     │
│  ┌──────────────────────────┐   │ 200x200 │     │
│  │  字幕テキスト表示エリア    │   └─────────┘     │
│  │  フォント: Noto Sans JP   │                   │
│  │  サイズ: 36px / 背景: 半透明黒                 │
│  └──────────────────────────┘                   │
└─────────────────────────────────────────────────┘

字幕スタイル仕様

プロパティ	値
フォント	Noto Sans JP Bold
サイズ	36px
色	#FFFFFF
縁取り	2px #000000
背景	rgba(0, 0, 0, 0.7)
位置	画面下部 80px
パディング	12px 24px
角丸	8px
最大幅	80% (画面幅)

ずんだもんキャラクター仕様

プロパティ	値
サイズ	200 x 200 px
位置	右下 (right: 40px, bottom: 120px)
表示方式	顔のみ（バストアップ）
口パク方式	母音に応じた画像切り替え