modern-short-video

モダンなショート動画のスキル

Remotion と React を使って、プロフェッショナルでモダンな製品ローンチ動画を作成します。

前提条件（必須）

警告：この手順を省略しないでください。省略すると、表現力豊かな演出の機会を逃してしまいます。

このスキルは、Remotion のベストプラクティスを拡張します。必ず次の両方を実行してください。

1. 最初にスキルを読み込みます。

   /remotion-best-practices
   

2. remotion-best-practices の SKILL.md を読み、製品に関連するルール（マップ、グラフ、テキストアニメーション、3D、Lottie など）を特定します。

ワークフロー

ステップ 1：製品を分析し、表現力豊かな演出を選ぶ（重要）

スクリーンショットを依頼する前に、製品を分析し、remotion-best-practices から関連する表現力豊かな演出を見つけます。

可能な限り、静的なスクリーンショットを動的なコンテンツに置き換えます。

• マップアプリ → ルートを描画するアニメーション付きマップ
• ダッシュボード → アニメーション付きグラフ
• テキストアプリ → タイプライター効果
• など

関連するルールファイルを remotion-best-practices から読み、活用します。

ステップ 2：デバイス、テーマ、BGM に関する質問

AskUserQuestion を使って、次の内容を質問します。

1. デバイスの種類：製品は主にスマートフォン（SP）向けですか、それとも PC／デスクトップ向けですか？

   • SP（スマートフォン）→ スマートフォンのモックアップフレームを使用
   • PC／デスクトップ → ブラウザー／デスクトップのモックアップフレームを使用

2. スクリーンショットのテーマ：スクリーンショットはライトモードとダークモードのどちらにしますか？

   • ダークモード（推奨）→ 動画の背景（#0a0a0a）になじみます
   • ライトモード → コントラストが高くなり、スクリーンショットがより目立ちます

3. BGM（バックグラウンドミュージック）：バックグラウンドミュージックを追加しますか？

   • はい（推奨）→ Pixabay から無料の音楽をダウンロードします
   • いいえ → BGM なしで動画を作成します

ステップ 3：スクリーンショットを用意する

注：手順 1 の表現力豊かな演出を使うシーンでは、スクリーンショットは不要です。

必要な画像（public/ フォルダーに配置）：

ファイル	用途	必須
mockup.png	メイン製品のスクリーンショット（モックアップシーン）	はい
feature-1.png	機能 1 のスクリーンショット	はい
feature-2.png	機能 2 のスクリーンショット	任意
feature-3.png	機能 3 のスクリーンショット	任意

ステップ 4：コンテンツを用意する

必要な情報：

• 製品名
• 1 行のキャッチコピー／コンセプト
• 機能 1：タイトル + 短い説明
• 機能 2：タイトル + 短い説明（任意）
• 機能 3：タイトル + 短い説明（任意）
• CTA テキスト（例：「無料で試す」）
• URL

ステップ 5：アセットを確認する

ls public/*.png

ステップ 6：コンポジションを作成する

すべてのシーンを含む src/remotion/[ProductName]/[ProductName]Intro.tsx を作成します。

ステップ 7：登録して長さを計算する

Root.tsx に追加します。重要：durationInFrames を正しく計算してください。

durationInFrames = Sum of scene durations - (transition duration × number of transitions)

詳しくは rules/duration-calculation.md を参照してください。

ステップ 8：テストする

pnpm run dev（または bun run remotion）を実行し、動画をプレビューします。

シーン構成（8 シーン）

┌─────────────────────────────────────────────────────────────┐
│  1. REVEAL     2. CONCEPT    3. MOCKUPS                     │
│  (2-3s)        (3-4s)        (3-4s)                         │
│  Logo/Name     Value prop    Product preview                │
├─────────────────────────────────────────────────────────────┤
│  4. FEATURE 1  5. FEATURE 2  6. FEATURE 3                   │
│  (3-4s each)   (optional)    (optional)                     │
│  Screenshot +  Screenshot +  Screenshot +                   │
│  Title/Desc    Title/Desc    Title/Desc                     │
├─────────────────────────────────────────────────────────────┤
│  7. OUTRO      8. CTA                                       │
│  (2-3s)        (3-4s)                                       │
│  Summary       URL + Action                                 │
└─────────────────────────────────────────────────────────────┘

シーンの詳細

シーン	長さ	内容	アセット
1. 登場	2〜3 秒	製品名、最小限のアニメーション	-
2. コンセプト	3〜4 秒	キャッチコピー、価値提案	-
3. モックアップ	3〜4 秒	メインのスクリーンショットを使ったデバイスのモックアップ	mockup.png または表現力豊かな演出
4. 機能 1	3〜4 秒	機能のタイトル + スクリーンショット	feature-1.png または表現力豊かな演出
5. 機能 2	3〜4 秒	機能のタイトル + スクリーンショット	feature-2.png または表現力豊かな演出
6. 機能 3	3〜4 秒	機能のタイトル + スクリーンショット	feature-3.png または表現力豊かな演出
7. エンディング	2〜3 秒	製品名 + まとめ	-
8. CTA	3〜4 秒	URL、行動喚起	-

合計時間：15〜25 秒（機能数によって異なります）

デザインルール

要素	推奨	非推奨
背景	単色の暗い背景 #0a0a0a	グラデーション
タイポグラフィ	単一のフォント（Inter/Noto Sans JP）	複数のフォント
アニメーション	控えめなフェード／スライド	弾むような派手な演出
モックアップ	実際のスクリーンショットまたは表現力豊かな演出	プレースホルダーのグラフィック
テキスト	簡潔で明確	長い段落

詳細ガイドライン

包括的なガイダンスについては、以下のルールファイルをお読みください。

• rules/design-principles.md - ビジュアルデザインシステム
• rules/scene-structure.md - シーン構成のパターン
• rules/visual-elements.md - モックアップ、タイポグラフィ、色
• rules/animation-patterns.md - モーションデザインのパターン
• rules/code-templates.md - すぐに使えるRemotionコンポーネント
• rules/duration-calculation.md - 動画の合計時間の計算方法
• rules/bgm.md - BGMのソースと実装

シーンコンポーネントのクイックリファレンス

// Scene order
<TransitionSeries>
  <RevealScene />      {/* 1. Logo/Name */}
  <ConceptScene />     {/* 2. Value proposition */}
  <MockupsScene />     {/* 3. Main product mockup */}
  <FeatureScene n={1} /> {/* 4. Feature 1 */}
  <FeatureScene n={2} /> {/* 5. Feature 2 (if provided) */}
  <FeatureScene n={3} /> {/* 6. Feature 3 (if provided) */}
  <OutroScene />       {/* 7. Summary */}
  <CTAScene />         {/* 8. Call to action */}
</TransitionSeries>

納品前のチェックリスト

• 前提条件を読み込み済み（/remotion-best-practicesを実行し、関連するルールを読みました）
• 該当する場合はリッチ表現を使用済み（地図、グラフ、テキストアニメーションなど）
• リッチ表現を使用していないシーンのスクリーンショットを収集済み
• スクリーンショットの品質が高い（2倍の解像度を推奨）
• 720pでもテキストが読みやすい
• 合計時間が15～25秒
• durationInFramesを正しく計算済み（トランジションの重なり分を差し引いてください！）
• 動画の最後に黒いフレームがない
• トランジションが滑らか（フェード、15フレーム）
• CTAとURLがはっきり見える
• BGMを追加済み（任意、音量は約0.25）