motion-design

モーションデザイン

UI モーションを設計し、独自のコードで実装します。モーションは完成したページに振りかける装飾ではありません。レイアウトが空間を構成するように、モーションは 時間 を構成します。適切に使えば、画面に重み、感情、生命を与え、ユーザーをページに引き留めます。誤って使えば、素人の仕事だと最も強く感じさせる要素になります。

まず design-principles を読んでください。ここにあるのは、その哲学を時間軸に適用したものです。階層（すべてが動くわけではなく、同じように動くわけでもありません）、抑制（競合するモーションを削り、意味を担うわずかなモーションを際立たせます）、実装より先に感情（イージングを選ぶ前に、どんな感情を伝えるのかを把握します）、そして原則ではなくデフォルト（すべてのアニメーションには、そこにある理由が必要です。理由がなければ、デフォルトである「モーションなし」に従います）。

シーケンス内での位置付け： web-design と対をなす、アプリケーションスキルです。web-design は 軽いモーションの基本ライン を備えた画面を実装し、表現豊かなイージング、タイミング、振り付けといった本格的なモーションの技術はここに委ねます。モーションは、構築済みで構造が整った成果物に適用するものであり、成果物を生み出すものではありません。システムのモーション特性を受け継ぐものであり、システムを定義するものではありません。

最初の診断 — アニメーションを加える段階ですか？

モーションは最後のレイヤーです。トランジションをひとつでも追加する前に、次の2点を確認してください。

1. 成果物の構造が整っている。 適切なマークアップ、明確な階層、機能するレイアウト、実際のコピーが揃っていること。レイアウトがまだ変わるなら、アニメーションは加えないでください。すぐに変わるものにモーションを磨き込むことになります。web-design（または画面を構築した該当のアプリケーションスキル）に戻ってください。
2. ビジュアルシステムが確定しており、そのモーション特性がわかっている。 .agents/design.md を開いてください。ブランドに色や文字の印象があるように、モーションにも 感触 があります。遊び心があり弾むようなもの、落ち着いて上質なもの、あるいは精密で機械的なものです。その感触は、感情的な目標とミューズ（creative-direction）に由来します。システムを定義中、または大幅に見直している場合（Revolution／大規模なEvolution）は、creative-direction に戻ってください。モーション特性はアイデンティティの一部であり、最後に考え出すものではありません。

web-design と同じ経験則に従います。画面が構築され、システムが確定している場合にのみ進めてください。 そうでなければ、戻ってください。

モーションは感情 — 核となる洞察

言葉の中にも表れています。**e-motion（感情）**です。モーションはデザインに最後に加える仕上げのレイヤーではありません。ブランドが持つ感情を最も直接的に伝えるもののひとつです。その証拠は直感に反します。同じ要素でも、アニメーションの仕方を変えるだけで、まったく異なることを伝えます。 ボタンを素早く弾ませて行き過ぎるように動かすと、楽しく自由な印象になります。同じボタンをゆっくり拡大して静かに収束させると、上質で落ち着いた印象になります。ピクセルは変えていません。時間を変えただけで、感情が一変したのです。

要素レベルでは、主に次の2つの要素がその効果を生み出します。

• 速度はコスト感を表します。 速い動きは軽快で、気取らず、手頃な印象です。遅い動きは意図的で、贅沢で、高価な印象を与えます。重要だからこそ時間をかける、という印象です。
• 大きさはペースを決めます。 小さいものは速く動き、大きいものはゆっくり動きます。ネズミは素早く走り、ゾウはのっそり歩きます。小さなトグルがゆるやかに動くと壊れたように感じられ、全画面のパネルが瞬時に動くと安っぽく見えます。動くものの大きさに合わせて時間を調整してください。

ですから、イージングに触れる前に、あらゆる選択に対して design-principles が問いかけることを考えてください。どんな感触にしたいのか？ その答えが、タイミングとカーブを決めます。そして、その答えを考え出すのはあなたではありません。ブランドから導き出されるものです。

モーションの個性はブランドに由来します — まずシステム全体を調整します

