Webサイトでは訪問してくれたユーザーをひきつめるためにも心地よい動きのモーション設計を行うことが重要になります。 日々Webサイト制作の案件を引き受けていく中で、気持ちの良い動きを追求していく際に参考にした動きの部分にフォーカスして紹介していこうと思います。

訪問時

訪問時のローディングからのファーストビューと呼ばれるTOPページの初めは第一印象でその人の印象が決まるように、とても大事な部分です。Webサイト全体に対する印象を左右します。

札幌PARCO GO scramble SO ramble

出典:https://parco-scs.com/

 

株式会社コモド

セピア→カラー写真へスライドで変わるローディングがリノベーションという業態をビジュアライズしている。



出典:https://sr-comodo.com/

採用情報|FOURDIGIT Inc.

応募期間のカウントダウン表示は珍しいけれど効果的であると思う。



出典:https://recruit.4digit.com/

株式会社ACES

アリゴリズムで社会はもっとシンプルになる、と体現したビジュアライズ。
制作過程のnoteを拝読させていただいたのですが、黒い部分が動いているわけではなく白い部分がLottieで動かされているそうです!



出典:https://acesinc.co.jp/

FDM株式会社

出典:https://fdms.co.jp/

税理士事務所O’lion

出典:https://olion-tax.com/

要素(コンテンツ)の切り替え

CIRCUS Shanghai

出典:https://china.circus-inc.com/

VERMILLION(ヴァーミリオン)

出典:https://vermillion-jewelry.com/

Alexandre Frison de Isla

出典:https://www.alexfrisondeisla.com/

Deuxieme Classe – BAYCREW’S STORE

出典:https://baycrews.jp/feature/detail/4489

HUG

出典:https://h-u-g.co.jp/

 

要素のマウスホバー

HELENUS(ヘレナス)|LOVE OUR SCENT

出典:https://www.orbis.co.jp/product/helenus/

桜十字病院|熊本

出典:https://www.sakurajyuji.or.jp/

心地よいインタラクションの重要性と、そうでない動きの違い。

今回は素敵なウェブサイトの中から動きにフォーカスして紹介してみました。
本来であればマイナスのUXになるはずのスクロール。心地良い動きを実装することで、ユーザにスクロールしたいとプラスに転換でき得ることが分りました。
心地良い動きの共通点を一言で表すとすると抑揚だと思いました。
平坦な動きではなく、見る側に抑揚をつけてテンポよくコンテンツを表示させることで、ストレスがない心地良い動きにつながると思います。

英語ですが、心地良い動きの実装の参考になるリンクを貼っておきます。
UI Animation—How to Apply Disney’s 12 Principles of Animation to UI Design 出典:https://www.interaction-design.org/literature/article/ui-animation-how-to-apply-disney-s-12-principles-of-animation-to-ui-design
KOHIMOTOでは、今回ご紹介したようなモーション設計を考慮したウェブサイト制作のご相談も承っております。どうぞお気軽にご相談ください。