motion-web は何をしますか？
モーションファーストなクリエイティブWeb。このスキルは、構想 → コンセプト → 仕様 → 構築 → 監査の全フェーズを担当します。
このスキルはWebページ全体を構築します。 モーションはそれらを優れたものにするための要素であり、仕事のすべてではありません。モーションがまったく含まれないリクエスト（「ランディングページを作って」「この公式サイトを作ってほしい」など）も、このスキルの範囲内であり、成果物は完成したサイト（スタック、トークン、セクション、コピー、コンポーネント、状態、メタ、デプロイ）です。
優先順位 — 1と2は同等:
- モーションコンセプトとインタラクションの振り付け
- ページデザイン — 構造、タイプスケール、パレット、スペーシングリズム、何も動く前の見た目
- 構築された成果物としてのページ — セクションとそのコピー、コンポーネント語彙、トークンレイヤー、ハッピーパス以外の状態（
page-blueprints.md、components.md、project-setup.md、production-polish.md） - ページを強化する場合のみの軽量3DまたはCanvas
- パフォーマンス、アクセシビリティ、モーション削減のフォールバック
デフォルトの見た目のページに優れた仕掛けを載せても、失敗したページです。 モーションは利点であって、言い訳ではありません。このスキルの最も一般的な失敗は、誰もデザインしていないレイアウトに巧妙なインタラクションをひとつ貼り付けて納品することです。モーションをオフにしたら恥ずかしいページなら、それは完成していません。どんなにスプリングを調整しても直りません。デザインは時間的なステップ2ではなく、最後にも真実でなければならないもう一つのものです。→ references/page-design.md、references/design-slop.md
これは、クリエイティブおよびマーケティング向けWeb（ランディングページ、製品ページ、ポートフォリオ、スタジオサイト、キャンペーン、エディトリアル、軽量ドキュメント）という1種類のサイトのための設計・構築スキルです。エンドツーエンドで構築します。ダッシュボード、管理画面、データ密度の高いアプリUIのスキルではなく、フル3Dシーン生成スキルでもありません（これらは 3d-scene-studio にルーティングされます）。アプリの断片（価格表、サインイン、コンソールのスクリーンショット）を含むクリエイティブページは範囲内ですが、ログイン状態のプロダクトインターフェースは範囲外です。
エージェント的意図検出（重要 — 最初に読むこと）
ユーザーはしばしば非常に少ない情報しか伝えません。最小限の入力から意図を検出し、自律的に行動してください。
シグナル → 意図マップ
| ユーザーの入力 | 検出される意図 | 実行内容 |
|---|---|---|
| 「Webページ作って」 / 「ランディングページ/公式サイト/ポートフォリオを作って」（テーマあり、参考なし） | full-build | 仕掛けではなく、サイト全体。 page-blueprints.md → project-setup.md → page-design.md → 構築 → components.md → production-polish.md |
| 「このページには何を載せる？」 / 「どんなセクションが必要？」 / 「情報設計」 / 「コピーはどう書く？」 | blueprint | page-blueprints.md — 骨格を選び、実際のコピーを書き、創作した事実はすべて明記する |
| 「ナビゲーション」 / 「ボタン」 / 「フォーム」 / 「カード」 / 「フッター」 / 「FAQ」 / 「価格表」 / 「モーダル」 / 「コンポーネント」 | component | components.md — まずは方言テーブル、次に状態マトリックス。状態のないコンポーネントは完成ではない |
| 「どんな技術スタックを使う？」 / 「Astro か Next か」 / 「プロジェクトの始め方」 / 「デザイントークン」 / 「フォント」 / 「デプロイ」 | setup | project-setup.md — ページの梯子 ≠ モーションの梯子。ラング0から始めて登っていく |
| 「デモっぽくて完成品に見えない」 / 「OGプレビューが空」 / 「ファビコンがない」 / 「404」 / 「空状態」 / 「ダークモード」 / 「フォームにバリデーションがない」 | polish | production-polish.md — すべて確認可能。§9を実行し、推測しないこと |
| URLだけ（他のテキストなし） | url-drop | 開いて分解する（複製モードのステップ1～2）。その後尋ねる：これを再現する、それともこれを参考にして自分のものを作る？ |
| URL + 「Webページを作って」または「これを参考にして」 | replicate → build | まずURLを分解する（複製モード）。次に、ユーザー自身のコンテンツのためのモーションコンセプトを提案する |
| 参考 + 「複製してケースとして記録」 / 「スキルに保存」 / 「事例にする」 | case-authoring | cases/AUTHORING.md — まずフェーズ0のゲート：参考から画像を取り除く。何も残らなければ、構築の後ではなく前にアセットを確保する |
| URL + 「複製して」 / 「似たものを作って」 / 「これを参考にして作って」 | replicate | 分解 → パターンにマッピング → すぐに構築。 |
| 論文/記事/ブログのURL | doc-drop | 読んで、抽出可能な値を持つテクニックを特定する。求められたらそのうちの1つから構築する（文書/記事ドロップ、下記参照） |
| 漠然とした依頼（「かっこいいWebページを作って」 / 「ポートフォリオを作って」） | freeform-build | composition-guide.md を通じてオーケストレーション → スタイルとアークを独自に選択する |
| テーマのみ（「AIに関するランディングページを作って」） | spec → build | composition-guide.md を通じてオーケストレーション → ビジュアル方向性を提案し、すぐに構築する |
| 詳細な依頼＋参考資料 | spec → build | MOTION_SPEC.md を書き → 承認を得る → 構築する |
| 「監査して」 / 「問題点は？」 / 「ギャップ」 | audit | 既存の作業をモーション/パフォーマンス/アクセシビリティのギャップについて検査する — design-slop.md に従い、静止フレームも含めて |
| 「見た目が悪い」 / 「ダサい」 / 「AIが作ったみたい」 / 「デザイン性がない」 / 「普通」 | design-audit | モーションをオフにしてスクリーンショットを撮り、design-slop.md のゲートを実行する。スプリングを調整しない — 不満は静止フレームに関するもの |
| 「レイアウト」 / 「タイポグラフィ」 / 「文字が小さすぎる」 / 「余白」 / 「構造」 / 「セクションが全部同じ」 | design | page-design.md — マクロ構造、タイプスケール、スペーシングリズム。現在の受賞作品と比較して評価する |
| 既存ページに対する「…を追加して」 | incremental-build | 新しいモーションで現在の実装を拡張する |
| 動画の参考（Pinterest/Dribbble/Xのクリップ） | video-ref | 停止 — コードを書く前に以下の動画参考プロトコルを実行すること |
| 既存モーションに対する「手触りが悪い」 / 「ぎこちない」 / 「スムーズじゃない」 / 「四平八稳」 | handfeel-tune | handfeel.md に照らして監査 — スプリング、速度結合、セカンダリモーション |
| 追従するもの（カメラ、カーソル、レール、ツールチップ）に対する「スムーズだけどあと一歩」 / 「カクカクする」 / 手触りがフレームレートで変わる | handfeel-tune | §1のスプリングではない — handfeel.md §7: 1-exp(-k·dt)、speed/k リード項、フィルター後の補正はしない |
| 「GSAPを使わなくてもいい？」 / 単なる入場かパララックス / 軽量化したい | build | まずラング1.5を確認 — ネイティブ animation-timeline / animation-trigger / sibling-index() → build-mode.md の梯子 + pattern-recipes.md #16。Firefoxは静的終状態を取得 |
| 素材が実際に存在する場所（実写/スキャン）で、中に入っていきたい | build | ラング5.5 — モデルよりも3D Gaussian Splatsを優先 → build-mode.md の梯子 |
| カード/画像を曲げたい、旗、ページめくり、スクリーンショットを立体面にピン留め、「skewだけでは足りない」 | warp | コーナーピンホモグラフィ → pattern-recipes.md #17。すべてのクワッドをガードし、エッジの傾きを asin(h/w) にクランプする — ガードされていないクワッドは、エラーなく画面サイズのブロックを描画してしまう |
| 既存モーションに対する「クリックできない」 / 「一つしかクリックできない」 / 「誰も気づかない」 / 「見えない」 | affordance-audit | 最初にヒットテストコードに触れない。 affordance.md に照らして監査 — メカニズムは通常問題ない。招待が欠けているか、期限切れになっている |
| 画像アセットの山 + 「3Dシーンにして」 / 「奥行きが欲しい」 / 「カメラで中に入っていきたい」 | image-plane-3d | モデルに手を出さない。 実際の透視投影カメラで平面からシーンを構築する → image-plane-3d.md（梯子ラング5） |
| レンダリングシーンに対する「継ぎ目がある」 / 「溶け込んでいない」 / 「貼り付けた感じ」 | image-plane-3d | アートに触れる前に測定する：アセットバッチごとの平均 R−B と輝度、コンタクトシャドウの有無 → image-plane-3d.md §6–7 |
| 「これは何で描くべき？」 / 「DOM か canvas か」 / ページが div とシステムフォントしか出力しない / 参考が明らかにDOMではできない | render-layer | レイヤーを先に決めてからメカニズムを決める → render-layer.md §1。レイヤーは宣言であり、case READMEに書き、verify_case.py --layer で照合する |
| 手書き / 墨線 / 線画風の3D、「レンダリングしたみたいじゃなくて描いたみたい」、boil / 線の震え / 紙質感 | ink-render | render-layer.md §3 — 深度不連続線画（法線の折り目はオフ）、静的warpと動的boilを分離、boilクロックは11Hz対60fpsレンダリング |
| 切り抜きが必要な生のプレート / レンダリング、「切り抜き」 / 「素材をシーンに入れる方法」 / 「画像がぼやけている」 | asset-pipeline | 画像自身の背景に対してキーイング、アルファバウンディングボックスにクロップ、メタデータをスクリプト化、要素ごとの解像度予算を表示 → image-asset-pipeline.md |
| ヘッドレスチェック全般。数字が見た目と合わない。「どうやって検証する？」 | verify | まずプローブサーフェスを構築 — ピン留め可能なクロック、__seek、__hold、状態遷移 — その後測定 → verification-harness.md |
| スクロールタイムラインに対する「この区間で何も起こらない」 / 「リズムが悪い」 / 「たくさんのテキストが一気に出てくる」 | timeline-audit | すべてのトラックを1つのスクロール軸に対してレイアウトする。デッドビートは、1つの遅いレイヤーではなく、一致するプラトーである → timeline-orchestration.md |
| たくさんのアセットを持つ長いスクロールシーン。「重い」 / 「読み込みが遅い」 / 「メモリが爆発した」 / 何百ものプレート | scene-streaming | 画面ウィンドウでアクティブ化、大きなアップロードをスライス、スキャン内でyield、完全に破棄 → scene-streaming.md |
| 音に関するもの — BGM、アンビエンス、インタラクションSE、「効果音が少ない」 / 「雰囲気音は聞こえるけどうるさくなりすぎないように」 | scene-audio | 3つのバス（bgm / hand / world）、幕ごとのカーブ、より大きなベッド上の個別イベント → scene-audio.md |
どのモードを使うか、ユーザーに尋ねないでください。 検出して、実行してください。2つの非常に異なる出力の間で真にあいまいな場合にのみ停止してください（例：仕様 vs すぐに構築）。
動画参考プロトコル（硬規則 — 推測禁止）
トリガー：参考が実際に見られない動画 — Pinterestピン、Dribbbleショット、Xクリップ、外部短縮リンク。タイトルやテキストによる説明はモーション情報ではありません。
- ライブページがないと結論付ける前に、スレッドを読んでください。 作者はほとんどの場合、返信にURLを投稿しており、返信はその作品がそもそもWebページかどうかも教えてくれます。2026-09-02測定：以前のセッションでは7つの動画参考にURLなしと宣言し、フェーズ1をフレーム測定に費やしました。7つすべてにライブサイトがあり、作者自身が投稿していました。また、1つの投稿にあった4つのクリップのうち3つは、Web実装がまったくないJitter/Figma Motion/Riveレンダリングであることが判明しました（
cases/AUTHORING.mdフェーズ1）。safe-x tweet <url> --jsonを実行し、返信内のすべてのt.coリンクを解決してください。 - 推測からモーションを構築しないでください。 タイトルや説明しか抽出できていない場合、テーマはわかっても、モーションはわかっていません。とにかく構築すると、イテレーションを丸々1回無駄にします — これは文書化された失敗モードです（2026-07-06、シーフードヒーロー：推測は「軌道」、実際は上昇する対角線。2回の再構築が必要でした）。
- すぐに2～3枚のキーフレームを要求してください。 一文で：「この動画は開けないので、2～3枚のキーになるフレーム（入場/中間/退場）を送ってください」。
- コーディング前に、軌跡を明示的なジオメトリとして記述し、確認を得てください。
- アンカーポイント：要素が入場/頂点/退場する位置（隅、三分割点）
- 姿勢：回転はパスの接線に従う/一定/遅れる
- 二次的反応：他に何が動くか（背景の図形、線、テキスト）とその方法
- 例：「右下入場 → 中央 → 左上退場の上昇対角線。魚の頭は常に左上を向いている」 — 間違った推測はここで、コードではなく死亡します
- その後でのみ、pattern-recipes / handfeel.md にマッピングして構築します。
単一のスクリーンショットも同じルールに従います：1フレームはポーズを与えるだけで、軌跡は与えません。パスが重要な場合は、より多くのフレームを要求してください。
複製モード
ユーザーがURLとともに「複製して」 / 「似たものを作って」 / 「こんな効果作れる？」と送信してきた場合 — 分解してから構築します。保存ステップはありません。成果物はページです。
複製実行パス
-
ページを開き、利用可能なブラウザツール（Claude Preview、
browser-use、Playwright）を使って3つのレイヤーとして読みます： スタック（ライブラリ、イージング、キーフレーム、CSS変数 — バンドル名が教えてくれます）、スクロール振り付け（どの要素がどのバンドにピン留めされているか、レールとそのpx距離、パララックス率、スクラブされたプロパティ、エントリーポイント — 約9つのスクロール位置をサンプリングし、getBoundingClientRectと算出スタイルをそれらの間で差分します）、WebGLレイヤー（プログラム数、ドローコール数、カスタムユニフォーム名。必要な場合は、ページスクリプトが実行される前にgetContextをラップしてシェーダーソースを取得します）。2つのスクリプトが測定可能な半分をカバーします：静的なページ用のscripts/measure_structure.py <url>（セクション、ナビ、ボタン、トークンスケール、メディア、メタ、モバイルオーバーフロー）と、実際のホイール操作でページのどの程度が動くかを測定するscripts/measure_churn.py <url>です。URLは作品そのものでなければならず、ギャラリーリスト（awwwards.com/sites/<slug>）であってはなりません：リストページはギャラリー自身のクロームを渡してしまい、6つの異なる受賞作品が同じライブラリ、同じキーフレーム、同じフォントで返ってきます。 -
分解 — 見つけたことを述べ、印象ではなく数字を引用します。
- 「GSAP 3.12 + ScrollTrigger + Lenis。
.home-animate__wrapperが 0.25–0.50 でピン留めされ、その間.iconが +1545px 横移動。退場は 0.25/0.38/0.62 の3段スタガー」 - 「背景はネイティブWebGL2、14プログラム、944ドローコール。ユニフォームに bloomStrength/blurTexture1-5 と cloudCoverage/cloudDensity — UnrealBloom + ボリュームクラウド」
コンテキストだけから「WebGLを使っている」と報告しないでください — リンクされたプログラムのないサイズ指定なしの300×150コンテキストは、Modernizrスタイルの機能検出であり、シーンではありません。リンクされたプログラムとドローコールを数えてください。
- 「GSAP 3.12 + ScrollTrigger + Lenis。
-
パターンレシピにマッピング —
references/pattern-recipes.mdで最も近いレシピを見つける -
ギャップを埋める — 参考が使っているがレシピにはないものを、抽出した値に基づいてスクラッチで書く
-
すぐに構築 — ページをスキャフォールドし、実行し、視覚的に検証する
-
報告 — 「[site] のコア動効果を複製しました。[X] を使って [Y] を実現し、オリジナルとの違いは [Z] です」
複製 ≠ コピー
- 行うこと：インタラクションパターン、モーションキャラクター、タイミング感覚を再現する
- 行わないこと：プロプライエタリなブランドカラー、正確なコピーテキスト、識別可能な製品UIをコピーする
- 行うこと：テクニックをユーザー自身のコンテンツとパレットに適応させる
- 報告書に、何を適応させ、何をオリジナルに忠実にしたかを記載する
自由形式構築モード（ユーザーが指示をゼロで与えた場合）
ユーザーが「Webページを作って」 / 「適当に作って」 / 「自分でテーマを考えて」と言ったり、単純で漠然としたテーマ（例：「AIエージェントプラットフォームのランディングページを作って」）を挙げた場合、これは創造性を発揮するようにという招待です。 汎用テンプレートにデフォルトしないでください。1対1の固定ルーティングマッピングを使用しないでください。明確化のための質問をしないでください。
自由形式アクションパス（実行時クリエイティブループ — 創造は実行中に行われます）
…
翻訳注：原文が途中で切れています。完全版では references/ ディレクトリ以下の各ファイルを参照しながら、ページ全体の設計・構築・監査を実行します。