1仕組みと動作原理

エントリポイントはデシジョンツリーであり、まず4つの課題カテゴリ（静的構図／イン・アウト／深度とカメラ／マルチアスペクト比適応）にトリアージしてから、各ルールへと遷移します。

skills/shot-composition/SKILL.md

├─ A static frame's layout

ここでの意図：「カメラワークを選んでから構図を考える」という一般的な手順の乱れを是正し、ツリーのルートで「何を配置しているのか」を問いかけます。4つのブランチそれぞれに判定基準とアウトプットを定義し、静的構図のルールを誤ってカメラワークに適用する事態を防ぎます。

空間レイヤーは animation-principles を明示的に継承：三分割法を三分割点および移動範囲の上限として空間化し、3階層のモーション役割をZ軸に投影して深度レイヤーとして扱います。

skills/shot-composition/SKILL.md

**Cross-reference — apply the shared frameworks.** This skill is the spatial half of `animation-principles`. Apply them explicitly:

ここでの意図：2つのスキルは同一の判定体系における「時間側」と「空間側」にあたります。同一パック内での用語の乖離を防ぐため、テーブルの複製ではなく明示的な参照を義務付けています。

グリッドは抽象的な形容詞ではなく数式で定義：12カラム、8pxベースライン、カラム幅算出式、および幅1920における具体的な計算例を提示します。

skills/shot-composition/SKILL.md

column_width = (content_width - (cols - 1) * gutter) / cols

ここでの意図：レイアウトを「なんとなく整っている」状態から検証可能な数値（例：幅1920 / マージン100 / ガター24 → カラム幅121.3px）へと落とし込み、構図決定を下流の実装で正確に再現できるようにします。

フォーカスは単一に制限し、階層には固定の優先順位を適用：size > contrast > color > position。

skills/shot-composition/SKILL.md

Build **visual hierarchy** in this priority order to direct the eye: **size > contrast > color > position**.

ここでの意図：「視線がどこから向かうか」の機械的な順位付けと、「1フレームにつき主フォーカスは1つのみ」という制約を組み合わせることで、「画面が平坦」「どこを見ればいいかわからない」といった問題の要因を解明します。

深度レイヤーをモーションの役割へ直接マッピングし、視差速度倍率を設定：背景 0.1〜0.3x（Ambient）、中景 0.5〜0.7x（Secondary）、前景 1.0〜1.5x（Primary）。

skills/shot-composition/SKILL.md

| Background | Ambient | 0.1–0.3x | low, often desaturated/blurred | sky, gradient, texture, set dressing |

ここでの意図：視差を適当な係数任せにせず、役割に基づいて速度差を決定し、2つのレイヤーが同時に主アクションを持つことを禁止します。これは「テンプレート全体が平行移動しているように見える」問題を解決するための処方箋です。

カメラ言語は「1カット1意図」：プッシュ・パン・ロールの同時適用を禁止し、2D/3D共通の4つのカメラワークと継続時間を規定します。

skills/shot-composition/SKILL.md

**One shot, one intent.** Don't push + pan + rotate simultaneously — combined moves read as chaotic.

ここでの意図：カメラワークを「エフェクトの重ねがけ」から単一の意図に基づく決定へとシフトさせます。主役級カットの800〜2000ms、ease-in-out、「緩やかさが映画的質感をうむ」といった原則を本文および reference に記載しています。

イン・アウトの方向性に意味を持たせ（視線誘導・読字方向に沿う動きは前進、逆方向は後退）、最も近い画面端からのイン・アウトを義務付けます。

skills/shot-composition/SKILL.md

Motion that follows reading direction (left-to-right, top-to-bottom in LTR locales) feels natural and smooth; reversing it creates tension or signals "back/undo."

ここでの意図：移動方向と物語的な意味を紐付け（新規コンテンツは右/下からイン、後退操作は逆方向）、ease-out イン / ease-in アウトのイージング群と連携させます。

マルチアスペクト比戦略では、まずセーフエリアのパーセンテージ表を提示し、縦型画角に対しては「クロップではなく再配置（restack）」を要求します。

skills/shot-composition/SKILL.md

Design the **focal point centered enough** that it survives all crops, then let secondary elements reflow per aspect.

ここでの意図：適応作業を「単なる切り抜き」から前提条件のある設計（すべてのクロップに耐えうる中央帯にフォーカスを配置する）へと転換し、16:9→9:16 の再配置例と ANTI-PATTERN によってこの判断基準を定着させます。

2コア機能

01グリッド体系：12カラム + 8pxベースライン + カラム幅計算式と算出例、そのまま実装に落とし込み可能

02フォーカスと視線階層：三分割点の配置、単一フォーカス制約、size > contrast > color > position の優先順位

03リズム要素としての余白設計（単なる空きスペースではない扱い）

04深度レイヤーと視差速度表（bg/mid/fg ↔ Ambient/Secondary/Primary）

05カメラレシピ：push/pull、pan/tilt、follow、parallax、および具体フレーム数とイージング付きの whip-pan、orbit、dolly-zoom（reference 収録）