モーションの実行方法は、構築するブランドによって変わります。 モーションの個性はアイデンティティの一部であり、creative-direction で定義され、感情的な目標や .agents/design.md ／ .agents/brand.md にあるミューズをたどることができます。2つのブランドがこのスキルのすべての原則を正しく適用しても、まったく異なるモーションに仕上がることがあります。そして、どちらも正解です。

アニメーションを始める前に、要素ごとのカーブだけでなく、システム全体の調整つまみを設定してください。ブランドによって異なる要素は4つあります。

• イージングの個性 — カーブにどの程度の奇抜さを許容するか。遊び心のある方向では、バネのような動き、弾力性、オーバーシュート、さらには散発的で不規則な動きも取り入れられます。真面目な方向では、滑らかで、制御され、ほぼ左右対称になります。
• 振幅 — 動きがどれほど大げさか。大きな移動量やスケール、複数のプロパティを使った派手な変形にするか、それとも小さく、引き締まった、最小限の変位にするかです。
• 頻度と適用範囲 — 画面のどれほどの範囲が動くのか、そしてどのくらいの頻度で動くのか。遊び心のあるブランドでは、真面目なブランドなら完全に静止させるような小さな要素も含め、多くのものをアニメーションさせる場合があります。
• 動きを加える理由 — 遊び心のあるブランドでは、楽しさそのもののために動きを使います。真面目なブランドでは、ほぼ機能面（フィードバック、方向づけ、説明）のためだけに使います。

調整の目安となる両極端を示します。ほとんどのブランドはその中間に位置します。

	クリエイティブ · 楽しい · 風変わり · 遊び心がある	真面目 · プレミアム · 精密
イージング	バネのようで弾力があり、オーバーシュートする。不規則なカーブも歓迎します	滑らかで、制御され、控えめ。オーバーシュートはほとんど、またはまったくありません
振幅	大げさで、移動量もスケールも大きい	控えめで、引き締まり、最小限
頻度	頻繁 — 小さな要素にも適用します	控えめ — 重要な場面に限ります
動機	楽しさそのものが正当な理由になります	モーションは主に機能面で正当化されます
結果	表情豊かで、生き生きとして、個性がある	洗練され、静かで、高級感がある

「洗練されていること」が普遍的な目標ではありません。 遊び心のあるブランドに、上品でミニマルかつプレミアムなモーションを当てはめると、ありきたりなものへと平坦化されてしまいます。これは適切さを欠く失敗です。ちょうど logo-design が、金庫ブランドに遊び心のあるロゴを使うことを扱うのと同じです。モーションは、既定の基準ではなく、このブランドの感情的な目標に照らして評価してください。

まずモーションを分類する：機能的か、ストーリーテリングか

ブランドの個性がモーションに均等に反映されるわけではありません。**個々のアニメーションにどれだけの自由度を持たせるかは、その役割によって決まります。**まず考えるべきなのは、ブランドに関する問いよりも、このバランスです。

• 機能的なモーション／UI モーション — 目的があります。ボタンを押したときのフィードバック、状態変化時の状況把握、原因と結果の提示、何かがどこから来たのかの表示などです。**ブランドがどれほど遊び心のあるものでも、実用性を優先してください。**すばやく、控えめで、予測しやすく、邪魔にならないようにします。ユーザーには目的があり、このモーションはそれを助けて、すぐに消えます。遊び心のあるブランドでも、保存完了の確認表示が800msもバウンドし続けるべきではありません。
• ストーリーテリング／楽しさを演出するモーション — 物語の一場面、表現力豊かなヒーローモーション、あるいは感情を生み出すこと自体が目的の装飾的な演出です。製品のストーリーを説明し、探索に報い、キャラクターを確立します。**ブランドの個性を発揮できるのはここです。**表現豊かに、ブランドらしく、動きの振幅を存分に活用してください。風変わりなブランドなら、ここでは本当に風変わりな表現にします。

つまり、この2つの軸は組み合わさります。機能的なモーションはブランドを問わず実用性に収束し、表現的なモーションはブランドごとに多様化します。モーションの役割が大きいほど実用性を高め、物語を伝えたり楽しさを生み出したりするほど、慣例に寄せるのではなく、ブランドらしさを表現してください。

