動きのあるWEBサイトおすすめ5選！

こんにちは。WEBデザイナーの石高です。
最近はコーディングを担当することも多く、どんなアニメーションがいいのか悩む今日この頃・・・

WEBサイトを制作する上で大きな要素となってくる「動き」は、サイトを閲覧している人に対して

• 飽きさせない
• 強調したいところを効果的に伝えることができる
• スクロールを促す

といった効果をもたらすことができます。

そこで今回は思わずスクロールしてしまいたくなる【動きのあるWEBサイトおすすめ5選】を私視点でご紹介させていただきたいと思います！

動きのあるWEBサイトおすすめ５選

témamori（てまもり）公式サイト

引用元：https://temamori.com/

こちらの水不要のハンドソープの商品を紹介しているWEBサイトです。
泡を連想するようなゆらゆらとした動きと文字がバウンドするように現れる動きが目を引きます。
また途中で実際に使用している動画を載せてくれているので、閲覧者にとっては使用方法もわかりとても親切だなと思います。
全体的にポップでわかりやすい親切なWEBサイトです。

仁尾興産株式会社/umiral（ウミラル）：にがり浴でここち良く

引用元：https://umiral.jp/

こちらは横スクロールのWEBサイトとなっております。
波のゆらゆら揺れている感じと背景の動画が目を引くMVです。
各セクションの切り替わりの際に商品写真を用いていますが、背景に置くパララックス効果によってスクロールがより促されますね。

aim is HOME｜エームサービス 栄養士（専門職）新卒採用情報 | aim is HOME

引用元：https://www.aimservices.co.jp/recruit/senmon/

こちらのMVはスクロール量によって表示される領域の大きさが変わってきます。
最近よく見る動きで私も取り入れたい！と思っている動きの一つです。
私がこのサイトでお気に入りのところは他にもありまして、各スタッフさんのインタビューページです。
背景に一枚の写真を置いているのですが、スクロールに応じて会話が進んでいきます。
採用サイトではインタビューのページを作成することは多いと思うのですが、こんな楽しいページだと思わずスクロールしてしまいますよね。
会社の楽しそうな雰囲気の伝わるとても良い動きだと思います。

Ochill

引用元：https://ochill.jp/

こちらはホテルのWEBサイトで、落ち着いた雰囲気が伝わってきます。
写真は大きく大胆においてあり、スクロール量に合わせて大きくなったり縮んだりして、文字領域が少なく写真がおいてあるシンプルなデザインでも飽きずにスクロールしていまします。
特にArtworkのセクションの写真から写真へ移り変わる動きはとても美しく何度も行ったり来たりしてしまいます。

サブカルチャー事業部 | 株式会社メイクリー

引用元：https://subculture.makery.co.jp/

とにかくすごいとしか言いようがないこちらのWEBサイト。
粒子一つ一つが動き、女の子のキャラクターになったり背景になったりと、見るところがたくさんあって見きれません。
画面をホバーするとちょっと動くような細かいところまで作り込まれています。
制作陣の熱意と技術力を感じます。

まとめ

今回紹介させていただきましたWEBサイトはどれも、思わずスクロールしてしまう楽しいサイトばかりでした。
スクロールの方向や、文字の出方、スクロール量に応じた動きなど、様々なアニメーションが存在します。
WEBサイトに訪れた人に対してどのような印象を与えるのか、飽きずに見てもらえるのか、デザインを活かす動きは何なのか、を考えて実装することがとても大切だと感じます。
実際に今回は動き中心にWEBサイトを紹介させていただいて、一つ一つの動きに意味があるんだなと改めて考えさせられました。

ぜひ今回ご紹介したサイトを皆様も参考にしてみてください！
もしWEBサイトの制作やリニューアルをしたいなどご興味がありましたら、リースエンタープライズまでお問い合わせください。