なぜアニメーションが必要なのか？
はじめに
こんにちわ！アップルップルの新井です。
入社して、3ヶ月が経とうとしています。最近は会社の方々に教えていただきながら、デザインのお仕事をさせてもらっています。
最近はなんのためにデザインするのかをよく考えるようになりました。サイトの目的が叶うデザインを作成できるよう、これからデザインの幅を広げていきたいと思います。
いいWebサイトの共通点
サイトをデザインしていく上でよく言われる良いWebサイトとは、使いやすいサイト、ビジュアルが良いサイト、ユーザーが離脱しないサイト、などの定義をよく聞くことがあります。
今あげた3つの良いサイトの定義ですが、どのサイトにも気持ちの良いアニメーションが付けられているWebサイトが多い印象でした。動きのあるデザインはユーザーにとってどのような影響を与えるのか考えてみようと思います。
Webサイトのアニメーションの意味を考える
デザイナー3ヶ月目の自分はまだ、実務でアニメーションを考慮したデザイン制作の経験はほとんどありません。ですが、これからはWebサイトをデザインしていきます。
アニメーションの知識をえた上でデザインを考えていかなければならないため、まずは、なんのために動き（アニメーション）が必要なのか、自分なりに考察してみました。
少し時間をとって、考えてみた結果がこちら、、。
- サイトの補佐役な気がした
- シンプルにユーザーには、長い時間サイトを見て欲しいため飽きさせないための道具である気がする
- ユーザーの視線誘導の役割かな
- デザイン的なところで、サイトに流れを作るため
- 写真を多く見せるための手段に使われている
いくつかアニメーションの意図を考えてみましたが、あながち間違いではないのかなと思っています。
とは言いつつも、答えを知りたい正確なため、ネットの情報をいくつか調べて答え合わせをしてみました。
今回いくつか調べて行った中で、共通箇所や大事な部分を集めたので、今後の自分のためにもそちらをまとめていきたいと思います。
アニメーションの効果
【ユーザーにサイトの現状を知らせる】
Webサイトの基本として、ユーザーを待たせてはいけません。長時間サイトが開かなかったり、ページ繊維中に止まってしまうとユーザーは見る気をなくし、サイトから離れてしまいます。
サイトは正常に動いていることをアピールし、ユーザーを逃がさないようにしなければなりません。
そんな時に使われる代表的な、アニメーションがローディングだと思います。
サイトの状況を、ローディングを使いユーザーに視覚的に伝えることで、ユーザビリティを向上させることができます。
動くWebデザイン アイデア帳
最近のWebサイトでは、ローディングの残り時間を表示させるだけではなく、ロゴやキャッチコピーをアニメーションで表示させサイトのオープニングをデザインしているところが増えてきているような気がします。
【視覚的なフィードバックをリアルタイムに提供する】
Webサイトはユーザーにとって使いやすいものであって欲しいですが、操作や手順にユーザーが迷ってしまう場合があります。
ただテキストやボタンを表示していても初めてくるユーザーは気づかないという恐れがあります。次しなければならない操作をスムーズに知らせなければユーザーに離れられてしまう可能性が出てくるため、そこを防ぐ必要があります。
ユーザーの混乱を避けるためよくデザインされているのが、ボタンなどのクリックエリアを知らせるアニメーションが実装されていたりします。
また、ボタンが押された時など、色を変化させたり、光らせたりする工夫がされていることが多くあります。
【注意喚起を訴える】
Webサイトには写真を多く扱うものや、画像を大きく表示させているものもあります。ブラウザの高さいっぱいに表示することによって、サイトのイメージやアピールしたい商品など強い印象を与えることができます。
そんな時ユーザーはもちろん写真を見ることになりますが、サイトの次の動作に迷ってしまうことがあります。
ファーストビューでよく使われているのがスクロールができることを知らせるアニメーションです。
スクロールの文字と矢印アイコンにアニメーションを付けたものをファーストビューに表示させることで、ユーザーの次の行動を助けることができます。
おすすめの記事
さいごに
アニメーションは目的を持たせて使用することで、ユーザーの行動を助けることができます。あくまでWebサイトの体験をサポートする役割なので、意味のないアニメーションや過度な動きをつけるのことはかえってユーザーの離脱を招くことになりかねません。
要素や重さを意識しながらスピードを調節し、サイトにあった自然なモーションにすることをおすすめします。
.png)
.png)
.png)
