#034
インタラクション・アニメーション
#034いーじんぐ
イージング
別名・表記:EasingEase-inEase-out
UIXHERO Definition
「動きの緩急」。徐々に速くなったり、ゆっくり止まったりする動きのカーブ。
概要
自然界には「等速運動（Linear）」で動き出し、急に止まるものはほとんどない（車も急には止まれない）。人間が知覚する日常的な物体運動の多くは、加減速を伴う。 イージングは、デジタルな動きに物理法則のような「重み」や「摩擦」を与えることで、ユーザーに安心感やリアリティを感じさせる。
UXでの活用
- Ease-out（減速）: ユーザーの操作（クリックなど）に対する反応として最も適している。「スッ」と動いて「ピタッ」と止まる動きは、キビキビとした操作感（Responsiveness）を生む。
- Bouncing（バウンド）: エラー時や限界までスクロールした時に、少し跳ね返るような動きをつけることで、視覚的なフィードバックを強化する。
💡 使いどころ
全てのアニメーションにおいて。特に、画面内に要素が入ってくる時（Ease-out）や、画面外に出ていく時（Ease-in）に必須。
⚠️ 注意点・誤用
線形（Linear）な動きは、ロボット的で不自然に見えるため、特別な意図がない限り避ける。WebではCSSの`transition-timing-function`で指定する。
具体例
- Ease-out（減速）：徐々にゆっくりになって止まる。自然界の動きに最も近く、UIで最もよく使われる。
- Ease-in（加速）：徐々に速くなる。画面から退場する時などに使う。
- Ease-in-out（加速して減速）：強調したい動きに使う。
出典・参考文献:
- Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. Disney Editions.
- Google. (2014). Material Design Guidelines: Motion. Google Design.
- Ware, C. (2013). Information Visualization: Perception for Design (3rd ed.). Morgan Kaufmann.
関連する解説記事
関連する記事詳細が見つかりませんでした。