その両方の根底には、個性のために決して譲らない最低基準があります。モーションには階層性があり（均一にしないこと。詳しくは後述）、既定値に任せるのではなく意図的に決められており、使いやすさとアクセシビリティに配慮すること。これには、キーボード操作で開始される動作、高頻度で使われる機能的な操作、パフォーマンス、prefers-reduced-motionが含まれます。

ai-slopの典型例は、動きの量ではなく、判断の失敗です。「すべての要素を同じようにフェードアップさせる」ことがスロップなのは、動きが多いからではなく、差別化も選択もされていないからです。遊び心のあるブランドが多くの要素を意図的かつ階層的に動かしても、スロップではありません。控えめなブランドがすべての要素を同じようにフェードアップさせるのは、スロップです。

UIに応用するアニメーションの12原則

基本となる考え方はDisneyに由来します（Thomas & Johnston著、The Illusion of Life、1981年）。これらがアニメーションの至宝とされるのには理由があります。実際の物体がどう動くかを表しており、優れたUIモーションの要点は、平面的な矩形に、私たちの身体がすでに知っている物理法則に従わせることだからです。**これらは組み合わせて使います。**実際のインタラクションでは、複数の原則を同時に使います。それぞれの、具体的でツールに依存しないコードレシピはreferences/twelve-principles.mdにあります。

1. スクワッシュ＆ストレッチ — 重みとしなやかさです。ホバー、押下、読み込み時に拡大・縮小や傾斜を加えます。個性を生み出す手段です。弾むようなオーバーシュートは遊び心を、ゆっくりと落ち着く動きは高級感を演出します。同じ要素でも、魂が変わります。
2. 予備動作 — 操作できることだけでなく、操作すると何が起きるかを予告します。ホバーしたメニューが、折りたたまれる方向へ縮み、アコーディオンのシェブロンが、開く方向へ回転します。動作の前に、少しだけ予備動作を入れます。
3. 演出 — 重要な要素に視線を誘導します。CTAを穏やかにループさせたり、順番に読み込んで最後に主要なアクションへ注意を向けさせたりします。モーションで優先順位を表現します。
4. ストレートアヘッドとポーズ・トゥ・ポーズ — キーとなる状態（開始から終了まで）を定義し、ブラウザーがその間を補間します。**静止状態から逆算します。**スクロール連動のシーケンスは、タイムラインに沿ったポーズ・トゥ・ポーズです。
5. フォロースルーとオーバーラッピングアクション — パーツごとに異なる速度で動き、主役の動きの後に落ち着きます。**これが最も大きな効果をもたらす手段です。**要素を同時に表示しつつ、短い遅延でずらします。後続のパーツは行き過ぎてから落ち着きます。素人っぽいモーションでは、すべてをゆっくりしたスライドショーのように順番に動かします。わずかな遅延をつけて動きを重ねることで、ほとんど手間をかけずに、ページに高級感を出せます。
6. スローインとスローアウト — 現実世界で、瞬時に動き始めたり止まったりするものはありません。徐々に加速し、減速させます。**動きがリニアだとすぐにわかります。**加速し、一定速度で進み、減速します。
7. 弧を描く動き — 自然な動きは曲線を描き、直線上を移動しません。横幅が広がってから高さが増すメニューは、見せかけの弧を描きます。ボタンから上昇するモーダルは、垂直に硬く動くのではなく、曲線の軌跡をたどります。
8. 副次的動作 — 補助的なモーションで主な動きを強調します。削除アイコンにホバーすると、影響を受けるモーダルにも色が付きます。送信ボタンを押すと、スピナーが表示されます。原因と結果、つまり「これがあれに影響する」ことを示します。
9. タイミング — フレーム数が速度を決め、速度が雰囲気を決めます。「小さく速く、大きくゆっくり」「速いと安っぽく、遅いと高級感がある」という考え方は、ここに関わります。他を何も変えなくても、タイミングだけで要素の個性が生まれます。
10. 誇張 — 現実そのものを再現するのではなく、現実らしさを超えて表現します。現実を完璧に模倣すると、静的で退屈に見えます。標準より太い下線、無効なボタンの首振り、ホバー時に白黒から「現像」される写真などです。**誇張は、後から加えるより抑えるほうが簡単です。**意図的に行き過ぎさせてから、好みに合わせて調整します。
11. 立体感のある描画 — 3D空間、体積、重みを尊重します。カードを、手で持っているかのように扇状に広げて回転させます。奥にある要素は少しぼかして縮小し、手前の要素は見る人に向かって拡大します。影は層状に重ねます。平面的な2Dに、本物の立体感を与えます。
12. 魅力 — カリスマ性、引きつける力、楽しさです。心地よいグラデーション、ホバー時の柔らかな光彩、探索を促す、ほとんど気づかないほどの環境的な視差などです。優れたデザイナーであることが前提となるため、最も難しい原則です。その目的は、ページを探索し、そこにとどまりたいと思わせることです。

