Remotion

Remotion Video Skill

Reactで動画を生成する Remotion を使い、動画コンテンツを制作する汎用スキル。

★ 品質原則 (Anti-Template)

「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。

Remotionファイルの実装時、以下の原則に従うこと。 詳細チェックリスト: references/anti-template-checklist.md

絶対に避ける6つのパターン

フック・ペーシング

• 最初の3秒: パターンインタラプト（静寂→爆発、極端ズーム→引き等）
• BPM同期: カット位置を拍に合わせつつ、毎拍で切らない（cut-cut-hold-cut-hold-hold-cut-CUT）
• SFX必須: トランジション前にwhoosh、テキスト出現にimpact音、フック前に6-10f無音
• 30秒プロモにはSocial Proofビート必須（「Free」「★4.8」等）

品質チェック実行

bash .claude/skills/remotion/scripts/check-quality.sh <target-dir>

このチェックはRemotionファイルの Write/Edit 時に自動実行される（hook設定済み）。

---

ブランド設定について

カラーパレット、フォント、マスコットキャラクターの仕様は、各プロジェクトの `CLAUDE.md` で定義すること。

このスキルにはブランド固有の情報を含めない。

プロジェクト側に以下のようなセクションを用意する想定：

>

```markdown

## Video Branding

- Primary: #XXXXXX

- Accent: #XXXXXX

- Background: #XXXXXX

- Font Heading: ...

- Font Body: ...

- Mascot: （キャラ名、デザイン仕様、アニメーションパターン等）

```

クイックスタート

# 1. プロジェクト初期化（スキル付属スクリプト）
bash <path-to-skill>/scripts/init-remotion.sh <project-name>

# 2. プレビュー
cd <project-name> && npx remotion studio

# 3. レンダリング
npx remotion render src/index.ts <CompositionId> out/video.mp4

手動セットアップ

# 新規作成
npx create-video@latest my-video

# 既存プロジェクトに追加（依存関係が複雑になるため別ディレクトリ推奨）
npm install remotion @remotion/cli @remotion/player

動画テンプレート

1. プロモーション動画（30秒）

0-5秒   : Hook — 問題提起 + キャッチーなビジュアル
5-10秒  : Problem — 課題の可視化
10-20秒 : Solution — プロダクトの世界観・機能デモ
20-28秒 : Social Proof — 数字 or ユーザーの声
28-30秒 : CTA — ロゴ + URL

コンポジション設定:

• 解像度: 1920x1080（16:9）
• FPS: 30
• 総フレーム数: 900

2. 機能紹介動画（15秒）

0-3秒   : 機能名タイトル（テキストアニメーション）
3-12秒  : 実演デモ（スクリーンキャプチャ or モック）
12-15秒 : 締めのメッセージ + 次のアクション誘導

コンポジション設定:

• 解像度: 1080x1080（1:1、SNS向け）or 1080x1920（9:16、リール向け）
• FPS: 30

3. チュートリアル動画（60秒）

0-5秒   : 導入 — タイトル + 挨拶
5-50秒  : ステップ1-3 — 操作説明（画面録画 + オーバーレイ）
50-58秒 : まとめ — 要点の振り返り
58-60秒 : CTA

4. SNS短尺動画（5-10秒）

0-2秒   : アイキャッチ（動き or テキスト）
2-8秒   : ワンポイント情報
8-10秒  : ロゴ + CTA

コンポジション設定:

• 解像度: 1080x1920（9:16）
• FPS: 30

プロジェクト構成

my-video/
├── src/
│   ├── Root.tsx                    # コンポジション登録
│   ├── compositions/
│   │   ├── Promo.tsx               # 30秒プロモ
│   │   ├── FeatureIntro.tsx        # 15秒機能紹介
│   │   ├── Tutorial.tsx            # 60秒チュートリアル
│   │   └── SnsShort.tsx            # 5-10秒SNS
│   ├── components/
│   │   ├── Character/              # マスコット / キャラクター
│   │   │   ├── CharacterBase.tsx
│   │   │   ├── Expressions.tsx
│   │   │   └── Animations.tsx
│   │   ├── Typography/
│   │   │   ├── TitleReveal.tsx
│   │   │   └── SubtitleFade.tsx
│   │   ├── Transitions/
│   │   │   ├── WipeTransition.tsx
│   │   │   └── FadeTransition.tsx
│   │   └── Branding/
│   │       ├── Logo.tsx
│   │       └── CallToAction.tsx
│   └── styles/
│       └── theme.ts                # カラー・フォント定義
├── public/
│   ├── fonts/
│   ├── images/
│   └── audio/
├── remotion.config.ts
└── package.json

開発ルール

コンポジション

