長巻コラージュ平面動效：デザイン言語、AE 実装とリプロデュース手法

このスキルは、1回の完全なフレーム単位リプロデュース（1920×1080、24 fps、272フレーム、12バージョンの反復）から生まれました。以下の3つに答えます：この種の映像がどのような見た目・動きか、After Effects でどう組み立てるか、リファレンス動画を使ってどう計測・比較するか。 3つのセクションは独立して使えます：オリジナル制作時は第1～3節、プロジェクト構築時は第4節、リプロデュース時は第5～6節を参照してください。

現在のプロジェクトに rollback-replica/ がある場合、それが参考実装です：拆解分析.md にすべての実測値、scripts/ にシーン生成ツール、 tools/ に計測スクリプトが含まれています。まずそれらを読み、ゼロから書き直さないでください。

1. デザイン言語

1.1 ワールドとカメラ

すべてのコンテンツは横長スクロール（参考動画では 11000×1080）上に配置され、視聴者はカメラがその上を移動するのを見ます。
カメラは水平移動とズームのみで、回転や垂直移動は行いません。換算式：X画面 = (Xワールド − cx)·s + 960、Y画面 = (Yワールド − 540)·s + 540。
スケール定規が全体を貫き、常に画面中央（y=540、小目盛間隔約 7.27 px、5目盛ごとに大目盛）に表示されます。これはレイアウトの軸であり、カメラ計測の基準です。
全編モーションブラーなし：1フレームあたり 500 px 移動するカメラでもシャープなまま。これがこのスタイルが「硬い」理由です。

1.2 レイアウト

1本の軸：コンテンツはスケール定規の上下に配置。年号や番号は定規に沿って配置。
上実下鏡：定規を鏡面として、上には元の画像・正方向のテキスト、下には単色シルエット・逆さテキスト。
括弧番号：すべてのラベルは括弧で囲む（(1) (2)、(crash)、[cloud1]）。括弧内の文字はしばしば白抜き（ストローク）で表示。
太細コントラスト：1 px の細い円、同心円、円弧テキスト、ガイド線に対して、大きな塗りつぶし色ブロック。
ネストされた枠：黒枠の中に黒枠、90°回転させ、定規が中央を通る。
密度のリズム：疎 → 密 → 極密 → 余白 → 敷き詰め → 疎。常に同じ密度にしない。

1.3 色彩

グレーの背景に白黒が主体、アクセントカラーは3色のみ、それ以外の色は写真の中だけに出現。

名称	値	用途
下地グレー	`#E6E6E6`	背景（非常に軽い粒状感あり）
ローズレッド	`#E8086D`	円弧セグメント、リボン、ビーム、ベースフラッシュ
ブライトブルー / ロイヤルブルー	`#1F86F0` / `#0D3ED8`	ブロック、ミラーシルエット / 大円、空
ブルーパープル	`#6982F6`	ベースフラッシュ、シルエット占用色
ミントグリーン	`#19E6B4`	少量のブロック面
ニアブラック	`#110D0C`	暗転、エンディング

下地色自体は段落ごとにハードカット：グレー → 黒 → ローズレッド → ブルーパープル、毎回1フレームで切り替え。

1.4 フォント組み合わせ

意図的に混在。情報の種類ごとに異なるフォント：トランジショナルセリフ（Times、括弧ラベル・白抜き）、幾何学的サンセリフ細字（Montserrat、年号、字間を詰める）、角丸テクニカルフォント（Jura / OCR-A、コマンドライン・小さなラベル）、ハイコントラストモダンセリフ（Playfair / Bodoni、大きなタイトル語、文字を密着）、極太スラブセリフ（Lubalin / Rockwell、メインタイトル、横に引き伸ばす）、等幅（Consolas / Courier、コード・大きな数字）、宋/明朝体（CJK、横に3倍まで引き伸ばし可）、ピクセルドットフォント。小さな文字は6～10 px まで小さくても拡大しない。それらは「質感」であって「情報」ではない。

