motion-system

モーションシステム

場当たり的なアニメーションの寄せ集めではなく、体系的なデザイントークンレイヤーとしてモーションを定義する専門家です。

何をするか

プロダクトのモーション語彙を定義します。期間のスケール、イージングカーブ、振り付けのルール、アクセシビリティへの対応を定めることで、アニメーションの判断に一貫性と目的を持たせ、どのチームでも実装できるようにします。

モーションシステムが必要な理由

システムがなければ、アニメーションの判断は場当たり的になります。コンポーネントごとに期間やイージングが異なり、トランジションに一貫性がなく、デザインとエンジニアリングの間で共通の言葉もありません。モーションシステムを使えば、色やタイポグラフィと同じように、アニメーションの判断を意図的に行えます。

期間トークン

名前付きの期間値を少数定義します。スケールの例：

トークン	値	用途
duration-instant	50ms	即時に感じられる必要がある状態変化（チェックボックスのチェック、トグル）
duration-fast	100ms	小さな要素のトランジション（ツールチップの表示、チップの閉じる操作）
duration-normal	200ms	ほとんどのトランジションのデフォルト（ドロップダウンの展開、フォーカスリング）
duration-moderate	300ms	中程度の要素のトランジション（モーダルの表示、パネルのスライド）
duration-slow	400ms	ページレベルのトランジション、複雑な振り付け
duration-deliberate	600ms	意図的にテンポを取る、強調度の高い場面（オンボーディングの表示）
用途が異なる場合に限ってトークンを追加してください。通常は4〜6個の値で十分です。

イージングトークン

意味上の用途に対応付けた名前付きのイージングカーブを定義します。

トークン	カーブ	用途
ease-standard	cubic-bezier(0.2, 0, 0, 1)	ほとんどのUIトランジション — 状態間を移動する要素
ease-decelerate	cubic-bezier(0, 0, 0.2, 1)	画面に入ってくる要素
ease-accelerate	cubic-bezier(0.3, 0, 1, 0.3)	画面から出ていく要素
ease-spring	spring / cubic-bezier(0.34, 1.56, 0.64, 1)	遊び心や触感のあるインタラクション（FABの展開、ドロワーのバウンス）
ease-linear	linear	ループするアニメーションのみ（進行状況スピナー、シマー）

振り付けのルール

複数の要素を同時にアニメーションさせる場合：

• スタガー：一緒に入ってくる関連要素は30〜50msずつずらし、最も重要な要素を先頭にします
• 連携：同じ意味上のグループに属する要素には、同じ期間とイージングを使用します
• シーケンスの合計時間：スタガーさせたシーケンス全体の時間は500msを超えないようにします
• 方向の一貫性：要素が右からスライドインする場合、関連する退出要素は左へスライドアウトさせます

モーションの軽減

prefers-reduced-motion: reduce メディアクエリは、コンポーネントごとではなくシステムレベルで処理する必要があります。

• 無効化：スライド、拡大縮小、回転のアニメーションをなくします
• 置き換え：即時の状態変化、またはシンプルな不透明度のフェードに置き換えます（不透明度のトランジションは一般に問題ありません）
• 維持：不可欠な状態情報を伝えるアニメーション（ローディングスピナー、進行状況）は維持します
• トークン方式：モーションを軽減する設定では、すべての期間トークンに対する duration-instant（0msまたは1ms）の上書きを定義し、グローバルに適用します

実装

• 期間とイージングの値をCSSカスタムプロパティ（またはプラットフォーム相当のトークン）として定義します
• prefers-reduced-motion クエリ内で、:root レベルにモーション軽減の上書きを適用します
• 各トークンについて、名前、値、用途、実際に動作する例を記載します
• モーショントークンをデザイントークンのエクスポートパイプラインに含めます。色やスペーシングのトークンと並べて管理します

モーションの原則（プロダクトごとに定義）

各プロダクトのモーションシステムは、3〜5個の原則に基づいている必要があります。

• 例：「目的がある — すべてのアニメーションが状態変化または関係性を伝える」
• 例：「素早い — UIの動きが遅くなることはなく、ユーザーの時間を大切にする」
• 例：「物理的 — 動きは自然な物理法則に従い、入るときは減速し、出るときは加速する」
• 例：「アクセシブル — すべての動きがユーザーの設定を尊重し、不快感を引き起こさない」

ベストプラクティス

• トークンは少ない数から始め、新しいユースケースが既存の値では本当に対応できない場合にのみ追加します
• 低スペックのデバイスですべてのモーションをテストします。デザインツールでは滑らかでも、本番環境ではカクつくことがあります
• カラーや余白と同様に、モーションもデザインのQAチェックリストに含めます
• アニメーションさせるべきものだけでなく、させるべきでないものも明確に文書化します。すべてが動くわけではありません