スキル自身の言葉で
このスキルは、ユーザビリティを高めユーザーを喜ばせるために、マイクロインタラクション、モーションデザイン、トランジション、ユーザーフィードバックパターンを設計・実装します。具体的なタイミングガイドラインとして、ホバーやクリックのようなマイクロフィードバックには100-150ms、トグルやドロップダウンのような小さなトランジションには200-300ms、モーダルやページ変更のような中程度のトランジションには300-500ms、複雑に組み合わされたアニメーションには500ms以上を提供します。
このスキルは、スケルトン画面やプログレスインジケーターを用いたローディング状態、スワイプで消去するようなジェスチャーベースのインタラクション、ページトランジション、リップルエフェクトなどのフィードバックパターンを扱います。装飾ではなく意図を伝える目的的なモーションを重視し、アクションを確認するフィードバック、要素の移動を示すオリエンテーション、注意を向けるフォーカス、トランジション中に文脈を維持するコンティニュイティという4つの原則を用います。
生成されるもの
- ホバー、タップ、スプリングアニメーションを伴うボタンのマイクロインタラクション
- ローディング状態向けのパルスアニメーション付きスケルトン画面
- スムーズなスプリングベースの状態遷移を伴うトグルコンポーネント
- AnimatePresenceを用いた不透明度と垂直方向の動きによるページトランジション
仕組み
- 01インタラクションの規模に応じたタイミングガイドラインに従う
ホバーやクリックのようなマイクロフィードバックには100-150ms、トグルのような小さなトランジションには200-300ms、モーダルのような中程度のトランジションには300-500ms、複雑なアニメーションには500ms以上を使用してください。
- 02適切なイージング関数を選択する
要素の登場にはease-out（減速）を、要素の退場にはease-in（加速）を、状態間の移動にはease-in-outを、そして遊び心のあるオーバーシュート効果にはspringを使用してください。
- 03アクセシビリティ設定を尊重する
prefers-reduced-motionメディアクエリを確認し、ユーザーがモーション減少を希望している場合はアニメーションの継続時間を0.01msに短縮して、アニメーションが不快感を与えないようにします。