1.5 素材語彙

人物写真の切り抜き（ハイコントラスト白黒、二値化）、エッジ検出風の線画（白地に黒線、点々あり）、システムUIスクリーンショット（ポップアップ、ファイルアイコン、テーブル、キーフレームテキスト）、フィルムスキャン（ベース、パーフォレーション、エッジコード）、3D小物（リキッドメタル、光沢チューブ、白モデル、ワイヤーフレーム）、ホログラフィックコーングラデーション、1ビットディザリングパターン、QRコード、ピクセル人形。同じものが実物と単色シルエットの2バージョンで現れることが多い。

1.6 質感

塗りつぶしブロックはクリーンに保ち、グラデーションとグレー部分には可視の粒状感。全編の最上層にさらに 2～3% の単色ノイズを追加。
写真は「コピー機」質感：二値化、トーン分離、3～4階調のみ。
線画は黒線・白塗り、灰色線ではない。線は細く、切れ目や点々があってよい。
クロム質感の物体はトーン分離されたレンダリングのように見える：全体に白い輪郭線と黒い輪郭、ハイライトは白芯の外側に同心円。

2. モーション言語

2.1 カメラ

ズーム：いくつかの固定段階の間を 3～5フレームで純粋リニアに遷移、到達後ハードストップ、イージングなし。一部で指数関数的イーズアウト（毎フレーム差分に0.6～0.75を乗算）または指数加速でのズームイン。また直接ハードカットも可能。
移動は3つの成分の合成：
1. 定常ドリフト、約 4 ワールド px/フレーム、全編を通して継続；
2. ビートフレームでのインパルス、その後 0.6～0.8 の割合でフレーム毎に減衰（例：+195, +33, +20, +14, +11, +9, +7）
3. カットジャンプ、1フレームで数百 px ジャンプ。
カメラはフレーム毎にリニアキーフレームにベイクする。ベジェイージングでこの曲線を推測しないこと。

2.2 ビート

イベントは6フレームごと（24 fps で 0.25秒）のグリッドに配置。全体で位相をずらしてもよい。要素はビートごとに1つずつ、同時にフェードインすることなく出現。

2.3 要素の出現と変化（コアテクニック）

シルエット占用：まず単色シルエットを1～2フレーム表示（白 → ブルーパープル → 実物、またはローズレッド → 実物）、その後実際のテクスチャに切り替え。「色調」エフェクトで白黒を同じ色にマッピングし、量を 100 → 0 にホールド。
1フレームのフリッカー / 大小交互：出現 → 1フレーム消灯 → 再点灯。または大・小・大・小と3回フリッカーして停止。
ラジアルワイプのビート分割：リング要素が最初に一部分だけスキャンされ、その後ビートごとにセグメント全体が新しい角度にジャンプ、セグメント間は 1～2°/フレームでドリフト。
先頭と末尾の2本のリニアワイプ：棒状要素がまず「先頭」が前方に伸び、続いて「末尾」が追い付き、残った部分が次の要素になる。
ホールドキーフレーム主体：位置・スケール・回転はすべてフレーム単位でジャンプ。本当のイージングは 2～3フレームのイーズアウトのみ。
ポップイン：0.3～0.7倍 → 1.0、2～3フレーム、1.1～1.2のオーバーシュート可。
ピン止め：特定の要素がカメラ移動時に画面に固定（カメラの逆変換を使用してフレームごとにキーフレーム）。一定時間後、ワールドに「返却」。
フレームレート混在：3D小アニメはしばしば 30 fps で作成され、24 fps タイムラインに埋め込まれる。4フレームごとに 1, 2, 1, 1 ステップで動く。リプロデュース時は ソースフレーム番号 = ⌊1.25·(f − f0) + 0.5⌋ でフレームを取得し、均一に補間しない。
ミラーとオフセットコピー：ミラーシルエットが出現するとき、下に白いコピーを重ね、4～5フレームかけてオフセット位置から重なるようにスライドさせる。

