【動画で解説】思わずスクロールしたくなる心地良い動きのWebサイト事例12選とその法則

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

訪問時

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

札幌PARCO GO scramble SO ramble


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

  1. カラフルなラインが伸びる
  2. 周りの文字が下から上にフェードイン
  3. コンテンツがステッカーのように登場

 

株式会社コモド

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


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

  1. 茶色背景のローディング
  2. セピア→カラー写真へスライドで変わる
  3. TOPページ登場

 

採用情報|FOURDIGIT Inc.

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


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

  1. 写真拡大
  2. タイトル文字が上から下にヌルッとフェードイン
  3. 応募期間のカウントダウン

 

株式会社ACES

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


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

  1. ロゴ+黒背景
  2. ロゴと同じ斜めの角度のボーターの動きのあるビジュアル
  3. 白背景

 

FDM株式会社


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

  1. ロゴ大
  2. ロゴがヘッダーの定位置まで縮小
  3. メニュー+ラインが左から右に引かれる
  4. タイトル文字+動画

 

税理士事務所O’lion


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

  1. ロゴ
  2. 下から上に色の背景がパララックス
  3. 写真の上にロゴが下から上へ表示

 

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

CIRCUS Shanghai


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

  1. 背景アニメーション
  2. テキストが下から上へフェードイン

 

VERMILLION(ヴァーミリオン)


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

  1. 背景違う色がレイヤーになっておりパララックス

 

Alexandre Frison de Isla


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

  1. ラウンドに切り抜かれた写真が回転
  2. テキストが下から上へフェードイン

 

Deuxieme Classe – BAYCREW’S STORE


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

  1. ラウンドに切り抜かれたメイン写真がフェードインで切り替わる
  2. メインテキストが下から上へフェードイン
  3. サブ画像+サブテキストが色々な方向からフェードイン

 

HUG


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

  1. 縦スクロール
  2. 事例の見せ方は横スクロール

 

要素のマウスホバー

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では、今回ご紹介したようなモーション設計を考慮したウェブサイト制作のご相談も承っております。どうぞお気軽にご相談ください。

WORKS制作実績