タイミングとイージング

ねらい

画面の中で何かが動くとき、それが「自然に見える」か「機械っぽく見える」かを分けているのは、**速さの“変わり方”**だ。同じ距離を同じ時間で動いても、最初から最後まで一定の速さで動くものと、すっと加速してふっと止まるものとでは、まるで印象が違う。

このクエストのねらいは一つ。「等速で動かすな」「すっと出てふっと止めろ」という掟を、理由ごと身につけること。なぜ等速は不自然に見えるのか。なぜ加速と減速をつけると生き物っぽくなるのか。これは80年以上前、アニメーターたちが手描きで見つけた答えだ。それがいま、あなたのブラウザの中でそのまま動いている。

なぜ等速は不自然に見えるのか ―― 現実の物は等速で動かない

まず、いちばん大事な観察から。現実の世界に、最初から最後まで一定の速さで動き出すものは、ほとんどない。

机の上のコップを手で押してみる。コップは、止まった状態からいきなり最高速にはならない。じわっと加速して、すっと進み、手を離せばだんだん遅くなって止まる。ボールを上に投げても同じだ。上にいくほど遅くなり、てっぺんで一瞬止まり、また加速して落ちてくる。これは慣性（止まっているものは止まり続けようとし、動いているものは動き続けようとする性質）のせいだ。そして、この慣性の強さは重いものほど大きい。だから重い物ほど、動かし始めるのにも止めるのにも時間がかかり、加速・減速がゆっくり見える。

だから、私たちの目は生まれてからずっと「物は加速して動き出し、減速して止まる」のを見て育っている。それが「自然」の基準として体に刷り込まれている。

ここから、画面の動きの第一の掟が出てくる。何かを画面で動かすとき、等速にしてはいけない。 等速の動きを見ると、人の脳は「これは物理法則に従っていない＝機械が動かしている」と無意識に感じ取り、安っぽく、不自然に見える。この「速さの変え方」をコントロールする道具が、これから話すイージングだ。

イージング ―― 速さの“変わり方”を描いた曲線

**イージング（easing）**とは、「ease（やわらげる）」から来た言葉で、動きの始めと終わりの速さをやわらげる仕組みのこと。日本語では「緩急曲線」とも言う。緩急とは「ゆるい・きつい」、つまり遅い・速いのことだ。

イージングは、グラフ1枚で表せる。横が時間、縦が進んだ距離のグラフを描く。スタートが左下、ゴールが右上だ。大事なのは、スタートの点とゴールの点は同じで（同じ距離を同じ時間で動く）、変わるのはその間をどんな線で結ぶかだけ、ということ。線の形が、動きの性格を決める。

• 線がまっすぐ（直線）なら、時間とともに距離が一定に増える＝等速。
• 線が下でゆるく・上で急なら、最初遅くてだんだん速くなる＝加速。
• 線が下で急・上でゆるいなら、最初速くてだんだん遅くなる＝減速。

線の傾きが「その瞬間の速さ」だと思えばいい。急な所は速く、ゆるい所は遅い。

4つの基本 ―― リニア／イーズイン／イーズアウト／イーズインアウト

この曲線には、まず覚えるべき4つの型がある。名前は難しそうだが、中身は単純だ。

• リニア（linear）＝等速。始めから終わりまで同じ速さ。「linear」は「直線の」という意味。機械的で、ふつうは使わない。
• イーズイン（ease-in）＝だんだん速くなる。スタートはゆっくり、終わりは速い。
• イーズアウト（ease-out）＝だんだん遅くなる。スタートは速く、終わりはゆっくり止まる。人の目に最も自然で、UI（操作画面）で一番よく使われる。
• イーズインアウト（ease-in-out）＝ゆっくり始まり、速くなり、またゆっくり止まる。現実の物の動きにいちばん近い。

混乱しやすいので、覚え方を一つ。これは終わりの速さの向きだけで覚える。「in」は終わりに向かって“だんだん速く”（速さが入ってくる）。「out」は終わりに向かって“だんだん遅く”（速さが抜けていく）。これだけ覚えればいい。

それとは別に、どの場面でどれを使うかという目安がある（こちらは物理ではなく、よく使われる実務のコツだ。指針によって割り当ては違う）。最も広く使われる目安はこうだ。

• 何かが画面に現れる・到着するときは ease-out（速く出てそっと止まる）。これがいちばん多い。
• 何かが画面から去る・消えるときは ease-in が合うことが多い（去り際は勢いがついていい）。
• 場所を大きく移動するときは ease-in-out（遅→速→遅）。

どこから来たのか ―― ディズニーの「スローイン・スローアウト」

ここが典拠の核だ。この「等速で動かさない」という発見は、Webやパソコンよりずっと前、手描きアニメーションの現場で生まれた。

舞台は1930年代、アメリカのディズニー・スタジオ。当時のアニメーターたちは、キャラクターを「生きているように」動かす方法を、試行錯誤の中で次々に見つけていった。こうして現場で見つかったコツの積み重ね（経験則）を、後に2人のベテランアニメーター、フランク・トーマスとオリー・ジョンストン（ウォルト・ディズニーの右腕として「ナイン・オールド・メン」と呼ばれた中心メンバー）が、1981年の著書**『The Illusion of Life: Disney Animation』で12の原則**としてまとめた。これが今も世界中で教えられる「アニメーションの12原則」だ。

その中の一つが、スローイン・アンド・スローアウト（Slow In and Slow Out）。意味はそのまま、「ゆっくり入って、ゆっくり出る」。動きの始めと終わりに絵を多く描き込み、途中の絵を少なくする。すると、端では遅く・中央では速く見える――つまり加速と減速がつく。手描きの「絵の枚数」でやっていたことを、コンピュータでは「曲線」でやる。やっていることは同じだ。

