その他

2023.11.10

Webサイトにおける「動き」と向き合ってみた

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

先日、X(旧Twitter)を徘徊していると、このようなポストを見つけました。

会話におけるボディランゲージというのがすごくしっくり来ました。
と同時に、これまで「この動きかっこいいよね」「ここでこの動きしたら素敵じゃない?」で動きをつけていた自分が恥ずかしくなりました。ドビーは悪い子…。

かっこいい・素敵な動きにも適材適所があるのだと気づきました。

確かに、「高級」「洗練」「華奢」がキーワードのサイトでおもちゃ箱をひっくり返したような賑やかな動きは違和感ですよね。
逆にカラフルな賑やかな印象のサイトで、ゆっくりふわふわと動く動きは世界観がブレます。

これらの気づきから、今後たくさんのサイトを見る上で以下のことを意識して見てみようと思いました。

「このサイトは擬人化するとどんな人か?」
「声色は?」
「どんなものが好き?」
「どんな人と仲良くしてる?」

SOURS|ノーベル株式会社

例えば上記サイトは、THEポップなデザインでパキッとした明瞭な動きが多い印象です。
ふわっと下から出てくる動きもありますが、不透明度が0%→100%になる速度が速いのでそこまで曖昧な印象は持ちません。
サイトの印象から、【明るくて一緒にいるだけで元気になるような人】をイメージしました!

QINO

一方上記のサイトはとても静かな印象です。
FVの写真がふわっとアクティブになる速度はゆっくりで大自然の静けさを感じます。
反して「木の使いみちに、驚きを。」のテキストがスタイリッシュに出てくる箇所は木の固さを感じました。
サイトの印象から、【口数は少ないけどいざという時に決めてくれる、凛とした頼れる人】をイメージしました!

流行の動きをキャッチすることも大切ですが、その動きが何を「表しているのか」まで意識していきたいです!

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2023.12.30

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

    その他

おすすめ記事

  • 2023.12.30

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

    その他

  • 2021.11.12

    【コピペOK】JavaScriptとCSSでタイピングアニメーションを実装

    その他

  • 2021.03.30

    【jQuery】text()メソッドでHTML要素内のテキストを操作する

    その他

TAG

×