remotion-marketing-video

Remotion マーケティング動画

React、コードファーストのアニメーション、決定論的なフレームタイミングを用いて、高品質な Remotion ベースのマーケティング動画を作成します。このスキルは、ソフトウェア製品のデモ、SaaS のプロモーション、UI の操作案内、ローンチ動画、ソーシャル広告、解説動画、字幕付きクリップ、モーショングラフィックスの企画、制作、プレビュー、修正、レンダリングに使用します。

このスキルでは、動画制作のワークフロー、ストーリー構成、シーンの演出、ビジュアルデザインシステム、アセットの取り扱い、ブラウザー／Studio でのプレビュー、レンダリングの品質確認を中心に扱います。メディアアセットは、このスキルのリポジトリではなく、対象の Remotion プロジェクトに保存してください。

このスキルを使用する場面

ユーザーから次の依頼があった場合に、このスキルを使用してください。

• Remotion を使ったマーケティング動画、製品デモ、SaaS のプロモーション、ローンチ動画、アプリ紹介、UI の操作案内を作成する。
• スクリーンショット、画面録画、製品紹介文、ランディングページ、Figma／アプリのコンセプトを、脚本のある動画に仕立てる。
• React を使って、モーショングラフィックス、キネティックタイポグラフィ、字幕、カーソルアニメーション、ソーシャル広告、解説動画のシーンを制作する。
• 既存の Remotion 動画を改善またはデバッグする。タイミング、コンポジション、プレビュー、レンダリング、書き出し品質も対象です。
• フック、ビート、トランジション、アスペクト比、必要なアセットなど、実装前に動画の構成を計画する。

Remotion、React、コード生成グラフィックス、マーケティング／製品のストーリーテリングに関係しない動画編集には、このスキルを使用しないでください。

基本的なワークフロー

1. 動画の目標を明確にします。 製品、視聴者、プラットフォーム、尺、アスペクト比、CTA、利用可能なアセット、不足しているアセット、ブランドスタイル、最終的な出力先を確認します。

2. コーディングの前に、簡潔なクリエイティブブリーフを作成します。 目的、対象視聴者、フック、ストーリーのビート、ビジュアルスタイル、モーションの表現、アセット一覧、音声／字幕の計画、リスク、受け入れ基準を記載します。

3. シーングラフを計画します。 各シーンを、id、startFrame、durationInFrames、narrativeGoal、visual、motion、audio、assetRefs を含むデータとして定義します。ハードコードしたフレームオフセットをあちこちに散在させず、ビートの長さからタイミングを生成します。

4. デザインシステムを構築します。 キャンバスサイズ、fps、色、タイポグラフィ、間隔、角丸、シャドウ、z-index レイヤー、モーションカーブを、対象の Remotion プロジェクト内にある src/theme.ts または src/tokens.ts に集約します。

5. まず静止フレームを作成します。 モーションを追加する前に、代表的なフレームのビジュアルを仕上げます。レイアウトをすばやく確認するには、Remotion の静止画レンダリングを使用します。

6. 決定論的なアニメーションを追加します。 表示上の変化は、useCurrentFrame()、useVideoConfig()、interpolate()、Easing、spring()、Sequence、Series、TransitionSeries から制御します。CSS トランジション、CSS キーフレーム、タイマー、シード値のない乱数は避けてください。

7. インタラクションと編集表現を追加します。 カーソルの移動、タップリング、ホバー状態、タイピング演出、生成状態、タイムライン編集、ズーム、字幕、コールアウト、結果の表示を使い、原因と結果が明確に伝わるようにします。

8. 最終レンダリングの前にプレビューします。 Remotion Studio を起動し、ブラウザーで localhost のプレビューを開いて、代表的なフレームと再生を確認し、フィードバックを集めて修正します。品質確認には、ドラフト静止画や短い範囲のレンダリングを使用できます。

9. 承認後にのみレンダリングします。 ユーザーがプレビューを承認し、出力先を確認するまで、完成版動画全体をレンダリングしないでください。レンダリング後は、出力の寸法、コーデック、フレームレート、再生時間、音声ストリーム、ファイルサイズを調べます。

スクリプトとシーンの構成

