Motion
コードとして書かれたモーショングラフィックス：すべての色、時間、マージンはブランドファイルから取得され、ユーザーが事前に2～3フレームを確認するまではレンダリングされません。以下のルールは実際の修正から生まれたもので、それぞれに理由があります。
用途
| 作品 | 説明 |
|---|---|
| アニメーションBroll | 音声の一部をシーンやグラフィックで全画面表示 |
| アルファ (透明) | 動画の上または人物の後ろに配置する透明グラフィック |
| ポップアップ | データが表示され、約1秒以上読めるように表示され、その後消える |
| 字幕 | ボックスなし、1つの単語を強調、またはキネティック（キーワードのみ） |
| チャット模擬 | メッセージアプリの会話を信頼性高く、読みやすく表示 |
| 画面 | ウェブまたはデスクトップアプリを4:3カードにタイトル付きで表示 |
| カバー画像 | リールの0フレーム目 |
レイアウトを始める前に、次の中からどちらの形式かを決定します：
- データや製品の内部を見せる（パネル、メトリクス、受信箱）：平面的で密度の高いインターフェース、すべてが同時に読める、カード内の実際の写真や動画、カメラはほぼ静止（スケール1.00→1.02）。状態変化はその場で：行はすでに存在し、ラベルが変わる。画面は情報で埋め尽くされる。
- シーンを語る：映像が主役。大きなショット、実際に動くカメラ、装飾は最小限、1つのフレーズのみ。
図は作品ではない：アイデアが矢印のマップとして描けるなら、製品をその動作で示すこと。
準備
- Remotionプロジェクト（
npx create-video@latest）、Node、ffmpeg。 - ブランドをコード化して
src/marca/に配置：tokens.ts（色、タイポグラフィ、半径、マージン）、movimiento.ts（時間とイージング）、およびuseMarca()（すべてをスケーリングして提供）。組み立て方の例はreferencias/tokens.mdを参照。 - 作品ごとに1つのエントリ（
src/piezas/<pieza>.tsx、対応するregisterRootとComposition）：バンドルは小さく保たれ、ある作品が別の作品を壊さない。 - キャンバスは1080×1920、30fps（シーケンスで別途指定がない限り）：開始前にシーケンスのサイズとfpsを確認すること。
ワークフロー
- ブリーフ：シーケンス内の正確な範囲（イン→アウト）、その範囲の音声内容、許可されたデータとその出典、使用可能な素材、避けるべきもの。不足があれば質問する。
- 音声：タイムライン上にあるままの音声を単語単位で書き起こす（生ファイルではなく）。referencias/subtitulos.mdを参照。実際の収録音声は台本と異なることが多い。
- 長さ：範囲の長さ（定数にタイムコードコメント付きで）、＋1フレームのバッファ：
export const DURACION = 157; // 00:00:51:22 → 00:00:56:29。 - デザイン：表示されるものは、音声のフレーズごとに一致。アニメーションとサウンドが共有する瞬間（メッセージの表示、ヒットなど）は、コンポジションとエフェクトスクリプトが読み取る定数に格納。
- スケッチ：
remotion stillを使用して2～3枚のキーフレームを生成。セーフゾーンガイドを表示。ユーザーに見せて承認を得るまで待つ。 - レンダリング：背景ありまたはアルファ（下記参照）。
- サウンド：すべてのアニメーションはサウンドエフェクトと共に提供：瞬間を
sonidoスキルに渡す。 - 最終確認と納品（このページの下部参照）。
絶対に壊さないルール
- どのコンポジションにもハードコードされた色や寸法はない：すべてトークンから取得。理由：色調を変更するには1つのファイルを編集するだけで済み、各作品で新しいグレーを発明することはない。
- フレームごとに強調するものは1つだけ、ブランドのアクセントカラーで：タイトルの単語またはボタン、両方は不可。理由：2つが叫ぶとどちらも読めない。（模擬インターフェースの独自色はカウントしない。）
- バウンドしない。イン/アウトはトークンの時間とイージングを使用、
spring()は禁止。理由：spring()はオーバーシュートして戻るため、おもちゃのように見える。 - 時間は秒単位、フレーム単位ではない。理由：フレーム単位の遅延は、30fpsから60fpsに変更すると速度が2倍になる。
- セーフゾーン、余裕をもって（数値表参照）。読まれるものは左右約100px、天井から約290px以内：54と224は絶対境界線ではなく、デザインの基準線ではない。理由：アプリのUIが端を隠し、限界に近いと「すべてが端にありすぎる」と見える。
- コンポジションの中心はx=540。アプリのボタンを避けるためにデザインをずらさない：その高さに当たるものは対称的に狭くなる。理由：ずれたコンポジションは、アイコンが重なるよりも目立つ。
- 各オブジェクトはフレーム内に完全に収める。端で切らない；主役でないものはフェードアウトで退場させる。理由：電話やカードが切れるとエラーとして読まれる。
- Brollでは何かが起こる：カメラが動き、テーマではなく音声のフレーズである具体的なアクションが発生する。理由：「何も起こらない」が最も一般的な拒否理由。例外は実際のクライアント製品：そのまま再生し、再現や動きの発明はしない。
- せいぜい4秒ごとに新しい何か、同じ動きの連続は禁止。理由：2つのズームが連続するとカットがぼやける。
- 最後は静止しない：最後の部分に非常にゆっくりとしたプッシュ（微動）。理由：凍結したショットはレンダリングエラーとして読まれる。
- 上昇する数字はグラフ；瞬間的に現れる数字はラベル。アルファでは、各数字は独自のアニメーションオブジェクト（カウンター、メーター、バー、アクションアイコン）を持ち、テキストが付随する。理由：動画上のプレーンテキストは字幕として読まれる。
- ワンショット、奥行き、詳細。個別のインではなくシーンを移動するカメラ、異なる奥行きのオブジェクト、各要素に名前、時間、状態。理由：白いスペースの多いダイアグラムは「単純すぎる」と拒否された。
- 字幕はボックスなし、文ごとに1つの単語を強調；Broll上やグラフィックが同じことを言っている場所には配置しない（referencias/subtitulos.md参照）。
- 模擬チャットは読みやすく：電話は中央、アプリ全体を均一に拡大、一度に1つのメッセージを読む時間を確保；強調する場合は他をぼかし、暗いベールは使用しない（referencias/alfas-y-chats.md参照）。
- 実写の画面がフレーム内にある場合はそれが優先：そのテキストやヘッダーの上には何も配置しない；ポップアップは空き領域に配置。
- 黒い境界線や硬いエッジは禁止：カメラが映像上を移動する場合、最小スケール1.04（横方向移動の場合は1.18）；段階の滑らかなグラデーションと丸みのある角。理由：黒い部分が見えるズームアウトや段付きグラデーションは枠のように見える。
- データを捏造しない、作品を繰り返さない。数字、名前、スクリーンショットはユーザーから提供；模擬チャットで実際の顧客データを表示しない。各作品は独自のグラフィックを持つ：別の作品のグラフィックを再利用するとわかる。
- アニメーションは音声に合わせる、逆は禁止：グラフィックに合わせて音声にポーズを挿入しない。
- 修正は全体をレンダリングしない：変更された部分だけをレンダリングし、結合して新しい名前を付ける（referencias/3d-y-trampas.md参照）。理由：すでに配置されたバージョンを上書きせず、3秒のために1時間のレンダリングを無駄にしない。
数値
| 項目 | 値（1080×1920キャンバス） |
|---|---|
| 左右マージン | 各側54px（読まれる部分は約100px） |
| 天井 | y=224より上には配置しない（読まれる部分は約290pxから） |
| 読み取りゾーン | y=420 から y=1495 |
| ボタン列 | x=897、y=1228から下；その高さでは読まれるものはx=183～897内 |
| 大きくて広い数字 | y=1228より上に完全に表示 |
| ディテールショットの電話 | 最大でフレーム幅の0.8倍 |
| ワイドショットの集合 | 最大 1080 − 2 × 54 の幅 |
| ポップアップ | 約1秒以上表示され、その後消える（残すと8秒で6つになり読めなくなる） |
| リズム | 4秒以下ごとに新しい何か |
| 映像上のカメラ最小スケール | 1.04（横移動時1.18） |
| データ作品の充填率 | 有効ボックスの約75％；50％未満はスケッチのように見える |
| シーン作品の充填率 | 40～60％ |
| カバー画像のトリミング | フィード4:5：y=285～1635 · プロフィール3:4：y=240～1680 |
充填率は、背景以外で占有された有効ボックスの割合；スケッチで測定し、目視ではない。
レンダリング
# スケッチ：単一フレーム
npx remotion still src/piezas/mi-pieza.tsx MiPieza out/boceto_f45.png --frame=45
# 背景あり（不透明：下の映像を隠す）
npx remotion render src/piezas/mi-pieza.tsx MiPieza out/mi-pieza_FONDO.mov \
--codec=prores --prores-profile=4444 --pixel-format=yuv444p10le
# アルファ（透明：下の映像が見える）
npx remotion render src/piezas/mi-pieza.tsx MiPieza-Alfa out/mi-pieza_ALFA.mov \
--codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png
# 3Dを含むすべての作品（CSSまたはthree.js）、スケッチとレンダリングの両方： --gl=angle
- 背景ありとアルファは 同じコンポジションで
transparenteプロップによって区別；アルファ版はキャンバスを描画せず、IDは-Alfaで終わる。 --prores-profile=4444だけではアルファにならない。 確認：ffprobe -v error -select_streams v:0 -show_entries stream=pix_fmt -of csv=p=0 out/mi-pieza_ALFA.movがyuvaで始まることを確認。- アルファではキャンバスはない：各テキストは独自のサーフェスが必要。そうしないと暗い映像上で消える。
- ディスク容量が少ない場合：ProRes 4444（アルファ付き）は1080pで1分あたり約1.35GB。MOV内でPNGに変換（
ffmpeg -i x.mov -c:v png -pix_fmt rgba y.mov）するとロスレスでアルファを保持し、約1/7.5の容量。 - 遠近感のあるインターフェースでテキストがぼやける場合：
--scale=2でレンダリングし、lanczosで1080pにダウンスケール。 - 複数のスティルの場合、シングルバンドルを作成し終了後に削除するスクリプトを使用（referencias/3d-y-trampas.md参照）。
0フレーム目のカバー画像
- カバー画像は、エクスポートされたリールの最初のフレーム：
<Sequence durationInFrames={1}>でカバー画像を配置し、リール全体を<Sequence from={1}>で配置。プラットフォームは動画のフレームからカバー画像を選択するため、ファイルが孤立しない。セレクターが0フレームを選択しない場合は2フレームにする。 - 人物は中央：x軸540、その中心は約y=900～960、4:5と3:4の両方に完全に収まり、タイトルもその中に収める。理由：プロフィールとフィードのグリッドがカバー画像をトリミングし、サムネイルでクリックが決まる。
- コーナーに大きな装飾は置かない。納品前に、トリミングをシミュレートしたバージョン（4:5の外側をベール、3:4のラインと中央軸）を生成して確認。
- JPGからffmpegでカバー画像を結合する場合、カラーレンジに注意（referencias/3d-y-trampas.md参照）。
「リキッドガラス」スタイル（オプション）
カードやボタンにiOS風のガラス効果、明るい背景に適用。何か屈折させるもの、シーン全体で1つの光源、内部に動きのあるものがある場合に機能；そうでないと「パンフレットのよう」に見える。ルールと数値は referencias/cristal.md を参照。このファイルでは、映像内の焼き付いたテキストを隠す方法も説明。どのスタイルも永遠ではない：各作品は以前の作品にはなかった何かを提供する。
最もコストがかかる落とし穴
- 動画のフリーズ：0フレーム以降に挿入される
<OffthreadVideo>は `<Sequence from={entrada} layout=