最近のWebサイトを見ていると、スクロールに合わせて文字が現れたり、写真がゆっくり動いたり、ページを開いた瞬間にロゴやコピーが動いたり。
何かしらのアニメーションが入っているサイトをよく見かけます。
私自身、Webサイトをデザインするときに「ここは少し動かしたいな」と考えることがあります。
静止画だけでは伝えにくい雰囲気を出せたり、見てほしい場所へ自然に視線を誘導できたりするからです。
ただ、動けば動くほど良いサイトになるわけではありません。
アニメーションを入れすぎると、逆に「見づらい」「疲れる」「どこを見ればいいのか分からない」というサイトになることもあります。
では、Webサイトにアニメーションは本当に必要なのでしょうか。
今回はWebデザイナーの視点から、Webサイトにアニメーションを取り入れる効果と、私たちが制作するときに考えている「動かす・動かさない」の境界線について紹介します。

そもそもWebサイトにアニメーションは必要？

結論から言うと、すべてのWebサイトにアニメーションが必要なわけではありません。
大切なのは「動いていること」ではなく、その動きに役割があることです。
例えば、
・最初に見てほしい情報へ視線を誘導する
・スクロールに合わせて情報を順番に伝える
・ボタンを押せることを分かりやすくする
・ブランドの雰囲気を表現する
・サービスや商品の特徴を視覚的に説明する
こうした目的があるなら、アニメーションはWebサイトを分かりやすくするための手段になります。
反対に、
「最近よく見るから」
「なんとなくおしゃれだから」
という理由だけで動きを追加すると、かえって使いにくくなることがあります。
私たちがデザインするときも、「ここを動かせるか」より先に「ここを動かす意味があるか」を考えるようにしています。

Webサイトにアニメーションを入れる4つの効果

Webサイトのアニメーションには、見た目を華やかにする以外にも役割があります。
特に効果を感じやすいのが、次の4つです。

1. ユーザーの視線を誘導できる

アニメーションの分かりやすい効果のひとつが、視線を誘導できることです。
例えば画面の中に写真、見出し、文章、ボタンがすべて同時に表示されていると、ユーザーはどこから見ればいいのか迷うことがあります。
そこで、
最初に見出しが表示される。
少し遅れて写真が現れる。
最後にボタンが表示される。
というように順番をつけると、自然と情報を見る順番を作ることができます。
Webサイトでは、すべての情報を同じ強さで見せる必要はありません。
「まずここを見てほしい」
「次にこれを読んでほしい」
という優先順位があります。
アニメーションは、その順番を視覚的に伝える方法のひとつです。

2. 情報の切り替わりを分かりやすくできる

アニメーションは、ユーザーの操作に対する反応を伝えるためにも使われています。
例えばメニューを開いたとき。
ボタンにカーソルを合わせたとき。
スライダーを切り替えたとき。
フォームの入力内容にエラーがあったとき。
何も変化しないより、少し動きがある方が「操作できた」と分かりやすくなります。
普段はあまり意識しない部分ですが、こうした小さなアニメーションもWebサイトの使いやすさに関係しています。
派手なスクロール演出だけがWebアニメーションではありません。
ユーザーの操作に対して適切な反応を返すことも、UI・UXを考えるうえでは重要なアニメーションだと思います。

3. ブランドの世界観を表現できる

動きそのものが、企業やブランドの印象を作ることもあります。
例えば、ゆっくりとした滑らかな動きなら、落ち着きや上質さを感じやすくなります。
テンポよく切り替わる動きなら、活発さやスピード感を表現できます。
同じレイアウト、同じ写真、同じ文字でも、アニメーションの速度や動き方を変えるだけで印象はかなり変わります。
私自身、Webサイトを作っていて面白いと感じる部分です。
アニメーションを考えるときは、
「何を動かすか」
だけではなく、
「どんな速度で動かすか」
「どこから現れるか」
「どのくらい余韻を残すか」
まで考えます。
デザインというと色やフォント、写真に目が行きやすいですが、「動き方」もブランドを表現する要素のひとつです。

