心をうたれるサイトは使っている　人を惹きつけるアニメーションの話

お久しぶりです。
皆さんは、自社のサイトや他社サイトを見てスライドショーをもっと「いい感じにしたい」と思った事や、すごく動きのあるサイトだけど自社サイトにも入れる事ができないかなど思った事はあるでしょうか。
今回は、WEBサイトにおいてデザインと深く関係してくるアニメーションについてご紹介させていただきます。
アニメーションと言えば、一般的にはテレビアニメを思い浮かべる人が多いと思いますが、WEBにおいてのアニメーションはサイトに入って最初に表示されるファーストビューを印象付けて視覚的に引き付ける有効な手段です。
 

アニメーションの種類について

基本的にWEBサイトに動きを持たせるアニメーションですが、いくつか種類があります。
常に動いているアニメーションや、クリックやマウスを当てることで反応する受動的なものなどがあります。
それぞれインパクトが強くFV等に向いているものや、常に動いていて背景などにデザインとして組み込むアニメーションなどその動きや色合いによってさまざまです。
実際のアニメーションを踏まえてご紹介させていただきます。

※本記事で紹介しているのは、コードペンというソースコードを共有できるサービスから引用しています。弊社で作成していないものが含まれますので、ここで紹介しているものを使用する際はライセンスなどの確認をお願いいたします。

FVに向いているスライドショー形式

例えば、WEBサイトでよく見かける画像のスライドショーも常に自動で動く機能や矢印をクリックすることで次のスライドに飛ばしたり戻したりする複合型だったりします。
下記はスライドショータイプのアニメーションですが、非常に洗練された動きと視覚的に目を引き付ける幾何学模様を組み込んだ素晴らしいアニメーションだと言えます。
 
※本記事でご紹介しているアニメーションは、クリックすると実際の動きをご確認いただけます。

スライドーショータイプのアニメーション

See the Pen
Fancy Slider by Nikolay Talanov (@suez)
on CodePen.

独特な動きのスライドショー

スライドショータイプのアニメーションには、画像そのものに動きを与えることができるものもあります。
例えば下記のスライドは、WebGLという3Dアニメーション技術を組み込んでおり、画像が切り替わる際にぐわんと歪ませて非常に面白い切り替わり方をします。
 

See the Pen
WebGL Distortion Slider by Ash Thornton (@ashthornton)
on CodePen.

 
通常のスライドショーや画像をペライチ枚で掲載するよりも目がひきつけられると思います。
このようなアニメーションは、ページ全体でいろんなところに使ってしまうと本来読んでほしいテキスト情報などに目がいかず、伝えたい情報が伝わらなくなってしまうためFVや特に強調したい写真等を見せるときに有効です。
 

縁の下の力持ち　サイト全体のイメージに

パララックス系のアニメーションは、ぱっと見の派手さはないものの背景などに使用することでサイト全体の世界観を作ることができ、作りこまれたサイトという印象になります。

白い光の幻想的なアニメーション

See the Pen
Parallax Star background in CSS by sarazond (@sarazond)
on CodePen.

桜が舞う春にピッタリのアニメーション

See the Pen
Sakura Animation using WebGl by Frank FitzGerald (@FrankFitzGerald)
on CodePen.

山脈の上を飛んでいる様なアニメーション

See the Pen
GLSL Hills by yoichi kobayashi (@ykob)
on CodePen.

マウスの動きやクリックに反応するアニメーション

好奇心に訴えかけるようなアニメーションもあります。
スクリプトでマウスの動きを取得してアニメーションに反映するものもあり、「これをやったらどんな動きをするだろう」と見た人を楽しませ、ページに滞在してもらえるような遊び心のあるサイトにお勧めです。

マウスの動きを追うというアニメーションは、代表的なものとしてマウスストーカーというものがあります。
その名の通り、マウスの動きを点などが追っかけていくというアニメーションです。
ワンポイント的なアニメーションですが、実用的な面もありリンク要素にホバーした時に追従していた点を大きくして「more」などに切り替えるパターンなどはユーザーが見落としてページに飛んでもらえないというパターンを回避することができます。

See the Pen
Custom Cursor Stalker by Reika Akuzawa (@reikasan)
on CodePen.

また、上記の応用として3Dアニメーションなどと組み合わせることで下記のように非常にダイナミックなアニメーションを作ることも可能です。

クリックすると様々な色が飛び出すアニメーション

See the Pen
Color Changin’ by 城村光 (@tadqykps-the-vuer)
on CodePen.

マウスでぐりぐりとドラックするとゆらゆらと動きと色が変わるアニメーション

See the Pen
GPGPU Particles Ver2 by yoichi kobayashi (@ykob)
on CodePen.

マウスのクリックや動きで揺れるアニメーション

See the Pen
Swarm by Kevin Levron (@soju22)
on CodePen.

まとめ

今回は、WEBにおけるアニメーションについて紹介しました。
WEBにおいても第一印象や目を引く動きというのは非常に大切です。適切にアニメーションを取り入れることでブランドの訴求やコンバージョンを伸ばす手助けとなります。
動きのあるサイトにしたい、他と被らないアニメーションを入れたいという方は参考にしてみてください。
弊社では、紹介したようなアニメーションを組み込んで制作を行う事もできます。
※ECサイトなど一部システムの制約により実現できない場合もあります。

ここまで記事を読んでいただきありがとうございました。
わたしが所属する株式会社アドシンでは、チラシ、WEBサイト、ロゴ、イラストなど、様々なデザイン制作を承っております！
先ほどお伝えしたようにECサイトの制作もおこなっておりますので、ECの運用を効果的に行っていきたいなどのご要望にもお応えしております。
ぜひアドシンまでご相談ください！

お仕事のご相談・お問い合わせはこちら

Instagramではデザインの情報はもちろん、アドシンの社内の様子を感じていただける発信もおこなっております。この機会に是非フォローをお願いします！

アドシンの Instagramはこちら