Webサイトを見ていると、文字がふわっと出てきたり、要素が心地よく動いたりしますよね。
こうしたオシャレな動きは「アニメーション」と呼ばれています。
実は、このアニメーションがWeb運用の妨げになることもあるんです。
今回はWeb担当者やサイト運営に関わる方に向けて「サイトでアニメーションを利用する際の注意点」について解説します。
Webページの表示表示が遅くなってしまう
ページ内で使用しているアニメーションが多過ぎると、動作の為に使用するデータの読み込みが増えたり、アニメーションの立ち上げに時間が掛かり、結果としてページの表示速度が遅くなることがあります。
PCでは気にならない事も多いですが、スマホやパケット通信環境で閲覧しているユーザーにとっては致命的です。
読み込みが遅すぎるせいでに、ユーザーが離脱してしまう事も…
また、速度が遅すぎるとSEOでの評価が低下することもあります。
ページの見栄えを良くする為にアニメーションを使用しているのに、そのせいで検索結果の上位に出づらくなるのは困りますよね。
サイト更新や修正がに工数が掛かってしまう
先程も話題に出ていましたが、アニメーションを実装する為には、静的なページよりも多くのソースコードや画像データを使用します。
特定の場所でしか使用しないソースコードや画像が増えすぎると、ちょっとした修正でも「どこを直せばいいのかわからない…」と頭を抱える要因になりかねません。
たとえページの読み込み速度が速くても…
アニメーションが多すぎたり、大胆な動きが多すぎると、ユーザーが知りたい情報・ユーザーに知らせたい情報に辿り着く迄に、多くの時間とストレスが掛かってしまいます。
よくある例
- ページをスクロールする度に文字や画像がバラバラと動いて、どこを見ればいいのか分からなくなる。
- ボタンを押そうとしたら、アニメーションのせいで一瞬要素がズレてしまい、押しづらい。
- 背景がずっと動いていて目が疲れてしまい、コンテンツに集中できない。
閲覧に対するストレスが溜まり過ぎるとユーザーは、「なんだかこのサイト見にくいな」「もういいや」と感じてしまい、途中でページを離脱してしまいます。
アニメーションは少しでも大丈夫。伝わる事が一番大切
ここまでアニメーションに対するネガティブな話題ばかりでしたが、一概にアニメーション全部やめましょう！というわけではありません。
- サイトの印象を良くしたい。
- ボタンにちょっとした動きをつけてクリックしたくなってほしい。
こんな目的であれば、要所にさりげなく・わかりやすくアニメーションを使うのがコツです。
「とりあえずオシャレに見せたいから動かそう」という理由だけでアニメーションを多用してしまうと、
ユーザーからの印象が悪くなってしまい、今後のサイト運用や更新の妨げに繋がってしまうかもしれません。
まとめ
アニメーションは、Webサイトを華やかに見せたり、ユーザーの目を引くのにとても便利です。
うまく活用できればサイトの魅力を大きく引き出したり、ブランドのイメージを良くすることに繋がります。
サイトを制作する際や運用する際は
「この動きは本当に必要か？」「誰にとっても見やすいか？」一度確認してみることをオススメします。