UI ネイティブなツールキット — すぐに使える手法

12 の原則は、動きの物理法則と感情です。それらと併せて、もう 1 つの視点、つまり実際にインターフェースで活用する実践的な手法集であるUI ネイティブなテクニックを使いましょう。レシピと原則との対応を含む全カタログは、references/ui-motion-techniques.md（出典：motion.zajno.com）を参照してください。

1. イージング — 基礎となるものです。表現豊かな動きはすべて、カーブ（＝スローイン／スローアウト）に沿って動きます。
2. オフセットと遅延 — 到着をずらして、階層を示します（＝オーバーラッピングアクションで、最も大きな効果を生む手法です）。
3. フェードイン／アウト — ただし、単独では使わないでください。不透明度は必ず位置やスケールの変化と組み合わせます。そうしないと、方向も重みも生まれません。
4. 変形とモーフィング — ある形状が別の形状へと連続的に変化します。共有要素のトランジション（カード → ページ、アイコン → 閉じる）などです。フォーカスの連続性は、width／height ではなく、transform に対する FLIP／View Transitions で実現します。
5. マスキング — 境界内でコンテンツを表示し（clip-path／mask）、平坦なフェードではなく、方向性のあるワイプにします。
6. 奥行き — 1 つの要素のシャドウ（＝ソリッド描画）ではなく、レイヤー間の関係性（レイヤー化されたシャドウ、パースペクティブ）から奥行きを作ります。
7. パララックス — レイヤーごとに速度を変えて奥行きを表現します。大切なのは徹底した控えめさです。さりげなければ興味を引き、強すぎると乗り物酔いを誘発します。動きを抑える設定では無効にしてください。
8. ズーム — 状態と奥行きの間を遷移します。ユーザーが操作した対象から動きが広がるよう、正しい transform-origin を起点にスケールします。

覚えておくべき使い分けは、原則で動きにどのような感覚を与えるか、そしてその動きを取り入れる価値があるかを判断し、テクニックでそれを構築することです。Zajno 自身の主張もこのスキルと一致しています。動きは装飾ではなく、注意を導くための戦略的なツールです。（リアルタイムと非リアルタイムの違いにも注意してください。リアルタイムの動きは、ホバー、ドラッグ、スクロールなど、ユーザーの手の動きに連動します。非リアルタイムの動きは、操作後にスクリプト化された応答として再生されます。）

一般的な動きには限界がある — 印象に残る動きはコンテンツに合わせて作る

12 の原則、テクニック、そして制作時のデフォルト設定によって実現できるのは、一般的な動きです。つまり、標準的な UI パターン（表示、ホバー、押下、トランジション、段階的な登場）に適用する、洗練され、機能的で、ブランドに沿った基本形です。控えめに適用すれば、それは本当に優れたものになり、多くの画面ではそれが適切な目標です。 まずサイトが機能する必要があります。一般的な動きは、動きを見せびらかすのではなく、機能に役立てるためのものです。

しかし、一般的な動きには限界があります。画面をわくわくするものにし、記憶に残り、まさにこのプロダクトだと感じさせる動きは、コンテンツに合わせて作るものです。原則を一律に適用するのではなく、コンテンツの実態や、そこに込められたストーリーから発想します。プロダクトが作業を行うエージェントだから、エージェントのログが流れ込む。ストーリーが成長だから、指標の線が描かれる。ブランド独自のモチーフを取り入れた、特徴的なインタラクションを作る。こうしたものは原則だけから生まれるのではなく、デザインの方向性から生まれます。すなわち、目指す感情、インスピレーション源、特徴的な要素、そしてプロダクトの実際のストーリーです。

