Webページ上で成果をあげるための技術は年々進化していますが、近年注目されているのが、パワーポイントのプレゼンテーションを受けているかのようにタイミングよくスクロールするに従って次々と現れるアニメーションです。今回はこのスクロール対応アニメーションを取り入れるときのポイントを3つご紹介いたします。
もくじ
◆スクロール対応アニメーションを取り入れる際のポイント
- 単調なアニメーションにしない
ユーザーの視線を引きつけるのは、スクロールした際に予期していなかったところから何かが現れた瞬間です。単調なアニメーションにしてしまうとユーザーは動きを予測してスクロールを飛ばしてどんどん下まで下げてしまいます。そのため、スクロール呼応型のアニメーションを取り入れる際には、アニメーションにバリエーションを入れてみることをおすすめします。
- 目障りに感じさせないようにする
バリエーションを持たせるといっても、過度に点滅させたり、大胆すぎるアニメーションはむしろユーザーにとっては目障りに感じることがあります。
また「パララックスエフェクト」のように動きのあるサイトにする場合には、デバイスの処理速度によっては、動きが遅くもっさりしてしまうデメリットもあるので注意が必要です。
- 表示のタイミングに気をつける
アニメーションは効果的ですが表示タイミングを間違ってしまうと、UXが悪くなる場合があります。
ユーザーやデバイスによってスクロールスピードは違います。
そのためどのスピードでもストレスなく読めるようにする必要があります。
異なるデバイスや通信環境などでローンチ前に表示のテストを行うことをおすすめします。
◆スクロール対応アニメーションを取り入れたサイト実例
- 日本デザインセンター
https://www.ndc.co.jp/
エレベーターメニュー付きでさまざまなスクロール呼応型アニメーションを楽しむことができます。
- Minus 99
https://www.minus99.com/
スクロールするごとに驚きの連続と感じるほど面白いアニメーションが施されています。
- acure pass
https://www.acurepass.co.jp/
オブジェクトがス〜っと動き、目を引く面白い効果が実装されています。
◆スクロール対応アニメーションの作り方
スクロール対応アニメーションの作り方にはいくつか方法がありますが、jQueryのコードで実装させたり最近ではCSSだけでフェードイン表示ができる方法もあります。
アニメーションのパターンも「ふわふわ」「しゅっと」「するする」「ぬるっ」など沢山のパターンがあり、ディレクターとコーダーの間の認識の共有が難しい時もあります。
そのため、スクロール対応アニメーションを実装する前に、イメージに合った動きをしているサイトを見つけて「この動きで！」と伝えられるようにしておきましょう。
◆まとめ
平坦なWebページに比べると、スクロール対応型のアニメーションを用いたページのほうがユーザーの興味を引きつけることができます。
しかし、間違った使い方をしてしまうとユーザーの目障りになる場合もあるので注意が必要です。
使い方のポイントを押さえて魅力的で効果的なWebページ制作に活かしてみてください。