TikTok Promo Video (Remotion)

PPT翻訳SaaSのTikTok縦型プロモ動画をRemotionで作成・編集するスキル。

When to Use This Skill

TikTokプロモ動画の新規シーン作成・既存シーン編集
動画の文言・タイミング・レイアウト修正
新しいComposition（A/Bバリアント）の追加
コンポーネント追加・修正
レンダリングとデバッグ

Project Structure

promo-video/
├── package.json              # Remotion + React（バージョンはpackage.json参照）
├── tsconfig.json
├── public/screenshots/       # スクリーンショット素材
│   ├── upload.png
│   ├── dashboard-empty.png
│   └── landing.png
└── src/
    ├── index.ts              # registerRoot(RemotionRoot)
    ├── Root.tsx              # Composition登録（Folder + Composition）
    ├── constants.ts          # 全定数: FPS, サイズ, シーン尺, カラー, コピー
    ├── fonts.ts              # NotoSansJP (@remotion/google-fonts)
    ├── motion.ts             # アニメーションユーティリティ
    ├── index.css             # Tailwind (optional)
    ├── TikTokAd.tsx          # Ad版メイン (Sequence)
    ├── TikTokPromo.tsx       # LP版メイン (TransitionSeries)
    ├── components/
    │   ├── Background.tsx    # ダーク背景
    │   ├── SafeArea.tsx      # TikTok安全領域 (top:160, bottom:260)
    │   ├── KineticLine.tsx   # テキスト表示（emphasis, veil対応）
    │   ├── Icons.tsx         # SVGアイコン（Bolt, Shield, Table, Globe, Pen, Arrow）
    │   ├── TapRing.tsx       # タップアニメーション
    │   ├── TimerBadge.tsx    # タイマー表示
    │   ├── ProgressBar.tsx   # プログレスバー
    │   ├── GlowEffect.tsx    # グロー演出
    │   └── PhoneMockup.tsx   # スマホモック
    └── scenes/
        ├── HookScene.tsx     # LP: フック（課題提示）
        ├── SolutionScene.tsx # LP: 証拠（タイマー + スクショ）
        ├── DemoScene.tsx     # LP: 編集デモ（1行修正）
        ├── FeaturesScene.tsx # LP: 特徴カード（速い/表も翻訳/多言語/直せる）
        ├── CTAScene.tsx      # LP: CTA（comment/try）
        ├── AdHookScene.tsx   # Ad: Before/After カード
        ├── AdProofScene.tsx  # Ad: タイマー + スクショ
        ├── AdDiffScene.tsx   # Ad: 1行修正デモ
        └── AdCTAScene.tsx    # Ad: CTA（profile/comment）

TikTok Format Constraints

項目	値
解像度	1080 x 1920 (9:16 縦型)
FPS	30
Safe Area上部	160px (UIオーバーレイ)
Safe Area下部	260px (UIオーバーレイ)
Safe Area左右	60px padding
Ad版尺	11.5s = 345f
LP版尺	15.0s = 450f

Composition Architecture

Ad版 (TikTokAd) —

Sequence

ベース

Hook(24f/0.8s) → Proof(126f/4.2s) → Diff(105f/3.5s) → CTA(90f/3.0s) = 345f

```
Sequence
```
の
```
from
```
+
```
durationInFrames
```
で正確なフレーム制御
```
COPY_VARIANTS
```
(A/B/C) で文言A/Bテスト
```
ctaVariant
```
("profile" | "comment") でCTAモード切替

LP版 (TikTokPromo) —

TransitionSeries

ベース

Hook(29f) → Proof(107f) → Edit(143f) → Cards(128f) → CTA(75f)
= 482f - 4*8f(transitions) = 450f

```
TransitionSeries
```
+
```
linearTiming
```
でシーン間トランジション
トランジション尺 = 8f (LP_TRANSITION)
計算式: 合計 = sum(シーン尺) - (トランジション数 * トランジション尺)

Animation Rules (CRITICAL)

禁止事項

CSS transition/animation 禁止 — Remotionは各フレームを独立レンダリングするため動作しない
emoji禁止 — クロスプラットフォームでレイアウトズレ。SVGアイコン (Icons.tsx) を使用
native
<img>
禁止 —
```
<Img>
```
+
```
staticFile()
```
を使用

必須パターン

typescript

// アニメーションは必ず useCurrentFrame + interpolate/spring
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 10], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