• 1ファイル1コンポーネント
• アニメーションパラメータは props で外出し（後で調整しやすく）
• <Sequence> でシーンを時間管理

アニメーション

• interpolate() でスムーズな値の補間
• spring() で自然な物理アニメーション
• spring configは要素の「重さ」で変える（★ Anti-Template原則 参照）
• 重い要素(mockup): { damping: 20, mass: 1.2 }
• 軽い要素(ドット): { damping: 8, mass: 0.3 }
• テキスト演出は1動画内で最低2種類使う（translateY以外にclipPath, per-word stagger等）

音声

• BGMは /public/audio/ に配置
• <Audio> コンポーネントで同期再生

テーマ（theme.ts テンプレート）

export const theme = {
  colors: {
    primary: '#XXXXXX',
    accent: '#XXXXXX',
    background: '#XXXXXX',
    text: '#XXXXXX',
    subAccent: '#XXXXXX',
  },
  fonts: {
    heading: 'Your Heading Font',
    body: 'Your Body Font',
    mono: 'JetBrains Mono',
  },
  // ★ 要素の重さ別にspring configを分ける
  spring: {
    heavy:  { damping: 22, mass: 1.2 },  // mockup, 全画面要素
    medium: { damping: 14, mass: 0.7 },  // テキスト, カード
    light:  { damping: 8,  mass: 0.3 },  // ドット, バッジ, 小アイコン
    bounce: { damping: 6,  mass: 0.4, stiffness: 180 }, // CTA, 注目要素
  },
  fadeIn: { durationInFrames: 15 },
} as const;

// BPM同期（BGMに合わせて調整）
export const music = {
  bpm: 120,
  fps: 30,
  framesPerBeat: (30 * 60) / 120,   // 15
  framesPerBar: ((30 * 60) / 120) * 4, // 60
} as const;

export type Theme = typeof theme;

プロジェクトの CLAUDE.md に定義したブランドカラー・フォントで上記プレースホルダーを埋めること。

マスコットキャラクター汎用パターン

プロジェクトにマスコットキャラクターがある場合の汎用アニメーションパターン。 キャラクター名や見た目はプロジェクトごとに異なるため、ここではモーションパターンのみ定義する。

状態別アニメーション

登場・退場アニメーション

// 登場: 画面外からspring付きスライドイン
const entrance = (
  frame: number, fps: number,
  from: 'left' | 'right' | 'bottom' = 'right'
) => {
  const progress = spring({ frame, fps, config: { damping: 12, stiffness: 80 } });
  const offsets = { left: { x: -300, y: 0 }, right: { x: 300, y: 0 }, bottom: { x: 0, y: 200 } };
  const dir = offsets[from];
  return {
    translateX: dir.x * (1 - progress),
    translateY: dir.y * (1 - progress),
    opacity: progress,
    scale: 0.5 + progress * 0.5,
  };
};

素材生成（mcp-image連携）

mcp-image (Nano Banana Pro) MCPサーバーが利用可能な場合、動画用の素材画像を生成できる。

用途

• 背景画像・テクスチャ
• モックアップ内のスクリーンショット風画像
• キャラクターイラスト・アイコン
• シーン別のビジュアル素材

使い方

// 生成した画像は public/images/ に配置し、staticFile() で参照
<Img src={staticFile('images/generated-bg.png')} />

推奨設定

ワークフロー

1. generate_image で素材を生成（purpose: "remotion video asset" 推奨） 2. 出力先から public/images/ にコピー 3. staticFile('images/filename.png') でRemotionから参照

---

レンダリング

# MP4（汎用）
npx remotion render src/index.ts Promo out/promo.mp4

# 高品質
npx remotion render src/index.ts Promo out/promo-hq.mp4 --codec=h264 --quality=100

# GIF（短尺・ループ用）
npx remotion render src/index.ts SnsShort out/short.gif --codec=gif

# SNS向け縦型（9:16）
npx remotion render src/index.ts VerticalComp out/vertical.mp4 --height=1920 --width=1080

# 一括レンダリング
bash <path-to-skill>/scripts/render-all.sh

SNS別推奨設定

• Twitter/X: 1280x720, 30fps, 最大140秒
• Instagram Reels: 1080x1920 (9:16), 30fps
• TikTok: 1080x1920 (9:16), 30fps

@remotion/player でアプリ内埋め込み

事前レンダリング不要でインタラクティブに再生できる。

import { Player } from '@remotion/player';
import { FeatureIntro } from './compositions/FeatureIntro';

<Player
  component={FeatureIntro}
  durationInFrames={450}
  fps={30}
  compositionWidth={1080}
  compositionHeight={1080}
  style={{ width: '100%' }}
  controls
/>

動的 props で制御

<Player
  component={Tutorial}
  inputProps={{
    message: "操作してみましょう",
    stepNumber: 1,
  }}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
  autoPlay
  loop