4. スクロールする楽しさを作れる

Webサイトは、基本的にユーザーがスクロールしながら情報を見ていきます。
そこでスクロールに合わせて写真が変化したり、コンテンツが重なったり、背景が切り替わったりすると、「この先も見てみたい」と感じるきっかけになることがあります。
特にブランドサイトや採用サイト、サービスの世界観を伝えるサイトでは、こうした演出が効果的な場合があります。
ただし、ここには注意も必要です。
「スクロールが楽しい」と「スクロールしないと情報が見られない」は別物です。
演出を見せることが目的になってしまうと、ユーザーにとってはストレスになることがあります。
あくまでコンテンツを見る体験を少し良くする。
そのくらいの考え方がちょうどいいと思います。

Webサイトのアニメーションはどこに使うと効果的？

アニメーションはサイト全体に入れる必要はありません。
むしろ、見せたい場所を絞った方が効果が分かりやすくなります。
例えば、ファーストビュー。
Webサイトを開いて最初に表示される場所なので、ブランドの印象を伝えるアニメーションと相性が良い場所です。
次に、サービス紹介。
複数のサービスを順番に表示したり、図や写真を使って内容を説明したりするときに動きを加えると、情報を整理して見せやすくなります。
実績紹介でも使えます。
写真が切り替わる、横方向へスライドするなど、複数の制作実績をテンポよく見せることができます。
そして、ボタンやメニュー。
ここでは大きな演出ではなく、カーソルを合わせたときに色が変わったり、矢印が少し動いたりする程度でも十分です。
個人的には、サイト全体を動かすよりも「ここを印象に残したい」という場所に絞って使う方が、アニメーションの良さが出やすいと感じています。

アニメーションを「やりすぎ」と感じるのはどこから？

ここが今回、一番書きたかったところです。
Webサイトのアニメーションに「○個以上使ったらやりすぎ」という明確な基準はありません。
ただ、制作していると「これは少し動かしすぎかもしれない」と感じる瞬間があります。
私がひとつの基準にしているのは、
「ユーザーが情報を見ることより、アニメーションを見ることの方が中心になっていないか」
ということです。
例えばページを開くたびに長いローディング演出を待たされる。
スクロールしても、アニメーションが終わるまで文章を読めない。
文字も写真も背景も全部違う方向に動いている。
目的のボタンを押したいのに演出が終わるまで操作できない。
こうなると、アニメーションがユーザーの行動を邪魔しています。
最初に見たときは「すごい」と感じても、何度も使うサイトでは面倒に感じるかもしれません。
アニメーションが主役になるサイトもありますが、一般的なコーポレートサイトやサービスサイトでは、ユーザーが知りたい情報をきちんと得られることの方が重要です。

「全部動かす」と、逆にどこも目立たなくなる

これはデザイン全般にも言えることですが、すべてを目立たせると、結果的にどこも目立たなくなります。
例えば、
見出しが動く。
写真も動く。
背景も動く。
ボタンも動く。
スクロールするたびにコンテンツが現れる。
これらを全部同じページで使うと、ユーザーの視線がいろいろな場所へ移動してしまいます。
本当に見てほしい場所がどこなのか分からなくなることもあります。
静止している部分があるから、動いている部分が目立つ。
これはアニメーションを考えるときに、意外と大切です。
私自身、デザインを作っている途中で、
「ここも動かしたら面白そう」
と思うことがあります。
でも一度全体を見直して、「この動きは本当に必要かな」と削ることもよくあります。
アニメーションを追加することと同じくらい、あえて動かさない判断も大切です。

アニメーションでサイトが重くならないようにする

