イージング完全ガイド

目次

1. 01イージングとは
2. 02なぜ等速は不自然に見えるか
3. 03分類の軸は2つしかない(MECE)
4. 04軸1: 方向(In / Out / In Out)
5. 05軸2: カーブの形(7系統・全10種)
6. 06全種比較グラフ
7. 07実装コード(10の型 + 2つの変換則 = 全30種)
8. 08CSSでの実装(cubic-bezier / steps)
9. 09もう1つのパラダイム: スプリング(物理ベース)
10. 10実践の落とし穴
11. 11使い分け早見表
12. 12まとめ

01. イージングとは

イージング(easing)とは、時間の経過(0〜1の進捗)に対して「値がどう変化するか」を決める関数のこと。同じ1秒間・同じ距離の移動でも、この関数を変えるだけで、速そう・重そう・弾むような印象を自在に作れる。

逆に言えば、座標や不透明度をアニメーションさせるときに「進捗をそのまま値に使う」か「進捗をイージング関数に通してから値に使う」かの違いでしかない。仕組みはとても単純だが、効果はとても大きい。

02. なぜ等速(Linear)は不自然に見えるか

現実の物体には質量があり、動き出しには力が要る(慣性)。止まる時には摩擦や反発が働く。最初から最後まで同じ速度で動き続ける物は現実にはほぼ存在しない。だから等速運動は「機械的」「安っぽい」印象になりやすい。

03. 分類の軸は2つしかない(MECE)

「イージングの種類が多すぎて覚えられない」となりがちだが、実際は2つの軸のかけ合わせでしかない。

• 軸1: 方向 — In / Out / In Out の3種(+方向なしのLinear)。動きのどちら側を緩めるか
• 軸2: カーブの形 — Sine / Quad / Cubic / Quart / Quint / Expo / Circ / Back / Elastic / Bounce の10種。緩急の質感

3(方向) × 10(形) = 30種類。世の中の主要な実装(easings.net、CSS、Unity、After Effects系)がほぼ全てこの30種の組み合わせに収まる。逆に言えば、この2軸さえ理解すれば「網羅した」と言い切れる。

04. 軸1: 方向(In / Out / In Out)

迷ったら Ease Out から試すのが定石。人の目は「勢いよく現れて、静かに収まる」動きを自然だと感じやすい。逆に Ease In は「消える」「離脱する」動きに向く — 主役が退場するときは、ゆっくり助走して速く去っていく方が違和感がない。

05. 軸2: カーブの形(7系統・全10種)

「強さ」で並べる系統(べき乗系)と、質感がまったく違う系統(三角関数・指数・円弧・オーバーシュート・振動・反発)に分けると覚えやすい。

べき乗系(Quad / Cubic / Quart / Quint)

同じ Ease Out でも、べき乗の次数を上げるほどカーブが急になり、緩急の差が強く出る。Quad(2乗) < Cubic(3乗) < Quart(4乗) < Quint(5乗) の順で、動き出し・止まる瞬間の"間"がドラマチックになる。

• Quad〜Cubic — UIの小さな動き、ボタンやカードの反応。強すぎず自然
• Quart〜Quint — 画面遷移など、少し存在感を出したい動き

三角関数系(Sine)

全イージングの中で最もなだらか。sin/cosの1/4周期をそのまま使うため、加減速の変化がゆるやか。「呼吸するような」自然な動きに一番近い。強調したくない、常時ループするような動き(待機アニメーションなど)に向く。

指数系(Expo)

2のべき乗を使うため、Quint よりさらに急激。動き始め・止まる瞬間がほぼ一瞬で、途中は猛スピード。「ワープする」ような誇張された演出向き。使いどころを間違えると落ち着きのない印象になるので、強い印象を狙う場面だけに絞って使う。

円弧系(Circ)

円の弧の方程式(√(1-x²))を使う。べき乗系や指数系と似て見えるが、端付近(0や1に近い付近)での曲がり方が急激で、中間はやや直線的という独特のクセがある。Quad と Expo の中間のような質感で、機械的な精密さを出したいときに使われる。

オーバーシュート系(Back)

目標値を一度通り越してから戻ってくる。勢い・弾力を感じさせたい登場演出に向く(例: モーダルがポンと少し大きく出てから収まる)。

振動系(Elastic)

バネのように目標値の周りで何度か振動してから収束する。Backをさらに強調したような動き。ポップアップの登場、軽快さを出したい場面に。振動回数が多いほど「安っぽい」「うるさい」印象になりやすいので、Elasticは基本的に控えめに使う。

反発系(Bounce)

地面に落ちて跳ねるような動き。物理的・キャラクター的な遊び心を出したいときに使う。UIの実務ではあまり使わないが、ゲームやキャラクターアニメーションでは定番。

06. 全種比較グラフ

横軸が時間の進捗(0→1)、縦軸が実際の値(0→1)。直線からどれだけ曲がっているかが、緩急の強さそのもの。オーバーシュート系(Back/Elastic)は縦軸が1を超えたり0を下回ったりする点に注目。

07. 実装コード(10の型 + 2つの変換則 = 全30種)

30種類ぜんぶを個別に覚える必要はない。各系統の Out 版さえ知っていれば、以下の2つの変換則で In と In Out を機械的に導出できる。

// 変換則1: Out から In を作る
function makeEaseIn(easeOut) {
  return x => 1 - easeOut(1 - x);
}

// 変換則2: Out から In Out を作る
function makeEaseInOut(easeOut) {
  return x => x < 0.5
    ? (1 - easeOut(1 - 2 * x)) / 2
    : (1 + easeOut(2 * x - 1)) / 2;
}

10系統の Out 版の定義(easings.net の定義に準拠):

