コンバージョンを邪魔するWebサイトとは？速度・アニメーション・操作性をデータから考える
表示速度や操作性、アニメーション、スクロール、フォーム設計はコンバージョンにどう影響するのか。企業事例とアクセシビリティ指針をもとに考えます。
Webサイトを制作するとき、
「もっと動きを付けたい」
「スクロールに合わせて演出したい」
「普通のカーソルでは面白くない」
といった話が出ることがあります。
もちろん、Webサイトのデザインや演出は重要です。
しかし、商品を購入する、問い合わせる、資料を請求するといったコンバージョンを目的にするなら、その演出は本当にユーザーの行動を助けているでしょうか。
実際、Webサイトの速度や操作性を改善したことで、売上やコンバージョンが改善した事例があります。
今回は「コンバージョンを上げるテクニック」ではなく、逆に「ユーザーの行動を邪魔していないか」という視点から考えてみます。
まず、Webサイトは速い方がいい
これは比較的データが豊富な分野です。
VodafoneはランディングページでA/Bテストを実施し、LCP（Largest Contentful Paint）が31%良好だったページで、売上が8%増加しました。
さらに、見込み顧客からサイト訪問への転換率は15%、カート訪問率は11%向上しています。
redBusでは、ユーザーの操作に対する応答性を表すINP（Interaction to Next Paint）の改善に取り組み、売上が約7%増加したと報告しています。
つまり、
デザインを豪華にする前に、まず待たせない。
というのは、コンバージョンを考えるうえでも重要そうです。
ただし、これらは各社の事例です。
「LCPを30%改善すれば、どのサイトでも売上が8%上がる」という意味ではありません。
サイトの種類、ユーザー、改善内容などによって結果は変わります。
「表示が速い」だけでなく「操作にすぐ反応する」
Webサイトの速さというと、「ページが何秒で表示されるか」だけを考えがちです。
しかし、表示された後の操作性も重要です。
例えば、
- ボタンを押したのに反応しない
- 検索条件を変更したら固まる
- 入力すると画面がカクつく
というサイトでは、ページ自体が表示されていても快適とは言えません。
redBusでは、入力時の不要な再レンダリングなどを改善し、一部ページのINPを72%改善しました。その一連のINP改善後、全体の売上が7%増加したと報告されています。
ブラジルの不動産プラットフォームQuintoAndarでも、INPを80%削減するなどのパフォーマンス改善を行った期間に、コンバージョン数が前年比36%増加しました。
ただしQuintoAndar自身も、この増加はパフォーマンス改善だけによるものではないと説明しています。
ここは重要です。
「速いほど必ず売れる」と単純化するのではなく、ユーザーの行動を待たせることには、少なくともメリットはないくらいに考えるのがよさそうです。
インタラクションとアニメーションは分けて考える
Webサイトの「動き」をすべて悪者にする必要はありません。
ここでは、インタラクションと装飾的なアニメーションを分けて考えてみます。
例えば、
ボタンを押す
↓
押されたことが分かる
これは操作に対するフィードバックです。
フォームなら、
送信する
↓
「送信中」と表示される
↓
「送信しました」と表示される
という反応があった方が、何が起きているのか分かります。
アコーディオンやメニューの開閉も同じです。こうしたインタラクションは、ユーザーの操作を助けるためのものです。
問題になるのは、その動きがなくても、目的を達成できるのでは？というアニメーションです。
アニメーションは「何のために動かすのか」
例えば、
- スクロールすると見出しが飛び込んでくる
- 画像が毎回フェードインする
- 背景が常に動いている
- マウスに合わせてオブジェクトが動く
- ページを開くたびに演出を待つ
といったものです。
これらが必ず悪いわけではありません。ブランド表現や情報の理解を助けるために、アニメーションが有効な場合もあります。
一方でW3Cは、不要なモーションについて明確な注意を示しています。
WCAG 2.2の「Animation from Interactions」では、操作によって発生するモーションアニメーションについて、それが機能や情報伝達に不可欠でない場合は無効化できるようにすることを求めています。
理由の一つは、一部のユーザーにとって不要な動きが注意をそらすだけでなく、めまい、頭痛、吐き気などにつながる可能性があるためです。
WCAG 2.2「Animation from Interactions」の解説（W3C）
つまり、動かせるから動かすのではなく、なぜ動かすのか？を考える必要があります。
「ずっと動いている」コンテンツにも注意する
自動スライダー、動画背景、ティッカーなど、ユーザーが何もしなくても動き続けるコンテンツもあります。
WCAG 2.2では、自動的に開始し、5秒を超えて継続し、他のコンテンツと並行して表示される動きについて、原則として一時停止・停止・非表示にできる仕組みを求めています。
W3Cはその理由として、継続する動きが一部のユーザーにとって集中を妨げる可能性があることを挙げています。
WCAG 2.2「Pause, Stop, Hide」の解説（W3C）
もちろん、「5秒以上動いたらコンバージョン率が下がる」という意味ではありません。
ただ、ユーザーが商品説明や料金を読んでいる横で、別の要素がずっと動き続ける必要があるのかは考えてみてもよいでしょう。
普通にスクロールさせてほしい
個人的に気になるのが、スクロールそのものを変更しているWebサイトです。
マウスホイールを少し回しただけなのに「スーッ……」と独自の速度で移動したり、1回スクロールすると次のセクションまで強制的に移動したりするものです。
いわゆるスクロールジャックです。
ここでも、「スクロールに連動するものは全部ダメ」という話ではありません。
W3Cも通常のスクロールによってコンテンツが移動すること自体は、ユーザーが制御する本質的な動きとして区別しています。
一方、スクロールしたときに背景と前景が異なる速度で移動するパララックスや、装飾要素が別方向から飛び込んでくるような動きは、不要なモーションの例として挙げられています。
つまり、スクロールはユーザーに任せる。という当たり前のことも大切です。
ユーザーが下へ行きたい量と、制作者が下へ動かしたい量が違う必要は、本当にあるでしょうか。
カーソルも普通でいいのでは？
Webサイトによっては、通常のマウスカーソルを消して、
- 大きな丸
- 光
- 画像
- 「VIEW」と書かれた円
などに置き換えていることがあります。
これについては、信頼できる「独自カーソルによってコンバージョン率が○%低下した」というデータは確認できませんでした。
なので、「独自カーソルはCVを下げる」とは言いません。
ただしWebブラウザには、すでにユーザーが慣れている操作方法があります。リンク、ボタン、テキスト選択、スクロール、フォーカスなどです。
見た目のためだけに標準的な操作感を変更する場合は、変更することで、ユーザーにどんなメリットがあるのか？を考えたいところです。
「普通のカーソルではダサいから」だけなら、そのままでもいいのではないでしょうか。
コンバージョンを邪魔するのは「動き」だけではない
ここまでアニメーションや操作について見てきましたが、もっと直接的な離脱要因もあります。
例えばECサイトの購入フォームです。
Baymard Instituteの調査では、平均的なチェックアウトには多くのフォーム項目が残っており、17%のユーザーが「チェックアウトが長い・複雑」という理由で購入を断念した経験があるとしています。
チェックアウトフォーム項目に関する調査（Baymard Institute）
Baymard Instituteは、チェックアウトの設計改善によって、大規模ECサイトでは平均35.26%のコンバージョン率改善余地があるとも推定しています。
カート放棄率に関する調査（Baymard Institute）
つまり、「もっと演出を増やそう」と考える前に、この入力、本当に必要？と考えた方がコンバージョンに効く場合もあります。
コンバージョンを邪魔していないかチェックする
ここまでをまとめると、確認したいのはこんなところです。
| 確認項目 | チェック |
|---|---|
| ページ表示が遅くない | □ |
| ボタンや入力にすぐ反応する | □ |
| 操作結果が分かる | □ |
| 不要なアニメーションを待たされない | □ |
| 常に動き続ける要素が邪魔していない | □ |
| 普通にスクロールできる | □ |
| 標準的な操作方法を理由なく変更していない | □ |
| CTAがどこにあるか分かる | □ |
| フォームに不要な入力項目がない | □ |
| スマートフォンでも同じ操作ができる | □ |
全部「シンプルにしろ」という話ではありません。
判断基準は、その機能や演出は、ユーザーが目的を達成することを助けているか？です。
では、おべんちゃーのWebサイトはどうなのか
ここまで、「余計な動きは必要なのか？」「操作を邪魔していないか？」と散々書いてきました。
では弊社、おべんちゃーのWebサイトを見てみましょう。
3Dが動きます。
マウスにも反応します。
アニメーションもあります。
……そういう意味では、弊社のWebサイトは最悪です（笑）。
Webサイトの目的はすべて同じではありません。
ECサイトなら商品の購入、LPなら問い合わせや資料請求など、コンバージョンが明確な場合があります。
一方、コーポレートサイトでは、会社の技術力やデザイン、ブランドの雰囲気を伝えること自体が役割になる場合もあります。
その場合、3Dやアニメーションが必ず無駄とは限りません。
重要なのは、動いているか、動いていないかではなく、なぜ動いているのかです。
とはいえ、この記事を書いてしまった以上、弊社サイトも一度ちゃんと見直した方がよさそうです。
まとめ
コンバージョンしやすいWebサイトを考えるとき、「この色のボタンならCV率が上がる」「アニメーションを全部なくせばいい」といった単純な話ではありません。
実際の事例を見ると、表示速度や操作への応答性を改善したことで、売上やコンバージョンが改善したケースがあります。
一方、不要なアニメーションについては、W3Cもアクセシビリティの観点から注意を促しています。
そして購入フォームでは、複雑さそのものが離脱理由になっているというユーザビリティ調査もあります。
Webサイトに何かを追加するとき、
これ、ユーザーにとって本当に必要？
と一度考えてみる。
派手にすることでも、何もなくすことでもなく、「目的のために必要なものだけを残す」。
コンバージョンを考えるなら、そこから始めるのがよいのではないでしょうか。
参考情報
制作・保守のご相談
WordPressの保守・セキュリティ・フロントエンド開発についてお気軽にご相談ください。
お問い合わせ