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() を使用

必須パターン

// アニメーションは必ず 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) を変更

レンダリング

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> を使わない

• フレーム計算を検証せずにコミットしない