Webサイトアニメーションは必要？使うメリット・デメリットを解説

昨今のWebサイトでは様々な場面で動いたりしています。これをアニメーションといいます。

アニメーションを使うことでWebサイトが豪華に見えたりサイト訪問者に没入感を与える事ができます。

ただ、使いすぎることでサイトが見づらくなったり視認性が下がったりする場合もあります。

この記事では

• Webサイトにアニメーションを使うメリット・デメリット
• どんなアニメーションがあるか
• 有効な使い方

を解説していきます。

こんなギモンを持っている方はぜひ見ていってください。

Webサイトにアニメーションを使うメリット・デメリット

最近のサイトでアニメーションの多いサイトを見たことはないでしょうか？

一昔前のWebサイトは静的な物が多く、あまり動きのないサイトばかりですが、最近のブランドを意識されている公式サイトなんかはよく動く印象があります。

Webサイトに訪問した時にあっちこっち動きがあると、大変目を引き世界観がとても現れますね！

すごい、おもしろい、と訪問者に思ってもらうことで興味を持ってもらう、そのブランドを知ってもらうと行った役割を果たします。

静的にテキスト、画像を貼り付けただけのサイトには出来ない3次元的な訴求(情報+空気感)が出来ると考えています。

商品やサービスにアクセスしてもらいたい場合にはボタンに動きをつけて、目線誘導をするといった狙いもありますね。

ただ逆に、アニメーションが多すぎるとせっかく訴求したい内容が薄れてしまう事もあります。

わー、すごい、とっても動いて面白いサイトだったな。でも何が載ってたっけ…？

そんな事にならないように、効果的にアニメーションを使っていきたいですね。

また、アニメーションを動かすのにはコストが掛かってしまいます。簡単なもの、サイトの一部がちょっと動く程度ならいいのですが、サイト全体が連動して動くようなものになると、実装コストが時間の面でも費用の面でもかかってきてしまうと行ったデメリットがあります。

Webサイトで使われるアニメーションにはどんなものがあるか

アニメーションと一言に言ってもWebサイトで使用されるものにはたくさんのものがあります。

代表的なものを羅列すると

• フェードイン
• スライドイン
• ホバーアニメーション
• ローディングアニメーション
• アコーディオン
• パララックス
• 無限ループ文字

AIに指示出す時にもこれらの単語を知っていると伝わりやすく、どのアニメーションがどんな動きを知っておくと使いやすいです。

なんとなく「アニメーションを実装して」というよりも、

• 〇〇のボタンにホバーアニメーションを付けてボタンを選んだ時の押した感を出して。
• 背景画像にパララックスをつけて画像全体に奥行きを出して。

といった指示を出しやすくなる効果があります。

フェードイン

AIに指示無しでサイト制作をお願いすると、スライドアップ＋フェードインの動きが多いですね。

スクロールして画面に入るとふわっと現れるようなアニメーションでよく使われます。

柔らかな雰囲気やすこしモダンな雰囲気を作れます。万能で使いやすいアニメーションです。

スライドイン

スライドインは横からシュっと要素が滑り込んでくるイメージです。

サイトにスピード感やリズム感をつけたい時に使用すると効果的ですね。シュッとしたイメージを持つコーポレートサイトのニュースフィードなどに使うと良いと思います。

ホバーアニメーション

ホバー(マウスを要素に合わせる)させると起動するアニメーションです。

一言にホバーアニメーションと言っても様々なものがあります。実装には主に以下のような意図が含まれると言われています。

• 操作している感を出す
• 動き・変化が起こることによる注目を集める
• 操作側のストレスを無くす(これ、押せるのかなぁ？という迷いを無くす)

押すと凹む、キラッと光る、色が反転する、文字が動く…、様々なアニメーションがあるので、代表的なもの、よく見かける物を並べてみます。

ローディングアニメーション

読み込み中の時に出したいアニメーションです、サイトを始めて表示する訪問者に、読み込み前の崩れたサイトを見せたくない時に使ったりします。

待たせている不安をなくしたり、動きをもたせて待つストレスを減らす効果が期待されますね。

読み込んでいる間動き続けるのがポイントです。

個人的には昔のプレステで見られたような、Now Loading…の上でキャラクターが走ってるようなのが好きなんですが最近は見かけるのでしょうか。

アコーディオン

アコーディオンのように伸び縮みするアニメーションです。メニューやQ&Aなどによく使われます。

ちょっと要素が多すぎる、パッと全体をみて希望の答えだけ欲しいユーザーに届ける。

そんな使い方をされることが多いです。

隠し過ぎも問題ですので、サイトの一部や下部で使われていますね。

パララックス

パララックスなんて中々馴染みのない言葉ですよね。

パララックスとは視差効果、スクロールスピードと実際に動くスピードの違いにより、奥行きを感じさせるアニメーションです。

広々とした風景を見せたい、人物を効果的に表示したいときなどに使われますね。

無限ループ文字

セクションの合間やファーストビューの一部によく採用されている、文字がずっと流れ続けるアニメーションです。

ゴシック体＋デカ文字＋太字でかなりスタイリッシュな印象を持てます。

有効な使い方

ただアニメーションを使えばいいというわけではなく、有効な使い方をしたいですよね。

使いすぎずにここぞ、というところで使っていきましょう。

• 主にCTAへ注目を集める、見せたい情報への視線誘導。
• ファーストビューのブランディング、ワンポイントで飽きさせない。

このような使い方が考えられますね。

ぜひどんな物があるのかを知って、会社や商品のサイトの雰囲気に合ったアニメーションを使っていきましょう！

まとめ:Webサイトでのアニメーションの役割と代表的なもの

Webサイトでのアニメーションの役割や代表的なアニメーションを紹介しました。

単純に情報を並べただけのサイトよりもより没入感や操作性、視線誘導がしやすくなったり、

サイトによる会社や商品のブランディングに強く訴求出来ます。

ただ、アニメーションをむやみやたらに入れすぎると、情報が散見し、どこに何が書いてあったかわからなくなってしまうこともしばしば。

見てほしいポイントやサイト全体のブランディング、操作性を訴えるアニメーションを友好的に使用して、ユーザーにも、クライアントにもサイトをより良くしていきましょう。

アニメーションを実装するのに、すこし前まではCSSやJavascriptをたくさん勉強しないといけませんでした。

AIに頼ればあっという間に実装してくれます。

まずは名前とどんな動きか、どんな効果があるかを知ってより良いWebサイトを作っていきましょう！

最後までご覧頂きありがとうございました！