cubic-bezierイージング入門｜4つの数値と制御点の意味を図解
公開日：2026年9月13日 更新日：2026年9月1日 運営：シルギア（Analyzegear, Inc.） 対象ツール：cubic-bezier イージング作成
ボタンが「ふわっ」と開く、パネルが「すっ」と滑り込む——そんなUIの気持ちよさは、動きの速さそのものよりも「速さの変化のつけ方」で決まります。CSSでその変化を指定するのが transition-timing-function（イージング）で、その中でも自由な曲線を描けるのが cubic-bezier(x1, y1, x2, y2) です。このガイドでは、4つの数値が何を意味するのか、標準キーワードの実体は何か、なぜ数値を範囲外に出すと「バウンド」になるのかを、実際に手を動かして曲線を作れるジェネレーターの挙動に合わせて解説します。
イージングとは「時間に対する進行度の割り当て方」
アニメーションには必ず「始点」と「終点」があります。たとえば要素を右へ200px動かすなら、開始が0px、終了が200pxです。イージングが決めるのは、この0%から100%までを「どんなペースで埋めていくか」です。横軸に経過時間（0=開始、1=終了）、縦軸に進行度（0=まだ動かない、1=動き終わり）をとったグラフを考えると、イージングは1本の曲線として描けます。
直線（linear）なら時間と進行度が比例し、一定速度で動きます。曲線が急な区間は進行度が一気に増えるので「速く」感じ、緩やかな区間は「ゆっくり」感じます。人の目には、動き出しと止まり際に少し「ため」がある動きが自然に見えます。だからこそ、この曲線を自在に描けることが、心地よいUIを作る鍵になります。
制御点 P1・P2 と、4つの数値の意味
cubic-bezierは「3次ベジェ曲線」という数式で曲線を描きます。始点 P0=(0,0) と終点 P3=(1,1) は固定され、動かせるのは途中の2つの制御点 P1=(x1, y1) と P2=(x2, y2) だけです。つまり4つの数値は次の意味を持ちます。
- x1・y1：始点(0,0)から伸びる取っ手の先＝動き出し側の効き方を決める制御点 P1。
- x2・y2：終点(1,1)から伸びる取っ手の先＝着地側の効き方を決める制御点 P2。
ジェネレーターでは、グラフ上の青い点（P1）と橙の点（P2）をドラッグすると、この4つの数値がリアルタイムで更新されます。右側の数値欄に直接 x1・y1・x2・y2 を打ち込んでも同じです。制御点を始点寄りの低い位置に置けば動き出しがゆっくりになり、終点付近を急にすれば最後にキュッと止まります。曲線が「取っ手の向き」に引っぱられて膨らむ様子を見ながら調整できるのが、このツールの利点です。
なぜ x は0〜1で、y は範囲外もOKなのか
x1・x2 は時間軸上の位置なので、0〜1に制限されます。時間が巻き戻ったり終端を追い越したりはあり得ないからです。ジェネレーターでも x はこの範囲へ自動でクランプ（丸め込み）されます。
一方 y1・y2 は進行度なので、あえて0〜1の外を許可しています。y を1より大きくすると「いったん行き過ぎてから戻る」、0より小さくすると「いったん手前に引いてから進む」という動きになります。これが後述するバウンド表現の正体です。
標準キーワードの正体と、数値例での検算
CSSの ease / linear / ease-in / ease-out / ease-in-out は、実は決まった cubic-bezier 値の別名にすぎません。
- ease = cubic-bezier(0.25, 0.1, 0.25, 1)
- linear = cubic-bezier(0, 0, 1, 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)
ここで既定値 ease の曲線を、実際に計算して確かめてみます。曲線は媒介変数 t（0〜1）を使い、各軸で B(t)=3(1-t)²t·c1+3(1-t)t²·c2+t³ という式で求まります（c1・c2 はその軸の制御点、端点は0と1）。t=0.5 を代入すると、x軸は 3×0.25×0.5×0.25＋3×0.5×0.25×0.25＋0.125＝0.09375＋0.09375＋0.125＝0.3125、y軸は 3×0.25×0.5×0.1＋3×0.5×0.25×1＋0.125＝0.0375＋0.375＋0.125＝0.5375 になります。つまり曲線上の点は (0.3125, 0.5375) です。
注意したいのは、t は時間そのものではないという点です。t=0.5 のときの「時間」は x=0.3125 のほうで、そのとき進行度は y=0.5375。言い換えると、経過時間がまだ約31%の段階で、動きはすでに約54%進んでいます。序盤にしっかり進み、後半は減速する——これが ease が「自然」に感じられる理由です。
y値を1超・0未満にするとバウンドになる仕組み
y を範囲外に出したときの動きは、プリセットの out-back（cubic-bezier(0.34, 1.56, 0.64, 1)）がわかりやすい例です。y1=1.56 は進行度が一時的に1（＝ゴール）を超えることを意味します。要素は目標地点をいったん通り越し、その後で戻って着地します。ポップアップやボタンが「ぽよん」と現れるあの躍動感は、この行き過ぎ（オーバーシュート）で作られています。
逆に in-back（cubic-bezier(0.36, 0, 0.66, -0.56)）は y2=-0.56 と負の値を持ち、動き出しでいったん逆方向へ引いてから進みます。助走をつけて飛び出すような表現です。in-out-back のように両側で行き過ぎと引きを併用すると、より弾む印象になります。制御点をグラフの単位正方形の外へドラッグすれば、同じ効果を手作業でも作れます。
UIでの使い分けと、よくある失敗
目的別のおおよその使い分けは次のとおりです。あくまで目安なので、実際のプレビューで動きを見て決めてください。
- 要素の登場・出現：ease-out 系（着地でゆっくり）。素早く現れて柔らかく止まり、待たされ感が出にくい。
- 要素の退場・消失：ease-in 系（動き出しがゆっくり、最後に加速）。名残を残しつつ素早く消える。
- 位置の移動・入れ替え：ease-in-out 系（両端でため）。始まりと終わりが落ち着き、往復でも自然。
- 強調・遊び：out-back など back 系。ただし多用すると煩わしくなりやすい。
よくある失敗は、y を大きくしすぎてバウンドが過剰になること、そして全ての動きに同じ派手なイージングを当てて画面全体が落ち着かなくなることです。まずは標準の ease から始め、物足りない部分だけを少し調整するのがおすすめです。作った値は transition-timing-function に指定するほか、animation-timing-function にもそのまま使えます。ジェネレーターは曲線の描画・プレビュー・計算をすべてブラウザ内で行い、入力値を外部へ送信しないので、オフラインでも安心して試せます。