「ECサイトってどんなデザインにすれば売上向上につながるの？」
「今よりECサイトの購入率を上げたい」
そう思っているEC担当者の方も多いはず！
そこで今回は、デザイナー・ディレクターとして中規模〜大規模ECサイトの設計やデザインを手掛ける筆者が、ECサイト売上向上のためのUI設計についてドドンと紹介します。
この記事を読み終めば、ECサイトの売上向上のためのUI設計とそのロジックがわかるはず。
それではいってみましょう！
結論：売上UPのためのECサイトUI設計
最初に結論を申し上げます。
ECサイトを設計・デザインするときは以下の３点を意識しましょう！
- ユーザーに回遊を促す
- 特集ページを経由してもらう
- 商品サムネイルはシンプルに
それぞれの要素を織り込んだワイヤーフレームを以下のリンクからご覧いただけます。
Xdデータでトップページ、商品一覧ページ、商品詳細ページの3ページ分あります。
ECサイトの情報設計をする際や、改善を考える際に参考にしていただけると幸いです！
それでは、それぞれの項目について、実例を交えてロジックを解説していきます。
ユーザーに回遊を促す
回遊とは？
サイトに訪れたユーザーが1ページだけ閲覧してサイトから離脱することを直帰といいます。
それとは逆に、サイトに訪れたユーザーがサイト内の内部リンクを踏んで複数ページを閲覧することを回遊といいます。
どれくらい回遊されたかを測る指標として回遊率というものがあります。
回遊率の計算方法は以下の通りです。
回遊率 = 訪問数 / ページビュー数
ECサイトの売上UPのためには、回遊率を上げるようにECサイトを設計することが重要です。
なぜECサイトの売上UPに回遊率が重要なのか
ECサイトと実店舗の大きな違いは、「ユーザーがすべてのプロセスにおいてセルフサービスで購入する」ということです。
ECサイトには訪れたお客様に「いらっしゃいませ」と声をかけることも、「何かお探しですか？」と買い物を手助けすることもできません。
そのため、パッと見て気になる商品や情報がなければすぐに離脱してしまいます。
インターネット上のお客様は実世界でのお客様よりも遥かにせっかちなのです。
特に回遊率を高める工夫が必要なのは、ECサイトの入り口ページになりやすい「トップページ」「商品一覧ページ」「商品詳細ページ」です。
この3つの中だと、商品一覧ページが最も直帰率が高いとされています。
サイトの回遊率を上げることで、ECサイトに訪れたユーザーが興味を引く商品を見つける可能性が高くなります。
回遊率を上げるためのECサイト設計
ファーストビュー
Webデザインのトレンドとして、現在はファーストビュー（サイトを開いた一番最初の画面）にキャッチコピーとメインビジュアルがあり、情報量が多くないWebサイトが多いです。
ファーストビューで世界観を作り、ワンメッセージを確実に伝える際には上記のような設計で問題ありませんが、ECサイトの場合は異なります。
ECサイトの目的は、あくまでも商品を購入してもらうことです。
そのためには、スペースをムダにしてはいけません！
キャッチコピーや画像を大きく表示する必要はないのです。
ECサイトのファーストビューでは、「オススメの商品は何なのか」「今何が売れているのか」など、購入を促す情報を盛り込むように意識しましょう！
メインビジュアルをスライダーにする場合も、画像の高さを画面いっぱいにとらない、次のスライドも見切れて表示させるなど、興味を引く設計にすることがポイントです！
サイドバー
回遊を促すためにサイドバーを活用するのも一つの手です。
特にカテゴリが多く、ヘッダーだけではナビゲーションが整理できない場合はサイドバーを積極的に活用すると良いでしょう！
サイドバー上部には特にみて欲しい情報を盛り込んでおくのが効果的です！
無印良品の場合、サイドバーをファーストビューで露出しており、かつ、特集ページへのリンクをサイドバー上部に露出するような設計になっています。
おすすめ商品を一覧表示
おすすめ商品やランキングを一覧表示するのもECサイトにおける有効な手段です。
能動的に商品を探すユーザーは検索ボックスやカテゴリから自身の興味に直行しますが、受動的なユーザーに対しては興味を引くような情報を積極的に見せていきましょう！
心理学には「同調現象」といわれる効果があります。
同調現象とは、かんたんに言えば、みんなと同じだと安心と思う人間が持つ心理的傾向のことです。
みんなが買っているもの、売れているものは欲しくなるという傾向があるため、「今これが売れています！」という商品をまとめて紹介することが効果的です。
トレンドや流行の移り変わりが早いアパレルやコスメ業界では、新着商品を優先度高く表示してもよいでしょう。
検索ボックスをファーストビューに表示する
デジタルマーケティング会社WACULの調査レポートでは、検索ボックスをファーズとビューに露出しているECサイトは購入率が上がるというデータが出ています。
特に商品数やカテゴリ数が多い場合は、顕在的なニーズを持っている顧客に対して、目当ての商品まで直行できるような導線を用意しておくのが懸命です。
おすすめカテゴリの画像リンク
おすすめのカテゴリについてはカテゴリの商品一覧ページへの画像リンクをメインコンテンツ内に用意しておくとよいでしょう。
サイドバーのカテゴリナビゲーションだけではイメージの想起ができないため、画像をうまく使って、顧客のイメージを呼び起こしてあげましょう。
商品詳細ページの購入直後
商品を購入した直後や、商品の購入を決断したタイミングというのは財布の紐がゆるむもの。
おそらく、コンビニのレジの前にあるちょっとしたお菓子や小物の「ついで買い」をしたことがある方も多いのではないでしょうか。
ECサイトでも商品購入時や購入直後の「ついで買い」を狙った設計が効果的です。
例えば、商品詳細ページの下部に「この商品を買った人は他にこんな商品も買っています」といった情報を掲載したり、他の売れ筋商品を表示したり、関連のあるカテゴリを表示しておくなどが考えられます。
具体例を上げると、Amazonでは機械学習を活用して、顧客に最適な提案をするようなプログラムの設計がなされています。
Amazonほどの精度は求められないにしろ、「ついで買い」を狙う設計は意識しておくとよいでしょう。
特集ページを経由させる
特集ページとは？
特集ページとは、季節やイベントに合わせたテーマに沿った商品をまとめて紹介するようなページを指します。
上記のような特集ページへの導線をトップページの目立つ箇所に表示して誘導することが一般的です。
ECサイトにおいて特集ページを経由させるべき理由
こちらもWACLUの調査レポートで、特集ページを経由した場合、そうでない場合と比較して購入率が約3倍になるとデータが出ています。
また、特集ページを特定の検索キーワードに標準を合わせて作成することで検索からの流入も狙えるといったメリットがあります。
参考：ECのCVR改善に寄与する特集ページのベストプラクティス研究
ECサイトの商品サムネイルの重要性
ECサイトにおいては商品のサムネイル画像も重要な要素です。
最も大事なのは「商品が見やすい」こと
結論から申し上げると、商品のサムネイルはできるだけ余計な装飾を割けて商品自体が視認しやすいようにするべきでしょう。
ゴテゴテとした装飾は割けて「商品を視認しやすいか」をしっかりと確認しましょう！
以下の記事では実際に楽天市場でテストした結果を開示してくれています。
訴求の切り口などの考え方も非常に参考になるため、読んでおくとよいかもしれません！
参考：https://ab-test.jp/sales/which1win/
あくまでも楽天市場での結果なので、盲信せずに自社ECに最適なサムネイル画像を模索しましょう。
まとめ 試行錯誤を繰り返してECサイトの売上UPを！
ここまでECサイトの売上UPのためのサイト設計について紹介しました！
情報設計をする際や、デザインをする際にお役立ていただけると幸いです。
ただし、注意していただきたい点があります。
それは会社・事業によって最適解は異なるということです。
ECサイトは世の中に様々あり、一定の定石や成功パターンは存在するかもしれません。
しかしまったく同じ事業を営んでいる企業は1つとしてありません。
そのため、愚直に試行錯誤を繰り返して、自社に合ったサイトの設計を模索する姿勢が売上UPのためには最も大切と言えるかもしれません。