function easeOutSine(x) {
  return Math.sin((x * Math.PI) / 2);
}

function easeOutQuad(x) {
  return 1 - (1 - x) * (1 - x);
}

function easeOutCubic(x) {
  return 1 - Math.pow(1 - x, 3);
}

function easeOutQuart(x) {
  return 1 - Math.pow(1 - x, 4);
}

function easeOutQuint(x) {
  return 1 - Math.pow(1 - x, 5);
}

function easeOutExpo(x) {
  return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
}

function easeOutCirc(x) {
  return Math.sqrt(1 - Math.pow(x - 1, 2));
}

function easeOutBack(x) {
  const c1 = 1.70158;
  const c3 = c1 + 1;
  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
}

function easeOutElastic(x) {
  const c4 = (2 * Math.PI) / 3;
  return x === 0 ? 0
    : x === 1 ? 1
    : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
}

function easeOutBounce(x) {
  const n1 = 7.5625, d1 = 2.75;
  if (x < 1 / d1) return n1 * x * x;
  if (x < 2 / d1) return n1 * (x -= 1.5 / d1) * x + 0.75;
  if (x < 2.5 / d1) return n1 * (x -= 2.25 / d1) * x + 0.9375;
  return n1 * (x -= 2.625 / d1) * x + 0.984375;
}

使い方: easeInQuint = makeEaseIn(easeOutQuint)、easeInOutBack = makeEaseInOut(easeOutBack) のように呼び出せば、10種類 × 3方向 = 全30種がこの1ファイルで揃う。実際の値への適用は共通で value = start + (end - start) * ease(progress)。progress はフレーム数を継続時間で割って 0〜1 に正規化したもの。

08. CSSでの実装(cubic-bezier / steps)

JSで自前計算しなくても、CSSの transition-timing-function / animation-timing-function だけでイージングは表現できる。ここには連続カーブ系とはまったく別の「離散(段階的)」という第3のイージング系統がある。

連続カーブ: cubic-bezier()

CSS標準のイージングキーワードは、すべて3次ベジェ曲線の近似で表現されている。

/* 標準キーワードの正体(制御点の値) */
ease         → cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in      → cubic-bezier(0.42, 0, 1, 1)
ease-out     → cubic-bezier(0, 0, 0.58, 1)
ease-in-out  → cubic-bezier(0.42, 0, 0.58, 1)

/* Quad/Cubic系の近似も自作できる */
.pop {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Backに近い */
}

4つの数値は制御点の (x1, y1, x2, y2)。y が 0〜1 の範囲を超えると Back のようなオーバーシュートになる。Elastic や Bounce のような振動は3次ベジェ曲線1本では表現できず、CSSでは @keyframes で複数の中間ポイントを打って近似する。

離散カーブ: steps()

ここまでの曲線系はすべて「連続的」に値が変化する。steps() はそれとは軸が異なる第3の系統で、値が一定間隔で飛び飛びに変化する。パラパラ漫画・スプライトアニメ・レトロな質感を出すのに使う。

.frame {
  animation: move 1s steps(6, end) infinite;
}

09. もう1つのパラダイム: スプリング(物理ベース)

これまでの全て(Penner系のイージング関数、cubic-bezier)は「進捗0〜1に対する値」を数式で決め打ちするパラメトリックな方式。それに対し、iOSの標準アニメーションやFramer Motionなどが採用するスプリング(物理シミュレーション)は根本的に発想が違う。

スプリングには「進捗」という概念そのものが無い。バネの物理法則(質量・剛性・減衰)を毎フレーム計算し、その結果として動きが決まる。

// 超簡易スプリングシミュレーション(毎フレーム呼ぶ)
let pos = 0, vel = 0;
const target = 100, stiffness = 0.1, damping = 0.8;

function stepSpring() {
  const force = (target - pos) * stiffness;
  vel = (vel + force) * damping;
  pos += vel;
}

10. 実践の落とし穴

• Elastic/Bounceは短いdurationだと潰れる — 振動・反発を表現するには最低でも0.5〜0.8秒程度は必要。0.2秒のボタンにElasticを使っても、速すぎて振動が見えず「バグって見える」だけになる
• 全要素に同じイージングを使わない — 位置(position)はEase Outが自然でも、透明度(opacity)は人間の目の感度的にLinearに近い方が自然に見えることが多い。プロパティごとに最適なカーブは違う
• 強すぎるイージングは「安っぽい」に転ぶ — ExpoやElasticは強力な分、多用すると画面全体が落ち着かない印象になる。1画面に強いイージングは1〜2箇所まで、が目安
• 複数要素にはイージングだけでなく「ずらし」も — 同じイージングでも、複数要素が同時に動くと単調に見える。開始タイミングを少しずつずらす(スタッガー、ロードマップ06で扱う)と一気に自然になる
• Ease In Outを万能扱いしない — 「迷ったらIn Out」は間違いではないが、登場だけ/退場だけの動きにIn Outを使うと、動き出しと止まる瞬間の両方が鈍り、間延びした印象になりやすい

11. 使い分け早見表

12. まとめ

イージングは「方向(In/Out/In Out)× カーブの形(Sine/Quad/Cubic/Quart/Quint/Expo/Circ/Back/Elastic/Bounce)」の2軸30パターンと、それとは別枠の「離散(steps)」「物理ベース(スプリング)」の2パラダイムを押さえれば、実務で出てくる緩急表現のほぼ全てをカバーできる。ここまでが「型」の全体像。

次のロードマップ項目「Timing & Spacing」では、このイージングに加えて要素間の"間隔"の作り方を扱う。単体の動きの質から、複数の動きの組み立て方へ話を進める。