WEBサイトにおける動き(アニメーション)の大切さ

制作・技術

皆さんはサイトを制作する際、「動き(アニメーション)」に気を使われていますか?

「動き」はなくてもサイトは完成します。

しかし、動きがないとユーザー自身の行動やタイミングでサイト内を閲覧されることになりますので、外部からの刺激や違和感がない為に、ユーザーに与える印象が単調なサイトになってしまいます。

折角良いデザイン、UIやUXを持つサイトだったとしても、動きが無いだけでユーザーには「サッ」と一瞬で閲覧され、

「サイトを閲覧した記憶」が残りにくい可能性がとても高いです。

「閲覧した記憶が残らない」という事は、サイトの持つメッセージが、「ユーザーに伝わっていない」という事ではないでしょうか??


これはCVに大きく関わる問題ですので、とても重要な改善点です。

 

ユーザーの記憶に残すには、どうしたらいいの??

人は、外部からの刺激を与えられた時、違和感や、その時の感情が「記憶」に残りやすくなります。

そこで「動き(アニメーション)」の登場です。

例えば、一般的的バナー広告の場合、平均のクリック率は0.2%です。

しかし、動画広告の平均クリック率は0.4%、つまりバナー広告の約2倍もあるのです。

恐らく、動画(ユーザーの良そうしない動き)に目が止まり、広告の内容をしっかり見てしまった結果、興味を持ちクリックしたのではないでしょうか?

これをサイトに置き換えると、見せたい要素に特徴的な「動き」を付けることで、最も印象に残したい「要素」を、ユーザーに印象付けることが出来ます。

結果として、伝えたい内容が伝わる&CVに繋がるサイト運営に繋がることでしょう。

よほど有名な商品やサービスを扱うサイトならば別ですが、

これから新たにリリースする商品やサービスであれば、その商品力をアピールする為にも「動き」は必須です。

 

具体的な解決方法

具体的な「動き」の表現方法には、
「スクロールに合わせて、要素を見せたい順番で表示」
「文字をアニメーションで表示」
「ボタンにカーソルを乗せた際の変化」
などがあげられます。

例えば「元気ですか?」という言葉を、猛スピードでしかも拡大させながらフェードインさせれば、アントニオ猪木さんが発言したかの様な言葉になったり、

「元気ですか?」


ゆっくりフェードインさせれば、優しそうなおじいちゃんの発言した言葉になったりと、動きをつけることで、サイトのもつ世界観を、より強調することが出来ます。

「元気ですか?」

サイトを制作する際、デザイン作成の段階で、
事前に「どこにどの様な「動き」を付けたいか?」を考えておくと、「デザインと動きの親和性が高いサイト」を作成することが出来ますので、
是非、事前に打ち合わせておいた方が良いでしょう。

ただし「動き」が有り過ぎるサイトは画面が忙しなくなり、逆にユーザーに悪印象を与えかねません。
あらかじめ、どの部分を動かすのか?動かさないのか?を制作者と打ち合わせておきましょう。

 

まとめ

いかがでしたでしょうか?
今回はサイトの「動き」について簡単にご紹介させていただきました。

皆さんもサイトを制作、またはリニューアルされる際は、「伝えたい内容の優先度」以外に「動き(アニメーション)」にも注目してみて下さい。
きっとCVに繋がる素敵なサイトが完成するでしょう。

「既にサイトを持っているが、動きが全然なく、印象が薄い気がする。」
「サイトを作りたいがどうしたら良いか分からない。」
などお悩みがございましたら、是非弊社にお悩みをお聞かせください!