remotion

使用するタイミング

次の場合にこのスキルを使用します。

• Remotion の動画を新規に作成する場合
• コンテンツアセット向けの動画ブリーフのバリエーションを生成する場合
• 既存の Remotion コンポジションを変更する場合
• Remotion のアニメーションやレンダリングの問題をデバッグする場合
• Remotion 固有の API やコンポーネントを使用する場合
• 動画内に実際のウェブサイト、ツール、製品の UI を表示する場合（rules/site-ui-from-code.md を使用します）

動画作成プロセス

Remotion の動画を新規に作成する場合は、この 8 ステップのプロセスに従います。ステップ 2 では、ブリーフとコールドオーディエンス向けの最適化に基づいて、カタログから 3～5 個のコンセプトを選びます。ステップ 4 と 5 は承認の確認ポイントです。両方の承認を得るまで、コードを書かないでください。

テンプレートと判断マトリックスを含むプロセスの全容については、references/video-creation-process.md をお読みください。

ステップ 0：ブランドの特定

クリエイティブ作業を始める前に、ブランドを特定します。ユーザーに次のように尋ねてください。「この動画のブランドは何ですか？」

ブランドが MIA の場合は、以下の MIA テーマを使用します。ブランドについて追加で質問する必要はありません。

ブランドがリストにない場合は、ブランドのウェブサイト URL またはブランドガイドラインの提供をユーザーに依頼します。以下を抽出します。背景色、メインアクセントカラー、サブアクセントカラー、テキストカラー、フォントファミリー、テーマ（ライト／ダーク）。ガイドラインがない場合は、最低限、メインカラー、背景色、フォントの希望を尋ねます。

ステップ 1：クリエイティブブリーフ

クリエイティブ作業を始める前に、以下を確認して確定します。

