motion2d-prompt

フラッグシップ 2D モーションプロンプト

このスキルは、漠然としたビジョンを、モデルが重要な決定をデフォルトで行わないプロンプトに変えます。フォーム、テクニック、フレームとフォーマット、スタイル法則、特徴的な動き、タイミング（フレーム数）、ビートまたはループ長、インタラクション、エクスポート、マストキープリストを決定します。これは threejs-world-prompt の姉妹スキルです。骨格は同じですが、2Dでは「すごさ」は構図、モーションクラフト、シェイプレンゲージによって生み出され、カメラやリアリズムではありません。

参照ファイル: いつ読むか

• references/forms.md: 常に、フォームが決まったら。10のフォームそれぞれに必須セクション。
• references/tech.md: 常にラウンド0で。フォーム→テクニックのマトリックス、各テクニックの限界、バージョン固定のボイラープレート、エクスポートとその影響。
• references/anatomy.md: 常に、執筆前に。共有ブロックと階層（マイクロ/ミッド/マックス/スペック）。
• references/craft.md: モーションクラフト用語集：コードでのアニメーション原理、イージングとスプリング、フレーム単位のタイミング、振付、トランジション、モーションにおけるタイポグラフィ、ループ、テクスチャ、構図。ラウンド2～4で読む。
• references/patterns.md: オプションモジュール（ビート、特徴的な動き、オブジェクト連続性、モーフ、レイヤーパララックス、カーソルをアクターとして、サウンド同期、ポスターフレーム、衛生）。
• references/examples.md: 3つの合成キャリブレーションプロンプト（生成ループ マックス、キネティックタイポグラフィ ミッド、キャラクターシーン マックス）。フォームに合ったものを読む。その内容をコピーしないこと。

会話の進め方

最重要ルール: ユーザーはビジョンを持ち、あなたは知識を持つ。具体的な決定事項（パレット、書体、イージング、ループ長、テクニック）を提案し、それが合うかどうかを尋ねます。自分で決められることを尋ねないでください。各ラウンド: 決定したことを要約し、デフォルトを提案し、本当にわからないことについて1～3の質問をします。選択肢が限られている場合は、ツールが利用可能であればクリック可能なオプションを使用します。「次へ / あなたが選んで」= 提案を受け入れます。ユーザーがすでに回答したラウンドはスキップします。目標: ドラフトまでに2～5回のやり取り。

ラウンド0: フォーム、階層、納品、テクニック

• フォーム (forms.md): 生成ループ / エンドレス生成作品 / モーションデザインフィルムまたは解説 / キネティックタイポグラフィ / ページ上またはUI内のエフェクト / 2Dトイまたはインストゥルメント / アニメーションデータ / キャラクターシーン / マイクロ（ロゴスティング、ローダー）/ シェーダー作品。フォームは組み合わせ可能；1つがプライマリ。
• 階層: マイクロ（約80～150語）、ミッド（約350～600）、マックス（約1000～1800）、スペック（エンジニアリング形式）。
• 納品: ライブページ / エクスポート（MP4、WebM、GIF、PNGシーケンス、Lottie、SVG）/ 両方。エクスポートは今決める。テクニックを制約するからです：すべてのエクスポートにはアニメーションが時間の純粋関数であることが必要であり、Lottieは最初の行からシェイプとキーフレームで構築する必要があります（tech.md）。
• フレームフォーマット: 全画面レスポンシブビューポート / 16:9 / 9:16 / 1:1 / 4:5 / 埋め込みコンポーネント。エクスポートの場合は、解像度とfpsを指定。
• テクニック: tech.mdのマトリックスから自分で提案し、一文で正当化する。ユーザーに制約（サイトスタック、プロジェクト内の既存ライブラリ）がある場合のみ尋ねる。

ラウンド1: フック、オープニング、コアアイデア

• フック: 誰もが最初の1秒でスクロールし続ける理由。
• オープニング戦略: ポスターフレーム（最初のフレームがすでに最高の画像）/ ためらい → 着火 / アンカー → 展開（例：普通のページが異なる動作を始める）/ in medias res（いきなり本題）。
• コアアイデア: すべてが中心となる一文。

ラウンド2: スタイル法則と可読性

自分で提案する：シェイプレンゲージ（幾何学的 / 有機的 / 切り紙 / インク / ピクセル / フラットベクター / エンジニアリング図面）、線（太さ、キャップ、ゆらぎ）、塗りとテクスチャ（グレイン、紙、ハーフトーン、リソ、印刷版ずれ）、3～6色の名前付きパレット（hex値）、タイポグラフィ（Google Fonts書体、その役割、可変フォント軸）、構図（グリッド、セーフマージン、注意点の階層、空白スペース）、3～4のアンチパターン、そして可読性ルール（すべてのフレームが一目で読める；テキストはモーションのペースで読める）。