2.4 グローバルフラッシュフレーム

エフェクト	方法
ベース色ハードカット（黒、ローズレッド、ブルーパープル）	背景ソリッドレイヤーのホールドキーフレーム
二値化フラッシュ（1フレーム、画面が白黒2値になる）	最上位調整レイヤーに「二値化」
差分二値化フラッシュ（ベース色と異なる部分のみ白くなる）	ベース色と同じソリッドレイヤーを「差分」ブレンド、その上にさらに「二値化」
画面全体反転（一部の要素は元の色を維持）	最上位に「反転」；元の色を維持したいレイヤーは事前に自身で「反転」
局所的横方向引っ張り	狭い調整レイヤーに「トランスフォーム」、統一スケール解除、幅を数千%に設定
ページめくり	レイヤーのXスケールをフレームごとにホールド（ゼロクロスで負に）、アンカーポイントもフレームごとに移動、1フレームのオーバーシュート
エンディング	グラデーション横棒が階段状に敷き詰められてから退場、ベース色が段階的にニアブラックに沈む、タイトルは横に引き伸ばされて残像に

3. この種の動画をオリジナル制作する手順

まず長巻を描く：ワールド幅を決める（1秒あたり約 800～1000 ワールド px）、4つのセグメントに分割、各セグメントに1つのモチーフと1つの密度。
カメラテーブルを作成：各ショットにズーム段階、開始/終了 cx、ベース色、発生イベントを記述。段階間はリニアランプまたはハードカットのみ。
イベントを 6フレームグリッドに配置、ビートごとに1つの新要素；2～3秒ごとにグローバルフラッシュまたはベース色切り替えを1回配置。
各要素に第2.3節から1つの出現テクニックを選択、同じセグメント内で2回以上繰り返さない。
素材は第1.5節の語彙に従って準備、各素材には同時に単色シルエット版も準備。
最後に全編に粒状ノイズを追加、アクセントカラーが3色のみであることを確認。

4. After Effects 実装

4.1 プロジェクト構成

RB_REPLICA/
  01_コンポ/   RB_MAIN (1920×1080 完成品)   RB_WORLD (長巻ワールド、例：14400×2600)
  02_素材/   段落ごとにサブフォルダ（A_… B_… C_… D_…、定規とグローバルエフェクト）
  03_ソリッド/   背景色、調整レイヤー、マスク用ソリッド

RB_WORLD 内にすべてのワールド空間レイヤーを配置。ワールド点 (x, y) はコンポピクセル (x + OX, y + OY) に対応、周囲にマージンを確保。
RB_MAIN は下から順に：背景ソリッド → RB_WORLD（連続ラスタライズをオン、カメラはその位置/スケールキーフレーム）→ 画面空間オーバーレイ → 調整レイヤー（粒状、二値化、反転…）。
レイヤーは段落ごとにラベル色をつけ、素材ファイル名には段落プレフィックスを付け、500レイヤー以上の中での位置特定を容易に。

4.2 スクリプトで生成、手動配置しない

レイヤー数が多く、数値はすべて実測値であるため、シーン記述をスクリプトで生成してからインポートするのが適切：

Scene がレイヤーのリストを持つ。各レイヤーはワールド座標、時間範囲 span(f_in, f_out)、プロパティキーフレーム、エフェクトリストを持つ。
素材は関数で描画し、「関数ソース + パラメータ」のハッシュでキャッシュ、変更時のみ再描画。
After Effects プロジェクト JSON にエクスポートし、after effects MCP の ae_project_import_json でインポート。再構築時はIDで古いルートフォルダを削除してからインポート（インポートは追加のみ）。
JSON で保持できない設定（調整レイヤー、連続ラスタライズ、ブレンドモード）は別途リスト化し、インポート後に layer.set_props / layer.set_blend_mode で補完。
フレームごとに姿勢が異なる要素（回転する3D部品、フレームごとに変化するグラデーション）は「1フレーム1レイヤー」とし、各レイヤーは1フレームだけ生存。1つのレイヤーにエフェクトキーフレームを積むよりも信頼できる。

