デザイン

デザイン

ユーザーの心を揺さぶる!ささやかなアニメーションを効果的に使った8サイトをご紹介

179 views

Webデザインの世界ではアニメーションは特別に新しい技術ではありませんが、デザインのコンピューター言語などのトレンドによって、アニメーションの活用にはちょっとした流行り廃りの時期がありました。

GIFが流行した時にはアニメーションは積極的に活用され、今ではHTML5の普及によりさらに一般的なものとなりました。

 

今回はそんなアニメーションを効果的に活用する方法と上手く活用できているサイトを紹介します。

 

 

パーソナリティを追加する

Webサイトにおいてパーソナリティは、ユーザー認識の観点では重要な要素です。

それは、ナビゲーションメニューの作り方ひとつで影響してきます。たとえば、スクロールしてフェードする設定にすれば“エレガント”という印象を与えることができます。

その他には、タクシーアプリケーションで支払いの画面で見た目にも楽しい紙吹雪などの演出があると、それはお客さんのチップを払ったり、再度利用するためのモチベーションや口実になります。

 

Optimo’s hatはアニメーションでパーソナリティを強調している具体的な例です。

optimo

ポインタのカーソルを商品にあてることで、細やかなアニメーションと同時に、商品の名前が表示されます。

この演出は、技術的にはシンプルですが、パーソナリティを表現するには大きな効果があります。

 

それでは、他にもパーソナリティを強調したサイトをご紹介します。

NGUMA

nguma

 

PETE NOTTAGE

petenottage

 

 

感情的なつながりを持たせる

ユーザーがWebサイトやアプリケーションをお気に入りに入れるというのは、少なくともサイトとユーザーの間には感情的なつながりが発生したということです。

それは、人間同士の関係性と何ら変わりのない現象で、カップルのようなものなのです。

 

ブランドや会社の内に秘めた思いや、どういった性質を持っているのかをユーザーにイメージで伝えるにはアニメーションは効果的なツールの一つです。

 

以下に、感情に訴えかけるアニメーションを上手く使ったサイトをご紹介します。

 

Bolia.com

screen

 

17GRAD

17grad

 

BRIGHT MEDIA

brightmedia

 

Fillet

fillet

 

 

わくわく感を演出する

アニメーションを使うべきもっとも簡単な回答は“楽しいから”です。活字などよりも視覚的に頭に入ってきやすく、大勢の人がアニメーションを好みます。

 

Dream OnというWebサイトはアニメーションをふんだんに活用しており、見ていてとても楽しく、何度でも訪れたくなるようなデザインになっています。

screenshot-www-soleilnoir-net-2015-01-21-14-29-48

 

このように、人の心をわくわくさせたり、楽しませたりするのもアニメーションを活用するひとつの狙いです。

 

アニメーションをデザインに取り入れることは環境的に簡単になり、目立たせたりユーザーの心を動かすためには効果的です。Webデザイナーとしてはこれを活用しない手はありません。

 

ぜひ今回ご紹介したサイトを参考に、想い想いのアニメーションを作ってみてください。

 

この記事は「How to delight your users with subtle animation」を翻訳・参考にしています。

関連記事

おすすめ記事