使用するタイミング
このスキルは以下の場合に使用します：
- Remotion動画をゼロから新規作成する場合
- コンテンツアセットの動画ブリーフバリエーションを生成する場合
- 既存のRemotionコンポジションを変更する場合
- Remotionのアニメーションやレンダリングの問題をデバッグする場合
- Remotion固有のAPIやコンポーネントを操作する場合
動画作成プロセス
新しいRemotion動画を作成する際は、以下の8ステップのプロセスに従います。ステップ2では、ブリーフとコールドオーディエンス最適化に基づいてカタログから3〜5のコンセプトを選択します。ステップ4と5は承認ゲートです。両方が承認されるまでコードを記述しないでください。
テンプレートと意思決定マトリックスを含む完全なプロセスドキュメントについては、references/video-creation-process.mdを参照してください。
ステップ0：ブランド識別
クリエイティブ作業を始める前に、ブランドを特定します。ユーザーに次のように尋ねてください：「この動画はどのブランド向けですか？」
ブランドに以下のプリセットがある場合、それを直接使用します。ブランドに関する追加の質問は不要です。
ブランドがリストにない場合、ユーザーにブランドのWebサイトURLまたはブランドガイドラインの提供を依頼します。次の情報を抽出します：背景色、プライマリアクセント、セカンダリアクセント、テキスト色、フォントファミリー、テーマ（ライト/ダーク）。ガイドラインがない場合は、最低限：プライマリカラー、背景色、フォントの好みを尋ねます。
ステップ1：クリエイティブブリーフ
クリエイティブ作業を始める前に、以下の情報を収集して確定します：
目的：[この動画が存在する理由]
視聴者：[誰が見るか]
コアメッセージ：[一文で]
コンテンツタイプ：[blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
チャンネル：[どこで配信されるか]
CTA：[視聴者が次に何をすべきか]
ソースアセット：[参照するファイル、コンポーネント、またはURL]
トーン：[雰囲気を表す言葉]
ブランド：[ステップ0からのブランド名]
ステップ2：コンセプト選択（推奨3〜5コンセプト）
クリエイティブブリーフを確定した後、それを分析してこの特定のユースケースに最適な動画コンセプトを選択します。固定されたバリアントセットを提示しないでください。references/concept-catalog.mdのコンセプトカタログから選択します。
カタログには、18のプライマリコンセプト、8つのビジュアルスタイル修飾子、5つのコールドオーディエンスフックパターンが含まれています。 推奨を生成する前にこれを読んでください。
選択プロセス
-
ブリーフに対してコンセプトをスコアリングします。 カタログの各コンセプトについて、以下を評価します：
- コンセプトの「最適」がコンテンツタイプと一致しているか？
- コアメッセージがこの構造で15〜30秒に収まるか？
- コンセプトがターゲットの長さと寸法で機能するか？
- ブリーフはこのコンセプトが必要とするデータやビジュアルを提供しているか？
-
コールドオーディエンスフィルターを適用します。 スコアリングされた各コンセプトについて、以下を評価します：
- 事前コンテキストがZEROの視聴者が最初の3秒で価値を理解できるか？
- コンセプトはオープニングビートでスクロールを止めるような視覚的な動きを生み出すか？
- コンセプトはブランド、製品、問題領域に関する事前知識を必要としないか？
- コンセプトが結果やデータポイント（metric-counter、animated-infographic、before-after）を自然に前面に出す場合、設定時間を必要とするナラティブコンセプトよりも、コールドオーディエンスにとって本質的に強力です。
-
フックパターンを選択します。 推奨される各コンセプトに対して、カタログからフックパターンをペアリングします：
- データを含むコンテンツ → 結果ファースト
- 製品ローンチとツール → パターンインタラプト
- ソートリーダーシップと教育 → 好奇心ギャップ
- 信頼構築コンテンツ → ソーシャルプルーフフック
- 競合・価格コンテンツ → 損失回避
-
3〜5の推奨コンセプトを1ページのブリーフとして提示します。それぞれについて：
- コンセプト名（カタログから）と一文の説明
- なぜこのブリーフに合うか（具体的なコンテンツと視聴者を参照した1〜2文）
- 推奨フックパターンとオープニングビートの説明
- シーンごとのテーブル（カタログテンプレートから、このコンテンツ用にカスタマイズ）
- オプションのビジュアルスタイル修飾子（コンセプトを強化する場合）
-
推奨をランク付けします。 最上位の推奨をマークし、その理由を説明します。
-
ユーザーが1つ（または2つのハイブリッド）を選択します。 ステップ3に進む前に、選択したコンセプトを確定します。
コールドオーディエンス最適化ルール
これらのルールはすべてのコンセプト推奨に適用され、競合する場合はコンテンツタイプのデフォルトを上書きします：
- デフォルトの前提：コールドオーディエンス。 ブリーフが明示的に視聴者がウォーム（リターゲティング、既存ユーザー、ニュースレター購読者）であると述べていない限り、ブランド認知度はゼロと想定します。
- コールドオーディエンスの最初のシーンの要件：
- 視覚的なパターンインタラプト（動き、色のコントラスト、またはスケールの変化）
- ブランドを知らなくても視聴者が認識できる問題や結果を挙げるテキスト
- シーン1にブランド識別を含めない（ブランドカードはシーン2以降に保存）
- コールドオーディエンスのフックパターン制限： パターンインタラプト、結果ファースト、または損失回避を使用します。好奇心ギャップは、統計/クレームがブランドコンテキストなしで普遍的に共感できる場合を除き、避けてください。
- コンセプトの柔軟性： カタログのコンセプトがコールドオーディエンスに対してブリーフに適さない場合、ハイブリッドを作成するか、既存のコンセプトを適応させます。カタログは出発点となるライブラリであり、制約ではありません。
ステップ3：フォーマットと仕様
ブリーフと選択されたバリアントから、フォーマット決定マトリックスを使用して解決します：
| チャンネル | 寸法 | 長さ |
|---|---|---|
| LinkedIn/Instagramフィード | 1080x1080 | 15〜30秒 |
| ウェブサイト/プレゼンテーション | 1920x1080 | 15〜60秒 |
| Reels/TikTok/Stories | 1080x1920 | 15〜60秒 |
| メール（GIF） | 600x600 または 800x450 | 5〜10秒 |
デフォルトFPS：30。スムーズな動きが重要な場合のみ60を使用します。
寸法：[幅]x[高さ]
長さ：[X]秒（[X * fps]フレーム）
FPS：30
コンポジションID：[パスカルケース]
ループ：[はい/いいえ]
出力形式：[mp4, gif, webm]
選択されたコンセプト：[カタログからのコンセプトID、またはハイブリッド]
ステップ4：シーン分割（承認ゲート）
コードを記述する前に、すべてのシーンを定義します。選択されたバリアントのシーンテンプレートを開始構造として使用し、特定のコンテンツ用にカスタマイズします。
承認のためにシーンテーブルを提示します。
シーンテーブルの形式：
| # | 名前 | 時間 | コピー | アニメーション | 目的 |
|---|---|---|---|---|---|
| 1 | フック | 0〜3秒 | 正確なテキスト | 動きの説明 | 存在理由 |
タイミングガイドライン：
| 長さ | シーン数 | 平均シーンあたり |
|---|---|---|
| 10秒 | 3〜4 | 2.5〜3.3秒 |
| 15秒 | 4〜6 | 2.5〜3.75秒 |
| 30秒 | 8〜12 | 2.5〜3.75秒 |
| 60秒 | 12〜20 | 3〜5秒 |
先に進む前に、コピー、タイミング、ナラティブ構造を確定します。
ステップ5：ビジュアルデザイン（承認ゲート）
実装前に確定します：
カラーパレット（最低限必要な役割）：
- 背景、プライマリアクセント、セカンダリアクセント
- テキストプライマリ、テキストセカンダリ、テキストターシャリ
- 境界線/区切り線
ブランドテーマプリセット（既知のブランドに使用、色の質問をスキップ）：
| ブランド | 背景 | プライマリアクセント | セカンダリアクセント | テキストプライマリ | テキストミュート | フォント | テーマ |
|---|---|---|---|---|---|---|---|
| FunnelEnvy | #FFFFFF/#1a1a2e（ターミナル） | #3B82F6（青） | #8B5CF6（紫） | #000000 | #6B7280 | Inter, system | ライト |
| Reform | #FFFFFF/#1a1a2e（ターミナル） | #48EC80（緑） | #EDE630（黄） | #000000 | #6B7280 | Inter, system | ライト |
| GrowthNode | #0f0a1a（全シーン） | #8B5CF6（紫） | #3B82F6（青） | #FFFFFF | #a1a1aa | Inter, system | ダーク |
| MIA | #F7F4FA/#1c1422（ダーク） | #F1DE71（黄） | #7184F1（紫） | #1c1422/#f7f4fa（ダーク） | rgba(28,20,34,0.62) | system-ui, -apple-system, Segoe UI | ライト |
MIAアクセントパレット：青 #71C4F1、紫 #7184F1、ピンク #F171C4、緑 #71F19E
カスタムブランド：ブランドが上記にリストされていない場合、ステップ0で提供されたブランドWebサイトまたはガイドラインから色を定義します。同じ役割を埋めます：背景、プライマリアクセント、セカンダリアクセント、テキストプライマリ、テキストミュート、フォント、テーマ。
タイポグラフィ：フォントファミリー、ウェイト階層、ターゲット解像度でのサイズ。
アニメーションスタイル：スプリング（バウンス/スムーズ/スナップ）、リニア、またはイーズベース。支配的なスタイルを選びます。
真実の情報源：既存のデザインに一致させる場合、ソースファイルを参照します。
ステップ6：アーキテクチャ決定
エージェントはシーンの複雑さに基づいてこれを解決します：
| 条件 | アプローチ |
|---|---|
| 15シーン未満 | 単一ファイル |
| 15シーン以上または再利用可能な部分 | scenes/ディレクトリを使用した複数ファイル |
| シーン間で共有される要素 | 不透明度エンベロープを持つ永続レイヤー |
常に中央集権的なタイミング定数（const T = { ... }）を使用します。
ステップ7：実装
確定した決定に対してコードを記述します。すべてのアニメーションはRemotionルールに従う必要があります（以下の技術リファレンスを参照）。
ステップ8：出力ドキュメント
以下をカバーするリファレンスドキュメントを生成します：仕様、選択されたバリアント、プレビュー/レンダリングコマンド、シーン分割、カラーパレット、タイミング設定、アーキテクチャノート、イテレーションガイド。
技術リファレンス
APIの詳細とコード例については、個別のルールファイルを参照してください。
コアアニメーションとタイミング
- rules/animations.md - アニメーションの基礎。すべての動きは
useCurrentFrame()経由。CSSトランジションは不可 - rules/timing.md -
interpolate()、spring()、イージング関数、スプリング設定 - rules/sequencing.md -
<Sequence>と<Series>によるタイミング、遅延、長さの制御 - rules/trimming.md - 先頭のトリミング（負の
from）と末尾のトリミング（durationInFrames） - rules/transitions.md - フェード、スライド、ワイプ、フリップ、時計ワイプを含む
<TransitionSeries>
メディア
- rules/assets.md -
staticFile()によるパブリックフォルダのアセット - rules/videos.md - トリミング、音量、速度、ループ、ピッチを含む
<Video> - rules/audio.md - トリミング、音量、速度、ピッチを含む
<Audio> - rules/images.md -
<Img>コンポーネント（レンダリング前に読み込みを保証） - rules/gifs.md -
<AnimatedImage>によるGIF/APNG/AVIF/WebP - rules/fonts.md -
@remotion/google-fontsによるGoogle Fonts、@remotion/fontsによるローカルフォント
テキストとキャプション
- rules/text-animations.md - タイプライター、単語ハイライトパターン
- rules/measuring-text.md -
measureText()、fitText()、fillTextBox() - rules/display-captions.md - TikTokスタイルのキャプション、単語ごとのハイライト
- rules/import-srt-captions.md -
parseSrt()による.srtファイルの解析 - rules/transcribe-captions.md - Whisper.cpp、Whisper Web、OpenAI API
コンポジションとメタデータ
- rules/compositions.md -
<Composition>、<Still>、<Folder>、defaultProps - rules/calculate-metadata.md - 動的な長さ、寸法、プロパティ
高度な機能
- rules/3d.md - React Three Fiberを使用した
<ThreeCanvas> - rules/charts.md -
useCurrentFrame()でアニメーション化されたSVG/D3.jsチャート - rules/lottie.md -
@remotion/lottieを使用した<Lottie>コンポーネント - rules/tailwind.md - TailwindCSS（
transition-*またはanimate-*クラスは不可）
メディアユーティリティ（Mediabunny）
- rules/extract-frames.md - タイムスタンプでのビデオフレーム抽出
- rules/can-decode.md - ビデオ/オーディオのデコード可能性の確認
- rules/get-video-duration.md - 秒単位のビデオ長さ
- rules/get-video-dimensions.md - ビデオの幅と高さ
- rules/get-audio-duration.md - 秒単位のオーディオ長さ
レイアウト
- rules/measuring-dom-nodes.md - 正確な測定のための
useCurrentScale()
参考文献
- references/concept-catalog.md - 18のプライマリコンセプト、8つのビジュアルスタイル修飾子、5つのコールドオーディエンスフックパターン、選択基準、コンテンツタイプ親和性マトリックスを含むコンセプトカタログ
- references/video-creation-process.md - テンプレート、意思決定マトリックス、詳細なガイダンスを含む完全なプロセスドキュメント
厳格なルール
これらはすべてのRemotionコードに適用されます。違反すると正しくない出力が生成されます。
- すべてのアニメーションは
useCurrentFrame()によって駆動されます。 CSSトランジション、Tailwindのanimate-*やtransition-*クラス、React Three FiberのuseFrame()は使用不可 - Remotionコンポーネント（
<Img>、<Video>、<Audio>）を使用し、ネイティブのHTML要素は使用しません staticFile()をpublic/フォルダ内のすべてのアセットに使用します- 秒単位の時間：
useVideoConfig()のfpsを掛けてフレーム数を取得します - サードパーティのアニメーションライブラリを使用して動きを駆動しないでください（それらのアニメーションを無効にし、代わりに
useCurrentFrame()を使用します） - すべてのコンセプトは自己説明的でなければなりません。 コンテキストなしでスクロールしている視聴者が、動画だけで価値を理解できる必要があります。どのシーンも外部知識に依存してはなりません。コピーは完全なメッセージを独立して伝える必要があります。ブリーフで別段の指定がない限り、常にコールドオーディエンスを想定します。