シュッと出てきて、ファサッと止まる感じで。
入りはゆっくりで、アウトは速めに。
ちょっとイージングが気持ち悪い。

そんな恐ろしく漠然とした言葉が飛び交うアニメーションの実装において、もう少し具体的な指標はないものかと思い、できるかぎり擬音を使わずに考えてみたいと思い立ちました。

自分自身、吐き気がするほどアニメーションが苦手でセンスがないため、ひとまず言語化しておかねばと思ったのですが、不毛な記事になる予感がします。

目指すべき「気持ちいい」のかたち

そんなの主観じゃないかと言われたらそうなのですが、多くの人が違和感を感じない動きというのはあるような気がします。そうでなければ話がここで終わってしまうので。

「気持ちいい」動きを一言で表現するの難しそうですが、違和感のない自然な動きであれば、ある程度の人が「気持ちいい」と思ってくれそうな気がするので、その期待を込めて、

違和感のない自然な動き

を目指すことにします。

「気持ちいい」に関わるパラメータ

アニメーションを作成する際には、 「変化量」「スピード」「イージング」 のそれぞれを、いい感じに調整していく必要があります。大まかな方向性としては、適切な量を、ちょうどいいスピードで、いい感じのイージングで動かせたら「気持ちいい」アニメーションになりそうです。

「気持ちいい」変化量

変化量については、対象物が動くべき量、動くと期待される量をしっかりと考える必要があります。まずは、マグロを例にして考えてみましょう。

マグロがブラウザ上を泳ぐ量を段階的に変えてみたのですが、どれが一番マグロらしく見えるでしょうか？個人差はあるかと思いますが、端から端まで悠々と泳ぐマグロが一番よくないですか？

マグロは基本的に静止しないらしいので、途中で止まるのはおかしいのですが、回遊魚らしく移動距離は長いほうが良い気がしますね。

マグロにブラウザは狭すぎます。

動かす対象によって変化量は変わりますが、その特性を考えてどのくらい動かすかを決められれば、少なくとも納得の行く動きになるのではないでしょうか。

マグロの変化量は大きいほどいい

「気持ちいい」スピード

スピードに関しては、マテリアルデザインのガイドラインにこんな記述がありました。

When elements move between positions or states, the movement should be fast enough that it doesn't cause waiting, but slow enough that the transition can be understood

Speed | Duration & easing

動かすときは、ユーザーを待たせないスピードで、かつ変化の意味がわかるぐらいの余裕は持ちましょうということらしいのですが、少し抽象的ですね。

モバイルのスピード By マテリアルデザイン

Transitions on mobile typically occur over 300ms, within this margin of variance:

Large, complex, full-screen transitions may have longer durations, occurring over 375ms
E> lements entering the screen occur over 225ms
Elements leaving the screen occur over 195ms
Transitions that exceed 400ms may feel too slow.

300msぐらいがいい感じで、400msを超えると遅いですよ。

デスクトップのスピード By マテリアルデザイン

Desktop animations should be faster and simpler than their mobile counterparts. These animations should last 150ms to 200ms.

Because desktop transitions may be less noticeable, they should be immediately responsive and faster than their mobile counterparts.

デスクトップのアニメーションはモバイルに比べて気づかれにくいので、150msから200msぐらいでササッとシンプルにやった方が良いですよ。

マグロのスピード

マグロがブラウザ上を泳ぐスピードを段階的に変えてみたのですが、どれが一番マグロらしく見えるでしょうか？個人差はあるかと思いますが、1200msが一番よくないですか？

ガイドラインでは300ms前後ですが、画面全体を動くマグロに300msはあまりにも短いので、最もマグロが悠々と動いて見えるスピードを選んであげる必要があります。というよりも、UIのガイドラインをマグロに適用するのは無理がありますね。

話がマグロに偏ってしまいましたが、「気持ちいい」スピードをまとめると、

モバイルは300msぐらい
デスクトップは200msぐらい
マグロは1200msぐらい

という事になりそうです。

「気持ちいい」イージング

パラメーターのなかで最も「気持ちいい」に与える影響が大きく、最も悩ましいのがイージングです。正直なところ全く自信ないため、Googleのページから言葉を借ります。

自然界の中で、一地点から別の場所に直線的に移動するものはありません。実際には、物は移動するときに加速または減速する傾向があります。私たちの脳は、この種の動きを自然と予測するようにできているので、アニメーション化するときは、この傾向を生かします。

