remotion-creative

Remotion Creative

ブランド、テンポ、スタイル、ナレーション、構成のディレクションです。remotion-core の技術仕様を整えてから使用してください。

モーションのパターン、スプリングの設計図、トランジション、テキストアニメーション効果には、意図的にアニメーションを扱わないこのスキルではなく、remotion-animation を使用してください。

複雑な構成では、必ず最初に次の2つを読んでください。

• references/house-style.md — プロンプトの解釈、実際のコンテンツの生成、安易なデフォルトの一覧、背景・前景レイヤーのレシピ
• references/video-composition.md — 動画メディアにおけるスケール、奥行き、前景のディテール。すべてに一律の要素数を求めず、空白だらけのレイアウトを避ける方法

これらを読まないことが、画一的な出力を招く最大の原因です。

ワークフロー

1. プロジェクトにデザイン仕様がある場合は、最初に読み、そのフロントマターのトークンをブランドの基準（色、フォント、間隔、トーン）として扱ってください。確認する順序：frame.md → design.md → DESIGN.md。
2. デザイン仕様がなく、ユーザーがビジュアルの方向性を求めている場合：
   • 既製のビジュアルプリセット → references/visual-styles.md
   • 名前が指定されたスタイルやムード → references/visual-styles.md
   • 手早く設定できるデフォルト → references/house-style.md
3. 複数シーンの制作では、コードを書く前にビートとリズムを計画してください → references/beat-direction.md。
4. モーションが多い制作では、references/motion-principles.md を読んでから、remotion-animation を参照してください。

参照先

トピック	参照先
デフォルトの配色、モーション、タイポグラフィ、見直すべき安易なデフォルト	references/house-style.md
名前付きスタイルのプリセット、ムードに応じたスタイルの選択	references/visual-styles.md
構成パターン — ピクチャーインピクチャー、被写体の背後に置くテキスト、タイトルカード、スライドショー	references/composition-patterns.md
統計・インフォグラフィックの見せ方	references/data-in-motion.md
動画メディアの密度、スケール、色、フレーム構成	references/video-composition.md
ビートごとのディレクション、リズムの計画、トランジションのタイミング	references/beat-direction.md
モーションの大枠の指針とスプリングの品質ルール	references/motion-principles.md
フォント選び、組み合わせ、レンダリング動画における文字の指針	references/typography.md
台本のテンポ、トーン、冒頭、数字の読み上げ方	references/narration.md
事前計算したオーディオ帯域とモーションの対応付け	references/audio-reactive.md

Remotion のデザインシステム

Remotion のコンポジションでは React のインラインスタイルを使用します。レンダリング出力には、ブラウザーのユーザーエージェントスタイルシートによる CSS カスケードはありません。必ず次の点を守ってください。

• テキスト要素には fontFamily を明示してください（@remotion/google-fonts または staticFile で読み込みます）。
• 相対単位の rem／em は慎重に使用してください。ピクセル単位で正確な動画出力には px を優先してください。
• Google Fonts は @remotion/google-fonts 経由で読み込んでください。レンダリング中にネットワーク呼び出しが必要となる <link> タグは使用しないでください。

import {loadFont} from '@remotion/google-fonts/Inter';

const {fontFamily} = loadFont();

const Title = () => (
  <div style={{fontFamily, fontSize: 72, fontWeight: 700, color: '#ffffff'}}>
    Hello
  </div>
);

オーディオに反応するモーション

制作を始める前にオーディオ帯域を抽出してください。レンダリング時にオーディオファイルを読み込まないでください。

オーディオを事前分析するには @remotion/media-utils を使用してください。

# Pre-extract audio data to a JSON file
node scripts/extract-audio-data.mjs public/music.mp3 --out public/audiomap.json

その後、JSON を静的にインポートし、帯域の値をアニメーションパラメーターに対応付けてください。ワークフローの全体像 → references/audio-reactive.md。

適用範囲

• remotion-core の技術ルールを上書きしないでください。
• 最小限の技術的なコンポジションにデザインシステムを必須としないでください。
• 依頼に含まれている場合、または拡張案を先に提案した場合を除き、シーン、ナレーション、音楽、字幕、トランジションを追加しないでください。
• レシピの参照はタスクに必要なものに限定してください。簡単な編集ですべての参照資料を読む必要はありません。