インターフェースモーションシステム
目的
インターフェースモーションシステムは、「機能的モーション」—ユーザーインターフェースにおいて特定の目的を果たす動き—を設計するための方法論を提供します。装飾的なアニメーションを超え、持続時間、イージング曲線、振り付けの体系を確立することで、ユーザーが空間的な関係性を理解し、アクションに対するフィードバックを得て、コンテキストの切り替えにおける認知的負荷を軽減します。
使用事例
- UIライブラリの標準トランジションのタイミングと曲線の定義
- 複雑なレイアウトシフト（例：カードの全画面への展開）の設計
- ユーザーアクションに対するフィードバックモーション（例：成功のチェックマーク、ローディングスピナー）の確立
- UIレイヤー（モーダル、ドロワー、トースト）の出入りの振り付け
- 特定の要素や変更に注意を誘導するためのモーションの活用
使用すべきでない場合
- 静的のみのブランド美学： 特定のトーン（例：ミニマリスト、ブルータリスト、「ペーパーライク」なデザイン）を伝えるために意図的に動きを避けるビジュアルスタイル。
- 純粋に装飾的な「フラッフ」： 機能的価値を追加せず、ユーザーを主要タスクからそらすアニメーション（例：操作なしで動く背景要素）。
- 高レイテンシ環境： モーションのレンダリングのパフォーマンスコストがUXの利点を上回り、「カクツキ」やラグを引き起こす場合。
入力
- ブランドの個性： モーションは「迅速/生産的」（速い、リニア）か、「自然/流動的」（バウンド、ソフト、有機的）か？
- インタラクションのコンテキスト： 何が動いているか？（原子要素、コンテナ、またはページ全体）
- トリガータイプ： モーションはシステム（ローディング）、ユーザー（クリック/ホバー）、環境（スクロール）のどれによってトリガーされるか？
- プラットフォームの機能： ターゲットブラウザやデバイスの技術的制約。
出力
- 持続時間スケール： 標準化されたタイミングトークンのセット（例：
motion-fast、motion-standard、motion-slow）。 - イージングパレット： 異なるモーションの意図のためのベジェ曲線の定義セット（例：
ease-in、ease-out、emphasized）。 - 振り付けルール： 要素がどのように出入りし、互いに対して移動するかに関する標準。
- モーショントークン仕様： 開発者向けのモーション変数のドキュメント。
ワークフロー
1. 持続時間スケールの確立
変化の大きさに基づいてタイミングの論理的な進行を作成します：
- 高速（100–150ms）： マイクロインタラクションや原子状態（ホバー、トグル、アクティブ）向け。
- 標準（200–300ms）： 中規模のトランジション（ドロップダウン、ツールチップ、小さな展開）向け。
- 低速（350–500ms）： 大規模なレイアウトシフトや没入型トランジション（モーダル、ページレベル変更）向け。
2. イージング曲線の定義
異なるベジェ曲線に意味を割り当てます：
- 標準（Ease-in-out）： ビューポート内で一点から別の点に移動する要素向け。
- 進入（Ease-out）： ビューポートに出現または進入する要素向け（速く始まり、遅く終わってレスポンシブに感じさせる）。
- 退出（Ease-in）： ビューポートから消える、または退出する要素向け（遅く始まり、速く終わって目的を持って感じさせる）。
- 強調（複雑）： 高品質に感じさせる必要がある主要なトランジション向けのカスタム曲線（例：
cubic-bezier(0.4, 0, 0.2, 1)）。
3. 空間的なメンタルモデルのための設計
モーションを使用して、要素がどこから来てどこへ行くのかを説明します：
- 方向の連続性： ドロワーが右からスライドインする場合、右に退出する必要があります。
- 親子関係： 子要素（例：メニュー）は理想的にはその親（ボタン）から発生するべきです。
4. シーケンスの振り付け（スタッガリング）
複数の要素が同時に出現する場合、「ポップイン」効果を避けます：
- スタッガリング： 要素間にわずかな遅延（20–50ms）を導入して、特定の順序で目を誘導します。
- 方向性スタッガー： 読み方向（上から下、または左から右）にアイテムをスタッガーします。
5. アクセシビリティの計画（モーション軽減）
モーションは包括的でなければなりません：
- 「プレフライト」チェック： OSレベルで「モーションを減らす」が有効なユーザー向けのフォールバックを常に定義します。
- 代替ビジュアル：
prefers-reduced-motionがアクティブな場合、モーションを不透明度フェードまたはアニメーションなしに置き換えます。
決定ルール
- 「機能的優先」ルール： モーションがユーザーに何を伝えるかを説明できない場合、削除します。
- レスポンシブタイミング： 小さい画面（モバイル）では持続時間を短くします。要素が移動する物理的距離が小さいためです。
- アクションでは流動性よりも速度： インタラクションフィードバック（例：ボタンクリック）は、結果のトランジションが長くても、瞬時に（<100ms）感じられるべきです。
- 無限ループ禁止： バックグラウンドブロッキング状態を表す場合を除き、停止しないループアニメーション（スピナー、パルス）は避けます。
制約
- アクセシビリティ：
prefers-reduced-motionを尊重する必要があります。モーションは発作を引き起こしてはいけません（高速点滅や大規模な高周波パターンを避ける）。 - パフォーマンス： 「コンポジターのみ」のプロパティ（
transformとopacity）に固執して、60fpsのパフォーマンスを確保します。width、height、marginのアニメーションは避けます。 - 一貫性： サイト全体で同じコンポーネントタイプに同じ持続時間とイージングを使用します。
一般的な失敗パターン
- 「乗り物酔い」の罠： 前庭系の不快感を引き起こす、大きく広範囲な動き（例：ページ全体のスライド）を使用する。
- 鈍いインターフェース： 持続時間を長く設定しすぎる（例：メニューに1秒）、ユーザーを待たせ、サイトが壊れているように感じさせる。
- リニアモーション： 「リニア」イージングを使用すると、物理世界に見られる加速/減速と比較して機械的で不自然に感じられる。
- 混乱する方向： モーダルが中央から「拡大」するが、下部に「スライド」して退出し、ユーザーの空間モデルを壊す。
- 「ジッター」効果： スタッガリングの遅延が長すぎ、ページがゆっくり読み込まれているように感じさせる。
検証基準
- すべてのトランジションに定義された持続時間とイージングトークンがある。
- 持続時間はトランジションのサイズに比例している（小さい場合は高速、大きい場合は低速）。
- モーションは明確な空間的なメンタルモデルをサポートしている（論理的な出入り）。
- 複数要素の表示ではスタッガリングを使用して目を誘導している。
- アクセシビリティ：
prefers-reduced-motionが明確な簡略化戦略で対応されている。 - パフォーマンス：頻繁なアニメーションには
transformとopacityのみが使用されている。 - フィードバックモーション（例：ボタンクリック）は100ms未満で開始する。