アニメーション（モーション）は、ウェブサイトのデザインやユーザー体験を向上させるために重要な要素だ。しかしながら、その調整は明確な正解はなく、一筋縄ではいかない側面を持っている。そこで、これまでの経験から、アニメーションの調整に関するいくつかの重要な観点を探ってみたい。
複数の動きを組み合わせる
アニメーションは、単なるスケールやフェードインだけではとってつけたような印象になり、物足りない場合が多い。特に、ウェブサイト全体のアニメーションでは、複数の動きを組み合わせることが求められる。
例えば、カルーセルのように終点がなく、永遠に繰り返されるアニメーションであれば、クロスフェードやフェードだけでも問題はない。
しかし、サイト内のアニメーションは通常一度きりの再生が多い。そうすると、アニメーションに終点が発生するので、単調なアニメーションだと終点が際立ってしまいイケてない印象を感じてしまう。
アニメーションの速度に緩急をつける
これは、イージング関数と、アニメーションの開始・継続時間の2つのポイントを考慮することが肝要である。
イージング関数は、一定の速度でアニメーションするか、最初は早く、終わりは遅くといった緩急をつけるかなど、アニメーションの速度をコントロールするためのものだ。例えば車だと、走り始めるとゆっくりと速度が上がっていき、一定の速度に達し、止まる時はゆっくりと減速する。これをイージング関数で制御する。そのため、イージング関数は、対象に合わせて調整するべきだろう。
アニメーションの開始、時間間隔も重要だ。
例えば、全ての要素が0.2秒間隔で実行されると単調だし、アニメーションの中に優先順位が生まれない。ユーザーは動き出した要素を順番に目で追うので、その点を考慮して伝えたい情報が伝わるような動きにする必要がある。
仮にメインビジュアルで文章を読ませたいのならば、画像と文章の出現アニメーションを開始するタイミングをずらすと、ユーザーは画像→文章の順番で目がいくので、ストーリーテリングのような効果が生まれる。
継続時間も調整して、画像のアニメーションの終わりと文章のアニメーションの終わりを揃える、みたいなことをすると終点が1つになり、まとまりが生まれてスッキリする。
サイトに合ったアニメーションか
アニメーションはサイトの内容やテーマに適合している必要がある。具体的には、以下の2つの観点を考えることが重要だ。
- サイトの内容に適しているか: アニメーションはサイトの事業やコンテンツと調和しているべきだ。アニメーションがサイトのコンセプトやメッセージを強化する役割を果たすことが求められる。
- 他の要素との統一性: ボタンやリンクなどの他のアニメーション要素とのテイストの統一が大切だ。異なるアニメーション要素が統一感のない動きをしていると、ユーザーに違和感を与えてしまう可能性がある。
自然な動きを取り入れる
加えて、自分の中では総じて一番の軸として、現実世界にあるような、自然な動きかどうか、というのを重要視している。
紙がふわっと落ちる時の動きとか、川を流れていく葉とか、コンビニの入り口が開いて人が出てくるタイミングでそっちの方向を見てしまう感覚とか、何気ない日常にある動きを取り入れると、見てる側としても自然に受け入れられるような動きになると思う。
ウェブサイトのアニメーションは、ユーザーに良い印象を与えるための重要な要素である。しかしその調整は慎重に行う必要がある。ここで紹介した内容をポイントとして抑えつつ、ウェブサイトがより魅力的にになるようアニメーションを実装したい。
