その他

2023.11.28

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

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

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

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

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

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

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

SAUVENIR(サウベニア)

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

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

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

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

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

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

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

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

まとめ

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

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    その他

おすすめ記事

  • 2021.04.27

    【HTM5】aタグの基本的な使い方

    その他

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    その他

  • 2021.01.20

    【CSS】text-indentを活用した2行目以降を回り込みさせない箇条書きの作り方

    その他

TAG

×