ショット構図 は何をしますか？
フレームを構成し、カメラを動かす：グリッドシステム、セーフエリア、フォーカルヒエラルキー、ネガティブスペース、パララックスレイヤリング、そして時間経過とともにレイアウトがどのように視線を誘導するか。構図ノート、レイヤー構造（bg/mid/fg）、具体的な数値を含むカメラムーブプランを生成します。
使用するタイミング
- フレームのレイアウト、フォーカルポイント、ネガティブスペースを定義する。
- 要素の出入り方向とモーションパスを計画する。
- カメラのプッシュ/プル、パン、フォロー、パララックスムーブを設計する。
- 16:9、9:16、1:1の間でセーフエリアを考慮して1つの構図を適応させる。
決定木
何を構築しますか？
├─ 静的フレームのレイアウト
│ └─ グリッドを設定 → 三分割法のパワーポイントに1つのフォーカルポイントを配置
│ → ヒエラルキーをランク付け（size>contrast>color>position）→ ネガティブスペースを確保
├─ 要素の出入り位置
│ └─ 読み方向に従う；最も近いフレームエッジ；イーズアウトで入場、イーズインで退場
│ （新しいコンテンツ → 右/下から；戻る/元に戻す → その逆）
├─ 奥行き感 / カメラムーブ
│ └─ bg/mid/fgレイヤー（3つのモーションレイヤー）に分割
│ → ビートごとに1つのカメラムーブ（push | pan | follow | parallax）、イーズインアウト
└─ 複数のアスペクトにわたる1つの構図（16:9 / 9:16 / 1:1）
└─ 16:9でマスターを作成、フォーカルは中央バンドに配置 → 9:16の場合はリスタック（クロップはしない）
→ 重要なコンテンツをタイトルセーフマージン内に維持
相互参照 — 共有フレームワークを適用する。 このスキルは animation-principles の空間的半分です。明示的に適用してください：
- 1/3ルール（
animation-principles）には2つの形式があり、このスキルは両方を空間的に使用します：(a) 構図の三分割法 — フォーカルポイントを三分割法のパワーポイント（33%/67%）に配置；(b) 距離 — どの要素もフレームの約1/3以上を中間キーフレームやスケール/不透明度の変更なしに移動しないため、入場は読みやすいままです。 - 3つのモーションレイヤー（
animation-principles：プライマリ / セカンダリ / アンビエント）は直接的に奥行きにマッピングされます：前景 = プライマリ（目が追う動き）、中景 = セカンダリ（被写体とそれを支えるリアクション）、背景 = アンビエント（ゆっくりとした、低コントラストの生命感）。パララックス速度はその役割に応じて変化します。 - カメラムーブに番号を振る前に、3つの柱（感情的意図 / 視覚的ストーリーテリング / モーションクラフト）と選択したモーションパーソナリティ（
motion-art-direction）を確定してください — プレミアムはゆっくりとしたロングプッシュを好み、エネルギッシュはホイップパンを好みます。
コアワークフロー
1. グリッドを確立する
グリッドは整列とリズムを与えます。デフォルトは12カラムグリッド（ランドスケープのウェブ/動画用。半数、3分の1、4分の1、6分の1に分割可能）で、ガターと外側マージンを含みます。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のグリッドに分割し、主要な被写体を3分の1ライン上またはその交点（「パワーポイント」）に配置します。真ん中は避けてください — 作品が意図的に静止/フォーマルさのために対称性を使用する場合を除きます。交点はおおよそ水平/垂直の33%/67%の位置にあります。
視覚的ヒエラルキーを以下の優先順位で構築し、視線を誘導します：size > contrast > color > position。最も大きく、最もコントラストの高い要素が最初に注目を集めます。フレームごとに正確に1つの主要なフォーカルポイントを確立します。セカンダリ要素はそれを支援し、決して競合しません。
3. ネガティブスペースをリズムとして使う
フレームを埋め尽くさないでください。フォーカルポイントの周囲に十分なネガティブスペースがあると、プレミアムで自信のある印象を与え、モーションに呼吸する余地を与えます。ホワイトスペースは、残り物ではなく、能動的な構図要素です。
4. 奥行きとパララックスのためにシーンをレイヤー化する（bg / mid / fg）
構図を奥行きレイヤーに分割します：背景（最も遅い、最もコントラストが低い、しばしば彩度低下/ぼかし）、中景（被写体）、前景（最も速い、横切るときにぼける可能性あり）。パララックス = 異なる速度でレイヤーを動かし、奥行きをシミュレートします。
これらの奥行きレイヤーは、animation-principles の3つのモーションレイヤーをZ軸に投影したものです — 各レイヤーの役割が、その速度、コントラスト、および得られるモーションの量を決定します：
| 奥行き | モーションレイヤー | パララックス速度 | コントラスト/フォーカス | ここに何があるか |
|---|---|---|---|---|
| 背景 | アンビエント | 0.1–0.3倍 | 低く、しばしば彩度低下/ぼかし | 空、グラデーション、テクスチャ、セット dressing |
| 中景 | セカンダリ | 0.5–0.7倍 | 中程度；被写体を支援 | 被写体の環境、支援要素 |
| 前景 | プライマリ | 1.0–1.5倍 | 被写体はシャープ；前景の小道具は横切るときにぼける | ヒーロー被写体 + 最も近い小道具 |
前景は非常に近くに見せるために1.0を超えることがあります。プライマリムーブは目が追う動きです。2つのレイヤーに競合するプライマリモーションを与えないでください。
5. カメラ言語（2Dと3Dで機能）
- プッシュ / プル — 被写体に向かって/から離れるようにスケール（ドリー）。親密さを構築したり、コンテキストを明らかにしたりします。800-2000ms、イーズインアウト。
- パン / チルト / ムーブ — フレームをシーン全体に平行移動します。空間を明らかにし、アクションを追います。
- フォロー — 動く被写体をフレーム内に収め続けます（しばしば中心からわずかにずれ、動きの先を行く）。
- パララックス — 奥行きを売り込むレイヤー化された動き。
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、ストーリーズ | 上部約12-14%、下部約18-20%、側面約6% | プラットフォームUIが上部と下部を占有 |
| 1:1 | フィード投稿 | 全辺約6-8% | 対称 |
| 4:5 | フィード（縦長） | 側面約6%、上下約8% | フィードの表示領域を最大化 |
すべてのクロップに耐えられるようにフォーカルポイントを十分中央に設計し、セカンダリ要素はアスペクトごとに再フローさせます。16:9 -> 9:16の場合、単に側面をクロップするのではなく、水平方向の配置を垂直方向にリスタックします。
実例
GOOD — プロダクトヒーロー、16:9 → 9:16
概要: アプリローンチヒーロー、プレミアムパーソナリティ、ウェブヒーローとReelの両方で機能する必要があります。
- グリッド: 1920×1080、マージン100、ガター24、12カラム。電話モックアップはカラム7–11（右パワーカラム）にまたがる。
- フォーカル: 電話画面を右側の三分割交点（1280、360）に — 中央ではない。1つのフォーカルポイント。見出し（カラム1–5）はセカンダリ、低コントラスト。
- 奥行き（3つのモーションレイヤー）: bg = ソフトグラデーションドリフト、0.2倍、アンビエント。mid = 電話モックアップ、0.6倍、セカンダリステージ。fg = 1つの焦点の合っていないUIチップが漂う、1.2倍 + 3pxブラー、プライマリ奥行きキューとして読まれる。
- カメラ: 単一のプッシュイン、スケール1.0→1.10を1600msイーズインアウト、原点は電話画面上 — プレミアムに一致（遅く、オーバーシュートなし）。パンは追加しない。
- 9:16適応: リスタック — 見出しは電話の上に移動、電話は下部19%のCTA/ナビゾーンを避けるために上半分に引き上げ、タイプは+20%。フォーカルは中央バンドから始めたため、クロップを生き残る。
なぜ機能するか：1つのフォーカルポイント、奥行きの役割が割り当てられ、1つのカメラムーブ、盲目的なクロップではなくセーフエリアを認識したリフロー。
アンチパターン — 「すべてが中央、すべてが動く」フレーム
- 電話モックアップが真ん中、見出しはその上に中央揃え、ロゴは下に中央揃え → 3つの要素が同じ軸上で競合、ヒエラルキーなし、パワーポイントなし。
- 3つのレイヤーすべてが同じ1.0倍の速度で左にスライド → パララックスなし、奥行きなし、「テンプレート全体が動いた」と読まれる（1/3ルール/距離違反：中間キーフレームなしの全幅スライド）。
- カメラはプッシュ + パン + わずかな回転を同時に行う → 混沌、単一の意図なし。
- 9:16は16:9の側面をクロップして作成 → 見出しとロゴがクリップされ、電話がナビゲーションバーの後ろに低くなりすぎる。
修正：1つのフォーカルパワーポイントを選択、各レイヤーに奥行きの役割 + 異なるパララックス速度を割り当て、1つのカメラムーブ、クロップではなく垂直方向にリスタックする。
よくある間違い
| 症状 | 理由 | 修正 |
|---|---|---|
| フレームが平坦に見える / 「テンプレートが動いた」 | すべてのレイヤーが1つの速度で動く；奥行きの役割がない | bg/mid/fgにアンビエント/セカンダリ/プライマリの役割 + 0.2/0.6/1.2倍のパララックスを割り当てる |
| 目がどこを見ればいいかわからない | 2つ以上の要素が同じサイズ/コントラストで、すべて中央にある | 1つのフォーカルポイントを三分割法のパワーポイントに；size>contrast>color>position でランク付け |
| カメラムーブが混沌として読まれる | プッシュ + パン + 回転が組み合わされている | ビートごとに1つのムーブ；意図に最も適したものを選択する |
| スマートフォンでコンテンツがクリップされる | 16:9用に設計され、9:16にクロップされた | 垂直方向にリスタックする；重要なコンテンツをタイトルセーフマージン内に維持する（9:16では上部13% / 下部19%） |
| 入場が「イベント」ではなく「スライド」と読まれる | 要素がフレームの1/3以上を1つの途切れない動きで移動する | 中間キーフレームで分割するか、移動とスケール/不透明度をペアにする（1/3ルール、距離） |
| 安っぽく/窮屈に見える | フレームが端から端まで埋められている | フォーカルポイント周辺にネガティブスペースを確保する；それは能動的な要素である |
| モーションがストーリーと戦っている | 意図の前に数値が選ばれている | 最初に3つの柱 + モーションパーソナリティを確定し、次にムーブに番号を振る |
成果物 — 構図計画
優れた構図計画は、実装スキル（gsap-web、remotion-video、after-effects）に渡され、以下を含みます：
- フレーム仕様: アスペクト、解像度、fps、グリッド（カラム数 / マージン / ガター）、ベースライン単位。
- フォーカルポイント: 三分割法のパワーポイント上の座標（pxまたは%）＋すべての要素のヒエラルキーランキング。
- レイヤーマップ: 各要素が割り当てられた bg/mid/fg → アンビエント/セカンダリ/プライマリ、パララックス速度付き。
- 入退場: 要素ごと — エッジ、方向、イージングファミリー、移動が1/3を超えるかどうか（そしてどのように分割されるか）。
- カメラムーブ: 単一のムーブ、そのプロパティ + from→to の値、持続時間、イージング、transform-origin。
- セーフエリア: ターゲットアスペクトごとのタイトルセーフマージン + 垂直方向のリスタック計画。
- 相互参照: どのモーションパーソナリティとどの柱の決定がタイミングを決定するか。
終了前のチェックリスト
- 正確に1つの主要なフォーカルポイントがあり、三分割法のパワーポイント上にある（意図的な対称性の場合を除く）。
- ヒエラルキーがランク付けされている（size > contrast > color > position）。セカンダリは競合しない。
- フォーカルポイント周辺にネガティブスペースが確保されている。
- すべての要素に奥行きレイヤー（bg/mid/fg = アンビエント/セカンダリ/プライマリ）とパララックス速度が割り当てられている。
- 1つのカメラムーブで、積み重なっていない。イージングされている（ループ以外はlinearではない）。ヒーロームーブは800–2000ms。
- 入退場は最も近いエッジを使用し、読み方向に従い、イーズアウト入場/イーズイン退場である。
- どの要素も、中間キーフレームやスケール/不透明度の変更なしにフレームの1/3以上を移動しない。
- 重要なコンテンツはすべてのターゲットアスペクトのタイトルセーフマージン内にある。垂直方向はクロップではなくリスタックされている。
- 数値を選択する前に、モーションパーソナリティと3つの柱が確定されている。
クイックリファレンス
| 項目 | デフォルト |
|---|---|
| グリッド | 12カラム、8pxベースライン、8の倍数のスペーシング |
| フォーカル配置 | 三分割法のパワーポイント、真ん中ではない |
| ヒエラルキーの順序 | size > contrast > color > position |
| 奥行きレイヤー | bg / mid / fg、パララックス 0.2倍 / 0.6倍 / 1.2倍 |
| カメラ | 一度に1つのムーブ、イーズインアウト、800-2000ms |
| 入退場 | 読み方向に従う；イーズアウト入場、イーズイン退場 |
| 9:16 セーフ | 上部12%、下部18%、側面6% |
参考ファイル
references/camera-and-grids.md— グリッド計算の実例、アスペクトごとの完全なセーフエリア百分率テーブル、パララックスレイヤリングコード（CSSスクロール + JSポインター + Three.js）、キーフレーム値付きの名前付きカメラムーブレシピ（プッシュイン、ホイップパン、オービット、ドリーズーム）。