スクロール後のアニメーションについて考えてみた

Webサイトのアニメーションについて色々と意見を見かけます。私としてはそこまで動きをつけない方が良いとは思いますが、クライアントからの要望はかなり多いです。

「見た目がいい。」
「めずらしい。」
「他にやっているところが少ない。」

こういったご意見をいただきます。クライアントからのニーズはあるのでできる限り実装したいのですが、要望通りの迫力のあるアニメーションは訪問者の閲覧には向きません。

ここで制作者側の適切な対応としては、訪問者の閲覧を邪魔しない程度のアニメーションを提案するという事。

先日アニメーションをつけたサイト制作をおこないましたので、その際に気をつけたポイントについてご紹介します。

表示確認用のデモも用意しましたので、ぜひ合わせてご覧ください。

demo >>　https://pulp.style/demo/scrollin/

-------

動きを小さく

クライアントからの要望で多いのが『大きい動き』。スクロールしたら中央にあったロゴが左端へアニメーションしながら移動するという要望もあります。

動きが大きいと気が散るので、動きは小さく横からスライドインさせて対応しました。自然にスマートに。

表示タイミングを早く

アニメーションが嫌われる一番の原因が『表示タイミング』が原因かと思います。

スクロールしても白紙状態で、ツーテンポ遅れて表示されたらイライラするのは当たり前で、表示のタイミングはできるかぎり早めに。遅延はストレスの一番の要因になるのでテンポよく表示させるようにします。

小さい要素のみ動きをつけて目立たさせない

一つのセクション内の全ての要素に動きをつけると違和感を感じます。小さい要素のみにすることでスマートに表示させることができます。

一画面内で動く要素が多い場合はテキストのみ

ブログ記事の一覧で一記事ごとにアニメーションをつける、など一画面内に動く要素がたくさんある場合は、テキストのみにすると自然な動きになります。

-------

あとは、何度も訪れないページ（アバウトページや料金ページなど）で動きをつけないとか、長文にはつけないなど、工夫すればアニメーションは実装しても良いと思うんですよね。

まぁ、ともかく実際に動きを見た方が分かりやすいと思いますので、デモを用意しました。

閲覧しづらい動きを『NG』、特に気にならない程度の動きを『OK』と表示して交互に掲載してあります。『OK』と表示されている要素の動きであればさほど気にならないと思うんですよね。

demo >>　https://pulp.style/demo/scrollin/

ただ、これがすべてではないので、今後も最適なアニメーションを追求し、クライアントに提供していきたいと思います。