モーションデザインの体系化

モーションデザインの体系化

はじめに

モーション（アニメーション）はUIの重要な構成要素でありながら、デザインシステムで体系化されることが少ない領域です。一貫性のないアニメーションはユーザーを混乱させ、パフォーマンスにも悪影響を与えます。この章では、モーションをトークンとガイドラインで体系化する方法を学びます。

モーションの役割

UIにおけるアニメーションには明確な目的があります。

• ◆フィードバック: ユーザーの操作に対する視覚的な応答。ボタン押下時のリップル効果など
• ◆状態遷移: 画面間やコンポーネント間の遷移を滑らかにし、空間的な関係を伝える
• ◆注意誘導: 重要な変更や新しい要素にユーザーの視線を誘導する
• ◆空間認知: 要素がどこから来てどこへ行くのかを示し、UIの構造を理解しやすくする

モーショントークンの設計

アニメーションの値をトークンとして定義します。

• ◆Duration（持続時間）: instant(0ms)、fast(100ms)、normal(200ms)、slow(300ms)、slower(500ms)
• ◆Easing（イージング）: ease-in(加速)、ease-out(減速)、ease-in-out(加速→減速)、spring(バウンス)
• ◆Delay（遅延）: コンポーネントの出現順序を制御。stagger(50ms間隔)で連続出現効果
• ◆Scale（変化量）: 要素のサイズ変化幅。subtle(0.98→1.0)、moderate(0.9→1.0)、dramatic(0→1.0)

パターン別モーション定義

UIの各パターンに適切なモーションを割り当てます。

• ◆出現: フェードイン（opacity 0→1）+ スライドアップ（translateY 8px→0）。200ms ease-out
• ◆消失: フェードアウト（opacity 1→0）。150ms ease-in。出現より短い方が自然
• ◆展開: アコーディオンの開閉。300ms ease-in-out。高さのtransition
• ◆トースト: 右端からスライドイン。300ms ease-out。5秒後に自動フェードアウト
• ◆モーダル: 背景のフェード + コンテンツのスケールアップ（0.95→1.0）。200ms ease-out

パフォーマンスへの配慮

アニメーションがパフォーマンスに与える影響を最小化します。

• ◆GPU対応プロパティ: transform と opacity のみをアニメーションさせる。width、height、topなどは避ける
• ◆will-change: アニメーション対象要素にwill-changeを設定し、ブラウザに最適化のヒントを与える
• ◆prefers-reduced-motion: アニメーション軽減を望むユーザーの設定を尊重する。必須のa11y対応
• ◆60fps維持: requestAnimationFrameを使用し、メインスレッドのブロックを避ける

モーション削減モード

アクセシビリティとしてのモーション制御を学びます。

• ◆OS設定の検出: prefers-reduced-motion: reduce で、ユーザーがアニメーション軽減を希望しているか検出
• ◆対応方針: 装飾的なアニメーションは無効化し、機能的なアニメーション（ローディング等）は維持
• ◆CSSでの実装: @media (prefers-reduced-motion: reduce) { .motion-decorative { animation: none; transition: none; } } のように、装飾的なアニメーションに対象を絞って無効化する
• ◆段階的対応: 完全無効化ではなく、持続時間を短縮するアプローチも有効

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆モーショントークン（duration、easing）を定義し、CSS変数として実装してみましょう
• ◆モーダルの出現・消失アニメーションをトークンを使って実装してみましょう
• ◆prefers-reduced-motionに対応したモーション削減モードを実装してみましょう

📝まとめ

モーションをデザインシステムに体系的に組み込むことで、プロダクト全体のアニメーションに一貫性が生まれ、UXとパフォーマンスの両方が向上します。Duration、Easing、パターン別定義をトークン化し、パフォーマンスとアクセシビリティにも配慮した設計を心がけましょう。次の章では、デザインシステムのガバナンスと運用を学びます。