そのため、依頼内容に合わせて調整し、限界について率直に伝えましょう。

• 「考え抜かれた／機能的な印象にしたい」 → 目標は一般的な動きそのものです。原則を控えめに適用し、そこで止めましょう。これはよくあるケースであり、良い成果です。依頼されていない高揚感を無理に作り出す必要はありません。
• 「わくわくする／記憶に残るものにしたい」 → 一般的な動きは完成形ではなく、出発点です。 プロダクトのストーリーやブランドの特徴的な要素に結び付いた、コンテンツに応じた独自のアイデアを取り入れましょう。そのためには、インプットとして実際のデザインの方向性が必要です。動きの特性とモチーフの両方、そして独自のアセットに関する方向性は、creative-direction が担います。そのインプットがない場合は、そう伝えてください。 汎用的な適用で正直に到達できるのは「良い」までで、「わくわくする」ものにはなりません。依頼に含まれていない奥深さを装うのではなく、方向性を確認しましょう。

抑制 — すべてが 同じように 動くわけではありません

初心者の本能（そしてAIのデフォルト設定）は、すべてを同じようにアニメーションさせることです。重要度に関係なく、すべての要素をスクロールに合わせてフェードアップさせること、ストーリーと結び付かないループするグラデーション――これらが design-principles → ai-slop で定番として名付けられているのには理由があります。判断の代わりにデフォルトが使われているのです。問題は動きの量ではなく、画一性であることに注目してください。どの程度動かすかは、ブランドが決める調整項目です（上記）。

モーションにも、ほかのあらゆるものと同じ階層構造が適用されます。メッセージを伝える要素には、考え抜かれた表現豊かなモーションを使い、補助的な詳細には控えめにするか、使わないようにします。モーションを一律にすると、文字の太さを一律にしたときと同じように、階層構造が平坦化します。すべてのセクションが同じようにフェードアップすれば、何も強調されません。動きを加える一方で、意味を損なっているのです。

そして、最も強い抑制の形は、最適なアニメーションが、アニメーションを使わないことである場合もあるということです（Emil Kowalski — references/practical-tips.md）。モーションは、説明やフィードバック、楽しさをもたらすことで、その存在意義を示す必要があります。繰り返し行われる操作では、逆効果になります。初回の楽しさは次第に煩わしさへと変わり、インターフェースが遅く感じられます。ここから、次の2つのルールが導かれます。

• キーボードで開始する操作は、決してアニメーションさせないでください。 リスト、メニュー、コマンドパレットを矢印キーで移動するときは即座に反応する必要があります。選択がアニメーションすると、キー入力と連動していないように感じられ、動作も遅く感じます。
• 頻度の高い操作から、アニメーション（および過剰なホバー状態）を取り除いてください — ユーザーが1日に何十回も行う操作が対象です。まれな操作や説明が必要な操作にはアニメーションを使い、それ以外では邪魔にならないようにします。

モーションの基本基準 — 原則を支える技術的な基盤

このスキルは実際のコードを提供するため、12 の原則を支える、譲れない技術的な基準があります。トークンとレシピの詳細は、references/motion-floor.md を参照してください。

