イージング4レーン比較
linear / ease-out / ease-in-out / spring 風の4レーンを同時に走らせて、同じ1秒でも「速く入って遅く止まる」動きが自然に見える理由を目で確かめる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- モーション指針をチームで決める場面
- イージングの違いを説明する教材・レビュー
- デザイントークンの duration/easing 検証
- 避ける場面
- 本番UIにそのまま置く比較デモ
- 等速が意味を持つ進捗・回転の代替
- 構成要素
- レーン名と関数の表記
- トラック
- ボール
- 終点の破線円
- 再生／戻すボタン
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で再生ボタンへ、Enter／Space で「再生」と「戻す」を切り替える
- 支援技術
ボタンの文言が「▶ 再生」「◀ 戻す」に変わり状態を伝える。レーンは装飾で読み上げ情報を持たない。reduced-motion では transition を 0.01s にして即着地
- 動き
4レーンとも translateX 1.2s・同距離、関数だけ linear／(.16,1,.3,1)／(.65,0,.35,1)／(.34,1.56,.64,1)。曲線の差だけを見せる
デザインの要点
- UI の既定は ease-out（速く入って遅く止まる）。押した瞬間に反応が見え、止まり際が読めるので操作が軽く感じる
- ease-in は出だしが遅く「待たされる」印象になる。消える・退場する要素にだけ使う
- linear は機械的で、止まった瞬間が唐突。回転・進捗バーなど等速が意味を持つものに限る
- spring 風（cubic-bezier の y>1 でオーバーシュート）は行き過ぎて戻る分、質量を感じる。多用せず主役の1要素に
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="ez-wrap">
<div class="ez-lanes" id="ezLanes">
<div class="ez-lane" style="--ez-fn: linear">
<span class="ez-label">linear<code>linear</code></span>
<span class="ez-track"><span class="ez-ball"></span></span>
</div>
<div class="ez-lane" style="--ez-fn: cubic-bezier(0.16, 1, 0.3, 1)">
<span class="ez-label">ease-out<code>(.16,1,.3,1)</code></span>
<span class="ez-track"><span class="ez-ball"></span></span>
</div>
<div class="ez-lane" style="--ez-fn: cubic-bezier(0.65, 0, 0.35, 1)">
<span class="ez-label">ease-in-out<code>(.65,0,.35,1)</code></span>
<span class="ez-track"><span class="ez-ball"></span></span>
</div>
<div class="ez-lane" style="--ez-fn: cubic-bezier(0.34, 1.56, 0.64, 1)">
<span class="ez-label">spring 風<code>(.34,1.56,.64,1)</code></span>
<span class="ez-track"><span class="ez-ball"></span></span>
</div>
</div>
<div class="ez-foot">
<button class="ez-btn" id="ezPlay" type="button">▶ 再生</button>
<span class="ez-dur">同じ 1.2 秒・同じ距離</span>
</div>
</div>