イーズインイーズアウトとは？

イーズインイーズアウト（ease-in ease-out）は、アニメーション・映像・UI設計などで用いられる動きの変化速度（イージング）の一種です。「イーズイン」は動きの始まりをゆっくりにして徐々に加速する効果、「イーズアウト」は終わりに向かって徐々に減速する効果を指します。この二つを組み合わせた「イーズインイーズアウト」では、動きの最初と最後がなめらかに緩やかになり、中間が最も速くなります。

現実世界では物体が動き始めるときは慣性により遅く、最高速度に達した後は抵抗や摩擦によって減速します。イーズインイーズアウトはこの物理的な動きを再現することで、視聴者・ユーザーに対して違和感のない自然な印象を与えます。一定速度（リニア）で動くアニメーションは機械的・不自然に感じられることが多いため、プロのアニメーターはほぼすべての動きにイージングを適用します。

代表的な活用場面は以下のとおりです。

• Webページのボタンやモーダルのトランジション
• スマートフォンアプリの画面遷移
• 映像・モーショングラフィックスのテキスト飛び込み
• ゲームのキャラクター・カメラの動き

CSSではイージング関数として ease・ease-in・ease-out・ease-in-out が標準で用意されており、cubic-bezier() 関数で細かく調整することも可能です。アニメーションの質を大きく左右する基礎的かつ重要な概念です。