ECサイト・WEBサイトの心理学 デザインでCV率(成果率)を上げる方法

本日はデザインでCV率・コンバージョン率(成果率)を上げる方法・考え方を書かせていただきます。
デザインでCV率・コンバージョン率(成果率)を上げるには、ボタンの色や配置場所(設計)、ユーザーの心理的要素が大きな要因となります。
今日はCV率をあげるための方法・考え方を記載しますので最後までご覧ください。
まずデザイン=集客アップ、売上アップにつながらない会社が多い理由は?

よくある内容ですが、高クオリティデザインで集客アップ!などのキャッチコピーを歌っている企業がありますが、デザインでは集客はアップしません。
集客は認知してもらうために、SEOやSNS、広告といった、ツールを利用する必要があります。
次に、デザインで売上アップ。こちらもよく見ますが、売上アップは半分正解ですが半分は不正解です。
なぜ半分正解なのか。購入率が増えることは購入数が増える、結果売上アップは正解じゃないのか。となりますが、デザインそのものだけでは売上に直接つながることはなく、デザインの先には「魅力的な商品」があったり、デザインの前には「キャッチーな広告文」があり、その広告文を読んでサイトにランディングしたりするので、デザイン単体で大きく売上につながることは少ないです。
そのため、デザインで上がるのはCV率・成果率になります。デザインの良し悪しが売上アップに大きく影響することはありません。
そのため、集客アップ、売上アップをしたい要望がある際は、デザイン制作をそれら集客・売上アップの要因につながるように設計する必要があります。
ただ、デザインするだけでなく、何の要因と組み合わせることで、クライアントの課題を解決できるかを考えることが大事です。
では具体的にデザインでどのようなことができるか。
CV率が変わる?ボタンの色でユーザーのクリック率が大きく変化

ボタンの色を変えるだけでユーザーのクリック率が変わることは昔から言われています。
以前はボタンは緑色にするとCV率が上がると言われていました。
下記の例では青色のボタンから緑色のボタンに変更するだけで38.1%もクリック率が増えた事例があります。
①青色ボタンと緑色ボタンの比較

その結果、当時LPのデザインではこぞって色んな企業が緑色のボタンにしました。緑色ボタンが主流とまで言われました。
しかし、最近ではある企業が行ったABテストでは、赤色のボタンの方が緑色のボタンより21%もクリック率が上がった実験結果があります。
②緑色ボタンと赤色ボタンの比較

とあるサイトでは、緑のテキストと緑のボタン、そしてオレンジのボタンを検証し
またあるサイトでは青色のボタンとオレンジのボタンを検証しました。それぞれの結果が下記になります。
③テキスト、緑色ボタンとオレンジ色ボタンの比較
引用元:Which Color Converts The Best
↑こちらの例ではオレンジのボタンが5%多く選択されました。
②と③の実例は寒色系のボタンより温かみのある暖色系のボタンの方がクリックされた例になります。
④青色ボタンとオレンジ色ボタンの比較

↑先ほどとは違い青色のボタンの方がオレンジのボタンより9%多く選択されています。
一見、暖色のボタンがクリック率が高いかと思いきや、青色のボタンの方がクリック率が増える事例もあります。
このように、どのデザインでも必ず緑色のボタンやオレンジのボタンが効果が高いということはなく、一番の重要な部分は視認性になります。
・サイトのを見てボタンがより目立っているか。
・ボタンより他の場所に目立っている場所はないか。
・デザインのトーンがボタンとサイト全体が合っているか。
(・民族性の違いもありますが今回は割愛)
こういったことがボタンのクリック率をあげるために重要になってきます。
デザインを作る際に重要なのは、決まった固定観念ではなく、全体のデザインやそのサイトに来られるターゲット層を考えたデザインができるかどうかです。そしてテキストも重要になります。
ECサイトやWEBサイトでデザイントーンを決定する際に、視認性・全体のトンマナ・マイクロコピーなどを、しっかりと読み取ってデザインしてあげるとより効果の高いECサイト・WEBサイトを作ることができます。
CV率が変わる?ユーザーの心理的要素におけるサイト設計
弊社代表の鳥井が10年以上前に掲げたサイトの設計を1つ紹介します。
現在ではzozoなども利用しているため、EC業界の主流になっていますがTOPページ2カラム、下層ページ1カラム設計です。
当時、ECサイトと言えばTOPページも下層ページも全て2カラムで作られていました。2カラムというのは画面の左側に検索のサイドバーが存在し、画面右側にコンテンツエリアが存在することを2カラムのデザインと呼びます。
↓2カラムとは下記のようなイメージです

そんな中、弊社代表が10年以上前にファッション系のクライアント様のECサイトでTOPが1カラム,下層ページが2カラムの提案をしました。
当時はTOPページも下層ページも全て2カラムの時代です。まれにTOPページも下層ページも1カラムのサイトが出てきたばかりでした。そのため、そんな2つを混合させるサイトはなかったため、クライアントやそこに入っていたコンサル会社から大反対を受けました。
しかし、そこには理由が存在し、その理由を説明すると満場一致で決定しました。
その理由は…TOPはリアル店舗で言うお店の入り口になります。そして、下層ページは商品棚、チェックアウトページはレジになります。
初めてお客様がお店に来店された時にお店の中のどこに、欲しい商品があるか探します。
ドラッグストアに風邪薬を買いに行くと、棚の上や横にある見出しから「風邪薬コーナー」を探しますよね。それと同じで、初めてECサイトにランディングしてきたユーザーはまず自分が欲しい商品がどこにあるか検索をします。

そのためお店の入り口となるTOPページは検索を充実させる必要があり、2カラムにし左側に検索を設けます。
その後、特定の商品を見つけた時のユーザーの行動を考えてみます。
風邪薬を見つけたお客様の商品のすぐ横にバスマジックリンのような掃除アイテムがあったら邪魔ですよね。風邪薬を買いに行っているのに。
そのため、ユーザーが特定の商品を見つけ商品詳細ページに辿り着いた時は下層ページから検索をなくし1カラムに変えてあげる。こうすることで購入率がアップする設計になります。
結果、先ほど説明したファッション系のクライアント様の売上アップに大きく貢献した実績があります。

そして、今ではTOP2カラム、下層ページ1カラム設計はEC業界の主流となりました。
多くの企業様は「トレンドだから」「zozoがやっているから」などの理由で導入していますが、実際はそんな単純なことではありません。
先ほどもお伝えした通りデザインには理由があります。
理由を考えてデザインをする会社と理由を考えずにデザインをする会社では大きく最終納品物に差が出ます。せっかく自社のために投資をして、ECサイトやWEBサイトを作るのであれば結果を伴う会社へ投資することをおすすめいたします。
ーーー
この話には続きがあり、風邪薬の商品の周りに鼻スプレーやうがい薬があるように、商品詳細ページの関連商品の見せ方や、商品一覧ページの設計、買い物かご周りの設計、チェックアウトの設計など様々な設計を他にも編み出しています。