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

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

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

WEBサイトにおけるアニメーションやモーションはブランドの人格を伝える非言語コミュニケーションの一つ。いわば、会話におけるボディランゲージ。誰がどのような人に何を伝えたいのか、どのように受け取って欲しいのか、何が相手にとって居心地が良いのか。だと思います

— Genki Imamura (@leegenki) November 7, 2023

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

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

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

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

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

SOURS｜ノーベル株式会社

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

QINO

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

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