/>

ライセンス

Remotionは 3人以下の会社は無料（商用利用OK）。 4人以上になった場合は Company License（$25/開発者/月）が必要。 詳細: https://www.remotion.dev/license

参考リソース

• Remotion公式ドキュメント: https://www.remotion.dev/docs
• Remotion + AI ガイド: https://www.remotion.dev/docs/ai/
• Remotion公式スキル: npx add-skill remotion-dev/skills
• アニメーションパターン集: references/animation-patterns.md
• Anti-Templateチェックリスト: references/anti-template-checklist.md

Remotion アニメーションパターン集

基本API

interpolate — 値の補間

import { interpolate, useCurrentFrame } from 'remotion';

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: 'clamp',
});

spring — 物理ベースアニメーション

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({ frame, fps, config: { damping: 12, mass: 0.5 } });

Sequence — シーン切り替え

import { Sequence } from 'remotion';

<Sequence from={0} durationInFrames={150}>
  <Scene1 />
</Sequence>
<Sequence from={150} durationInFrames={300}>
  <Scene2 />
</Sequence>

---

共通パターン

テキストリビール（タイトル出現）

const TextReveal: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div style={{ overflow: 'hidden' }}>
      <div
        style={{
          transform: `translateY(${interpolate(
            spring({ frame, fps, config: { damping: 15, mass: 0.8 } }),
            [0, 1],
            [100, 0]
          )}%)`,
        }}
      >
        {text}
      </div>
    </div>
  );
};

フェードイン（汎用）

const FadeIn: React.FC<{ delay?: number; children: React.ReactNode }> = ({
  delay = 0,
  children,
}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame - delay, [0, 15], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return <div style={{ opacity }}>{children}</div>;
};

フェードイン + スライドアップ

const FadeSlideIn: React.FC<{ children: React.ReactNode; delay?: number }> = ({
  children,
  delay = 0,
}) => {
  const frame = useCurrentFrame();
  const adjustedFrame = frame - delay;

  const opacity = interpolate(adjustedFrame, [0, 20], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const translateY = interpolate(adjustedFrame, [0, 20], [30, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity, transform: `translateY(${translateY}px)` }}>
      {children}
    </div>
  );
};

タイプライター効果

const TypewriterText: React.FC<{ text: string; startFrame?: number }> = ({
  text,
  startFrame = 0,
}) => {
  const frame = useCurrentFrame();
  const adjustedFrame = frame - startFrame;

  const charsToShow = Math.floor(
    interpolate(adjustedFrame, [0, text.length * 3], [0, text.length], {
      extrapolateRight: 'clamp',
    })
  );

  return <span>{text.slice(0, charsToShow)}</span>;
};

スケールバウンス（登場演出）

const scaleValue = spring({
  frame: frame - delay,
  fps,
  config: {
    damping: 10,
    stiffness: 100,
    mass: 0.5,
  },
});

キャラクター首傾げ

const CharacterTilt: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const tilt = spring({
    frame: frame - 10,
    fps,
    config: { damping: 12, mass: 0.5 },
  });

  return (
    <div
      style={{
        transform: `rotate(${interpolate(tilt, [0, 1], [0, -15])}deg)`,
        transformOrigin: 'center bottom',
      }}
    >
      {/* Character SVG */}
    </div>
  );
};

キャラクター目の表情変化

// 目を細める → 元に戻る（2段階）
const CharacterSquint: React.FC = () => {
  const frame = useCurrentFrame();
  const eyeSquint = interpolate(frame, [0, 8, 20, 28], [1, 0.3, 0.3, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ transform: `scaleY(${eyeSquint})` }}>
      {/* Eye SVG */}
    </div>
  );
};

ワイプトランジション

const WipeTransition: React.FC<{
  direction?: 'left' | 'right';
  color?: string;
}> = ({ direction = 'right', color = '#6366F1' }) => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 15], [0, 100], {
    extrapolateRight: 'clamp',
  });
  const exit = interpolate(frame, [15, 30], [0, 100], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const clipPath =
    direction === 'right'
      ? `inset(0 ${100 - progress}% 0 ${exit}%)`
      : `inset(0 ${exit}% 0 ${100 - progress}%)`;

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        backgroundColor: color,
        clipPath,
      }}
    />
  );
};

BGM同期（ビートマーカー）

// BGMのビートタイミングを定義して映像と同期
const BEAT_FRAMES = [0, 30, 60, 90, 120, 150]; // 例: BPM120 @ 30fps

