イケてるアニメーションを研究してみる

アニメーションの使い所

イケてるアプリケーションやウェブサービスはアニメーションをうまく使っています。
アニメーションを入れることでユーザの注目を集めたり、自然な体験をしてもらうことができます。
アニメーションは視覚効果が高いため、使い所を見極めないと逆にUXを下げてしまうことに注意が必要です。
アニメーションの主な使い所としては次の箇所でしょう

• 画面遷移のアニメーションはユーザを自然な感じで次の画面へ誘導する（導線の手がかりを与える）
• ピンポイントで目立たせたい所（押させたい所）に使う
• ローディング時のアニメーションはユーザの離脱を防ぐ

画面遷移やUIのアニメーション

よく使われているマテリアルデザインベースのアニメーションに関しては次の法則があります。
主に画面遷移やUIに関するアニメーションです。

1. レスポンスがよい（そもそもアプリケーション全体がもっさりしてない）
2. 要素同士が関連づけられている（隣接してる要素など）
3. 動きが自然である（途中で動く方向を変えたりしない、物理法則ぽい動きをする）
4. 意図的である
5. 動作が素早い（300ms内）
6. 明確でシンプルである(複数のアニメーションは組み合わせない)

参考：マテリアルデザインに見る機能的なアニメーションの６つの法則

目立たせたい要素にピンポイントで使うアニメーション

一方でピンポイント注目させたい要素で使うアニメーションに関してはまた別の動きが使われています。
一番参考になるのがディズニーのアニメーション12原則でした。
ディズニー映画内でよく使われてるアニメーションの原則は基本的にキャラクターのイメージを印象づける動作を行っています。

1. 押し潰しと伸縮
2. 予備動作
3. 演出
4. 逐次描きと原画による設計
5. 継続する動きと後追いの動き
6. スローインとスローアウト
7. 運動曲線
8. 副次アクション
9. タイミング
10. 誇張
11. 立体感のある描画
12. アピール力

参考：【ディズニー発】魅力的なアニメーションを実現する12の基本原則（動画あり）
解説：ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！
アニメーション一覧：12の基本原則アニメーション

質量を持った残像で存在をアピールするような動きが原則なのかもしれません。
ディズニーのモーションはskewの併用で質量のある動きを表現できている気がします。
さらにモーションブラーを使うことでもリアルな動きを表現できます。

See the Pen CSS MotionBlur (Webkit) by Josh Bader (@joshbader) on CodePen.

ローディング時のアニメーション

基本的にユーザを待たせるというのは根本的なレスポンスの見直しが必要です。
最近は３秒未満で離脱する確率が非常に高いのとSEO的にもページスピードは重視されてきているため、レスポンスの早さは重要な指標です。
とはいえどうしてもローディングの改善ができない場合（暫定的な対応含む）、ローディング時のアニメーションを有効に使うことで読み込みが遅い場合でも読み込みに時間がかかっているのだということをユーザに知らせることで離脱を防いだり、
キャラクターやロゴを表示することでアプリやサービスのブランディングをより印象的に覚えてもらうこともできます。

参考：UXデザインにアニメーションを導入するときに注意すべきこと

ブラウザ上での実装

ブラウザ上で表現するには次のような技術が選択肢としてあります。
（アプリのアニメーションに関しては実装方法は様々になってしまうのでここでは触れない）

• CSS3
• Web Animations API
• WebGL

現実的にCSS3のtransition、animationを使ったアニメーションが選択肢としては一般的です。
transitionの場合はマウスホバーでアニメーションしたり、
新しいコンテンツのNew表示などをanimationで表現したりします。

Web Animations APIに関してはサポートしてないブラウザがまだ多いので、polyfillが必須です。
参考：Web Animations API を使ってみる

WebGLに関してはゲーム系のLPではたまに見かけますが、パフォーマンス的な面とcanvasの組み合わせに必然的になるため、リッチコンテンツ以外は選択肢としてはあまり現実的ではありません。

画像処理のアニメーション

CSS3のfilterを使うと画像処理ができます。
animationを組み合わせることで画像処理のアニメーションが可能です。

参考：Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい

See the Pen Filter Animation by SitePoint (@SitePoint) on CodePen.

3Dアニメーション

transformを使うことでCSS3で3D表示ができます。
ここで解説するよりもよくまとまってる記事があるのでそちらを参考にしてください。

参考：【CSS3】Transform（変形）関連のまとめ

transform-style: preserve-3d;を指定することで親要素の3D変形を継承して子要素の3D変形も有効にすることができます。親子関係がある、ボーンアニメーションのようなアニメーションも可能です。

参考：CSS3D！まるでWebGLのような3Dを超気軽に実装するCSS技

流体表現

CSSフィルターのblur効果とmix-blend-modeを駆使することであたかも流体のような表現も可能です。

参考：Liquid CSS！まるで液体のようなデザインを実装するCSS技

その他

こちらの記事も合わせてどうぞ。
【保存版】Webフロントエンド基礎力（初心者向け）