時代を経るにつれて、華美で冗長なランディングページよりも的を射たシンプルなランディングページのほうがコンバージョン率が上がりやすいことが分かっています。
エレベーター・ピッチと呼ばれる短い時間でポイントを端的に伝える工夫を行うことで、ユーザーに離脱までの数十秒で決断を促し、離脱率を下げ、コンバージョンにつなげていくのです。

参考：
思わずDLしたくなる！シンプルなのに説得力のあるアプリ・Webサービスのプロダクトページ9選

もちろん、*コンバージョン率(CVR)*はユーザー体験(UX)とも密接に絡み合ってきます。
情報量が多ければ多いほどユーザーは購買に至るのである、という考え方は誤解で、むしろそのほうがユーザーは選択麻痺に陥りやすくなってしまうので、UXが低下してしまう恐れすらあります。

モノやサービスをホームページ上で売るようなコマースサイトの場合、文章よりも写真の量が多くなってしまうのですが、そのようなサイトの場合は、どのような要素がコンバージョンに関わってくるのでしょうか。

そのうちの一つが、CTA(Call-To-Action)ボタンです。
今回は、ネットショップでのCTAボタンのコンバージョンを取り入れるために考えておきたい4つのステップをご紹介します。

ネットショップでCTAボタンのコンバージョン率を上げるためにチェックしておきたい4つのステップ

ネットショップでのコンバージョンに当たるのは、言うまでもなく*「購買」*にあたります。
購買に至るまでにユーザーがどのような動きを取るのかを認識しておけば、CTAボタンだけでなく他のUIまわりも含めてどのように設計すればいいかがわかります。

ステップ１：着地

そもそも、ランディングページの「ランディング」(landing)という言葉は*「着地」*を意味する言葉です。
検索結果や何らかのリンクかバナー画像をクリックして、やってきたページという意味です。

ランディングページやホームページには、2つの明確な役割が存在しています。

まず一つ目は、そのサイトがどのようなサイトなのかを素早く認識させることです。
コマースサイトであれば、何を売るためのサイトで、他と何が違うのかを素早く明確に示すことができなければ、ユーザーが離脱してしまう可能性は高まります。

次に、ユーザーに購買に向けての次のステップを踏んでもらうことです。
購買活動は無料の会員登録やサービスの無料体験と違ってユーザーの心理的敷居が若干高くなるので、この「次のステップ」に進んでもらうことは非常に重要です。

その際に注意すべきことは、ブログサイトのように「もっと見る」のような「曖昧な言葉」を使ってはいけないということです。
また、こうしたボタンは簡単に認識できるように、何個も設置せずに１つにして、コントラストをしっかりつけておくのが定石です。

homeaway.png
▲ Homeawayのページでは、「検索」というラベルでわかりやすい色のボタンで検索結果ページに誘導しています

多くの場合、ネットショップで「次のステップ」に乗せるためのアクションは「検索」でしょう。
その場合は、検索窓の横に設置するCTAボタンの色を、他のUIとはっきりと区別できるようにしておきましょう。

ステップ２：検索

ランディングページの場合は１つの商品を売ることに集中するケースが多いわけですが、ネットショップの場合はさまざまな商品を見比べて何を購入するか決めることのほうが多いでしょう。
例えば、Amazonでイヤホンを購入するといったときに、bozeのあるヘッドホンを買うことを決めて買う場合ももちろんありますが、多くのひとは「イヤホン bluetooth」などのキーワードで検索して、価格や性能などを比較しながら購入していきます。

つまりこのステップで肝心なのは、検索結果ページが最適化されているかどうかです。
UXが優れている検索結果ページというのは、たいてい製品の写真が見やすく、比較するための情報が十分に表示されていて、どの商品の詳細を確認したいのかが決めやすいものです。
そして、覚えておいていただきたいのは、１ページあたりにたくさんの商品リンクがあればあるほど、コンバージョンにつながる可能性が大いにあるということです。

