ランディングページデザイン

ランディングページのアニメーションが効果的な時・逆効果な時

その動き必要!?と、ついツッコミたくなるようなアニメーション盛り盛りのLP(ランディングページ)もあれば、ほどよく効果的にアニメーションが使われていて「なんかおしゃれ」みたいなLPもあります。たくさんアニメーションを使っていても、なぜか見やすいページもあります。
なぜこんな違いが生まれるのでしょうか?

WEBデザイン初心者の頃って、つい『むやみにアニメーションをてんこ盛り』にしちゃいがちです。


だってなんかオシャレっぽくなるんだもーん!分かります。分かりますよ。
おまけに最近は複雑なコードを書かなくても簡単にアニメーションを実装できちゃったりもするので、余計調子に乗って(笑)使っちゃいそうです。
WordpressにはShortcode Ultimate っていうプラグインもあるし、WixなんかのWebサイト作成サービスでもアニメーションは簡単なのは実装できるし、ペライチもアニメーション機能を追加したようです。
もはや、アニメーションをサイトに実装するのは当たり前の時代…っ!!

でも、あんまりむやみにアニメーションを使って、それが逆効果になったら意味が無いですよね。
だから今日は、ランディングページに魅力的な動きをつけるアニメーションについて、効果的な場合やそうでない場合についてお伝えしたいと思います。

 

 

アニメーションの必要性

と、その前に、アニメーションの必要性についてまずは理解したいと思います。

アニメーションはなぜ必要なのでしょうか?
必要な情報は既にLP内にあるのですから、わざわざアニメーションをつける必要なんて無さそうなものですが…。

いやいや、やっぱり効果的に使えるなら使った方がいいんです。
なぜならアニメーションは以下のように役に立つからです。

 

アニメーションのメリット

①待ち時間の短縮
読み込み待ち時間を退屈だと思わせないために、ちょっとしたアニメーションを表示して待ってもらいましょう。待ち時間に面白いものが見れたら、待ってることなんて忘れちゃいますよ。

②インパクトを与える
めちゃくちゃカッコいいビジュアルイメージを示すことができたら、否が応でもその商品やサービスに対する期待値は上がります。

③強調したいポイントを際立たせる
アニメーションは、「ここぞ!」という時に、目立たせたい場所を目立たせるのに最適です。

④今風な感じを演出
おしゃれなサイトって今風な感じがしますよね。
古いデザインは、トレンドでは無いイメージや、更新していない(業務に熱心ではない)などのイメージを与えかねません。
アニメーションを使うと、トレンド感などを伝えることができます。

⑤ブランドイメージをより伝える
静止画や言葉だけでは伝わらないことでも、動きをつけることでより伝えることができます。そのブランドが持つ世界観を、より具体的に正確に表現できます。
アニメーションには様々な動きが設定できるので、スタイリッシュにも幻想的にもポップにも、演出を加えることができるのです。

 

 

こんなアニメーションの使い方は逆効果

メリットの沢山あるアニメーションですが、使い方によっては諸刃の刃になってしまいます!そうならないように、以下のアニメーションが逆効果になってしまう使い方について確認しましょう。

 

よく考えずにアニメーションを設定しちゃう

個人的に失敗の第一に上げたいのは、「とりあえずオシャレにカッコよくなるから、アニメーションつけちゃえ」という無目的さです。

この結果、
ごちゃごちゃしてて見づらい
というLPができあがってしまいます。

LPの目的は何でしょうか?
多くの場合は、お問い合わせを取得したり、何かを購入してもらったりと言った『顧客の具体的な行動』をCV(コンバージョン)として設定しているはずです。

なので、
LPにおいては、アニメーションで実現できることの内の、『カッコよさ』『オシャレさ』『今風らしさ』なんて要素は、あくまで脇役なんですね。脇役を主役にしてはいけません。
(※販売やお問い合わせゲットが目的のLPではなく、ブランドイメージを伝えることや、インパクトを与えることを目的とされたLPやサイトなら逆に『カッコよさ』などの要素を主役に置く必要があります)

極論、めっちゃダサくても売れたらいい!
それぐらいLPにおいては最終的な目的を持つことが大事なのです。

 

エフェクトとスクロール速度が合わない

「横から文字出てくるの遅すぎるねん!」とイライラしたことはないでしょうか?

そう、世の中にはWEBページをもっと早く読みたい人もたくさん存在するわけでして、その人たちは早く読みたいがためにページを猛スピードでスクロールします。
しかし、そのスクロールスピードに対して、パララックスやフェードインなどのエフェクトのタイミングがなんか変…!!

