この記事は2分20秒で読めます。

こんにちは。
EC-CUBEを使ったECサイト構築のプロ集団“EC-CUBER”のWebマーケ担当です。

Point2「購入までの動線を意識して作る」の後編です。前編はこちらからご覧ください↓

直感的に理解できる操作性にする

商品を購入してもらうためには、ユーザーを「商品ページ>カート>決済画面」へと誘導しなくてはなりません。その過程で操作性は非常に重要です。

ユーザーが欲しい商品なのだから少しくらいページがわかりづらくてもページ遷移するでしょ、と高をくくってはいけません。操作性に不便を感じさせたら、「今は時間が無いからあとで買おう」と思わせてしまい、結果的にサイト離脱につながった、あるいは最悪の場合、別の競合サイトでお買い上げ、なんてことも起こりえます。

決済周りのたった3ページですがされど3ページ、いかに遷移してもらえるかで売上の明暗が分かれます。

購入ボタンの大きさ・色は目立つデザインにする

ボタンは立体的にしたり影をつけたりすることでクイッカブルでなくてはなりません。少しでも目立たせ、色は緑や青色を利用すると良いと言われています。Web業界では「クリックされやすいボタンは緑色」という定説があるのですが、これは2009年にFirefox(ブラウザ)がおこなったABテストの実験結果が根拠になっているようです。

特にスマートフォン表示の場合は、画面が小さくボタンがただでさえ見えづらくなるので、できる限り画面横幅いっぱいになるよう表示させるなどの工夫をしましょう。

またボタンだけでなく、伝えたい情報には色で変化をつけます。URLなどのテキストリンクは基本的にCSSを触らなければ自動的に青色になりますが、大事なところは赤やオレンジなどの目立つ色で差別化して視覚的にわかりやすくすることが重要です。

商品画像はイメージしやすいものにする

オンラインショップのデメリットは、商品を実際に手に取ることや直接見ることができないため、利用したときのイメージがしづらいことです。商品単体の画像のみを載せるのではなく、できる限り、ユーザーが利用するシーンがイメージできる商品画像を多角的に複数用意することを意識しましょう。

最後に、Point3を見てみましょう→「Point3.PC・スマホどちらのデバイスでも見やすい・わかりやすいデザインにする」