参考
後回しにしていませんか？ホームページ内検索結果のUXを改善する7つのポイント

また、検索結果ページにCTAボタンをそもそも置くのかどうか、これは考えなければならない問題の一つです。

lohaco.png

例えば日用品の通販サイトLOHACOの検索結果ページではそれぞれのアイテムの右側に「カゴに入れる」というボタンを付していますが、これは「単価が安い」「比較しなくても中身が分かっている」「いつも買うものが決まっている」などの場合は有効です。

nenet.png

一方で、ファッション通販サイトHUMORでNe-netの服を選ぶといった場合には、「詳細ページ」までたどり着いてほしいというさらなる「次のステップ」が存在します。
このような場合には、あえてCTAボタンをつけずに詳細ページに誘導されます。

まとめると、検索結果のリストにボタンを設置するかどうかは、次の2点によって決めるとよいでしょう。

(1) その製品は高頻度でユーザーに購入される可能性があるか？
(2) ユーザーは１度に複数商品を購入する可能性があるか？

もしこれらの答えがイエスであれば、「カゴに入れる」ボタンを設置することでコンバージョンが上がるでしょう。
スーパーマーケットやドラッグストアのホームページではボタンを設置した方がいいでしょうが、ブランドサイトにはボタンは必要ありません。

ステップ３：製品詳細ページ

ネットショップには行き止まりができやすいと言われています。
というのも、ユーザーがいくらその製品を気に入ったとしても、購入する準備ができていなければ製品詳細ページで立ち止まってしまうからです。

とりわけ行き止まりは、購入するまえに誰かに相談するような高価な商品ほど出現しやすいと言われています。
ユーザーが「『今すぐ購入する』ボタンを押すか」あるいは「今すぐサイトを立ち去るか」の選択を迫るよりも、もう少しゆるやかな第3の選択肢として別のボタンを作るのが賢明な方法です。

hmv.png

例えば、HMVのホームページで、あるアーティストのCDの一覧を見ているときに、視聴して気に入ったにもかかわらず購入までの心理状況に至らなかった場合を考えてみましょう。
この場合、*「お気に入りに追加」*という、いわゆる「ウィッシュリスト」機能をつけておくことで、次につなげておくことができます。
もしメールアドレスなどを回収しておけば、リマインドとしてウィッシュリストに追加している商品の詳細を定期的に送ることもできます。

注意しておきたいのは、購入ボタンと同じ形状・色でウィッシュリストボタンを設置してはいけないということです。
あくまでも主要なCTAボタンは*「買い物かごに入れる」ボタン*であり、「お気に入りに追加」はサブの位置付けとして区別できなければいけばせん。

4. ステップ４：チェックアウト

決済(チェックアウト)の流れは、購入を完了させるためにユーザーが個人情報や決済情報を渡す場面になります。
通常、チェックアウトではフォームへの入力が発生するので大変な作業になってしまいますが、スムーズなチェックアウトはユーザーの苦痛が伴わない形で行われるべきです。

参考：
売上をアップさせるためにおさえておきたい、ペイメントデザイン入門

ここでの関門は、ユーザーに無事に決済まで行なってもらうことです。

ホームページで複数の決済ステップを導入している場合は、ユーザーに「次に起こること」をある程度予測させることが重要です。
例えば、4ステップ目で決済が完全に完了する場合には、「次へ」というCTAボタンの表示は1ステップ目でも2ステップ目でも3ステップ目でも、文言も形状もサイズも変えてはいけません。
これは心理学で言うところの単純接触効果(ザイアンス効果)と呼ばれるもので、繰り返し出会ったものに好意を抱くという心理的側面をうまく利用するのです。

「決済方法へ進む」といった次のステップをボタンに明記したり、マイクロコピーに書いてしまうと、ユーザーは直感的に動けず、逆に不安や疑問を抱いてしまい、かご落ちしてしまう場合もあります。
できるだけシンプルかつスムーズに、シームレスに決済を完了させることが、売上にもなり、ユーザーのためにもなります。