shot-composition

ショット構図

フレームを構成し、カメラを動かします。グリッドシステム、セーフエリア、焦点の階層、ネガティブスペース、視差レイヤー、そしてレイアウトが時間の経過とともに視線をどう導くかを扱います。構図メモ、レイヤー構造（bg/mid/fg）、数値を含む具体的なカメラ移動プランを作成します。

使用する場面

• フレームのレイアウト、焦点、ネガティブスペースを定義するとき。
• 要素の登場・退場方向やモーションパスを計画するとき。
• カメラのプッシュ／プル、パン、フォロー、視差の動きを設計するとき。
• セーフエリアを考慮しながら、16:9、9:16、1:1の各比率に構図を適応させるとき。

判断ツリー

What are you staging?
├─ A static frame's layout
│   └─ set grid → place ONE focal point on a thirds power point
│      → rank hierarchy (size>contrast>color>position) → reserve negative space
├─ Where things enter / leave
│   └─ follow reading direction; nearest edge; ease-out in, ease-in out
│      (new content → from right/below; back/undo → reverse it)
├─ A sense of depth / a camera move
│   └─ split into bg/mid/fg layers (the three motion layers)
│      → ONE camera move per beat (push | pan | follow | parallax), ease-in-out
└─ One comp across aspects (16:9 / 9:16 / 1:1)
    └─ master in 16:9, focal in the center band → RESTACK (don't crop) for 9:16
       → keep critical content inside title-safe margins

相互参照 — 共通フレームワークを適用します。 このスキルは animation-principles の空間的な側面を扱います。明示的に適用してください。

• 1/3 ルール（animation-principles）には2つの形があり、このスキルでは両方を 空間的に 使用します。（a）構図の三分割 — 焦点を三分割法のパワーポイント（33%／67%）に配置します。（b）移動距離 — 要素は、中間キーフレームまたはスケール／不透明度の変化を挟まずに、フレームの約1/3を超えて移動しません。これにより、登場を明瞭に保ちます。
• 3つのモーションレイヤー（animation-principles：Primary／Secondary／Ambient）は、奥行きに直接対応します。前景 = Primary（視線が追う動き）、中景 = Secondary（被写体と、それを支えるリアクション）、背景 = Ambient（ゆっくりとした、コントラストの低い動き）です。視差の速度は、その役割に応じて調整します。
• カメラ移動に数値を割り当てる前に、3つの柱（感情的な意図／ビジュアルナラティブ／モーションの技術）と、選択したモーションパーソナリティ（motion-art-direction）を決めます。プレミアムな表現にはゆっくりとした長いプッシュが、エネルギッシュな表現には素早いパンが適しています。

基本的なワークフロー

1. グリッドを設定する

グリッドは、整列とリズムを生み出します。横長のウェブ／動画では、半分、3分の1、4分の1、6分の1に分割できる12カラムグリッドを標準とし、ガターと外側のマージンを設けます。幅1920pxのフレームの場合、外側のマージンは80〜120px、カラム数は12、ガターは24〜32pxです。

content_width = frame_width - 2 * margin
column_width  = (content_width - (cols - 1) * gutter) / cols

例（幅1920、マージン100、ガター24、12カラム）：コンテンツ幅 = 1720、カラム幅 = (1720 - 11*24)/12 = 121.3px。

ベースライングリッド（垂直方向のリズム）には、標準的な間隔単位である8pxを使用します。視覚的な統一感を出すため、サイズとスペースはすべて8の倍数（8/16/24/32/48/64）にします。

2. 焦点を配置する

三分割法を使います。フレームを3x3のグリッドに分け、主要な被写体を三分割線上、または交点（「パワーポイント」）に配置します。作品で静けさや格式を表現するために意図的に対称性を使う場合を除き、中央には配置しません。交点は、おおよそ水平方向・垂直方向ともに33%／67%の位置にあります。

視線を導くため、次の優先順位で視覚的な階層を構築します。サイズ > コントラスト > 色 > 位置。最も大きく、最もコントラストの高い要素が最初に注目を集めます。1フレームにつき主要な焦点を必ず1つだけ設定し、ほかの要素はそれを支えるものとし、決して競合させません。

3. ネガティブスペースでリズムを生み出す

フレームを要素で埋め尽くさないでください。焦点の周囲にゆとりあるネガティブスペースを設けると、プレミアムで自信に満ちた印象になり、動きにも余裕が生まれます。ホワイトスペースは余りではなく、積極的に使う構図要素です。

4. 奥行きとパララックスのためにシーンをレイヤー化する（背景／中景／前景）

構図を奥行きのレイヤーに分けます。背景（動きが最も遅く、コントラストが最も低く、彩度を落としたりぼかしたりすることが多い）、中景（被写体）、前景（動きが最も速く、画面を横切る際にぼかす場合があります）。パララックスとは、奥行きを表現するためにレイヤーごとに異なる速度で動かすことです。

これらの奥行きレイヤーは、Z 軸に投影された animation-principles の3 つのモーションレイヤーです。それぞれのレイヤーの役割によって、速度、コントラスト、どの程度の動きを付けるかが決まります。

奥行き	モーションレイヤー	パララックス速度	コントラスト／焦点	配置するもの
背景	アンビエント	0.1～0.3x	低め。彩度を落としたり、ぼかしたりすることが多い	空、グラデーション、テクスチャ、背景の装飾
中景	セカンダリー	0.5～0.7x	中程度。被写体を引き立てます	被写体の環境、補助的な要素
前景	プライマリー	1.0～1.5x	被写体はシャープに。前景の小道具は横切る際にぼかします	主役となる被写体と最も近くにある小道具

前景の速度は、非常に近くにあるように見せるために 1.0 を超えてもかまいません。目が追うのはプライマリーの動きです。2 つのレイヤーに競合するプライマリーの動きを与えないでください。

5. カメラの動き（2D と 3D の両方で有効）

• プッシュ／プル — 被写体に向かって、または被写体から離れるようにスケールします（ドリー）。親密さを演出したり、状況を見せたりできます。800～2000ms、イーズイン・アウト。
• パン／チルト／移動 — シーン内でフレームを移動します。空間を見せたり、動きを追ったりできます。
• フォロー — 動く被写体がフレーム内に収まるようにします（多くの場合、動きの進行方向に余白を残し、中央から少しずらします）。
• パララックス — 奥行きを感じさせるレイヤー化された動きです。

1 ショットにつき 1 つの意図にします。 プッシュ、パン、回転を同時に行わないでください。動きを組み合わせると混乱した印象になります。その場面の意図に合う動きを 1 つ選びます。インラインのタイミングに関する基本事項：カメラの動きにはイーズイン・アウト（cubic-bezier(0.65, 0, 0.35, 1)）を使います。連続ループ以外では linear を使わないでください。ゆっくりした動きほど、映画のような印象になります。

6. 入退場の方向に意味を持たせる

読み進める方向（LTR のロケールでは左から右、上から下）に沿った動きは自然で滑らかに感じられます。反対方向に動かすと緊張感が生まれたり、「戻る／取り消す」という意味が伝わったりします。意図に合わせて方向を選びます。

• 新しいコンテンツを表示する -> 右または下から入場させます。
• 閉じる／戻る -> 右または下へ退場させるか、入場時と反対方向に動かします。
• さらに深く掘り下げる -> スケールを大きくする／プッシュインします。

要素は通常、最も近いフレームの端から入退場させます。入場時は少しオーバーシュートさせ（イーズアウト）、退場時は加速させます（イーズイン）。

7. セーフエリアと複数のアスペクト比への対応

重要なコンテンツ（テキスト、ロゴ、顔、CTA）はすべてタイトルセーフマージンの内側に配置し、切り取られたり、プラットフォームの UI に隠れたりしないようにします。

アスペクト比	用途	タイトルセーフマージン	備考
16:9	YouTube、ウェブのヒーロー画像	全辺で約 5%	放送用のタイトルセーフは、従来は 10%
9:16	Reels、TikTok、Stories	上部約 12～14%、下部約 18～20%、左右約 6%	プラットフォームの UI が上下の領域を占めます
1:1	フィード投稿	全辺で約 6～8%	対称
4:5	フィード（縦長）	左右約 6%、上下約 8%	フィードの表示領域を最大限に活用します

あらゆるトリミングに耐えられるよう、焦点を十分に中央寄りに配置し、そのうえでアスペクト比ごとに補助要素を再配置します。16:9 から 9:16 に変更する場合は、左右を切り取るだけでなく、横並びの要素を縦に並べ直します。

作成例

GOOD — プロダクトヒーロー、16:9 → 9:16

概要：アプリのローンチヒーロー。Premium の個性を持ち、ウェブヒーローと Reel の両方で使える必要があります。

• グリッド：1920×1080、マージン 100、ガター 24、12 列。スマートフォンのモックアップは 7～11 列（右側のパワーコラム）にまたがります。
• 焦点：スマートフォン画面を右側の三分割交点（1280, 360）に配置します。中央には置きません。焦点は 1 つです。見出し（1～5 列）は二次要素として、コントラストを下げます。
• 奥行き（3 つのモーションレイヤー）：背景＝柔らかなグラデーションのドリフト、0.2x、Ambient。中景＝スマートフォンのモックアップ、0.6x、Secondary stage。前景＝ピントの合っていない UI チップを 1 つ通過させます。1.2x ＋ 3px のぼかしで、Primary の奥行きの手がかりとして認識させます。
• カメラ：単一のプッシュイン。スマートフォン画面を原点に、1600ms かけて scale 1.0→1.10、ease-in-out で動かします。Premium（ゆっくり、オーバーシュートなし）に合致します。パンは追加しません。
• 9:16 への調整：縦に再配置します。見出しをスマートフォンの上に移し、スマートフォンを上部中央寄りに引き上げて、下部 19% の CTA／ナビゲーション領域を空けます。文字サイズは +20% にします。焦点は中央の帯から始まるため、クロップしても維持されます。

効果がある理由：焦点が 1 つで、奥行きの役割が割り当てられ、カメラの動きが 1 つだけです。無造作にクロップするのではなく、安全領域を考慮して再配置します。

ANTI-PATTERN —「すべて中央、すべて動く」フレーム

• スマートフォンのモックアップを中央に、見出しをその上に中央揃え、ロゴをその下に中央揃えで配置します。3 つの要素が同じ軸上で競い合い、階層もパワーポイントもありません。
• 3 つのレイヤーがすべて同じ 1.0x の速度で左にスライドします。パララックスも奥行きもなく、「テンプレート全体が動いた」と認識されます（中間キーフレームなしの全幅スライドであり、1/3 ルール／距離に違反します）。
• カメラがプッシュ、パン、わずかな回転を同時に行います。動きが混乱し、意図が定まりません。
• 9:16 は 16:9 の両端をクロップして作られています。見出しとロゴが切れ、スマートフォンは低すぎてナビゲーションバーの後ろに隠れます。

修正方法：焦点となるパワーポイントを 1 つ選び、各レイヤーに奥行きの役割と異なるパララックス速度を割り当てます。カメラの動きは 1 つにし、クロップするのではなく縦向きに再配置します。

よくあるミス

症状	理由	修正
フレームが平坦に感じられる／「テンプレートが動いた」ように見える	すべてのレイヤーが同じ速度で動き、奥行きの役割がない	背景／中景／前景に Ambient／Secondary／Primary の役割と、0.2／0.6／1.2x のパララックスを割り当てます
どこを見ればよいのかわからない	2 つ以上の要素が同じサイズとコントラストで、すべて中央にある	三分割のパワーポイントに焦点を 1 つ置きます。サイズ＞コントラスト＞色＞位置の順に優先順位を付けます
カメラの動きが混乱して見える	プッシュ、パン、回転を組み合わせている	1 ビートにつき動きは 1 つにします。意図に合うものを選びます
スマートフォンでコンテンツが切れる	16:9 向けにデザインし、9:16 にクロップしている	縦向きに再配置します。重要なコンテンツはタイトルセーフマージン（9:16 では上部 13%／下部 19%）内に収めます
登場が「イベント」ではなく「スライド」に見える	要素が 1 回の途切れない動きでフレームの 1/3 を超えて移動する	中間キーフレームを入れるか、移動に scale／opacity を組み合わせます（1/3 ルール、距離）
安っぽい／窮屈に見える	フレームの端から端まで埋めている	焦点の周囲にネガティブスペースを確保します。これは能動的な要素です
モーションがストーリーの邪魔をする	意図を決める前に数値を選んでいる	まず Three Pillars と Motion Personality を決めてから、動きに数値を設定します

成果物 — コンポジションプラン

優れたコンポジションプランは実装スキル（gsap-web、remotion-video、after-effects）に渡すもので、次の内容を含みます。

• フレーム仕様：アスペクト比、解像度、fps、グリッド（列数／マージン／ガター）、ベースライン単位。
• 焦点：三分割のパワーポイント上の座標（px または %）と、すべての要素の階層順位。
• レイヤーマップ：各要素に背景／中景／前景 → Ambient／Secondary／Primary を割り当て、パララックス速度を指定します。
• 登場／退出：要素ごとに、辺、方向、イージングの種類、移動距離が 1/3 を超えるかどうか（超える場合はその分割方法）。
• カメラの動き：単一の動き、そのプロパティと from→to の値、時間、イージング、transform-origin。
• 安全領域：対象アスペクト比ごとのタイトルセーフマージンと、縦向きに再配置する計画。
• 相互参照：タイミングを決める Motion Personality と Pillars の判断内容。

完了前のチェックリスト

• 主役となる焦点は1つだけにし、三分割法の交点に配置します（または意図的に対称にします）。
• 階層を決めます（サイズ > コントラスト > 色 > 位置）。副次要素が競合しないようにします。
• 主役となる焦点の周囲に余白を確保します。
• すべての要素に奥行きレイヤー（bg/mid/fg = Ambient/Secondary/Primary）と視差速度を割り当てます。
• カメラの動きは重ねず、1つだけにします。イージングを適用します（ループでない限り、リニアにはしません）。ヒーローの動きは800～2000msにします。
• 登場・退出は最も近い端から行い、読み進める方向に沿わせます。登場時はイーズアウト、退出時はイーズインアウトを適用します。
• 中間キーフレームを挿入するか、スケール／不透明度を変化させない限り、要素をフレームの1/3を超えて移動させません。
• 重要なコンテンツは、すべての対象アスペクト比でタイトルセーフマージン内に収めます。縦長レイアウトでは、切り抜くのではなく再配置します。
• 数値を決める前に、モーションの個性と3つの柱を確定します。

クイックリファレンス

項目	デフォルト
グリッド	12列、8pxのベースライン、8の倍数の間隔
焦点の配置	三分割法の交点。中央には配置しない
階層の順序	サイズ > コントラスト > 色 > 位置
奥行きレイヤー	bg / mid / fg、視差0.2x / 0.6x / 1.2x
カメラ	一度に1つの動き、イーズインアウト、800～2000ms
登場／退出	読み進める方向に沿わせる。登場時はイーズアウト、退出時はイーズインアウト
9:16のセーフエリア	上12%、下18%、左右6%

参考ファイル

• references/camera-and-grids.md — 計算例付きのグリッド計算、アスペクト比ごとのセーフエリア割合の全表、視差レイヤーのコード（CSSスクロール＋JSポインター＋Three.js）、およびカメラの動きの名前付きレシピ（プッシュイン、ウィップパン、オービット、ドリーズーム）とキーフレーム値