06イン・アウトの方向セマンティクスと最短エッジ規則

07セーフエリア表（16:9 / 9:16 / 1:1 / 4:5）とマルチ画角の再配置（restack）ソリューション

08納品物仕様：実装スキルにそのまま引き渡せる composition plan（フレーム仕様／フォーカス座標／レイヤーマップ／イン・アウト／カメラ／セーフエリア／相互参照）

3外部依存関係

Kind	Dependency / Endpoint
package	Three.js（reference 的深度视差示例，产物期由实现方引入）
package	下游实现 skill：gsap-web / remotion-video / after-effects（其中 gsap-web 属 iart-ai/web-animation-skills 仓库）
package	CSS scroll-driven animations / Pointer Events（reference 的纯 CSS 与 JS 视差示例）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: 純粋なプロンプト指示およびルールテキストのみ。スクリプト実行や外部への影響はありません。

監査ノート： 純粋な指示・空間方法論：スクリプト実行、外部ネットワーク送信、認証情報の読み込み、ディスク書き込みは一切なく、納品物はテキスト形式の composition plan です。留意事項（評価区分に変更なし）：① 納品物仕様内で下流の実装スキル（gsap-web / remotion-video / after-effects）を指定しており、これはスキル間の移譲にあたるため区分は継承されません。また gsap-web は別リポジトリ（iart-ai/web-animation-skills）にあるため、本パックのみ導入された環境では解決できません。② reference に Three.js / CSS / JS のコード例が含まれていますが、制作時の参考情報であり、導入するかどうかは実装側の判断に委ねられます。

5二重目の独立検証

[discrepancy] 被点名的 gsap-web 是否在本仓（防悬空引用） — 本仓 skills/ 下无 gsap-web；该 skill 位于另一工作副本 iart-web-animation-skills/skills/gsap-web（同一作者的另一 pack），其 SKILL.md 亦反向引用 shot-composition。因此这条交付链跨仓，只装 motion-design-skills 时 gsap-web 引用解析不到——属真实缺口（文档未标注「需另装」）。
[ok] reference 是否含可执行脚本或联网调用 — camera-and-grids.md 内只有 CSS/JS/GLSL 代码块与具名镜头参数表；全目录搜 npx/curl/fetch/URL 无执行期命中。
[ok] 与 animation-principles 的交叉引用是否一致（两处术语是否打架） — SKILL.md 明写 depth layers ARE the three motion layers projected onto Z，并把 1/3 规则拆成「构图三分点」与「行程不超过 1/3」两形态；与 animation-principles 原文表述一致，属同义映射而非冲突。
[unlocatable] 安全区百分比是否有出处 — 9:16 顶部 12-14% / 底部 18-20%、1:1 6-8%、4:5 6%/8% 等是经验值，pin 仓库内无平台文档引用或测量数据；平台 UI 尺寸会随版本变化，实际交付应以当期平台规格复核（本 pack 的 video-delivery-specs 给的是像素级版本）。

6結論

空間の判定基準をデシジョンツリーと数値テーブルとして具体化し、実装へ直結可能（カラム幅計算式、8pxグリッド、視差係数、ショット時間）

「画面が平坦」「テンプレートが動いているだけに見える」といった頻出課題の解決：3階層の深度役割 + 視差速度差 + 2レイヤー同時の主アクション禁止

マルチアスペクト比適応に正しい前提（フォーカスを中央帯に配置）と適切な対処（クロップではなく再配置）を提示し、クロップのリスクを反面教師として明示

明確な規約としての納品物（composition plan フィールド一覧 + 検収チェックリスト）により、実装スキルへ直接ハンドオフ可能

animation-principles と重複なく補完関係を構築：空間側が時間側を参照することで、同一パック内での用語の分断を防止

最適な用途： モーショングラフィックスや映像制作前の画面設計に最適：グリッドとフォーカスの決定、要素のイン・アウト方向の計画、カメラワーク（プッシュ/プル/パン/チルト）や視差の設計、マスター素材の 16:9/9:16/1:1/4:5 への適応、実装工程に引き渡す composition plan の作成。既存の映像の「平坦さ、散らかり、見切れ」のレビューにも適しています。

不向きな用途： 非推奨のケース：① 具体的なコード実装が必要な場合（gsap-web / remotion-video / after-effects / 各種Webアニメーションスキルを使用してください。当スキルはプランニングまでを対象とします）；② アニメーションのタイミング設計やイージングの決定が必要な場合（animation-principles を使用）；③ プラットフォームごとの書き出し仕様やQCが必要な場合（video-delivery-specs を使用）；④ 高密度・マルチフォーカス・無秩序さを志向する美学のプロジェクト（デフォルトの基準を手動で上書きする必要があります）；⑤ プラットフォームUIの正確なオーバーレイデータが必要な場合（当スキルは経験則に基づくパーセンテージであり、現行ピクセル実測値ではありません）。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload shot-composition.tar.gz

sha256: 5c7f5d87a93826a3…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3c129f769d.