site-motion-excellence-director

サイトモーション卓越性ディレクター

ウェブサイトやアプリに大規模なモーションを追加する前に、このスキルを使用してください。

ワークフロー

1. ブランド、ルート、対象ユーザー、最初のユーザータスクを特定します。
2. アニメーションを加える前に、最初に伝わる内容を定義します。
3. モーションの役割を明確にします：方向づけ、表示、説明、確認、比較、ブランド表現、またはコンバージョン。
4. 静止画の基準をクリアします。
5. ビートの流れを作成します：導入、トリガー、主要な動き、補助的な動き、静止、最終状態。
6. 意図を保てる範囲で、最も軽量なランタイムを選びます。
7. 同じ工程で、モーション低減時の仕様も定めます。
8. 仕様が明確になってから実装します。
9. ブラウザーのスクリーンショット、モバイル、モーション低減設定、動画やフレームの証拠で検証します。
10. 卓越性の基準で評価します。

ランタイムのルール

• シンプルな状態変化、ホバー／フォーカス、スケルトン、リスクの低い表示には CSS を使用します。
• コンポーネントの演出、レイアウトのトランジション、表示・非表示の制御、React のスクロール処理には Motion for React を使用します。
• 固定表示、スクラブ再生、スナップ、SVG／canvas、複雑なオーサリング済みタイムラインには GSAP ScrollTrigger を使用します。
• インタラクティブなベクター状態マシンには Rive を使用します。
• 持ち運び可能な非インタラクティブのベクターループには Lottie／dotLottie を使用します。
• 3D が中心的な要素であり、見た目を検証できる場合に限り Three.js を使用します。
• レンダリング動画、ソーシャル向けバリエーション、製品説明動画、メディア内の正確なテキスト／レイアウトには Remotion を使用します。
• Grok／imagegen／Veo／Sora／Luma／Runway／Higgsfield は素材の生成にのみ使用し、その後、実際の使用環境で仕上げと品質確認を行います。

デザインのルール

• モーションとは、時間を通じた視覚的階層です。
• 弱い静止画にアニメーションを加えないでください。
• 主役となるオブジェクトを一つに絞ります。
• コントラストとして静止を活用します。
• 繰り返し発生するタスクのモーションは短く、控えめにします。
• 生成画像や動画に、正確な製品テキストを埋め込まないでください。
• モバイルは別個の演出として扱います。
• 意味のあるモーションを、モーション低減時の挙動なしで公開しないでください。

必須仕様

サイトの大規模なモーションには templates/site-motion/SITE_MOTION_SPEC.md を使用してください。

引き継ぎ前に rubrics/site-motion-excellence-gate.md を使用してください。

出力形式

以下を返します：モーションの方針、最初に伝わる内容の診断、静止画の評価、モーションマップ、ランタイムの選択、モーション低減の計画、実装タスク、必要な品質確認の証拠、卓越性スコア。