const BeatPulse: React.FC<{ beatIndex: number }> = ({ beatIndex }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const beatFrame = BEAT_FRAMES[beatIndex];
  const pulse = spring({
    frame: frame - beatFrame,
    fps,
    config: { damping: 8, mass: 0.3 },
  });

  return (
    <div style={{ transform: `scale(${1 + pulse * 0.1})` }}>
      {/* ビートに合わせて少し拡大 */}
    </div>
  );
};

---

Tips

• spring の damping: 低い値（5-8）= 弾む / 高い値（15-20）= 落ち着いた動き
• キャラクターの動き: damping: 12 を基準に統一すると一貫したキャラ性が出る
• 音と映像の同期: BPMからフレーム数を計算する（BPM120 @ 30fps = 15フレーム/拍）
• extrapolateRight: 'clamp': アニメーション終了後に値が飛ばないようにする（ほぼ必須）

Anti-Template Quality Checklist

核心原則: 「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。

実装完了後、レンダリング前にこのチェックリストで確認する。 自動チェック（scripts/check-quality.sh）で検出できる項目は [AUTO] マーク付き。

---

1. アニメーション多様性

[AUTO] UNIFORM_STAGGER — 均等ディレイを避ける

// ❌ Bad: 機械的な等間隔
{items.map((item, i) => <Icon delay={i * 8} />)}

// ✅ Good: 有機的なリズム
const ORGANIC_DELAYS = [0, 5, 13, 21];
{items.map((item, i) => <Icon delay={ORGANIC_DELAYS[i]} />)}

[AUTO] UNIFORM_SPRING — 要素の重さでspring configを変える

[AUTO] GENERIC_REVEAL — テキスト演出に種類を持たせる

1つの動画内で最低2種類のテキスト演出を使うこと:

// マスクリビール実装例
const MaskReveal: React.FC<{ text: string; delay?: number }> = ({ text, delay = 0 }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const p = spring({ frame: frame - delay, fps, config: { damping: 20, mass: 1.0 } });
  const clipX = interpolate(p, [0, 1], [0, 100]);
  return (
    <div style={{ clipPath: `inset(0 ${100 - clipX}% 0 0)` }}>
      <span style={{ fontSize: 100, fontWeight: 700, color: '#fff' }}>{text}</span>
    </div>
  );
};

---

2. 構成とペーシング

[AUTO] LONG_SCENE — 8秒以上の固定構図シーンを避ける

• 1シーン内でもカメラ的変化（scale, position, zoom）を入れる
• mockupの位置やサイズを途中で変える
• サブタイトルやラベルの切り替えでリズムを作る

[AUTO] SINGLE_TRANSITION — トランジションの種類を混ぜる

1つのコンポジション内で同じトランジションを3回以上使わない。

[AUTO] NO_SOCIAL_PROOF — 30秒プロモには信頼性ビートを入れる

「Free」「4.8 stars」「10K downloads」「No account needed」等

カット数の目安

BPM同期

// theme.ts に追加
export const music = {
  bpm: 120,
  framesPerBeat: (30 * 60) / 120, // = 15
  framesPerBar: ((30 * 60) / 120) * 4, // = 60
} as const;

カット位置はビートの境界に合わせつつ、毎拍で切らないこと。 cut-cut-hold-cut-hold-hold-cut-CUT のリズム変化が手作り感を生む。

---

3. レイアウト

[AUTO] ALL_CENTERED — 全シーンセンター配置を避ける

最低1シーンは非対称レイアウトにする:

• テキスト左寄せ + 右にビジュアル
• 上1/3にタイトル + 下2/3にデモ
• Rule of thirds を意識

---

4. サウンド

[AUTO] NO_SFX — BGMだけでなくSFXを使う

---

5. 手動チェック項目

自動検出が難しいが重要な項目:

意味のあるアニメーション (Semantic Motion)

• [ ] "Track" → 横スライド、"Record" → 赤ドット点滅、等
• [ ] タイマー数字 → カウントアップ/ダウン
• [ ] 各単語の動きがその意味と関連している

カラーの意図的な逸脱

• [ ] Problem/Agitationシーンでブランドカラーを崩す（彩度低下、寒色寄り等）
• [ ] Solutionで元のカラーに戻すことで「解決感」を演出

フォントウェイトの対比

• [ ] 同一画面内でfontWeight 300と700が共存している箇所がある
• [ ] 全テキストが同じfontWeightではない

デモシーンのリアリティ

• [ ] タップインジケーター（指タッチシミュレーション）がある
• [ ] mockupが完全に静止していない（微フロート、微回転）
• [ ] 「Feature名」を1語ずつ急速表示 vs 1行テキストブロック

全体の「引き算」

• [ ] 少なくとも1箇所、意図的にアニメーションを使わない（ハードカット）場所がある
• [ ] backdrop-blur, glow, gradient border を使っていない
• [ ] 装飾 < コンテンツの比率になっている