そんなことが往々にしてよくあります。特に縦長のLPなどでよく見受けられますね。
これはユーザー体験をよく考えずに行った結果で、素敵にしようと思って追加したエフェクトが逆効果になってしまったパターンですね。

エフェクトのスピードを速くするとか、
余分な箇所にエフェクトを使用しないとか、そういった改善の工夫が求められます。

 

やたら重い

アニメーションを追加すればコードが追加されるので、当然その分だけLPは重くなります。もちろんCSSやJavaなどを圧縮するなどして、軽くする工夫はできます。
昨今のサーバー・通信環境では、『重さ』について以前ほどは心配する必要も無くなってきました。

しかし、ユーザーの心理はと言うと、
モバイルサイトでは読み込みに3秒以上かかると半分以上の人が閲覧をやめて離脱しちゃう、なんてことまで言われてますので、やっぱり不必要に重くする必要は無いのです。
やたら最近Googleも速度に厳しいですしね。

これは便利。サイトの表示速度をGoogleが計測してスコア化してくれます。 PageSpeed Insights

アニメーションの実装は、必要最低限!と覚えておきましょう。

 

 

 

こんな時にアニメーションを使うと効果的

 

ここぞ!と目立たせたい時に使う

一番伝えたいキャッチコピーにエフェクトをつけたり、最終的なお申し込みカートに行くボタンにアニメーションをつけるなど、ここぞと言う時にアニメーションを用いるのは効果的です。

強調が意味を為すのは、
強調されない部分があるからです。
読んでる本の大事なところにマーカーを引きすぎて、後から読み返したら何が大事か分からなくなった、なんて経験もみなさんあるんじゃないでしょうか?

本当に大切なところに効果的に使用すれば、アニメーションは活きてくるんですね。

 

ページ遷移時にアニメーションを使う

LPが開いた時、メインとなるビジュアルにアニメーションをつける。
ファーストビューでその商材のインパクトをつけることができる上にページの読み込みまでの時間稼ぎをしてくれる、効果的な手法と言えます。

しかし注意したいのが、たまに遷移時のアニメーションがやたら長いサイトがあります。
これは、ユーザーに退屈な思いをさせてしまうし、ユーザーは次にどんなアクションを取ればいいか困惑することもあるでしょう。そして、おまけに重くなってしまう。

よって、ページ遷移時のアニメーションは端的にコンパクトに、かつユーザーが次の行動を起こしやすく工夫してあげるといいでしょう。

 

ユーザー行動を分かりやすくするために使う

例えばお申し込みボタンをホバーにしたり、
ナビゲーションボタンに大げさな動きをつけたり、
「今自分がどこを見ているのか」「ちゃんと選択できているのか」などをはっきりさせる為にアニメーションを使うのは良い方法です。
ただ、これも多用しすぎて、ユーザーにストレスを与えないようにご注意を。

 

 

 

テスト結果を見てアニメーションのさじ加減を判断

今まで、デザイナー目線でアニメーションの効果的な使い方について語ってきました。
さらにアニメーションの効果を発揮させるために必要なのは、テストを繰り返すこと。

アニメーションを追加したり外してみたり、表示速度を変えてみたりすることで、それぞれユーザーの反応がどのようなものになるか、テスト結果が導かれます。

一見アニメーション分量が多いのに、しっかりLPとしての目的を果たせるのは、デザイナーの経験則のおかげとも言えますが、こういったデータの解析も大事です。

LPの内容によって、最適なアニメーションの種類・表現・分量を見極めるために、その導かれたテスト結果を参考に、徐々にアニメーションのクォリティを上げていきましょう。

 

 

まとめ アニメーションは目的に即して使うこと

今ご覧いただいている『musubu』のサイト内では、
再三に渡ってWEBサイトやランディングページの作成や運用に関して、叶えたい目的に沿って行うようお伝えしています。

それはデザインにおいても同じこと。
デザインとは目的を果たすためにあるものです。目的に対する課題を解決するためにデザインがあります。

「なんか素敵だから」とアニメーションの魔力にとらわれて、つい目的から外れた余計なアニメーションを設定してしまわないように注意しましょう。

 

ABOUT ME
マエダソウイチロウ
マエダソウイチロウ
WEBマーケティングユニットmusubuのグラフィック&ウェブデザイン担当。我が子と遊ぶのが好きすぎて、「どっちが子どもか分からん」とよく言われる。「お腹すいた」が口癖なので、街で見かけたら好物のカレーを奢ってあげてください。