ホームページ上で成果をあげるための技術は年々進化しています。
そのなかで近年台頭しているのがスクロールするに従って次々と現れるアニメーションです。

こうしたスクロール呼応型のアニメーションは、まるで目の前でパワーポイントのプレゼンテーションを受けているかのようにタイミングよく現れ、視界に飛び込んできます。

今回は、Webデザインにスクロール呼応型アニメーションを取り入れるときの3つのポイントと7つの実例をご紹介します。
ただ単にスクロール呼応型のアニメーションを取り入れるだけではなく、効果的に取り入れるためには、何に気をつければいいのでしょうか。

スクロール呼応型アニメーションを取り入れる上での3つのポイント

d.jpeg
画像引用元：pexels.com

1. 単調なアニメーションにしない

スクロール呼応型アニメーションを取り入れる上で、まず重要なポイントとなるのが、単調なアニメーションにしないことです。

スクロールによってユーザーの視線を引きつけるのは、あくまでも**「予期していないところで何かが現れた瞬間」**です。
単調なアニメーションが続くと、ある段階でユーザーはスクロールを飛ばしてどんどん下まで下がっていきます。

単調なアニメーションは、先の見えないWebサイトになってしまい、ユーザーの視線を引きつけるどころかユーザーの視線を奪う「UXの悪い」Webサイトになってしまうことがあります。

そのため、スクロール呼応型のアニメーションを取り入れる際には、ある程度バリエーションを入れてみるのがよいでしょう。

2. 目障りにならないように気をつける

しかし、過度に点滅したり、ダイナミックすぎるようなアニメーションはむしろ目障りに感じることがあるので、節度を持って使うことも重要です。
前項との関連で言えば、「ユーザー体験」を考慮した上で適切かどうかを考えるべきです。

スクロール呼応型のエフェクトで特に注意したいのが、**「パララックスエフェクト」**です。

パララックスエフェクトは斬新でクールにも見えますが、処理速度があまり早くないデバイスだと、動きが遅くなってもっさりしてしまうというデメリットもあり、場合によってはもっさりとした動きになり、かえってUXを低下させてしまいます。

眼球を掴むようなアニメーションは数カ所にとどめ、あくまでも「ユーザー体験重視」であるべきでしょう。

参考：
使用に注意！UXを低下させてしまうかもしれない2017年のWebデザイントレンド

3. 表示タイミングに気をつける

適度に効果的なアニメーションを使っていると思っても、タイミングを間違ってしまうとUXが悪化してしまうことがあります。

例えば、スクロールの中心まで来ないと画面コンテンツが表示されない場合は、むしろユーザーが情報を拾うのを「妨害」していることになっていまいます。
場合にもよりますが、一般的には画面の下からアバブザフォールド(折り目の上の部分)に表示された瞬間にふわりと現れてくるのが理想的です。

ユーザーの特性や使っているデバイスによってスクロールスピードは違います。
どのスピードでもストレスなく読めるかどうかは、Webサイトのローンチ前にテストしておいたほうがよいでしょう。