その他

2023.11.28

Webデザインにおける「動き」ともっと向き合ってみた

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

私は以前Webサイトの動きに着目した記事を書きました。

http://note.spiqa.design/wp/9380/

以降、どのサイトをみていても自然と「ここはなぜこの動きをつけたのだろう?」という視点で見るようになっていました。(成長…!)

その中で、「この動きについて、考察したい!」というものがあったので、今回はああでもないこうでもないと語ってみようと思います。

どうぞ、お付き合いくださいませm(_ _)m

SAUVENIR(サウベニア)

SAUVENIR(サウベニア) とはサウナーのためのファッションブランドです。「サウナ室の中でもオシャレしたいあなたのサウナーライフを。」をコンセプトにサウナグッズを展開しています。

このサイトの特に気になったところはこちら↓

ファーストビュー〜商品一覧までのスクロール時の動きです。

商品一覧までいくと通常通り、スクロールになりますが、ファーストビューから商品一覧はフワっと切り替わるような動きがついています。

私は、上記サイトを見た時、ファッションカタログ(今ってもうないんですかね;;)を開く時のワクワク感を彷彿とする動きだなあと思いました。

商品一覧セクションまで行くと商品の詳細が見れたり、実際に購入ができたり、機能的なゾーンに入ります。

一方ファーストビューはサイトの顔。ファッションカタログであれば表紙であるからこそ商品一覧との差別化もあるのではないかと思います。

Webは2Dで実物感が少ないからこそ、このような工夫(今回は、カタログを開く時のワクワク感を彷彿とさせること)が必要なのではないか?と考察をしました。

まとめ

昨今のWebサイトは動きの種類も豊富で飽きない工夫が随所に施されています。

ただ、なんとなく動きをつけるだけでなく、サイトのジャンル・テイストを絡めて動きをつけることができるとより深みが増しますね!

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2023.12.07

    アニメーションはデザイナーが作る?

    その他

  • 2023.12.28

    CSSで行数によって位置の調整ができた話

    その他

  • 2020.12.09

    擬似要素とは?::before / ::afterの使い方

    その他

TAG

×