単品リピート通販の事例から、

売れる仕組みのヒントをお届け

スマホ向けLPでCVRアップ実証済み、3つのデザインテクニック

ランディングページ(LP)をスマホ最適化したものの、コンバージョン率(CVR)が上がらずに、PCと比べてスマホの方がCPAが高くなってしまっている。

そんな課題を抱える通販企業でも、「スマホで売れる」デザインをLPに適用するだけで、CVRが大きく改善することがあります。

化粧品・健康食品ECを中心に、A/Bテストで結果が出た3つのテクニックをお伝えします。

「スライド」「アコーディオン」、スマホならではのデザインは有効?

 

WEBサイトをスマホで見やすくするために、さまざまなギミック(=デザインの工夫)が用いられています。

たとえば「スライド」といって、横方向にスワイプする(画面に触れて指を滑らす)と複数の画像を順番に見られるような方式。
複数の画像を縦に並べると長くなってしまうとき、1枚の画像におさめることで分かりやすくできます。

 

図1

スライド(左)とアコーディオン(右)

 

また、「アコーディオン」といって、デフォルトでは詳しいコンテンツが非表示の状態で、「タッチ」「詳しくみる」といったボタンをタップしたら、詳しいコンテンツが表示されるような方式もあります。

テキストなどの説明が長くなる場合は、デフォルトではスペースをとらずに興味がある人にだけ見てもらうことができて、便利です。

 

このように、スマホならではのデザインの工夫はさまざまにありますが、ランディングページ(LP)には取り入れた方がよいのでしょうか?
化粧品や健康食品など単品リピート通販のLPで、A/Bテストで何度も試したのですが、実はこれらのギミックは、コンバージョン率(CVR)を上げるためには有効ではありません。

さまざまなA/Bテストをくり返して分かった結論は、スマホでLPのCVRを上げるために有効なのは、「見やすく」伝えること。

このようなギミックを取り入れると、デザイン上の見栄えは良くなるものの、「見やすさ」から離れていってしまうからです。

 

 

テクニック1:「お客様の声」のレイアウトは見やすさを優先

 

では、CVRを上げるために、スマホLPでどのようなデザイン上の工夫を取り入れればよいのでしょうか?
A/Bテストの結果をもとに、3つのデザインの工夫をお伝えします。

 

1つ目は、「お客様の声」のレイアウトです。

左側のAパターンは、写真とテキストを順番どおりに並べています。
右側のBパターンは、写真とテキストがジグザグに並んでいます。

 

LPの画像

 

右側の方がメリハリが付いていて、デザイン的にはキレイですね。
どちらのデザインが、CVRアップには貢献するのでしょうか?

LPの他の箇所はすべて同じで、お客様の声のレイアウトだけ変更して、A/Bテストをしてみました。

結果は、Aパターン(順番どおり)がCVR2.56%、Bパターン(ジグザグ)がCVR1.59%
デザイン上の工夫をした方が、CVRが下がってしまった
のです。

 

ちなみに、PC用のLPでは逆の結果が出ます。
Bパターン(ジグザグ)の方が、CVRが高くなるのです。

なぜPCとスマホでは、このように逆の結果が出たのでしょうか?

BパターンのLPをスマホの画面でスクロールをしてみると実感いただけますが、ジグザグに並んでいると、情報を目で追っていくのに負荷がかかります。
逆に、写真とテキストが1列に並んでいた方が、視認性が良いのが分かるでしょう。

つまり、スマホでは、「デザイン性」より「見やすさ」に着目した方がCVRが上がるのです。

 

 

テクニック2:ボタンは「タップしたくなるカタチ」に

 

2つ目は、ボタンの形状です。

左側のAパターンは、ボタンはほぼ長方形に。
右側のBパターンは、ボタンの形を丸くしています。

 

1758%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e7%94%bb%e5%83%8f

 

今回も同様に、ボタン以外の箇所はすべて共通として、A/Bテストを行いました。
結果は、Aパターン(長方形)はCVRが4.5%、Bパターン(丸)はCVRが10.3%

ボタンの形状を変更しただけで、2倍以上もCVRに差が出たのです。

 

なぜここまでの違いが出たのでしょうか?
この2つのデザインを見比べていただくと、「押しやすさ」が違いますね。

Bパターンの方が、形状(丸い)や面積(広い)など、指でタップするのに適しているのが分かるでしょう。
これ以外のデザインでも、「押しやすさ」に注目すると、さらにCVRを上げられるかもしれません。

 

 

テクニック3:文字のサイズは、大きく読みやすく

 

3つ目は、文字の大きさです。

これまでのA/Bテストの結果から、「ヘタにスマホ最適化したデザインを取り入れるより、PC用のデザインをそのまま適用して、文字のサイズだけ読みやすくした方が、CVRが上がるのでは?」という仮説が浮かびました。

 

そこで、次のようなA/Bテストをしました。

Aパターンは、スマホ最適化したLPです。
Bパターンは、PC用のLPを文字サイズ大きめにつくったページです。

4

まだ確定的な結論は出ていませんが、今のところはBパターンの方がCVRが高くなるケースが多く出ています。
このような結果も踏まえて、文字サイズがスマホでも読みやすく大きくなっていることが、CVRを左右する要因になっているのでは?と考えています。

 

 

A/Bテスト(定量情報)とユーザー調査(定性情報)で、さらなる研究を

 

ちなみに、みなさんもスマホでページをご覧になっているとき、文字などをもっと拡大して読みたい場合は、拡大する作業をされると思います。
このスマホならではの動作を、「ピンチアウト」と言います。

LPのなかには、ピンチアウトが「OFF」になっているページもありますが、必ず有効にしましょう。

 

弊社ではお客様モニターを呼んで、クライアント企業や競合他社のLPを見比べてもらい、意見を収集するという取り組みを行っています。
そのなかで頻繁に聞かれるのが、「拡大できないと、見にくいという感覚がある」という声です。

このようにA/Bテスト(定量的情報)やインタビュー(定性的情報)をもとに、スマホでCVRを高めるページデザインについて、ワンスターでは研究を進めています。

今回はA/Bテストによる検証結果を主にお伝えしましたが、インタビューで分かったことも、また機会を改めてお伝えしたいと思います。