デザイン

デザイン

【効果に合わせて使い分けたい!】場面別、アニメーションの取り入れ方

1,742 views

読了時間 : 約2分11秒

ウェブにおいても、アニメーションはあって当り前になりました。ユーザに現在の状態を知らせたり、状態をスムーズに更新できるアニメーションは、ウェブでも大活躍してくれます。今回は各場面に合わせたアニメーションを、実例とともに紹介します。

 

 

進行状況を示す

アニメーションが最もよく使われるのは、ロード画面です。ローディングにアニメーションを使うことで、ユーザの時間感覚に影響し、早く処理が済んだように感じさせることができます。

ロード中のアニメーションはシンプルに仕上げましょう。音をつけるなどの余計な効果は必要ありません。また、優れたアニメーションは楽しげで、ずっと見ていられます。ユーザがロード処理から気をそらすものにしましょう。

 

アニメーションで処理の進行状況も伝えられます。ローディングバーは、よく使われる馴染み深い手法です。

 

ローディングバー以外にも、状況を示すアニメーションは存在します。このように、ステップごとに分割してもいいですね。

 

 

 

視覚フィードバック

優れたデザインは、ユーザにフィードバックを返します。操作可能な要素や、操作の結果をアニメーションで伝えるのです。

操作可能な要素であることを伝えるには、ホバーエフェクトが有効です。ユーザは操作できそうな部分にカーソルを合わせるため、ホバーエフェクトがあれば明確に意味を伝えられます。

 

ただしモバイルでは問題になります。マウスカーソルがないため、カーソルを乗せて操作可能な要素かどうかを確かめられません。モバイルでは見た目だけで、要素が操作可能であること、操作が受け付けられたことを示さなくてはなりません。影を使えば、こうした効果を実現できます。

 

 

 

注意を引く

人間の目は、動くものによく反応します。つまり、ユーザに見てもらいたい部分にアニメーションを使うことが、非常に有効なのです。

たとえば、フォーム入力にもアニメーションが使えます。入力に問題があった場合に画面を揺らし、ユーザに注目してもらうのです。

 

 

 

なめらかな画面遷移

画面の変化を、アニメーションを使ってユーザに通知できます。同じページにいながら違うセクションに移動した場合にも、なめらかに要素を移動させることでユーザが状態に気づきやすくなります。

急激な変化は不自然で、ユーザにとっても受け入れにくいものです。

 

こうした場面でアニメーションが活躍します。ぐっとわかりやすくなりました。

 

 

 

まとめ

デザインとは、ユーザとの対話を作ることです。その対話を作る上で、アニメーションはもはや欠かせません。ウェブにおける表現力の向上を受け入れ、最大限に活用していきましょう。

 

 

 

▼アニメーションに関して、こちらの記事もおすすめです!



 

 

※本記事はPopular Web Animation Techniques for Designersを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