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

ウェブにおいても、アニメーションはあって当り前になりました。ユーザに現在の状態を知らせたり、状態をスムーズに更新できるアニメーションは、ウェブでも大活躍してくれます。今回は各場面に合わせたアニメーションを、実例とともに紹介します。
 
 
進行状況を示す
アニメーションが最もよく使われるのは、ロード画面です。ローディングにアニメーションを使うことで、ユーザの時間感覚に影響し、早く処理が済んだように感じさせることができます。
ロード中のアニメーションはシンプルに仕上げましょう。音をつけるなどの余計な効果は必要ありません。また、優れたアニメーションは楽しげで、ずっと見ていられます。ユーザがロード処理から気をそらすものにしましょう。
 
アニメーションで処理の進行状況も伝えられます。ローディングバーは、よく使われる馴染み深い手法です。
 
ローディングバー以外にも、状況を示すアニメーションは存在します。このように、ステップごとに分割してもいいですね。
 
 
 
視覚フィードバック
優れたデザインは、ユーザにフィードバックを返します。操作可能な要素や、操作の結果をアニメーションで伝えるのです。
操作可能な要素であることを伝えるには、ホバー効果が有効です。ユーザは操作できそうな部分にカーソルを合わせるため、ホバー効

リンク元