BLOGデザインなぜアニメーションが必要なのか?なぜアニメーションが必要なのか?2022年06月30日(木)デザイン#Webデザイン#デザインはじめにこんにちわ!アップルップルの新井です。入社して、3ヶ月が経とうとしています。最近は会社の方々に教えていただきながら、デザインのお仕事をさせてもらっています。最近はなんのためにデザインするのかをよく考えるようになりました。サイトの目的が叶うデザインを作成できるよう、これからデザインの幅を広げていきたいと思います。いいWebサイトの共通点サイトをデザインしていく上でよく言われる良いWebサイトとは、使いやすいサイト、ビジュアルが良いサイト、ユーザーが離脱しないサイト、などの定義をよく聞くことがあります。今あげた3つの良いサイトの定義ですが、どのサイトにも気持ちの良いアニメーションが付けられているWebサイトが多い印象でした。動きのあるデザインはユーザーにとってどのような影響を与えるのか考えてみようと思います。Webサイトのアニメーションの意味を考えるデザイナー3ヶ月目の自分はまだ、実務でアニメーションを考慮したデザイン制作の経験はほとんどありません。これからはWebサイトをデザインしていきます。アニメーションの知識をえた上でデザインを考えていかなければならないため、まずは、なんのために動き(アニメーション)が必要なのか、自分なりに考察してみました。時間をとって、考えてみた結果がこちら、、。サイトの補佐役な気がしたシンプルにユーザーには、長い時間サイトを見て欲しいため飽きさせないための道具である気がするユーザーの視線誘導の役割かなデザイン的なところで、サイトに流れを作るため写真を多く見せるための手段に使われているいくつかアニメーションの意図を考えてみましたが、あながち間違いではないのかなと思っています。言いつつも、答えを知りたい正確なため、ネットの情報をいくつか調べて答え合わせをしてみました。今回いくつか調べて行った中で、共通箇所や大事な部分を集めたので、今後の自分のためにもそちらをまとめていきたいと思います。【ユーザーにサイトの現状を知らせる】Webサイトの基本として、ユーザーを待たせてはいけません。長時間サイトが開かなかったり、ページ繊維中に止まってしまうとユーザーは見る気をなくし、サイトから離れてしまいます。サイトは正常に動いていることをアピールし、ユーザーを逃がさないようにしなければなりません。そんな時に使われる代表的な、アニメーションがローディングだと思います。サイトの状況を、ローディングを使いユーザーに視覚的に伝えることで、ユーザビリティを向上させることができます。最近のWebサイトでは、ローディングの残り時間を表示させるだけではなく、ロゴやキャッチコピーをアニメーションで表示させサイトのオープニングをデザインしているところが増えてきているような気がします。Webデザインギャラリー・参考サイト集SANKOU!Webデザイン制作の参考になるステキなWebサイト・LPを集めたギャラリー。トレンドをチェック!【視覚的なフィードバックをリアルタイムに提供する】Webサイトはユーザーにとって使いやすいものであって欲しいですが、操作や手順にユーザーが迷ってしまう場合があります。テキストやボタンを表示していても初めてくるユーザーは気づかないという恐れがあります。次しなければならない操作をスムーズに知らせなければユーザーに離れられてしまう可能性が出てくるため、そこを防ぐ必要があります。ユーザーの混乱を避けるためよくデザインされているのが、ボタンなどのクリックエリアを知らせるアニメーションが実装されていたりします。ボタンが押された時など、色を変化させたり、光らせたりする工夫がされていることが多くあります。Webデザインギャラリー・参考サイト集SANKOU!Webデザイン制作の参考になるステキなWebサイト・LPを集めたギャラリー。トレンドをチェック!【注意喚起を訴える】Webサイトには写真を多く扱うものや、画像を大きく表示させているものもあります。ブラウザの高さいっぱいに表示することによって、サイトのイメージやアピールしたい商品など強い印象を与えることができます。そんな時ユーザーはもちろん写真を見ることになりますが、サイトの次の動作に迷ってしまうことがあります。ファーストビューでよく使われているのがスクロールができることを知らせるアニメーションです。スクロールの文字と矢印アイコンにアニメーションを付けたものをファーストビューに表示させることで、ユーザーの次の行動を助けることができます。思わずスクロールしたくなるwebサイト参考14選|アニメーションや仕掛けが超秀逸トゥモローゲート株式会社こんにちは。Design」の内容をレポートします。さいごにアニメーションは目的を持たせて使用することで、ユーザーの行動を助けることができます。Webサイトの体験をサポートする役割なので、意味のないアニメーションや過度な動きをつけるのことはかえってユーザーの離脱を招くことになりかねません。要素や重さを意識しながらスピードを調節し、サイトにあった自然なモーションにすることをおすすめします。デザイナーのプロフィールへのリンクhttps://twitter.com/MOGESHIN1のTwitterへのリンクhttps://www.facebook.com/0012ShinnosukeのFacebookへのリンク2022年に新卒でアップルップルに入社Canvaの基本操作を使いこなそう!Webフォントの基本を理解しよう一覧へ関連記事この記事のハッシュタグ#Webデザイン#デザインから関連する記事を表示しています。Transit》『見やすく・読みやすく・わかりやすいデザインのためのユニバーサルデザインの基礎』を視聴しました。Vol.03にLT枠で登壇しました。https://araishinnosuke.com/。