Web制作におけるアニメーションの要否

そのアニメーション本当に要る？

Web制作においてCSS、JavaScriptを使ったアニメーションはよく見かけると思います。

アニメーションは見た目にもインパクトに残りやすいですが、使いどころを間違うとそのサイトで伝えたいことが分かり辛くなる可能性があります。

アニメーションを使うと分かり辛くなる例

そのサイトの目的が文章を主とした情報提供である場合、アニメーションとは相性が悪いです。

例えばニュースサイトやブログなどでスクロールするたびに文章がアニメーションで出てくるとどうなるでしょう？

読み辛くなります。人間は文章を読む時、視線が上から下に動きます。しかし読んでいってもアニメーション待ちで下の方の文章が間に合っていないとストレスになりますし、そのサイトですべき文章での情報提供の価値が薄れてしまいます。

また、初心者のポートフォリオサイトで無駄にアニメーションを使っているのがよくあります。自分の能力を見せるために動きのあるサイトを使いたくなる気持ちは分かりますがポートフォリオサイトの目的は"こんな作品を作った"、"こんな能力があります"とアピールすることが目的かと思います。

それなら見やすく分かりやすいレイアウトを行いリンク先の自分の作品で適切なアニメーションを使うことができることをアピールした方が良いと思います。

アニメーションを使うと効果的な例

ビジュアルのみでユーザに価値提供できるようなサイトはアニメーションと相性が良いです。

ファッション、フード、アニメなどなど...極端に言うと写真1枚でもそれがなんのサイトか説明できるジャンルはアニメーションと相性が良いです。

日本と海外のサイトの違いとして挙げられるのが、ビジュアルでアピールするのか文章でアピールするのかというところです。

海外サイトいくつか見てみると気付くのですがトップページでとりあえず1枚画像が出てくるものが多いです。またアニメーションも日本のものに比べると数が多く派手なものが多いです。

参考になりますので是非見てみてください。

おまけ：海外では日本に比べて識字率が低いところもあるためビジュアルで訴求するデザインになっているとか...

まとめ

アニメーションも適材適所です。

良い感じに使って、お客さんに喜ばれるものを作りましょう！