ランディングページでオリジナリティを出すために近頃多用されているのがアニメーションです。アニメーションを利用するとさまざまなメリットがある反面、デメリットも存在することをご存知でしょうか。アニメーションの効果については、ランディングページの制作やリニューアルを予定している方には必携の知識と言っても過言ではありません。
この記事では、ランディングページでアニメーションを使うことのメリットや、メリットがデメリットに転じないよう注意すべきポイントをご紹介します。他にもアニメーションの正しい使い方やアニメーションを効果的に使用しているランディングページの実例もご紹介しますのでお楽しみに！
この記事を読んだらわかること
・ランディングページにアニメーションを使用する3つのメリット
・アニメーションを使用するときの3つの注意点
・アニメーションの参考ランディングページ
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
そもそもアニメーションはどうやって作るのか？
ランディングページにアニメーションを使用する場合、制作にはCSSかJavaScriptを用いるのが一般的です。CSSはHTMLと併せてWebページのレイアウト・サイズ・カラーなどを設定する時に用いるプログラミング言語です。CSSは特にサイトの装飾を司る言語として機能します。
CSSで作ることができるのは、プラスαで見た目を良くするといった程度の手軽なアニメーションです。画像などにちょっとした動きをつけたり、文字の大きさなどに変化をつける程度のものとお考えください。
一方のJavaScriptも同じくプログラミング言語ではありますが、他のプログラミング言語と併せて使用することで、より複雑な動きを表現できます。例えば、はねさせたりスローダウンさせたりするなどの動きで、ユーザーの視線を集めるアニメーション作りに貢献します。
また、身近なホームページ作成ツールであるWordPressでも、拡張機能を使ってアニメーションの制作ができます。もちろんランディングページ制作を請け負うWeb制作会社であれば、プロの手による本格的なアニメーション機能が実装できます。
ランディングページにアニメーションを使用する3つのメリット
ここでは、ランディングページにアニメーションを使用するメリットを3つ紹介します。
ユーザーにインパクトを与える
同じような見た目のランディングページでも、画像や文字に動きのあるサイトと静止画のみのサイトを比較すると、動きをつけた方が印象的であることは間違いありません。
ユーザーは手間ひまをかけたデザインに惹かれる傾向が強く、画像を動かすだけで”かっこいい””かわいい””おしゃれ”などの感情が芽生えます。
こうした強いインパクトはユーザーの心に残りやすくなり、再アクセスやコンバージョンの可能性を高めてくれます。
ブランドイメージや世界観を演出
先ほど解説したように、アニメーションはユーザーに少なからずインパクトを与えます。
そして、印象が強い方が自社商材や自社そのもののブランドイメージを付加できるケースも多く存在します。
動きを持たせることで文字や画像にはニュアンスが加わり、静止画だけでは伝えられない含みや意味合いをユーザーに伝えられるため、商材や企業に対しても、そこから感じたものと同様のイメージを抱かせる可能性が高まるのです。
例えば子供向けのお菓子を扱うサイトであれば、ポップでいかにも子供や子を持つ親が喜びそうなアニメーション、若年層の男性向けスーツをおすすめするサイトであれば、クールでスタイリッシュなアニメーションなど、与えたいイメージをうまくアニメーションで表現すると非常に効果的です。
ページ読み込みの待ち時間を作る
ローディング中にアニメーションが登場すると、待ち時間のイライラを鎮めてくれる効果があります。
ローディングアニメーションは、ユーザーにもう間もなくサイトが現れるという実感を持たせることができるからです。待ち時間を不快なものからワクワクする楽しい時間に変えてしまう効果が期待できます。
アニメーションを使用するときの3つの注意点
ランディングページにアニメーションを使う場合、注意しておく点が3つあります。
・目的なくアニメーションを使用しない
・エフェクトとスクロールの速度を合わせる
・多用しすぎない
それでは、それぞれの注意点についてご説明しましょう。
目的なくアニメーションを使用しない
最もよくある失敗は、「何となくおしゃれになるような気がして」とか「動きをつけた方がかっこいいと思うから」といった曖昧な理由でアニメーションを使用することです。
ランディングページは商材を売るための広告サイトなので、ぼんやりしたイメージよりも、売れる理由のある戦略が必要となります。あくまで商材のイメージを印象付けることを目的に、使用しなければいけません。
エフェクトとスクロールの速度を合わせる
ページをスクロールする速さとアニメーションの動く速度が噛み合わずイライラした経験のある方は多いのではないでしょうか。
アニメーションに限らずサイト上のさまざまな効果をエフェクトと呼びますが、エフェクトの速度が最適でないとユーザーに不快感を与え、引いては離脱率の上昇やクリック率低下の原因となりかねません。
アニメーションの種類や文字量にもよりますが、ユーザーが快適に操作できるよう、速度を改善する必要があります。
多用しすぎない
アニメーションは多用し過ぎて効果が半減するケースもあります。
視覚的な刺激が多くなれば、肝心な情報を伝えにくくなったり、過剰な動きにうっとうしさを感じたりするユーザーもいます。せっかく狙いがあってアニメーションを利用するのに、制作意図が伝わらなくなってしまえば本末転倒です。
また、アニメーションを多用するとサイトが重たくなり、読み込みや表示に時間がかかって離脱リスクも引き起こしかねないので注意してください。
表示速度が遅くなると、ユーザーに不安やうっとうしさを与え、離脱にも繋がってしまいます。
また、Googleからも悪い評価を受けてしまい、リスティング広告などを打つ際に優先表示されにくくなってしまいますので、充分注意しましょう。
ZERO式ランディングページ制作はこちら
アニメーションの参考ランディングページ
アニメーションを効果的に使用しているランディングページを実際に見てみると大変参考になります。
ここでは使い方を思わず真似したくなるようなすぐれたアニメーション使いを実践しているランディングページの具体例をご覧に入れます。
名古屋エステイト社
読み込みからページの最後まで、キャラクター力のあるおしゃれなイラストが、まるでストーリーを案内するように一貫して登場する印象的なランディングページです。美しく落ち着きのある色調とタイミング良く立ち現れるように動き出す“スライドイン”アニメーションが心地よく、ユーザーに好印象を与えています。
funplex
ファーストビューの背景とフロント共、順番に動いていく壮大なアニメーションがユーザーの心をわしづかみにするランディングページです。スクロールしていくと規則的にコンテンツに動きがつけてありテンポが良いのも特徴的。リズミカルにすいすい読み進められるようアニメーションの入れ方に工夫が見られるほか、最先端企業のイメージをユーザーに植え付けられる効果も感じます。
ADCATE
ローディング中のパーセンテージカウントとランディングページ本体の数字使いをうまくコーディネートし、美しい統一感を出しているサイトです。サイトのテキスト中の数字を巧みに”フェイドイン”させ、読む面倒を楽しみに変えています。回転や左右の揺れなど多彩なアニメーション使いも、そのエフェクトとスクロールの速度調整が絶妙で不快感を与えません。
フェレロ ロシェ
雰囲気のあるキャッチコピーが浮かんだ後におしゃれな画像がフェイドインしてくることで、夢のあるランディングページに仕上がっています。すでにブランドイメージの強い商品を扱うサイトであるため、ユーザーが抱く商品イメージをなぞるような展開を採用し、それが効果的に作用しています。字体や画像の選び方も秀逸で、ユーザー目線が大事にされた好例です。
North Flaggers
ロゴの登場とともに早送りの動画が流れ出すファーストビューはインパクト大。思わず見入ってしまう美しい動画とともに、必要な情報をスクロールの速度に合わせて小気味よく見せてくれるテンポの良さも魅力です。次々にくり出されるアニメーション効果も引き算がなされており過剰さを感じさせません。離脱させないよう滑らかに展開するランディングページのお手本と言えます。
まとめ：アニメーションを使って競合と差別化を図ろう
今回はランディングページにアニメーションを取り入れるメリットを中心に、その使い方や具体的な参考例までたっぷりご紹介してきましたが参考になりましたでしょうか？アニメーションは洗練された印象を与えたり商材のイメージアップにつながったりと、利点が多く魅力的です。
アニメーションは使用の仕方に気を配って正しく活用すれば、競合他社のランディングページとの差別化を図り、一歩リードする可能性をくれる画期的効果と言えます。自社で制作するのが難しいと感じたら、ぜひ制作会社に相談してみてください。
この記事のおさらいポイント
・アニメーションにはユーザーに商材を深く印象づけたり商材イメージを良くしたりする効果がある
・アニメーションは逆効果にならないよう、使い方や分量に注意が必要
・理想のアニメーション使いをしているサイトを用意し、自作が無理なら制作会社への依頼がベター
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