イージングの基本

ということなので、自然な動きになるように適切なイージングを選択していきます。まずは基本的なイージングを見ていきましょう。

ease-in

ゆっくり動きはじめて最後に勢いがつくイージングです。物体が落ちるときに、初速が0の状態から重力によって加速していく様に似ています。動き出しが遅いので、もっさりしたアニメーションに見えてしまいがちなので、センスが問われます。

ease-out

速めに動き出して最後に減速します。動き出しが速いため反応がよく感じられ、減速して止まるのも理にかなって感じられます。

ease-in-out

ゆっくり始まって、中盤で加速し、最後に減速します。車の動きに例えられたりもしますが、乗り物以外にも日常的に目にする動きなので自然でスムーズな印象を受けます。

イージングのスピード感

inやoutは全てのイージングで共通する考え方になりますが、スピードの変化の仕方によって様々なイージングがあります。使うライブラリによって特殊な物があったりもしますが、イージングの算出に使われる関数を元に命名されているものが多いのです。

名称	長	動き
Linear	-	直線的
Expo	Exponential	指数
Quad	Quadratic	二次
Cubic	-	三次
Quart	Quartic	四次
Quint	Quintic	五次
Sine	-	三角関数
Circ	Circular	円形
Elastic	-	弾力
Bounce	-	バウンド

速めに動かしたいときは Expo
少しゆっくりしたいときは Quad〜Quint
動きにリッチさが欲しいときは ElasticかBounce

あたりが良い気がします。実際に使うときには、inやoutとこれらのスピード感が組み合わさって、 easeOutExpo とか easeInOutCubic とかになります。↓のサイトがグラフになっていて見やすいです。
http://easings.net/ja

マグロのイージングは、 easeInOutCubic にしました。

イージングの話になると、直線的なLinear はスルーされがちですが、しっかり出番はあります。

回転寿司です。
回転寿司にイージングがあったら気持ちが悪いので、 Linear の方がしっくり来ます。いや、どっちも気持ち悪いか。

「それなり」なパラメータのまとめ

ここまでの話をまとめると、

対象物に対しての 適切な量 を
300ms ぐらいのスピードで
ease-out か ease-in-out 系のイージングで

実装すれば「それなり」のアニメーションにはなりそうです。◯◯msのアニメーションが「気持ちいい」なんて決めつけるのは、冷静に考えたらおかしな話なので、「それなり」のアニメーションという事にしておきました。

なんだかもう「気持ちいい」アニメーションを実装するには、対象物の気持ち、例えばマグロの気持ちになって、形態模写でもして体に動きを染みつけない限り難しいような気がしてきました。よくわからないけれど。

「気持ちいい」アニメーションなんてものを考えるのは、もうやめにしよう。

誰が「気持ちいい」を決めるのか問題

ここまできて、「それなり」にはなったとしても、「気持ちいい」までいくにはどうすればいいのか。

そもそも、それをいったい誰が決めるのか？

数字に重きを置く人からすれば、それはA/Bテストでユーザーが決めるものだろう、と思うかもしれませんが、売れるサイトが綺麗とは限らないように、効果が高いアニメーションが「気持ちいい」とは限らないと思うわけです。テストできるような大きなサイトを持っていないので、根拠はありませんが。

アニメーションが最適化されていった末に、売れないけど面白いアニメーションが淘汰されて、結果を出せるアニメーションだけが生き残るというのも、退屈だなあと思うのです。

そう考えていくと、数字ではなく、アニメーションの良し悪しを決めてくれる「神」のような存在に判断を仰ぐのが良いように思えてきます。

「神」が本当の意味での「神」なのか、センスのある「人」なのかは環境によって変わってくるかもしれませんが。

アニメーションなんてオカルトだ。

CodePen埋め込みテスト

See the Pen 気持ちいいスピード by noplan1989 (@noplan1989) on CodePen.

参考

困ったらディズニー
http://the12principles.tumblr.com/
http://photoshopvip.net/75555

Material Design の Motion
https://material.io/guidelines/motion/material-motion.html

アニメーションのパフォーマンス
https://developers.google.com/web/fundamentals/design-and-ux/animations/?hl=ja

マグロは「いらすとや」
http://www.irasutoya.com/