MENU
CLOSE
DESIGNWEB Edit : 2022.11.21 Update : 2023.01.11

【動画で解説】思わずスクロールしたくなる心地良い動きの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では、今回ご紹介したようなモーション設計を考慮したウェブサイト制作のご相談も承っております。どうぞお気軽にご相談ください。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。