ほとんどのマーケティング動画では、次の基本的な流れを使用します。

1. フック：最初の 1-2s で、問題、望ましい結果、または意外な製品価値を見せます。
2. 紹介：3-6s までに、製品、UI、ワークフロー、または生成されたビジュアルシステムを見せます。
3. 仕組み：具体的なアクションや変化を2～3つ実演します。
4. 実証：結果、ビフォーアフター、指標、生成された出力、時間の節約、または品質の向上を見せます。
5. CTA：最後に製品名、タグライン、1つのアクションを表示します。

1つのシーンにつき、主なアイデアは1つにします。意図的にゆっくりした映像、シネマティックな映像、またはナレーション主体の映像にする場合を除き、2-5s ごとにシーンを切り替えます。カーソルやタップの操作はすべて、数フレーム以内に目に見える結果が出るようにします。

ビジュアルとモーションのガイドライン

• コードを中心としたビジュアルを優先します。React UI シェル、SVG、CSS 描画、Canvas/WebGL、チャート、キャプション、図、プロシージャルな背景、カーソルやタップのシミュレーション、アニメーション付きデータなどを活用します。
• ユーザーから実際の製品のスクリーンショットや録画が提供された場合は、それらを使用します。提供されていない場合は、製品の説明をもとにリアルなモック UI を作成し、モックであることを明確にします。
• ターゲットプラットフォームのサイズでテキストが読みやすいようにします。短い見出しを使い、縦型ソーシャル動画では大きなキャプションを使用し、安全領域を考慮して配置します。
• 階層や因果関係を説明するためにモーションを使います。まず注目を集めるオブジェクトを動かし、数フレーム遅らせて二次的な要素を動かします。
• Remotion パッケージのバージョンを揃えます。Remotion の公式パッケージを追加する場合は、npx remotion add <package> を優先します。
• すべてのメディアを対象プロジェクトの public/ フォルダーに置き、staticFile() で参照します。

参考ファイル

関連性のある最小限のファイルのみを読み込みます。

• references/production_workflow.md - 調査概要、受付、アセットの一覧、クリエイティブプラン、承認ワークフロー。
• references/video_editing_modes.md - モーショングラフィックス、実写映像の編集、ソーシャルクリップ、解説動画、チュートリアル、ポッドキャストのクリップ、その他の動画タイプ。
• references/preview_approval_loop.md - Remotion Studio の localhost プレビュー、ブラウザーでの確認、フィードバックループ、最終レンダリングの承認。
• references/project_setup.md - スキャフォールディング、パッケージのバージョン調整、フォルダー構成、環境設定。
• references/scenes.md - ストーリー構成、シーングラフのパターン、製品タイプに応じた調整。
• references/animations.md - イージング、スプリング、トランジション、カメラ移動、フレーム計算。
• references/saas_ui_kit.md - コードを中心とした UI シェル、ダッシュボード、チャート、カウンター、カード、レスポンシブな構成パターン。
• references/cursor.md - カーソル、タップ、ホバー、クリック、操作のシミュレーション。
• references/audio.md - 音声、SFX、キャプション、トランスクリプトのタイミング、同梱メディアに関するルール。
• references/ffmpeg_export_pipeline.md - レンダリング、エンコード、プラットフォーム別の出力、QA コマンド。
• references/troubleshooting.md - 空白フレーム、アセットのパス、メディアの同期、レンダリングの遅さ、バージョンの競合。
• references/research_sources.md - 出典に基づく Remotion、skills.sh、Agent Skills、プラットフォームに関する注記。

便利なコマンド

このスキルのリポジトリではなく、対象の Remotion プロジェクトからコマンドを実行します。

npx remotion studio --port=3000
npx remotion still ProductVideo --frame=90 --scale=0.25
npx remotion render src/index.ts ProductVideo out/check.mp4 --frames=0-180 --scale=0.5 --codec=h264
npx remotion render src/index.ts ProductVideo out/final.mp4 --codec=h264
npx remotion ffprobe -v quiet -print_format json -show_format -show_streams out/final.mp4

このスキルを編集した後、このリポジトリのバリデーターを実行します。

powershell -ExecutionPolicy Bypass -File .\scripts\validate-skill.ps1