Linear
linear
等速。機械的で、生気が無い。物理世界には存在しないため、UI ではほぼ使わない。例外: 進捗バー、ローディング。
静止画は、見る者の「すでに知っていること」に依存する。動きは、知らない者にも 順序・因果・関係を直接見せられる。だから複雑なシステムを伝えるとき、モーションは静止画の何倍も効率的になる。
同時にモーションは感情の通貨でもある。0.2 秒の遅延、跳ねるイージング、わずかな揺れ — それぞれが、ブランドの「体温」を伝える。
そして UI においては、モーションは 因果の可視化 である。ボタンを押した結果がフェードで現れることで、ユーザーは「自分の行為が世界を変えた」ことを確認する。
等速。機械的で、生気が無い。物理世界には存在しないため、UI ではほぼ使わない。例外: 進捗バー、ローディング。
ゆっくり始まり、加速する。何かが画面外へ消えていく動きに最適。「去る」演出。
素早く始まり、ゆっくり止まる。最も自然で、UI でもっとも多用される。「現れる」演出の標準。
両端でゆっくり、中央で速い。長い距離を移動する要素に向く。エレベーターのような滑らかさ。
大きな動きの前に、わずかに反対方向へ「引く」動き。観客の注意を準備させ、本動作のインパクトを増幅する。物理的にも、人間が走り出す前に膝を曲げるのと同じ。
主動作が止まった後、付随する部位がわずかに遅れて停止する。生命感とリアリティを生む鉄則。スプリング系のイージングで実装される。
複数要素を同時に動かさず、わずかな時間差で順次起動する。視覚的なリズムを生み、要素同士の関係を語る。リスト表示のオンボーディングで多用される。
自然界の動きはほぼすべて曲線軌道を描く。直線運動はロボティックで、人間の身体感覚に反する。CSS の offset-path や Bezier で実装。
同じ動きでも、所要時間で意味が変わる。0.15 秒は「即応」、0.3 秒は「丁寧」、1 秒以上は「儀式」。UI モーションの基本は 200–400ms。
形が動きに応じて変形する。生物の重みと弾力を伝える。Disney の 12 原則の筆頭で、現代のキャラクターアニメーションでも基本中の基本。
1955 年、Otto Preminger 監督の『黄金の腕』のオープニングタイトルで、Saul Bass は映画の冒頭を「観客を作品世界へ誘い込む独立した作品」へと変革した。それ以前のタイトルは退屈な看板に過ぎなかった。
Bass の手法は 抽象シルエット + 切り絵的構図 + ジャズの即興性。以降、Pablo Ferro、Maurice Binder、Kyle Cooper (Se7en, 1995) と続き、現代の Netflix ステーション ID、Apple のキーノート、放送局 ID にまで遺伝子が引き継がれた。
現代のモーションデザイナーは、After Effects、Cinema 4D、Lottie、CSS Animation、WebGL — 多様な道具で同じ問いに向き合っている。「最初の数秒で、観客の心をどう開かせるか」。