つまり、あなたがWebサイトでメニューを「ふわっ」と開くとき、80年前のアニメーターが見つけた法則をなぞっている。新しい流行ではなく、継承だ。

速さの問題 ―― デュレーション（短すぎず、長すぎず）

曲線（緩急）と並んで、もう一つ大事なものがある。デュレーション（duration）、つまり動きにかける時間の長さだ。同じ曲線でも、それを0.1秒でやるか1秒かけるかで、まるで印象が変わる。

ここには、ちょうどいい範囲がある（数値の出どころは、後で見る Material Design などのUIモーション指針＝典拠5の実務上の目安だ）。ミリ秒（ms）とは1000分の1秒のこと。1000ミリ秒＝1秒だ。

• 短すぎる（だいたい100ミリ秒＝0.1秒より短い）と、動きが速すぎて気づかない。パッと切り替わって見え、せっかくの動きが意味をなさない。
• 長すぎる（だいたい500ミリ秒＝0.5秒より長い）と、ユーザーは動きが終わるのを待たされる。一度や二度ならいいが、何度も操作するうちにイライラの種になる。

経験則として、画面のUIの動きは**だいたい200〜500ミリ秒（0.2〜0.5秒）**に収めるのが目安だ。小さな部品（ボタンの色変化など）は短め、大きな部品（画面いっぱいのパネルが出る）は長めにする。動く距離や大きさが大きいほど、少し長めにすると自然になる。

ブラウザではどう書くか ―― cubic-bezier

最後に、この曲線がいまの技術にどうつながっているかを見る。WebページはCSS（見た目を指定する言語）で動きを書く。そこで使うのが**cubic-bezier（キュービック・ベジェ）**だ。

ベジェ曲線とは、少数の「操作点」を引っぱって、なめらかな曲線を自由に作る仕組みのこと。操作点とは、曲線を曲げるための**“つまみ”だと思えばいい。糸を指でつまんで引っぱると、糸がそっちへ寄る。あれと同じで、この点を動かすと、曲線がその点の方へ引き寄せられる。この仕組みは、もともと車のボディを設計するために作られた数学**だ。

車のなめらかな曲面も、画面の動きの緩急も、「少ない点でなめらかな曲線を表す」という同じ問題だ。だから、同じ数学がそのまま流用された。CSSのイージングは、図3で見た「時間×距離」のグラフの曲線を、2つの操作点で表す。cubic-bezier(x1, y1, x2, y2) の4つの数字が、始点側と終点側のつまみを引っぱる位置を表している。つまみをどこへ引くかで、ease-inにもease-outにも、好きな緩急にもできる。

うれしいことに、よく使う型には名前のついた近道が用意されている。だからふだんはこれだけ覚えれば足りる。

• linear（等速。基本使わない）
• ease-in（だんだん速く）
• ease-out（だんだん遅く。UIで最頻出）
• ease-in-out（遅→速→遅）

このうち ease-in / ease-out / ease-in-out は、cubic-bezier の決まった形に名前を付けたものだ。linear（等速）だけは別枠で、cubic-bezier では表さない別のキーワードになっている。細かく自分好みに調整したくなったとき初めて、cubic-bezier(...) でつまみを動かせばいい。名前付きが「定番のレシピ」、cubic-bezierが「自分で味を決める」だと思えばいい。

だから実用上こうなる。サイトの動きが「なんか安っぽい・カクカクする」とき、原因はたいてい次のどれかだ。等速（linear）のままになっているか、速さ（デュレーション）が短すぎ／長すぎるか、全部の動きを同じ設定でやっているか。掟に戻して、ease-outを基本に、200〜500msの範囲で、部品の大きさに応じて微調整する。理屈を知っていれば、感覚に頼らず原因を当てられる。これが「典拠を持つ」強さだ。

見分け方

最後に、良い動き・悪い動きを「見抜く」目を持とう。身の回りのアプリやサイトの動きを、この観点で見てみる。

• 等速かどうか ―― 始めから終わりまで一定の速さなら、たいてい安っぽく見える。
• 止まり方 ―― ふっと減速して止まる（ease-out）と上質。カクッと止まると機械的。
• 速さ ―― 気づかないほど速くないか／待たされるほど遅くないか（目安200〜500ms）。
• そろっているか ―― サイト全体で動きの“クセ”がそろっていると、品が出る。バラバラだと散らかる。

これらは別々のルールではなく、すべて**「現実の物は、加速して動き出し、減速して止まる」という一つの観察**から出ている。掟を丸暗記するのではなく、この観察を覚えれば、掟は自然に思い出せる。

譜例

棚（design-gallery）で実サイトの動きを見て、本文の観点がどう当てはまるか確かめよう。

• 棚：動き・イージングの実例を見る

見るときは、メニューやボタンの動きが ease-out（ふっと減速して止まる）か、それとも等速（カクッと止まる）か、そして動きの長さが**待たされず・見落とさない範囲（おおむね200〜500ms）**に収まっているかを観察するとよい。

練習・チェック

1. よく使うアプリやサイトを1つ開き、メニューやボタンの動きを見る。それは等速か、ease-outか。止まり方が「カクッ」か「ふっ」かに注目しよう。
2. 「in」と「out」のどちらが終わりが遅いか、一言で言えるか。（ヒント：out＝終わりに向かって速さが“抜けていく”＝だんだん遅く）
3. 自分の作ったページの動きが「なんか安っぽい」とき、3つの容疑者で原因を絞ってみよう。――等速のままか？　速さが短すぎ／長すぎか？　動きの設定がバラバラか？　まずは「全部ease-out・300msにそろえる」を試すと、たいてい良くなる。