ラウンド3: ヒーロー、シグネチャー、メカニック

• ヒーロー: 作品全体を支える要素またはシステム（線、パーティクル、文字、キャラクター、グリッド、流体）。
• 特徴的な動き: この作品を認識できる一つの動き（craft.md）。
• メカニック: ヒーローインタラクション（カーソル、スクロール、クリック、ドラッグ、サウンド）またはビートのあるタイムライン。
• テーゼフレーム: 作品全体を要約する一つのフレーム、ポスター用。

ラウンド4: モーションと時間

テンポ（BPMまたは拍の秒数）、主要な動きのフレーム単位のタイミング、名前付きのイージングとスプリング、振付（スタガー、カスケード、オーバーラップ）、トランジション、ループ長またはタイムコード付きショットリスト、マックス形式では5以上の独立したモーションシステム。patterns.md からモジュールを選択。

ラウンド5: インタラクション、パフォーマンス、アクセシビリティ、エクスポート

コントロール（最小限）、prefers-reduced-motion（常に、具体的な縮小版を伴って）、テクニックのパフォーマンス予算、エクスポート詳細（コントロール、フォーマット、解像度、fps、長さ、シームレスネス）、マストキープリスト。プロンプト言語：デフォルトで英語。

プロンプトの作成

1. 骨格: anatomy.mdの共有ブロック + forms.mdのフォームセクション + tech.mdのテクニックボイラープレート + patterns.mdのモジュール。#### 見出しでアイデアを命名。
2. 命令形、密度高く。動きを数字で説明する：フレーム、ミリ秒、カーブ（cubic-bezier(.2,.8,.2,1)）、スプリング（剛性/減衰）、スタガー（ms）、BPM。色はhex、書体は名前で。
3. マックスおよびスペック階層は、アクセプタンスバーの段落で終了し、次に一文「In one sentence: …」。
4. チェックリストを実行し、修正し、コードブロックで納品する（長い場合やリクエストがあれば .md ファイルとして）。その下に、ユーザーに代わって行われた決定について2～3文。

納品前のチェックリスト

• 最初の文: フォーム + テクニック + 4～6の具体的な詳細を含む動きのヒーローイメージ。
• 「Do not build …」（3～4の2Dアンチパターン、例：ストックモーションテンプレート、PowerPointフェードイン、紙吹雪スクリーンセーバー、クリップアート）と「Build …」の言い換え；「Core idea:」。
• テクニックを名前とともに正当化し、tech.mdからのバージョン固定ボイラープレート。
• フレームフォーマット、解像度とfps（エクスポートの場合）、リサイズ時の動作。
• オープニングが戦略に一致；ポスターフレームとファーストセカンドテスト。
• スタイル法則: 形状、線、テクスチャ、hex値付きパレット、役割付き書体。
• 可読性ルール（モーション中のテキストの読み取り速度を含む）。
• 特徴的な動きを数字で記述；イージングとタイミングを名前付き値で。
• ループ: フレーム単位の長さとシームレスネスルール；フィルム: タイムコードとビート付きショットリスト。
• 5以上の独立したモーションシステム（マックス）；フリーズフレームテスト。
• 言及されたすべての機能が表示、移動、または表示可能であること。
• スコープクリープ禁止；デリケートなトピックの場合はトーン調整。
• prefers-reduced-motion と具体的な縮小版。
• エクスポート（ある場合）：アニメーションは時間の純粋関数、フレームごとのレンダリング、フォーマット、コントロール；Lottieは互換性のあるサブセットのみ。
• パフォーマンス: テクニックの予算、DPR ≤ 2、画面外で一時停止、マストキープリスト（「…は決してトレードオフされない」）。
• アクセプタンスバー（マックス/スペック）と「In one sentence: …」。
• フォームで要求されるセクションが存在；長さが階層の範囲内。

境界

• 参照ファイルや examples.md の例文の表現は、そのままプロンプトに使用しない。構造と決定事項を取り、技術的な公式やアクセプタンス基準の段落を含め、すべての文を自分の言葉で書く。
• 既知のキャラクター、マスコット、ロゴ、または認識可能な著作権プロジェクトは一切禁止（「～のスタイルで」特定のキャラクターを含む）。運動や時代のスタイル（バウハウス、浮世絵、スイス、ミッドセンチュリーの切り紙フォーム一般的な言語）は問題なし；オリジナルのキャラクターとマークを提案する。
• フォントはGoogle Fontsまたはシステムフォントのみ。ユーザーが自身のフォントを提供する場合は除く。
• プロンプトはブラウザで実行可能でなければならない。ビジョンがテクニックの限界を超える場合（例：SVGで100万のベクターシェイプ）、テクニックまたはトリックを変更し、プロンプト内でその名前を指定する。