Webデザインにおけるアニメーションについて考えてみた〜実例編〜

こんにちは！デザイナーのH.Abeです。

Webデザインにおけるアニメーションについて考えてみたシリーズ第3弾です。

▼第1弾はこちら

[card url=”https://note.spiqa.design/wp/9692/”]

▼第2弾はこちら

[card url=”https://note.spiqa.design/wp/9720/”]

タイトルにもある通り、今回は実例を用いて分析してみます！

分析をするサイト

今回はこちらのサイトを分析しました。

Dive To Wrinkle | ポーラ公式 エイジングケアと美白・化粧品

シワ改善のパイオニア「リンクルショット」が明かす、シワができる理由と、その改善までのしくみを紹介しているサービスサイトです。

POINT01:印象的なフェードイン

テキストのフェードインがとても印象的です。

単純なフェードインではなく、下に潜ってくる(肌の奥深くまで知ろうというコンセプトに合わせている？)ような細やかな演出がなされています。

また、動きだけでなく文字間やフォントサイズ、テクスチャも相まって主役級の印象(FVを十分担える)を感じました。

これが単純なフェードインだった場合、世界観の演出をするにあたって物足りなさがあったのではないでしょうか。

POINT02:パララックス

サイト全体にパララックスが効いています。

パララックスとは？

視差効果のことです。スクロールすると、複数のコンテンツが異なる速度で移動していくことで、奥行きのあるサイトを表現できます。

参考：https://spiqa.design/knowledge/1215/

パララックスによる「奥行き」、テキストや画像の配置による「リズム」によって世界観に没入するような演出がなされています。

このような視差効果はテキスト量が多い時に用いると返って読みづらかったり、離脱の元になるのですが、本サイトはテキスト量もちょうど良いので効果的な表現であると言えるのではないでしょうか。

まとめ

サイトが画像とテキストだけというシンプルな構成だったので、わずかなアニメーションでも十分リッチな世界観を演出していました。

また、どのアニメーションにも無駄がなく根拠があるものばかりで、「どんな動きをするか」ではなく「世界観に合った表現は何か」の延長線上にアニメーションがあるという気付きを得ることができました。

ではまた次回！