WEBサイトにアニメーションを入れる効果とは？ブランディング・滞在時間・離脱率から費用対効果まで解説

「WEBサイトにアニメーションを入れると見た目は良くなりそうだけど、成果につながるのかがわからない」。そんなご相談をいただくことがあります。

タイタン・アートでは、WEBアニメーションの特設ページ「デザイン もっと生きる」を公開しました。「ふわっ」「ピタッ」「ワッ」など、オノマトペ（擬音語・擬態語）で動きを選び、実際の制作事例とあわせて体験できるページです。

WEBアニメーション特設ページ「デザイン もっと生きる」はこちら

この記事では特設ページの紹介とあわせて、アニメーションが成果につながる理由を、ブランディング・差別化・滞在時間と離脱率・費用の視点から解説します。

特設ページ「デザイン もっと生きる」とは

特設ページ「デザイン もっと生きる」は、同じデザインでも、動きがあるかないかでサイトの印象はまったく変わることを、実際に体験していただくためのページです。

ファーストビューには「ワッ」「シュッ」「ふわっ」など10のオノマトペが吹き出しで並び、マウスの動きに合わせてモノクロからカラーに変わっていきます。画面右下の「動きを止める」ボタンを押すと動きが止まり、モノクロの静かな画面になります。

ボタン1つで切り替えて見比べると、動きがサイトの「生きている感じ」をどれだけ左右しているかがわかります。

特設ページで動きのON/OFFを見比べるならこちら

ページ内では、そのうち8種類の動き（ワッ／グーン／ピタッ／ぴょこ／ふわっ／ぐりぐり／つやっ／スーッ）を、実際の制作事例とあわせて紹介しています。動きは「カテゴリー（美容・製造・建築・食品・採用）」「印象（ナチュラル・スマート・インパクト）」「要望（信頼感のある・閲覧しやすい・物珍しい）」の3つから探せます。言葉にしにくい「こんな感じの動き」を、音のイメージから選べるのが特長です。

アニメーションがブランディングにつながる理由

静止画と文字だけでは、ブランドの「空気感」や「質感」は伝わりにくいものです。動きを加えると、それを言葉より先に感じてもらえます。

たとえば「ふわっ」は、漂うようにやわらかく現れる動きです。写真がゆっくり入れ替わったり、見出しがぼかしの中から浮かび上がったりすることで、やさしさや落ち着いた上質さが伝わります。美容や食品など、ナチュラルな世界観を大切にするサイトに向いています。

特設ページの「ふわっ」の動きと制作事例はこちら

ほかにも「つやっ」なら質感や透明感、「ピタッ」なら整然とした信頼感が出ます。どの動きを選ぶかが、そのまま「その会社らしさ」の表現になります。

他社との差別化につながる理由

同じ業界のサイトは、構成や写真の雰囲気が似てきます。そうした中で動きは、見た人の記憶に残るきっかけになります。

「ぐりぐり」は、3Dのオブジェクトをドラッグで好きな角度に回したり、まわりの飾りをつまんで動かしたりできる動きです。「見る」だけでなく「触る」体験があると、他社のサイトとの違いがはっきりします。

特設ページの「ぐりぐり」の動きと制作事例はこちら

ページ内の滞在時間と離脱率

アニメーションの効果としてよく挙げられるのが、ページ内の滞在時間が伸びることと、離脱率が下がることです。それぞれ、なぜそれがよいのかを見ていきます。

滞在時間が伸びると何がいいのか

ユーザー行動の調査で知られるNielsen Norman Groupは、ユーザーの多くは最初の10秒ほどでページを読むか離れるかを決めやすく、その間に価値を伝えることが大切だとしています。最初の数秒で目を留めてもらうのに、アニメーションは役立ちます。

滞在時間が伸びるということは、それだけ多くの情報が伝わっているということです。サービスの中身や会社の雰囲気が伝わるほど比較検討の材料がそろい、問い合わせ前の不安も減ります。

「スーッ」は、1本の線が途切れずに伸びていく動きです。工程や沿革を横に流れるように見せることで、「読み進めるほど話がつながる」心地よさを生みます。

離脱率が下がると何がいいのか

離脱率は、ページを見たあと、ほかのページに進まずにサイトを離れた人の割合です。これが下がれば、広告や検索で集めた訪問者のうち、次のページや問い合わせに進む人が増えます。集客費を増やさなくても、問い合わせの機会を増やせるということです。

ただし、動きでページが重くなると逆効果です。Googleのデータでは、表示に3秒かかると、1秒のときに比べて直帰の可能性が32％高まります。アニメーションは、表示速度を落とさないように設計して入れることが前提です。

アニメーションの効果

アニメーションでどれだけ成果が変わるかは、業種やページ、動きの入れ方によって違います。タイタン・アートでは、入れる前と後の数字を見ながら、動きの量や入れる場所を調整していきます。

実装費は、基本的な動きなら一式8万円ほどから。イラストや3D表現まで作り込む場合は20万〜30万円以上かかることもありますが、広告のように毎月かかり続ける費用ではありません。最初にブランドイメージを形づくるためのものと考えると、効果的な投資といえるでしょう。

WEBアニメーションのご相談はタイタン・アートへ

タイタン・アートでは、デザイナーとエンジニアが同じ社内で制作しています。「ふわっとしたイメージ」もその場ですり合わせられ、デザイナーのアイデアに対してエンジニアが「こうすれば実現できる」と提案できます。

新しいサイトやLPの制作はもちろん、今あるサイトへのアニメーション追加もご相談いただけます。1万件超の制作実績をもとに、目的に合った動きをご提案します。

まとめ

アニメーションは、見た目を飾るだけのものではありません。ブランドの空気感を伝え、他社との違いをつくり、来た人に長く見てもらい、離れにくくする。その積み重ねが問い合わせにつながります。

どんな動きが自社に合うかは、特設ページで実際に触れてみてください。