はじめに

色んなWebサイトを見る中で、目に留まり、ついまた見てしまいたくなるようなアニメーションに出会うことがあると思います。
Webで表現されているアニメーションのほとんどは、ちょっとした手間を加えるだけで、ぐっとアニメーションの質を上げることができます。

昔FlashでWebサイトのコンテンツを作成していた私がアニメーションの実装の中で気をつけてるポイントについて紹介します。

1.オブジェクト単位でアニメーション

例えばファーストビューのイメージを一枚画像で切り出して、フェードインなどのアニメーションで表示させたりしていませんか？
それでは普通すぎて何ならアニメーションするだけ、労力の無駄とさえ感じてしまいます。

元々一枚画像として切り出した画像の中から、オブジェクト単位で素材を切り出して、それぞれアニメーションさせてみましょう。

オブジェクトをさらにオブジェクト単位に切り分ける

一番わかりやすいのは文字です。

1文字ずつ・1行ずつを1つのオブジェクトとして考える
デザインで強調された文字・そうでない文字をグルーピングする
文節単位をグルーピングする

他にも背景色と文字や、キャラクターと装備品みたいな感じで、オブジェクトの中に動かせそうなオブジェクトを見つけて切り分けてみるといいでしょう。

2.タイミングをずらしてアニメーション
3.前のオブジェクトのアニメーション終了を待たない

それぞれのオブジェクトを切り分けたら、タイミングをずらしてアニメーションさせてみましょう。
中にはオブジェクトを切り分けたけど、同じタイミングで動かしたほうがいいオブジェクトもあったりします。

また、アニメーションで一番大切なのはテンポだと思います。
アニメーションの指示に「●●が表示され▲▲が表示される」とあっても、決して「●●が表示され（きった後に）▲▲が表示される」なんて解釈しないでください。
大抵の場合は、最初のオブジェクトが動き出したタイミングから次のオブジェクトは動く準備を始める。もしくは、前のオブジェクトが終わりそうなタイミングには、次のオブジェクトは動き出しているようなイメージです。

4.基準値を超える

例えば、アニメーションの指示で「テキストが大きくなりながら表示される」みたいな指示があった場合、FIXしたデザインのサイズを100としたら、そのサイズを一時的に超えてしまっても問題ないという意味です。

また、大きさだけでなく「テキスト上から下に降りてくる」みたいな指示の場合、着地するY座標が100pxの位置だとしたら、105pxまで移動させてしてしまって、跳ねて戻るような感じも基準値を超える表現と言えると思います。

今回はわかりやすく線を引いてみました。

まとめ

いかがでしたでしょう。
これらのポイントはどのようなジャンルにでも共通して活用できるアニメーションのテクニックですが、すべてのポイントを取り入れる＝いいアニメーションになるわけではないです。

また、今回はバナー風な素材で作ってみたので、あまりしっくりこなかった部分もあるかもしれませんが、Webサイトで細かい動きをみてみると、これらのポイントが随所に使われていることに気がつけるようになると思います。

実務を通して色んなポイントを試してみて、適材適所で使い分けをしてみてください。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。