最近、ウェブサイトでよくみるアコーディオンデザインですが、弊社のABテスト事例ではアコーディオンデザインによってコンバージョン率が低下している場合があることがわかってきました。
■アコーディオンデザインとはなにか
アコーディオンデザインとは、クリックすることで詳細なコンテンツが表示されるデザインのことです。楽器のアコーディオンのように、閉じたり開いたりすることができることからこのように呼ばれています。
▲アコーディオンデザイン例
■レスポンシブ対応でアコーディオンデザインが増えている
スマートフォンの増加に対応するために、最近では多くのウェブサイトがレスポンシブ対応をしています。スマートフォンは画面が小さいので、PCで表示していたすべての情報をスマートフォンで表示させようとすると、極端に縦に長いサイトが出来上がってしまいます。
アコーディオンデザインは、情報をコンパクトにまとめることができるので、レスポンシブ対応をしたウェブサイトでよく使われています。
■アコーディオンデザインがCVRを低下させる
しかし、このアコーディオンデザインが、コンバージョン率を低下させている場合があることがわかってきました。弊社のある事例ではアコーディオンデザインを開いた状態にするテストを実施したところ、約2割コンバージョン率が改善しました。
▲アコーディオン展開により約2割コンバージョン率を改善
■アコーディオンデザインの問題
なぜアコーディオンデザインがコンバージョン率を下げてしまうことがあるのでしょうか。アコーディオンデザインの問題として、以下のような仮説が考えられます。
【1】 コンテンツが隠れてしまう
多くのユーザーはウェブサイトを流し読みするので、コンテンツを詳しく見ることはありません。そうしたユーザーは、アコーディオンデザインに気づかず、クリックせずにスクロールで通り過ぎてしまう可能性があります。
【2】 ユーザーの無駄なクリックを増やしてしまう
アコーディオンデザインでは、コンテンツを見るためにクリックすることをユーザーに強制することになります。無駄な手間を増やすことは、ユーザーを疲れさせ、サイトからの離脱につながってしまうと考えられます。
■ABテストでの検証が重要
一方で、アコーディオンデザインによってコンバージョン率が上がっている事例もありました。それはエントリーフォームなどで、ページの縦幅がコンバージョンに大きな影響を与える場合です。そうしたページでは、アコーディオンデザインによって縦幅を短縮することがコンバージョンにつながることがわかってきています。
このような事例もあるので、アコーディオンデザインがどのような状況でも必ずコンバージョン率を低下させると断言することはできません。実際のページでABテストを実施し、コンバージョン率の高いデザインを適用させていくことが重要といえるでしょう。
