【コラム】アニメーションを多用するランディングページデザインは、本当に効果的なのか?

アニメーションを多用したLPが大流行中。でも注意深く見ていると・・・?

仕事柄、日々色々なWebサイトやランディングページを見ながら、アイディアを得ていますが、ここ最近アニメーションを多用したページが非常に増えている、というか、もはやアニメーションを使用しなければデザインは成立しない!というぐらいの強迫観念じみたものを感じています。

たとえば、ちょっとデザインまとめ集を探ってみると、以下のようなページが見つかります。

もちろん上記のサイトは、デザインとしての完成度が高く、大きな問題はありません(上から目線で申し訳ないですが・・・)。
文字や画像が美しく画面にスライドしてきたり、浮き上がってきたり、とても今風のセンスを感じられるサイトです。

ですが、何度か繰り返しサイトの上から下を見直していると、ある事に気がつきました。

アニメーションの動きに視覚的な注意を奪われてしまい、文字情報があまり頭に残らないのです。

デザインの最終目的は、あくまでこちら側のメッセージの伝達力を上げることにありますから、アニメーションを多用することで「過度なデザイン(≒うざいデザイン)」になってしまい、結局ページの内容が頭に入らなくなってしまうと意味がありません。

そこで、改めて、デザインでアニメーションを活用する際の注意点について、自分なりの考え方をまとめてみることにします。

アニメーションの無計画な多用は、ページの伝達力の低下を招いてしまう

いくらアニメーションを使ったデザインが、今風でおしゃれだったとしても、結果的にそれがユーザーのアクションに結びついていないのであれば、実装するのに手間とコストばかりがかかってしまうだけです。

例えば、以下のサイトデザインでは、ほぼ全部のテキストや画像に、個別のアニメーションが施されています。

これがカッコイイのか、効果があるのかは実際にテストをしてみなければ正確なところはわかりませんが、デザイナーとしての私の立場から言うと、少々アニメーションを乱用しすぎているように感じます。

その理由としては、あまりにもすべての情報が動いて目に飛び込んでくるので、動きに気を取られてしまい、せっかくのキャンペーン情報や金額などが下まで見た時にあまり覚えることができていないからです。

もう一度ページトップまで戻ってから下に見ていくと、アニメーションは一度限りでストップしますから、落ち着いて情報を読むことはできます。

ですが、この時代、これだけ情報が溢れている世の中で、「2回目の閲覧」を前提としたデザインになってしまっていることにはかなり疑問です。

Webサイトやランディングページの世界に、基本的には「2回目の閲覧」はありません。1回目の閲覧において、あらゆるアイディアとデザインを駆使して、全力でユーザーの気持ちを掴みにいったページだけ、2回目の恩恵に授かることができるのです。

もちろん、そのような危険があることを重々承知して、このアニメーションを付与したという根拠があればいいのですが、私にはあまりそのような計画的な設計思想というものを感じ取ることができませんでした。

アニメーションはあくまでもデザインの“アクセント”であるべき

では、Webサイトにおいて、アニメーションは悪なのか?というと、そんなことはありません。

あくまで、アニメーションはデザインのアクセントであり、本来伝えたい内容やメッセージよりも優先されてしまってはいけないということです。特に、ページ全体に含まれる要素の動きばかりに気を取られてしまって、下まで一応見たけれど内容が頭に入らないというのは元も子もありません。

テレビのバラエティ番組のテロップをイメージしてもらえるとわかりやすいかと思いますが、どうでもいいセリフにテロップがついていたり、どうしてわざわざそれをテロップにするのかわからないものが頻発すると、途端につまらない番組に感じてしまいます。(余談ですが、私が好きな水曜どうでしょうは、このテロップの使い方が非常に上手です。)

Webデザインもそれと同じで、どんなにそれが効果的な演出でも、それを乱用した時点で、すぐに鬱陶しいものに成り下がります。だからこそ、流行のデザインに何も考えずに飛びつくことに対して、発注者は一歩引いて身構える必要があるのです。

ランディングページにアニメーションを使用する際の注意点

では、具体的にどのような基準でアニメーションの付与を考えればいいのか、現時点で私の考えをまとめてみます。

1.ブランディング向けのサイトであれば、アニメーションを多用しても構わない

一定以上の大企業がブランディング目的でWebサイトにアニメーションを多用するのは、私は問題と感じません。

例えば、上記のサイトは魚のほっけが踊り回るデザインですが、業界内で有名な会社なので、話題作りには適してします。

ただ、逆に知名度の低い中小企業がこれをやってしまうと、地方の大学のサークルでやっているお祭りのような内輪ネタになる可能性があるので注意が必要です。

中小企業のランディングページに求められるのは、アニメーションを多用した話題作りではなく、メリットやベネフィットを伝え、セールスとコンバージョンを成立させるような至って真面目なデザインです。

2.アニメーションは【文字】ではなく、基本的に【画像+文字】に付与してブロッグごとにまとまりをもたせる

先程も挙げた例ですが、こちらは文章一行に対してアニメーションがかけられているため、情報よりも動きに注意を取られてしまいます。

バランスとしては、上記のサイトのように、一定以上大きなブロックを作って、動かすようなイメージが最適です。

できるかぎり、大きなブロックに対してアニメーションを付与することを検討すべきです。細ければ細かいほど、ページの主役がメッセージよりもアニメーションになってしまいます。

3.アニメーションを付与するのは、自分たちの一番伝えたい内容に対してのみにすると効果的

上記のサイトは、あまり最初からアニメーションを多用せず、資産運用という業種において一番説得力のある項目である「実績」部分を中心にアニメーションを付与しているのが、私にとっては非常にバランスがよく感じます。

むしろアニメーションを使用する範囲は、この程度でいいのではと思います。とにかく自分たちの優位性を表現しているコンテンツに対して、ここだけは見てもらいたい!という気持ちでアニメーションを付与するのです。

4.アニメーションは速読したい人の気持ちを折る

これは容易に想像できるかと思いますが、スクロールする度にフワフワと文字が浮かび上がってくると、文章を読むスピードが早い人にとってみれば、かなり邪魔な機能でしかありません。

だからこそ、アニメーションの付与に対しては、一定のリズムや間隔をもたせたりするなど、ページ全体の秩序を保つように考えなければいけません。

根拠なきアニメーション信仰は、デザインの失敗を生む

アニメーションは制作会社にとっても単価を取りやすく、また発注者にとっても、見栄えがいいので受け入れられやすいです。きちんとトレンドを押さえた今の時代に通用するサイトを作っているという実感が湧きやすいのでしょう。

ですが、そんなアニメーション信仰にとらわれて、ユーザーの気持ちを全く考えずに、動きのあるサイトに自己満足しているような状況には誰も陥りたくはないはずです。

アニメーションが多用されるデザインを提案する制作会社と出会ったら、その根拠だったり、ユーザーの目線や気持ちを考慮したり、あくまでメッセージやオファーの内容が優先されているのかなど、制作費を払う前にしっかりと確認してみることをオススメします。

無料電子書籍
Webデザイナーの思考法と仕事術

実績・スキルゼロスタートでも年間100件のLP制作を担当できるWebデザイナーの思考法と仕事術を1冊の本にまとめて無料で配布しています。