Webサイトにアニメーションを取り入れるときは、見た目だけでなく表示速度にも注意が必要です。
特に大きな動画や高解像度の画像を多く使用すると、ページの読み込みに時間がかかる場合があります。
どれだけきれいなアニメーションを作っても、サイトがなかなか表示されなければ、その前に離脱されてしまうかもしれません。
そのため制作時には、
・画像や動画の容量を抑える
・必要以上に大きなデータを読み込まない
・スマートフォンでの表示も確認する
・アニメーションを必要な場所に絞る
といった調整も必要になります。
PCでは滑らかに動いていても、スマートフォンでは同じように動かないこともあります。
デザイン画の上で動きがきれいかどうかだけではなく、実際の端末で快適に使えるかまで確認することが大切です。

スマートフォンではアニメーションを減らすこともある

PCとスマートフォンで、必ず同じアニメーションを使う必要はありません。
これは実際の制作でもよく考える部分です。
PCでは画面が広いため、左右からコンテンツを表示したり、大きな写真を動かしたりする演出ができます。
一方、スマートフォンは画面が小さく、基本的には縦方向にスクロールします。
PCと同じ動きをそのまま入れると、窮屈に感じたり、情報が見づらくなったりすることがあります。
そのため、
PCでは大きく動かす。
スマートフォンでは動きを小さくする。
場合によってはアニメーション自体をなくす。
という判断もします。
レスポンシブデザインというとレイアウトを変えることを想像しやすいですが、アニメーションも端末に合わせて設計する必要があります。

アクセシビリティにも配慮したい

Webサイトの動きが、すべてのユーザーにとって心地よいとは限りません。
大きな動きや連続したアニメーションを負担に感じる人もいます。
そのため、アニメーションを実装するときは、ユーザーの端末で設定されている「視差効果や動きを減らす」といった設定を考慮する方法があります。
Webサイトを作る側が「かっこいい」と思う演出でも、見る人にとって使いやすいとは限りません。
アニメーションを考えるときほど、作る側ではなく見る側の視点を忘れないようにしたいところです。

Webサイトにアニメーションを入れるときに確認したいこと

私たちがアニメーションを考えるときに確認したいポイントをまとめると、次のようになります。
・その動きに目的があるか
・見てほしい情報へ視線を誘導できているか
・情報を読む邪魔になっていないか
・操作を待たせていないか
・サイトの雰囲気に合っているか
・動く場所が多すぎないか
・スマートフォンでも見やすいか
・ページの表示速度に影響していないか
・動きを苦手とするユーザーにも配慮できているか
アニメーションを追加したあとに、
「これをなくしたら、分かりにくくなるだろうか？」
と考えてみるのもおすすめです。
なくしても何も変わらないのであれば、そのアニメーションは必要ないかもしれません。

まとめ｜アニメーションは「動かすこと」ではなく「どう伝えるか」

Webサイトのアニメーションは、うまく使えば視線を誘導したり、情報を分かりやすくしたり、ブランドの雰囲気を伝えたりできます。
一方で、入れすぎると情報が読みにくくなり、サイト本来の目的を邪魔してしまうこともあります。
大切なのは、
「ここ、動かしたらかっこいいよね」
で終わらせないこと。
なぜ動かすのか。
誰に何を見てほしいのか。
動かすことで、本当に分かりやすくなるのか。
そこまで考えて初めて、アニメーションがデザインの一部になるのだと思います。
私たちLAKAでも、Webサイトを制作するときにアニメーションを取り入れることがあります。
ただ、すべてを派手に動かすのではなく、企業やブランドの雰囲気、ユーザーの導線、スマートフォンでの見え方などを考えながら、「動かすところ」と「動かさないところ」を設計しています。
Webサイトをもう少し印象的にしたい。
ブランドの世界観をWeb上でも表現したい。
今のホームページが少し単調に感じる。
そんな場合は、デザインだけでなくアニメーションまで含めて考えてみると、今までとは違った見せ方ができるかもしれません。
ホームページの新規制作やリニューアルをご検討中の方は、お気軽にLAKAへご相談ください。