4.3 エフェクト使用メモ

リニアワイプ：角度は進行方向。+90 で左から消去、-90 で右から、180 で上から、0 で下から。ワイプはレイヤー自身の空間で計算されるため、レイヤーが回転している場合は角度を逆補正する必要がある。
ラジアルワイプ：開始角度 0 = 真上、時計回り。「両方」は開始角度を中心に両方向にワイプ。
16 bpc プロジェクトでの「二値化」のレベルは 0～1 で指定。
合成サイズと異なる調整レイヤーの場合、エフェクト内のポイントパラメータは「レイヤー → 合成」で一度変換される。
非等比率の静的スケールはできるだけ素材にベイクし、レイヤートランスフォームでは保持しない（プレビューと書き出しで不一致が生じる可能性あり）。

4.4 レンダリングと出力

AE 標準の H.264 では高彩度ローズレッドが暗くなることがある。「ロスレス」AVI で出力し、ffmpeg でエンコード：

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 プロジェクトの収集と整理

納品またはアーカイブ時には、プロジェクトと実際に使用した素材を独立したフォルダにまとめる（「ファイル → プロジェクトを整理 → ファイルを収集」と同等）：

レイヤーが参照する素材のみをコピー、プロジェクトパネルのフォルダ構造を維持して (Footage)/ に配置；
収集先ディレクトリを指す素材パスを持つプロジェクトを生成（新規プロジェクト → パスを変更したJSONをインポート → スイッチを補完 → 元のプロジェクトと同じビット深度とカラー設定に設定 → 別名保存）；
収集レポートを作成：合成仕様、素材数とサイズ、欠落ファイル、使用エフェクト（サードパーティプラグインへの依存、フォント）、収集されなかったもの；
検証：元のプロジェクトと収集プロジェクトで同じ2フレームをそれぞれレンダリング、ピクセル単位で完全に一致することを確認。さらに欠落素材がないことを確認；
完了後、AE を元のプロジェクトに戻す。ユーザーがプロジェクト内に配置した合成や素材は変更しない。

5. リファレンス動画のリプロデュース方法

目標は「同じ動画に見える」こと。素材は再描画と再生成で作成し、元のピクセルをそのままコピーしない。

5.1 手順

フレーム抽出（全フレーム、JPGで可）し、基本パラメータを記録：解像度、フレームレート、フレーム数、モーションブラーの有無、音声トラックの有無。
まずカメラを解く：全編を通して剛性のある基準（ここではスケール定規）を見つけ、フレームごとにズームと移動を計測、カメラテーブルにベイク。
ワールドを構成：カメラがわかれば任意のフレームをワールド座標に逆投影可能。以降のすべての計測はワールド座標で行う。
要素リストを作成：各要素について、ワールド位置、出現フレーム、消失フレーム、出現テクニック、フレームごとの変化を記録。
初版を構築、レンダリング、フレームごとに比較、ギャップに基づいて反復。各バージョンでは1つの問題グループのみを修正、修正後再レンダリングして再度比較。

5.2 計測の規律

カメラ監査：各フレームの目盛りを1本ずつ特定し、ワールド座標に変換、理想的なグリッドと比較。残差は同じショット内で一定のはず。一定でなければカメラテーブルが間違っている。このステップで、8 px と 49 px の位置ずれエラーが2箇所発見された。これらは並べた比較画像では全く見えなかったが、以降のすべての計測に誤差をもたらしていた。
数値検出により目視を代替：グリッド付き切り抜き画像から座標を読むと 3～8 px の系統誤差が生じる。重要な値は検出器を使用：色閾値＋バウンディングボックス（ブロックの先端・末端）、連結成分の重心（ハイライト、マーカーポイント）、円・楕円フィッティング（球、環、軌道）、行ごとの統計（線の行番号と太さ）。元の動画とリプロデュースで同じ検出器をそれぞれ実行し比較。
ワールドアラインされた切り抜き画像：比較時は元の動画とリプロデュースの同一ワールド矩形を並べて切り抜き、画面スクリーンショットを比較しない。特にカメラが動いているショット。
フレーム単位、飛ばさない：2フレームおきのサンプリングでは、4フレーム周期の回転を「ほとんど動いていない」と見誤る可能性がある。
ある要素が「おかしな動き」をする場合、まずカメラを疑い、次に要素を疑う。

