emilkowalski-motion

Emil Kowalski のモーションフォローアップ

デザイン成果物がすでにある場合に、このスキルを使用します。目的は、モーションのデモにならない範囲で、インターフェースに生き生きとした印象を与えることです。

ワークフロー

1. アニメーションを追加する前に、現在の HTML、コンポーネント、または選択されているページ要素を確認します。
2. 状態や階層を明確にする、最小限のモーションを選びます。
   • 主要コンテンツの表示時の演出
   • 重要なコントロールのホバー／アクティブ時のフィードバック
   • UI の状態間の切り替え
   • ストーリーを伝えるうえで役立つ場合に限り、スクロールに応じた表示
3. transform と opacity を優先します。top、left、width、height などのレイアウトプロパティのアニメーションは避けます。
4. 成果物全体で一貫したモーション表現を使用します。関連性のないイージング、時間、物理特性を混在させないでください。
5. 自動再生またはスクロール連動のモーションには、prefers-reduced-motion のフォールバックを用意します。
6. ユーザーが明示的に再デザインを依頼しない限り、コピー、データ、レイアウトの意図を維持します。

モーションのルール

• UI の標準的な切り替えは、すばやく実用的な印象にします。ほとんどのコントロールでは 140〜220ms を目安にします。
• ページ全体の表示演出には、より長い時間をかけても構いませんが、読書を妨げないようにします。
• ステータスや進行状況を伝える場合を除き、終わりなく繰り返す装飾的なアニメーションは避けます。
• カスタムカーソル、過剰なパーティクル効果、コンテンツの妨げになるモーションは追加しないでください。
• 段階的な表示は、小さなグループに限ります。長いリストを順番に表示すると、インターフェースが遅く感じられます。

実装メモ

• 素の HTML では、CSS キーフレームと小規模な JavaScript オブザーバーで十分です。
• React やフレームワークのコードでは、リポジトリにすでにあるローカルのスタックを使用します。
• GSAP が利用可能で、モーションにシーケンス制御が必要な場合は、gsap-core、gsap-timeline、または gsap-scrolltrigger と組み合わせます。
• オブザーバー、タイマー、アニメーションのインスタンスは、必ずクリーンアップします。