Ozlink LAB

  • CREATIVE

July 31.2018

Webサイトに面白いアニメーションを実装させたい!動きが気持ち良いサイト6選

こんにちは。ディレクターの小谷です。

僕はいつも勉強も兼ねてギャラリーサイトなどから新しく公開されたwebサイトを見に行く事が多いのですが、動きのあるサイトがここ数年でとても増えたと感じます。

やっぱり動きがあるだけで全く動きの無いサイトと比べると印象も変わりますし、どんどん見たくなるような仕掛けはユーザーを飽きさせない魅力の1つですよね。

というわけで今回は、アニメーションの動きがとても気持ち良かったサイトを6つご紹介します。

自分のサイトでもアニメーションを取り入れたいけど、どんなアニメーションが良いのかわからない方もぜひ参考にしてみてください。

動きが気持ち良いサイト1. POGG

https://pogg-sweetpotatopie.com/

チーズタルト専門店「BAKE」が出した、スイートポテトパイ専門店のブランドサイトです。

まずページの読み込みからいきなりインパクトのあるアニメーションです。

配色がサツマイモを意識されたのか、紫色がよく使われていて良いですね。サイトのどこを見ても動きはありますが、テキストの表示アニメーションが特に滑らかで気持ち良いです。

また、このサイトは細かい部分もこだわっており、ボタンをマウスオンするとマウスカーソルが変わったりもする点も注目です。

動きが気持ち良いサイト2. JVEB Studio

https://www.jvebstudio.com/

こちらは海外のサイトです。

スクロールすると画像やテキストが出てくるアニメーションが多いのが特徴です。

背景にある植物が、スクロールすると微妙に動くのが可愛いですね。また右上のメニューボタンを押すと行われるメニューの開閉が、とにかく気持ち良く感じられます。

単純に右から開いてくるだけではなく、各テキストがスルスルと現れるのが憎いところですね。全体的にアニメーションスピードが少し早く、ポップな印象を受けます。

動きが気持ち良いサイト3. hair salon ROSE

http://rose-hair.jp/

三重県にあるヘアサロン「ROSE」のサイトです。

こちらは1ページもののサイトになるのですが、ヘアサロンということもあり、イメージが伝わりやすいように画像の多いサイトとなっています。

その分、画像の表示アニメーションには意識されているのか、すっきりとしていてとても見やすく感じます。

また画像の表示タイミングに合わせてテキストもフェードインしてくるため、いわゆる「アニメーション待ち」のようなことも起こらないように計算されていることも分かります。

動きが気持ち良いサイト4. Mowellens

https://mowellens.com/

こちらは海外のECサイトですが、とりあえず一度アクセスしてみてください。

まずトップページにスライダーしかないことにも驚きですが、スライドすると各商品がそれぞれ微妙に違った動きをします。

さらによく見ると、背景にある丸や六角形のモチーフもスライドに合わせてぐにゃぐにゃと変化したり、ボタンの色も変化したりしています。

左上のメニューボタンは、クリックするとロゴマークに変わります。このようなアイデアも日本のサイトではあまり見ない手法で、面白いですよね。

またページ遷移にもアニメーションが入っており、下層ページもスクロールアニメーションをはじめ、色々なアニメーションが盛り込まれているため、商品やブランド自体が見せたい世界観を表現できていると感じます。

動きが気持ち良いサイト5. napla recruit

https://www.napla.co.jp/recruit/

ヘアケアメーカー「ナプラ」のリクルートサイトです。

まずページを読み込んだタイミングで、ファーストビューのキャッチコピーにすぐ目がいくようなアニメーションが良いですね。

これが何も動きのないサイトの場合、画像にも目が行きそうです。

しかし計算された動きを利用することで「一番伝えたい内容を先にインパクトのあるアニメーションで見せる」ことに成功しており、アニメーションを上手く利用した好例と言えます。

各ボタンのマウスオーバーも動きに統一感があり、すっきりとしている印象です。

ボタンのマウスオーバーで表現するアニメーションは、本当に様々な動きができるため、とにかく違った動きをするサイトもありますが、このサイトは全体の雰囲気を壊さないよう「統一感」を意識して作られています。

動きが気持ち良いサイト6. デンソー ブランドサイト

https://brand.denso.com/ja/

自動車や産業機器で有名なデンソーのブランドサイトです。

このサイトの特徴は、画面全体が紙芝居のようになっており、スクロールすると1枚ずつめくっていくようなアニメーションとなっている点です。

こういった紙芝居方式のサイトもよく見るようになりましたが、どんどんめくりたくなりますよね。

さらには見せたいコンテンツをはっきりとセクションごとに分けられるので、各コンテンツでしっかりとイメージを伝えたいときには有効かもしれません。

メニューボタンを押すと、「動きがダイナミック」かつ「紙芝居っぽさ」を上手く取り入れており、この点も統一感が取れているように感じます。

アニメーションを使って「より伝わりやすく」!

いかがでしたか?

ご紹介した6サイトに共通して見られるのが、やはりスクロールに応じて画像やテキストを出現させる「スクロールアニメーション」です。

スクロールアニメーションは対象物の出現のさせ方で、「元気さ」や「上品さ」を伝える良い手法です。

とはいえ、どんなサイトにも取り入れても良いのかというとそうではなく、あくまでブランドサイトやコーポレートサイトなど、企業やサービスの雰囲気をより伝わりやすくするために使うのが望ましいかと思います。

「アニメーションで見せることは『より伝わりやすく』することが大前提」という点だけは忘れずに、皆さんもサイトにアニメーションを取り入れてみてください!

売上アップや集客に関する
お問い合わせ、ご相談はこちら

Contact us
Tel

お電話でのお問い合わせ

【受付時間】10:00~19:00(土日祝を除く)

075-334-8562