• 名前付きのイージングセットを使い、生の linear や、どこでも同じ ease を使うことは避けます。 標準、登場、退出、弾む動き用のオーバーシュートなど、少数のカーブを cubic-bezier として定義し、用途に応じて使い分けます。
• 感情への働きかけに対応したデュレーションのスケールを設けます — マイクロフィードバック（ホバー／押下）は速く、標準的なトランジションは中程度、印象的で「ぜいたくな」場面はゆっくり、環境的なループはさらにゆっくりにします。その都度新しい値を感覚で決めるのではなく、スケールからデュレーションを選びます。
• コンポジターに適したプロパティだけをアニメーションします — transform と opacity（および慎重に扱う filter）です。 width／height／top／left／box-shadow をアニメーションするとレイアウトや描画が発生し、カクつきの原因になります。このカクつき自体が「安っぽさ」のサインです。ここで示すのは、web-design の技術的な基本基準です。
• prefers-reduced-motion: reduce への対応は必須です。 複雑なアニメーションにはすべて、透明度のみ、または即時切り替えなど、動きを抑えた代替手段を用意します。乗り物酔いや前庭障害は実際に存在します。動きを抑えられない美しいアニメーションは、装飾ではなく欠陥です。
• 一定の間隔でスタッガーを設定します（インデックスのカスタムプロパティ、または段階的な遅延を使用します）。間隔は、動きに重なりが生まれる程度に短く、スライドショーのようになるほど長くしないでください。
• 単純な状態変化には CSS を使い、複雑になったら GSAP を使います。 ホバー、フォーカス、押下、単一プロパティの表示には CSS を使います。プラットフォームが標準でできることに、ライブラリを追加する必要はありません。滑らかで、演出が組み合わされたタイムラインベースのモーションには、GSAP が最適なツールです。現在はすべてのプラグインを含め、完全に無料です。ScrollTrigger（スクロール駆動のシーケンスとピン留め）、SplitText（単語や行ごとのスタッガー表示）、Flip（共有要素やレイアウトのトランジション — モーフ技法）を利用できます。タイムラインを使うと、手動で調整した遅延を連鎖させるより、重なりやスタッガーをはるかに簡単に制御できます。また、負荷の高いシーケンスでは補間が明らかに滑らかです。詳細は references/motion-floor.md を参照してください。

本番環境向けのデフォルト値 — 洗練された印象を与える具体的な値。Emil Kowalski の推奨です（references/practical-tips.md）。登場と退出には ease-out を基本として使います（物理的な正確さより応答性を優先します。CSS 組み込みのカーブは弱すぎるため、カスタムカーブを使います）。UI のトランジションは約 300ms 未満にします（125／180／300ms が効果的な範囲です。長めの印象的なデュレーションは、まれなヒーロー演出に限ります）。:active ではボタンを 0.97 に縮小します。登場時のスケールは ~0.9 から始め、scale(0) は使いません（何もないところから突然現れたように見えるためです）。ポップオーバーやズームの起点を適切に設定します（transform-origin は中央ではなく、トリガーの位置にします）。さらに、わずかな blur(2px) を加えると、まだ唐突に感じるトランジションを滑らかにつなげられます。

出荷前の検証

design-principles があらゆる成果物の評価で推奨しているように、動きを評価します。頭の中ではなく、実際に動くページを、批判的な視点で確認します。 静止スクリーンショットでは動きを監査できません。実際に見て確認する必要があります。

• 意図した印象を伝えていますか？ 再生して確認します。タイミングやイージングはブランドが目指す感情に合っていますか。それとも、汎用的なイージングを安易に使っていませんか。曲線だけでなく、調整そのものを確認します。 ブランドが遊び心のあるものなら、動きは本当に表現豊かですか。それとも、気づかないうちに何でも同じように、洗練された高級感のある見た目にしていませんか？
• 階層がありますか、それとも一律ですか？ 何が、なぜ動くのかを書き出します。答えが「すべてが同じように動く」なら、それは AI スロップです。意味を伝えるものに絞りましょう。
• 重なりを確認します。 グループ化された要素は、順番に（素人っぽく）ではなく、重なり合いながら段階的に（上質に）表示されますか？ 順序を修正します。
• リニアを確認します。 linear や、よく検討していないデフォルトのイージングで動いているものはありませんか？ システムの曲線を割り当えます。
• パフォーマンスを確認します。 レイアウトを引き起こすプロパティをアニメーションさせていませんか？ transform／opacity に切り替えます。自分のマシンだけでなく、中価格帯のデバイスでもカクつかないか確認します。
• 動きを減らす設定を確認します。 prefers-reduced-motion を切り替え、ページが壊れるのではなく、落ち着いていて使いやすいことを確認します。

成果物

