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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スクロール呼応型アニメーションを取り入れた7つの実例サイト

1. 日本デザインセンター

デザインに関する問題解決を行う日本デザインセンターのホームページでは、エレベーターメニュー付きでさまざまなスクロール呼応型アニメーションを楽しむことができます。
全画面を使ったビデオや、パララックスで浮かび上がる写真など、さまざまなエフェクトをタイミングよく取り入れ、視線を引きつけます。

2. Uber Design

Uber DesignはUberのデザインチームのホームページです。
スクロールでふわりと表示されるコンテンツが印象的ですが、右から、左から、下から現れるといったように、ほんの1秒程度のアニメーションではありますが単調にならない工夫が施されています。

3. Minus 99

Minus 99のホームページも、注目に値する面白いアニメーションが施されています。
プレイスホルダーには、最初は画像が表示されていませんが、スクロールするとボックスの中に画像や動画が表示されます。
スクロールするごとに驚きの連続です。

4. Essential

驚きの新型スマートフォンEssentialのホームページにも、スクロール呼応型のアニメーションが多く取り入れられています。
ページを読み込むとまず最初にEssentialがどんと登場し、スクロールすると中身のパーツが重なるようにして表示されます。
スクロールするたびに、物欲を掻き立てられる、そんなホームページになっています。

5. acure pass

acure passのサイトは、すでに表示されているにもかかわらず、オブジェクトをすうっと動かすことで目を引くという面白い効果が実装されています。
これならユーザビリティやユーザー体験を損なわずにすむという、素晴らしいアイデアです。

6. Base CRM

Base CRMのページはよくあるWebアプリケーションのランディングページになっていますが、左右に分かれてふわりと画像を表示させるので、思わず見てしまいます。
複雑なアニメーションではなくとも、ユーザーの視線を引きつける格好の例でしょう。

7. TaxiNet

TaxiNetのホームページは、かなりインパクトがあります。
スクロールすると、全画面でアニメーションが起こります。
しかし、決して目に障るわけではなく、むしろそのダイナミックさに感銘を受けてしまうでしょう。

まとめ

平坦なホームページよりも、スクロール呼応型のアニメーションを用いたほうが、確実にユーザーの興味を引きます。
しかし、使い方を間違えてしまえば、かえってユーザーの目障りとなったり、ユーザー体験を壊してしまう可能性まであるので、使い方には注意が必要です。

ケーススタディーを通して、使い方を研究してみると、効果的なホームページを作ることができるかもしれません。
ぜひ、3つのポイントと7つの実例をチェックして、自身のホームページにスクロール呼応型のアニメーションを取り入れてみましょう。