Purpose: [Why this video exists]
Audience: [Who is watching]
Core message: [One sentence]
Content type: [blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
Channels: [Where it will be distributed]
CTA: [What the viewer should do next]
Source assets: [Files, components, or URLs to reference]
Tone: [Descriptive words for the feel]
Brand: [Brand name from Step 0]

ステップ 2：コンセプトの選定（推奨 3～5 個）

クリエイティブブリーフを確定したら、その内容を分析し、このユースケースに最適な動画コンセプトを選びます。固定のバリエーション一式を提示しないでください。references/concept-catalog.md のコンセプトカタログから選びます。

カタログには、主要なコンセプトが 18 個、ビジュアルスタイルの修飾要素が 8 個、コールドオーディエンス向けのフックパターンが 5 個あります。 推奨案を生成する前に、カタログを読んでください。

選定プロセス

1. ブリーフに照らしてコンセプトを評価します。 カタログ内の各コンセプトについて、以下を評価します。

   • コンセプトの「最適な用途」は、コンテンツの種類に合っていますか？
   • この構成で、主要なメッセージを 15～30 秒で伝えられますか？
   • コンセプトは、目標の尺と寸法に適していますか？
   • ブリーフには、このコンセプトに必要なデータやビジュアルが含まれていますか？

2. コールドオーディエンス向けのフィルターを適用します。 評価した各コンセプトについて、以下を確認します。

   • 事前知識がまったくない視聴者でも、最初の 3 秒で価値を理解できますか？
   • コンセプトは、冒頭でスクロールを止めるような視覚的な動きを生み出しますか？
   • ブランド、製品、課題領域についての事前知識を必要としませんか？
   • 結果やデータポイントを自然に冒頭で提示するコンセプト（メトリックカウンター、アニメーションインフォグラフィック、ビフォーアフターなど）は、準備に時間がかかるナラティブ型のコンセプトよりも、コールドオーディエンスに対して本質的に効果的です。

3. フックパターンを選びます。 推奨する各コンセプトに、カタログのフックパターンを組み合わせます。

   • データを含むコンテンツ → 結果先行
   • 製品ローンチやツール → パターンの割り込み
   • ソートリーダーシップや教育コンテンツ → 好奇心のギャップ
   • 信頼構築コンテンツ → 社会的証明のフック
   • 競合比較や価格に関するコンテンツ → 損失回避

4. 推奨する 3～5 個のコンセプトを、1 ページのブリーフとして提示します。 それぞれについて、以下を記載します。

   • コンセプト名（カタログ内の名称）と 1 文での説明
   • このブリーフに合う理由（具体的なコンテンツと視聴者に触れた 1～2 文）
   • 推奨するフックパターンと冒頭のビートの説明
   • シーンごとの表（カタログのテンプレートを、このコンテンツ向けにカスタマイズしたもの）
   • コンセプトを強化する場合は、任意でビジュアルスタイルの修飾要素を追加

5. 推奨案に順位を付けます。 最有力の推奨案を示し、その理由を説明します。

6. ユーザーが 1 つ（または 2 つを組み合わせたもの）を選択します。 ステップ 3 に進む前に、選択したコンセプトを確定します。

コールドオーディエンス向け最適化ルール

以下のルールはすべてのコンセプトの提案に適用され、コンテンツタイプのデフォルトと競合する場合は優先されます。

• デフォルトの想定：コールドオーディエンス。 ブリーフでオーディエンスがウォーム（リターゲティング、既存ユーザー、ニュースレター登録者）であると明示されていない限り、ブランド認知度はゼロと想定します。
• コールドオーディエンス向けの最初のシーンの要件：
  1. 視覚的なパターン割り込み（動き、色のコントラスト、またはスケールの変化）
  2. ブランドを知らなくても視聴者が認識できる問題または結果を示すテキスト
  3. シーン1ではブランドを特定しない（ブランドカードはシーン2以降に表示）
• コールドオーディエンス向けのフックパターンの制限： パターン割り込み、結果を先に示す手法、または損失回避を使用します。統計や主張がブランドの文脈なしでも誰もが共感できるものでない限り、好奇心をあおる手法は避けます。
• コンセプトの柔軟性： コールドオーディエンス向けにブリーフに適したコンセプトがカタログにない場合は、ハイブリッドを作成するか、既存のコンセプトを調整します。カタログは出発点となるライブラリであり、制約ではありません。

Step 3: フォーマットと仕様

ブリーフと選択したバリアントに基づき、フォーマット決定マトリクスを使用して以下を決定します。

チャネル	寸法	長さ
LinkedIn/Instagram フィード	1080x1080	15-30s
ウェブサイト／プレゼンテーション	1920x1080	15-60s
Reels/TikTok/Stories	1080x1920	15-60s
メール（GIF）	600x600 または 800x450	5-10s

デフォルトの FPS は 30 です。滑らかな動きが重要な場合に限り、60 を使用します。

Dimensions: [width]x[height]
Duration: [X] seconds ([X * fps] frames)
FPS: 30
Composition ID: [PascalCase]
Loop: [yes/no]
Output formats: [mp4, gif, webm]
Selected concept: [concept-id from catalog, or hybrid]

Step 4: シーンの内訳（承認ゲート）

コードを書く前に、すべてのシーンを定義します。選択したバリアントのシーンテンプレートを基本構成として、具体的なコンテンツに合わせてカスタマイズします。

シーン表を提示し、承認を得ます。

シーン表の形式：

#	名前	時間	コピー	アニメーション	目的
1	フック	0-3s	正確なテキスト	動きの説明	そのシーンがある理由

タイミングのガイドライン：

長さ	シーン数	1シーンあたりの平均
10s	3-4	2.5-3.3s
15s	4-6	2.5-3.75s
30s	8-12	2.5-3.75s
60s	12-20	3-5s

次に進む前に、コピー、タイミング、ナラティブ構成を確定します。

Step 5: ビジュアルデザイン（承認ゲート）

実装の前に、以下を確定します。

カラーパレット（最低限必要な役割）：

• 背景、プライマリアクセント、セカンダリアクセント
• テキストプライマリ、テキストセカンダリ、テキストターシャリ
• 枠線／区切り線

ブランドテーマのプリセット（MIA のみ。色に関する質問は省略）：

ブランド	背景	プライマリアクセント	セカンダリアクセント	テキストプライマリ	テキストミュート	フォント	テーマ
MIA	#F7F4FA / #1c1422（ダーク）	#F1DE71（イエロー）	#7184F1（パープル）	#1c1422 / #f7f4fa（ダーク）	rgba(28,20,34,0.62)	system-ui, -apple-system, Segoe UI	ライト

MIA のアクセントパレット：ブルー #71C4F1、パープル #7184F1、ピンク #F171C4、グリーン #71F19E

カスタムブランド：色は推測で選ばず、製品の画面またはブランドキットから取得します。Step 0 で提供されたブランドのウェブサイトまたはガイドラインに基づいて色を定義します。同じ役割を埋めます：背景、プライマリアクセント、セカンダリアクセント、テキストプライマリ、テキストミュート、フォント、テーマ。

タイポグラフィ：フォントファミリー、ウェイトの階層、ターゲット解像度でのサイズ。

アニメーションスタイル：スプリング（弾む／滑らか／キビキビ）、リニア、またはイージングベース。中心となるスタイルを選びます。

信頼できる情報源：既存のデザインに合わせる場合は、参照元のファイルを指定します。

Step 6: アーキテクチャの決定

シーンの複雑さに応じて、エージェントが次のように判断します。

条件	アプローチ
シーン数が15未満	単一ファイル
シーン数が15以上、または再利用可能なパーツがある	scenes/ ディレクトリを使った複数ファイル構成
シーン間で共通要素がある	不透明度エンベロープを備えた永続レイヤー

タイミング定数は常に一元管理してください（const T = { ... }）。

実際のサイト、ツール、または製品のUIを表示するシーンでは、手作業で描き直さず、サイト本来のコードを使って構築してください。rules/site-ui-from-code.mdに従い、React製品の場合はコンポーネントをインポートするか、プレーンなHTMLサイトをキャプチャしてサイトモーションキットで再構築してください。画面上の出力はすべて実際のものでなければなりません。

Step 7: 実装

確定した設計に基づいてコードを記述します。すべてのアニメーションはRemotionのルールに従う必要があります（下記の技術リファレンスを参照してください）。

Step 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 - publicフォルダーのアセットに使うstaticFile()
• rules/videos.md - トリミング、音量、速度、ループ、ピッチに対応した<Video>
• rules/audio.md - トリミング、音量、速度、ピッチに対応した<Audio>
• rules/images.md - レンダリング前の読み込みを保証する<Img>コンポーネント
• rules/gifs.md - GIF/APNG/AVIF/WebPに使う<AnimatedImage>
• 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 - 動的な長さ、寸法、props

応用

• 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-*クラスは禁止です）
• rules/site-ui-from-code.md - サイト本来のHTMLとCSSを使って構築する、実際のサイトやツールのUIと実際の出力（サイトモーションキット）

メディアユーティリティ（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 コードに適用されます。違反すると、出力が正しくなりません。

1. すべてのアニメーションは useCurrentFrame() で制御します。CSS トランジション、Tailwind の animate-* または transition-* クラス、React Three Fiber の useFrame() は使用しません
2. ネイティブ HTML 要素ではなく Remotion コンポーネント（<Img>、<Video>、<Audio>）を使用します
3. public/ フォルダー内のすべてのアセットには staticFile() を使用します
4. 時間は秒単位です。フレーム数を得るには、useVideoConfig() の fps を掛けます
5. 動きを制御するためにサードパーティ製のアニメーションライブラリを使用しません（アニメーションを無効にし、代わりに useCurrentFrame() を使用します）
6. すべてのコンセプトは、それだけで内容が分かるものでなければなりません。 何も前提知識がない視聴者がスクロールしながら見ても、動画だけで価値を理解できる必要があります。外部知識に頼るシーンを作ってはいけません。コピーだけでメッセージ全体が伝わるようにしてください。ブリーフに別途指定がない限り、常にコールドオーディエンスを想定します。

---

制作ルール

以下は、ナレーション付き動画または参考動画に合わせた動画に適用されます。起動動画および録音・編集のワークフローが提示されている場合は、その全体に従ってください。

1. まず音声トラックを用意します。 シーンを作る前に、Google Cloud Text-to-Speech Studio の音声、ElevenLabs の有料音声、またはプレゼンターの録音を使って音声を録音または生成します。シーンのタイミングは音声に合わせます。逆ではありません。
2. Whisper で単語ごとにタイミングを設定したキャプションを作成します。 音声トラックを words.json に文字起こしし（rules/transcribe-captions.md と rules/display-captions.md を参照）、キャプションの各単語にタイミングを設定します。キャプションのスタイルは参考動画に合わせます。さらに、次の安全ルールも常に適用します。顔の上にキャプションを配置せず、9:16 フレームの下から 5 分の 1 の領域を空けておきます。
3. 音楽は音声より十分に小さくします。 音楽は音声より十分に小さい音量にし、音声が流れるたびにさらに音量を下げます。
4. カットに効果音を付けます。 ハードカットや、画面上の重要な変化にはそれぞれ効果音を付けます。
5. 参考動画で使用されていない限り、フェードトランジションは使用しません。 参考動画のカットとトランジションのスタイルに合わせます。
6. 最終ミックスのラウドネスは約 -16 LUFS にします。
7. 色は製品画面またはブランドキットから選びます。 これは厳守事項です。独自にカラーパレットを考案してはいけません。
8. スタイルテンプレートのパターン。 参考動画の要素（カットのリズム、キャプションの見た目、動き、音の配置）を一度測定し、スタイル仕様として記録します。その仕様を、値を props として受け取る再利用可能なコンポジションにします。これにより、同じスタイルの次の動画は、同じコンポジションを使った新しいスクリプトと新しい画面で作成できます。