セールスページに目次リンクの固定サイドバーを設置!そのテスト結果は……?

石原さとみが宣伝しているLINEのホームページを見て、このレイアウトをマネしてみようと思った話を、以前したことがあります(その時のニュースレターはこちら)。それで、実際に試してみました。商品のセールスページにおいて、完全にワンカラムにした場合と、ナビゲーションメニューをサイバーに持って来た場合の2パターンを用意してテストしてみました。今日はその結果についてお伝えしたいと思います。

パターンA-ワンカラムまず、どんなページを用意したのか簡単に説明しておきたいと思います。先ほども言ったように2パターン用意しました。1つはワンカラムのセールスページです。

このページで1つのサービスをセールスしています。全体でA4サイズ20ページ以上はあるので、結構なボリュームです。これを上から下へと読んでもらい、最後の方に「申し込みボタン」が設置されています。「申し込みボタン」は直接決済ではなく、1度無料相談を挟んでいます。その上で申し込みの可否を判断してもらうというわけです。

基本的に「申し込みボタン」以外にリンクはありません。このタイプのレイアウトは、セールスページの基本です。セールス以外の無駄な情報も無駄なリンクも載せず、一直線に購入までいってもらうためのレイアウトです。

パターンB-2カラムそして、もうひとつ今回用意したのは、2カラムのレイアウトです。左にサイドバー、右が本文です。右側の内容はまったく同じです。左サイドバーは固定でスクロールできませんが、右の本文は上から下へとスクロール可能です。そして左側のサイドバーには、右側本文の各見出しへのリンクを設置しました。

左サイドバーのメニューは、本文の目次みたいなものです。クリックすれば該当箇所までスクロールして移動します。別のサイトへ飛ぶわけではありません。LINEのサイトがこのタイプでした。またLINE以外にもこのタイプのページを最近よく見ます。ナビゲーションの位置はサイドバーだったりヘッダーの上だったりしますが……。イメージしにくいと思うのでサンプルサイトをつくってみました。

テスト方法

テスト方法は一般的なA/Bスプリットテストと呼ばれる方法です。ワンカラムをA、2カラムをBとして、両方に同程度のアクセスを集めます。そして、どちらの方が反応が取れるかテストするわけです。今回はレイアウトのテストだったので、サイドバーが有るか無いか、その違いだけです。本文の内容も、デザインも他は一切変わりません。

テスト結果

結果からお伝えすると、ワンカラムの方が圧倒的に反応がよかったです。なんと3倍、反応率に差がありました。具体的に言うと、2カラムの方は反応率8.51%、ワンカラムの方は25%です。反応率以外にも、滞在時間もワンカラムの方が平均値が長かったですし、最終申し込みもワンカラムの方が反応が高かったようです(ここはちょっと正確に計測できなかったんですが……)。

考察

なぜ、ここまでの差が広がったのか? ひとつはサイドバーがあるとセールストークがまとまって伝わらないからではないかと思います。サイドバーがあると見込み客が読みたい部分を自由に読めてしまいます。文章の流れを無視して注意があちこち飛んでしまうでしょう。サイドバーの見出しに興味を持ってもらえなければ、完全に無視されてしまうでしょう。

一方ワンカラムの場合はとりあえず上から流し読みされます。もし、途中にある見出しが見込み客の注意を引く事ができれば、立ち止まって続きを読んでもらえるかもしれません。また、見出しでは引き付けられなくても、本文中の文章や画像で注意を引ける可能性もあります。結果、精読率(滞在時間)が上がり、より反応してくれたのだと思います。

ただ、これも内容によっては逆の結果になったのではないかと思います。想像ですが、商品やサービスがよく知られているものであれば、固定サイドバーを設置した方がよいのではないかと思います。ユーザビリティが上がるからです。商品・サービスがよく知られていれば、見込み客も何を確認したらいいか理解している可能性があります。その場合はユーザビリティの高い方がよいと考えるからです。

逆に商品やサービスの認知度が低く、じっくりプレゼンが必要な場合は、やはりワンカラムで上から下へと読んでもらうためのレイアウトが適していそうです。

まとめ

しかし、結局のところ1つの例だけでは「これからはこのレイアウトにするように!」という判断はできません。商品・サービス、見込み客との関係性などによっても結果は変わってくるはずなので、商品ごとにテストしていくしかないでしょう。大事なのはこのテストを怠らずに、常に確認していくことを忘れないということですね。面倒ですけど……。

 

追記

もし、今回のテストに使った2つのレイアウト(AタイプとBタイプ)のデモサイトで使用しているテンプレートが欲しければ、こちらにメッセージをください。プレゼントさせて頂きます。サーバーにアップロードして、ちょっと文章を編集すればそのまま使えます。件名に「テンプレートプレゼント」本文には適当にメッセージを添えてこちらのフォームからご連絡ください。

※2013年5月31日まで