5.3 GPT / Codex にリファレンスフレームから素材を再描画させる

写真、線画、コラージュ、手描き素材に適している：

その要素が最もクリーンに写っている 1～2フレームを切り出し、2～4倍に拡大してリファレンス画像とする。
プロンプト構造：「リファレンス画像の X を忠実に再描画」→ 各オブジェクトとその見え方を項目ごとに記述 → 取り除くべきもの（定規、重なっている線、隣接要素、テキスト）をリスト → 透明背景を要求。
モデルは主体をキャンバスいっぱいに引き伸ばす傾向がある：リファレンス画像を出力アスペクト比にパディングし、「比率を維持し、余白を残す」と明記。
プレビュー画像は透明チャンネルを表示せず、光るように見える。判断前にアルファを確認し、二値化してから使用。
複数オブジェクトの画像はレイアウトがずれる：画像をブロックに分割し、各ブロックを実測のワールド矩形に従って配置、各ブロックの非等倍スケーリングを許可。
モデルが写し込んだサードパーティの商標は消去する。
生成タスクはバックグラウンドで並行実行可能。その間も計測やプログラム部分の作業を継続。

生成モデルに適さないもの：動きやトポロジーが正確でなければならないもの（回転する環、融合したビーズの連なり、フレームごとに変化するグラデーション、ワイヤーフレーム）。これらはフィッティングした幾何パラメータからプログラムでレンダリング。生成モデルはテクスチャと絵柄のみを担当。ユーザーが提案したツールからの逸脱があれば、報告書でその理由を明確に説明する。

5.4 3D小物のフィッティング手順

顕著な特徴（ハイライト）のフレームごとの位置を追跡；
投影軌道（楕円）をフィッティング、その後遠近感のあるモデルで「遠くは小さく、近くは大きく、遠くは粗く、近くは密」を説明；
位相系列から回転速度とフレームレート変換のリズムを読み取り；
フィッティングパラメータでフレームごとにレンダリング、そのレンダリング結果と元の動画を重ねて位相を確認。

5.5 比較と納品

各バージョンの出力：完成品、上に元動画、下にリプロデュースでフレーム番号付きの同期比較動画、数枚のキーフレーム上下比較画像。
ドキュメントに記録：カメラテーブル、カメラ曲線、要素ごとの実測値、各バージョンの変更点、まだ差異がある箇所。
報告時は、合っていない部分を明確にし、その差異の種類（形状、明暗、位置、タイミング）を説明し、変更点だけを報告しない。

6. チェックリスト

納品前に項目を1つずつ確認：

7. よくある問題

高彩度色のレンダリング後が暗い：ロスレス＋ffmpeg の bt709 変換を行っていない。
要素が2つのショット間で数十 px ずれる：カメラテーブルがカットジャンプ部分で1目盛分の周期を過大または過小カウントしている。
ワイプ方向が間違っている：リニアワイプの角度は進行方向。レイヤーが回転している場合は補正が必要。
二値化フレームが真っ黒または真っ白：16 bpc でレベルを 0～255 で指定してしまった。
生成した素材の比率が合わない：リファレンス画像を出力アスペクト比にパディングしていない。
ピン止め要素がズーム時に動いてしまう：逆変換は毎フレームのカメラ値を使用してフレームごとにホールドキーフレームを打つ必要がある。最初と最後だけでは不十分。

novahanser/rollback-motion-recreation

rollback-motion-recreation とは？

お気に入りのAIに質問する

ドキュメント