Skills
skills/kimny1143/claude-code-template/remotion

remotion

SKILL.md

Remotion Video Skill

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

ブランド設定について

カラーパレット、フォント、マスコットキャラクターの仕様は、各プロジェクトの CLAUDE.md で定義すること。 このスキルにはブランド固有の情報を含めない。 プロジェクト側に以下のようなセクションを用意する想定：

## 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({ damping: 12 }) ベースで統一感を出す

音声

  • 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',
  },
  animation: {
    characterSpring: { damping: 12, mass: 0.5 },
    textReveal: { damping: 15, mass: 0.8 },
    fadeIn: { durationInFrames: 15 },
  },
} as const;

export type Theme = typeof theme;

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

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

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

状態別アニメーション

状態 用途 アニメーション
idle 待機 軽い呼吸（上下2px、2秒周期） + まばたき
curious 興味・説明 首を傾ける + 目を見開く
happy 喜び・完了 バウンス + 表情変化
pointing 指し示す 体を向ける + 腕/羽を伸ばす

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

// 登場: 画面外から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,
  };
};

レンダリング

# 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

参考リソース

Weekly Installs
76
Repository
kimny1143/claud…template
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykWarn
Installed on
claude-code62
opencode37
gemini-cli36
cursor34
codex34
github-copilot33