• 出荷するコードに実装された動き — プロジェクトのスタックに合わせて、実際の成果物にトランジション、キーフレーム、スクロール／ホバー／押下時の挙動を適用します（CSS トランジションと @keyframes、CSS スクロールドリブンアニメーション、または、インタラクションに本当に必要な場合は JS モーションライブラリ／IntersectionObserver。特定のツールには依存せず、プロジェクトで既に使っているものを使用します）。
• .agents/design.md の「Motion System — as built」セクションを追記します（継続的に更新する記録です。creative-direction → design-doc-template.md を参照）。イージングトークン、デュレーションのスケール、段階表示の間隔、動きを減らすルール、出荷時点でのシグネチャームーブを日付とともに記録し、後続の作業や他のアプリケーションスキルがシステムを再構築せずに引き継げるようにします。これは creative-direction が記した方向性のモーションに関する注記を拡張するものです。重複させず、参照してください。

必須事項

• 着手前の診断を実施済み：画面構成が健全で、システムのモーション特性が定まっていること。そうでなければ、web-design／creative-direction に差し戻します
• 動きは汎用的なデフォルトではなく、ブランドの感情的な目標に結び付いていること。イージングを選ぶ前に、目指す印象を決めます
• まず各モーションを役割で分類すること — 機能的／UI の動きはブランドにかかわらず実用性を優先し、ストーリーテリングや楽しさを加える動きにブランドらしさを反映します
• システムレベルでモーション特性を調整すること — イージングの個性、振幅、頻度／適用範囲、どの要素に動きを付けるかを、すべてブランドに基づいて決めます（遊び心のある印象と高級感のある印象は異なり、「洗練」は万能の目標ではありません）
• 動きは一律ではなく、階層的であること — 何が、なぜ動くのかを説明できる短いリストを用意します。「すべてが同じように」は認められません
• グループ化された要素は重なり合いながら段階的に表示すること。スライドショーのように順番に始まるものがないこと
• 名前の付いたイージングシステムを使用すること — 生の linear を使わず、すべてに単一の ease を適用しないこと
• デュレーションは要素ごとに目分量で決めるのではなく、感情を左右する要素に対応付けたスケールから選ぶこと（小さい／速い／軽い ↔ 大きい／遅い／重い）
• アニメーションはレイアウトを引き起こすプロパティではなく、コンポジターで処理される**transform／opacity** を使うこと
• prefers-reduced-motion を尊重し、重要なアニメーションすべてに動きを減らした経路を用意すること
• デフォルトの曲線は**ease-out**（CSS 組み込みの弱いものではなく、カスタムのもの）とし、UI トランジションは、まれに意図的な表現の場面を除き、約 300ms 未満にすること
• 表示アニメーションは scale(0) ではなく、約 0.9 から開始すること。ボタンは押下時に 0.97 まで縮小し、ポップオーバー／ズームではトリガーを基準にした原点（transform-origin）を指定すること
• キーボードで開始する操作はアニメーションさせないこと。頻繁に行う操作では、過剰な動きやホバー効果を取り除くこと（最善のアニメーションは、動きを付けないことの場合もあります）
• 実際に動くページで検証すること — 静止スクリーンショットで判断せず、再生して確認します

関連スキル

• design-principles — このスキルが時間軸で適用する、ものづくりにおける信念です（階層、抑制、実行よりも感情を優先すること、ai-slop の Motion の定番表現）
• creative-direction — ビジュアルシステムの一部として、ブランドのモーションの個性を定義します。Revolution／大規模な Evolution の場合は、こちらに戻ります
• web-design — 控えめなモーションの最低基準を備えた画面を提供し、表現豊かなモーションの技術はこのスキルに委ねます。最も一般的な上流スキルです
• collateral-design — 固定フォーマット向けの姉妹 Application スキルです。動画／ソーシャル広告のモーションもこのスキルと連携します
• brand — モーションが生み出すべき感情を定める、監査のスキルです
• design-critique (計画中 — まだ公開されていません) — 公開されたモーションを感情の目標と裁量の幅に照らして評価する予定です
• 参考資料：12 原則（references/twelve-principles.md）、UI ネイティブな技法ツールキット（references/ui-motion-techniques.md、motion.zajno.com より）、技術的な最低基準（references/motion-floor.md）、Emil Kowalski の制作時のデフォルト設定と抑制の重要性（references/practical-tips.md）