「動き方」でキャラクターが変わる

現実の物体は等速では動きません。ボールを投げれば加速し、着地する前に減速する。扉を開ければ最初はゆっくりで、途中から速くなる。アニメーションの「動き方」——イージングはその加速・減速のプロファイルです。

同じ距離・同じ時間の移動でも、イージングが違えばUIの「性格」はがらりと変わります。

---

6種類のイージング、一斉比較

ボタンを押すと6つのボールが同時に動き出します。数値や名前より、動きの「印象」を感じてください。

linear（機械的）は等速で、ロボットのような印象。ease-in（消えていく）は最初ゆっくりで加速——力が尽きた物体が落ちていく感じ。ease-out（着地する）は素早く動き出して減速——自然で最もよく使われる。ease-in-out（滑らか）は両端が丸く、上品な印象。overshoot（元気）は少し行き過ぎて戻る生き生きした動き。elastic（弾む）は大げさに行き過ぎる、遊び心のある動き。

---

入場と退場の法則

これを覚えておくだけで、アニメーションが自然に見えます。

現れるとき（入場）→ ease-out を使う。素早く動き出して、着地するようにゆっくり止まる。扉が開く、荷物が届く、通知が現れる——これらは「力を持って現れ、優しく止まる」。

消えるとき（退場）→ ease-in を使う。ゆっくり動き出して、加速しながら消える。力が尽きて消えていく物体のように。

この法則を逆に使うと不自然になります——次のデモで体感してください。

---

法則を守る vs 破る

モーダルを開いて、閉じてみてください。

「不自然」な方は、入ってくるときもたついて、消えるときも締まりがない。法則を守るだけで、アニメーションは「当たり前にそこにある」自然な動きになります。

---

overshoot でアプリらしさを出す

少し行き過ぎてから戻る動き（overshoot）は「生き生き感」を与えます。チェックマーク、お気に入り登録、送信完了——こういった「ポジティブなアクション」に使うと効果的です。

overshoot は乱用すると「うるさい」UIになります。ポジティブなアクションの結果表示——登録完了、送信完了、いいね——に絞って使うのが効果的です。