motion.ts ユーティリティ

関数	用途	特徴
`fadeIn(frame, start, duration)`	フェードイン	interpolate
`fadeOut(frame, start, duration)`	フェードアウト	interpolate
`enterFromBottom(frame, start, duration)`	下から登場	Easing.out(exp)
`enterFromRight(frame, start, duration)`	右から登場	Easing.out(exp)
`scaleIn(frame, fps, delay)`	スケールイン	spring(damping:200) — バウンスなし
`springBounce(frame, fps, delay)`	バウンス	spring(damping:12, stiffness:200)

Component API Quick Reference

詳細は components.md を参照。

コンポーネント	主なProps	用途
`SafeArea`	children	TikTok安全領域ラッパー
`KineticLine`	text, fontSize, emphasisWord, veil	テキスト表示（固定幅、中央揃え）
`Icons.*`	size	SVGアイコン (Bolt/Table/Globe/Pen/Arrow)
`TapRing`	x, y, delay	タップ演出
`TimerBadge`	seconds, done	タイマー表示
`ProgressBar`	progress, done, width	進捗バー
`Background`	-	ダーク背景
`GlowEffect`	color, size, delay	グロー演出

Workflow

新規シーン作成

```
constants.ts
```
にシーン尺を定義
```
scenes/
```
にシーンコンポーネントを作成
メインコンポーネント (TikTokAd/TikTokPromo) にシーンを追加

TransitionSeries使用時はフレーム計算を検証:

sum(scenes) - (transition_count * LP_TRANSITION) = LP_FRAMES

文言変更

LP版: 各シーンファイル内のテキスト直接変更
Ad版:
```
constants.ts
```
の
```
COPY_VARIANTS
```
(A/B/C) を変更

レンダリング

bash

cd promo-video
npx tsc --noEmit            # 型チェック（必須）
npm run render:all           # 全4本レンダリング
# 個別:
npm run render:ad-profile    # Ad Profile CTA
npm run render:ad-comment    # Ad Comment CTA
npm run render:lp-comment    # LP Comment CTA
npm run render:lp-try        # LP Try CTA

出力先:

promo-video/out/

Common Pitfalls

問題	原因	対処
Folder name error	Folder nameにスペース	a-z, A-Z, 0-9, `-` のみ使用
NotoSansJP subset error	"japanese" subset指定	番号付きsubset `[0]` - `[123]` を使用
循環参照	Root.tsx ↔ Composition	fonts.ts を独立ファイルに分離済み
render command format	`remotion render Root CompId`	`remotion render CompId --output path`
画像表示されない	native `<img>`	`<Img src={staticFile("path")}/>`
フォントずれ	fontFamily未設定	AbsoluteFill の style に `fontFamily` 設定
レイアウトずれ	固定幅未設定	KineticLine (maxWidth), テキストはcenter align

AI Assistant Instructions

このスキルが有効化された時:

promo-video/ で作業: cd せず絶対パスを使用
constants.ts を起点に: 尺・カラー・コピーはすべてここ
型チェック必須: 変更後は
```
npx tsc --noEmit
```
を実行
レンダリング確認:
```
npm run render:all
```
で全本出力確認
Remotion best practices skill も参照: アニメーション・トランジション詳細

Always:

アニメーションは
```
useCurrentFrame
```
+
```
interpolate
```
/
```
spring
```
のみ
テキスト表示は
```
KineticLine
```
を優先使用
アイコンは
```
Icons.tsx
```
のSVGアイコンを使用（emoji禁止）
画像は
```
<Img src={staticFile("...")}/>
```
を使用
TransitionSeries のフレーム計算を検証する
SafeArea 内にコンテンツを配置する

Never:

CSS transition/animation を使わない
emoji をテキストに含めない
native
```
<img>
```
を使わない
フレーム計算を検証せずにコミットしない

tiktok-promo-video

NPX Install

Tags

SKILL.md Content

TikTok Promo Video (Remotion)

When to Use This Skill

Project Structure

TikTok Format Constraints

Composition Architecture

Ad版 (TikTokAd) —
`Sequence`
ベース

LP版 (TikTokPromo) —
`TransitionSeries`
ベース

Animation Rules (CRITICAL)

禁止事項

必須パターン

motion.ts ユーティリティ

Component API Quick Reference

Workflow

新規シーン作成

文言変更

レンダリング

Common Pitfalls

AI Assistant Instructions