「動きすぎ」は、なぜ嫌われるのか
ホームページに動きを加えると、第一印象は確実に良くなります。しかし「動きすぎ」のサイトは、逆に離脱を早めてしまうことをご存知でしょうか。
ユーザーがページに来る理由は、情報を得ることや行動(購入・予約・問い合わせ)をすることです。動きがその目的を助けていればプラスですが、動きそのものが目的化してしまうと、肝心の情報が読みにくくなり、ボタンの位置すら見失わせてしまいます。「かっこいいから入れる」ではなく、「何のために動くのか」を一つひとつ説明できるかどうかが、やりすぎかどうかの最初の分かれ目です。
よくある誤解は、「動きが多い=印象に残る」という思い込みです。実際には、印象に残るのは動きの量ではなく「意味のある場面に、意味のある動きが一つだけある」状態です。動きを足せば足すほど、一つひとつの動きの印象は薄れていきます。見せ場を増やすほど逆に埋もれてしまうという、動きのインフレ現象が起きるのです。
離脱を招く動きの4つの特徴
実際に「やりすぎ」と感じられるサイトには、共通する特徴があります。
1. 文字が読み終わる前に次の演出が始まる 見出しが表示された直後、まだ読んでいる最中に次のセクションへ強制的に視線を移動させられると、ユーザーは情報を追えなくなります。
2. ホバーのたびに大きく動く ボタンやカードにマウスを乗せるたびに要素が大きく回転・拡大すると、「触れるのが怖い」サイトになってしまいます。小さな反応のほうが、むしろ上質に感じられます。
3. 視界の端でループ演出が動き続ける 本文を読んでいる間も視界の端でチラチラと光や粒子が動き続けると、無意識に気が散り、読むスピードが落ちます。
4. スクロールするたびに画面が固定(ピン)される 1ページの中でピン留め演出が何度も続くと、ユーザーは「自分のスクロールが効いていない」と感じてストレスになります。特に、ピン留め中にスクロール量と演出の進み方が一致していないと、「引っかかった」という不快感だけが残ります。
これら4つは単独でも離脱の原因になりますが、実際の現場では複数が重なっているケースが多く見られます。たとえばヒーローの巨大演出のあとに、カード一枚ごとにピン留めが続き、さらにボタンのホバーまで大きく動く、という具合です。一つひとつは「良い演出」のつもりでも、積み重なるとユーザーの体力を奪うノイズになってしまいます。
「削る」判断基準
次のいずれかに当てはまる動きは、削ることを検討してください。
- 本文を読んでいる最中に視界の端で常時動き続けている
- ホバーのたびに0.3秒以上かけて大きく変形する
- 1画面の中にピン留め演出が2つ以上ある
- 装飾のためだけに用意され、情報や操作と関係がない
- スマートフォンで見たときに、意図せず横に動く・はみ出す
「残す」判断基準
逆に、次のような動きは「やりすぎ」ではなく「効果的」です。
- ボタンを押せることが伝わるマイクロインタラクション(カーソル追従・磁力効果など)
- スクロールで数字や工程が1つずつ明らかになる、情報整理としての演出
- ページの導入部分(最初の1〜2秒)だけに使う、見せ場としての演出
例えば、カーソルに吸い寄せられるボタンは、動き自体が「ここを押せます」という情報を伝えています。これは装飾ではなく機能であり、離脱の原因にはなりにくい動きの代表例です。
一方でスクロール演出も、「情報を順番に見せる」という目的がはっきりしていれば離脱を招きません。料金や工程を一枚ずつ丁寧に見せていくような使い方は、動きそのものが情報整理の役割を果たしています。派手さよりも、読む順番を助けているかどうかで判断してください。
実装チェックリスト
公開前に、次の3つを確認してください。
1. 動きを止めても、サイトの情報と導線は成立するか 2. 無操作で2〜3秒放置したとき、画面の端で何かが動き続けていないか 3. 「視差を減らす」設定をオンにして見たとき、不快な点滅や過大な動きが残っていないか
動きの「量」を減らすことよりも、「目的のない動き」を一つずつ削っていくことが、離脱を防ぐもっとも確実な近道です。まずは今あるサイトの演出を一つずつ指差して、「これは何のための動きか」を説明してみることから始めてみてください。説明できない動きが一つでも見つかったら、それが真っ先に削るべき候補です。
最後に、判断に迷ったときの簡単な目安をもう一つ挙げておきます。「その動きを見せたいのは自分(作り手)か、お客様か」という視点です。作り手が見せたいだけの演出は、たいていお客様にとっては邪魔になります。逆に、お客様が次に何をすればいいかを示す動きは、量が多少あっても離脱の原因にはなりません。動きを設計するときは、常に「誰のための動きか」を自分に問いかけてみてください。