販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

ECサイトのスマホ対応、今大丈夫?改善のポイント10選!

ECサイトをモバイルフレンドリーな作りにすることが大切なのは周知の事実。しかし、どのように改善すればユーザビリティが向上され、購入率やクリックスルー率を高めることができるか知っていますか? 今回は簡単なデザインチェンジ方法を教えます。ぜひ取り入れてみてください。

1.ナビゲーションバーは常に表示!

モバイル画面では限られた情報しか表示することができません。そのため、画面をスクロールされると上部に載せていた情報が消えてしまうということを想定してデザインをする必要があります。スクロールしても常に上部にロゴやメニューがナビゲーションバーとして表示されるようにすると、ユーザーも迷うことなく操作できるでしょう。

2.スクロール後は上部に戻るボタンを表示!

上部にナビゲーションを配置することができない場合は、スクロールしてECサイトの下部を見たあとに上部に戻れる機能をつけることでユーザビリティが向上できます。スクロールしないと上部に戻れないようなデザインにはせず、上矢印のボタンなどを画面に残して、簡単に上部へ戻ることができるよう改善しましょう。

3.商品写真はきれいに並べる!

インスタグラムの急成長もあってか、消費者は整然と並んでいる画像や動画を好む傾向があるようです。

よって、ユーザビリティの高いモバイルECサイトでは「商品画像をいかに美しく表示させるか」ということが重要なのです。インスタグラムのようにグリッド線をそろえてきれいに写真を並べることで、ユーザーに親しまれやすいサイトへと改善することができるでしょう。

4.商品ページのテキストは最小限に!

モバイルファーストなECサイトでは写真が重要です。その商品の写真をきれいに見せるために、テキストは最小限にするようにしましょう。

しかし、商品の細かい情報を全く載せないわけにはいきません。画像を最大限に見せつつテキストも表示させる手段としては、商品画像の右上などに「商品情報を見る」というようなテキストを入れるやり方が有効です。テキストをタッチすると商品情報が画像の上に表示されるような作りにするといいでしょう。

5.商品カートは常に表示!

商品ページでは画像がもちろん大切ですが、それだけでは商品を買ってもらえません。モバイル版ECサイトで画像の次に大切なことは、「商品カート」が見つけやすいかどうかということです。

商品ページ上ではナビゲーションバーの位置など見やすい場所に「商品カート」を必ず表示するようにデザインの改善をしてください。商品カートが見づらいと、いくらモバイルファーストなデザインを心がけてもコンバージョン率改善は期待できません。

6.商品の写真はさまざまなアングルで表示!

モバイル上で買い物を躊躇してしまう理由のひとつに、「商品の詳細がわからない」という不安があげられます。商品に対する不安を少しでも減少させるために、商品の写真はさまざまなアングルのものを表示しましょう。正面、裏面だけでなく、横から、上から、下から、もしくは360度回転できる画像を載せることで「買う決断」を促すことが可能です。

7.大きければ大きいほど良い!

モバイルの画面はデスクトップ画面に比べとても小さいもの。そのため、画像やテキストを大きく表示させることによりユーザビリティが高まります。また、CTAボタンは男性の大きな指でも押しやすいよう、大きめにデザインしましょう。誰にでもクリックしやすいユーザーインターフェイスにより、「小さすぎて押せない」という理由でサイトから逃げてしまう顧客数を減らすことができます。

8.CTAボタンは画面に1つ!

ただでさえ小さいスクリーンにCTAボタンが多数存在するとユーザビリティが悪くなります。ページ上に配置するのは「セール品」など一番顧客に見てもらいたいページへ飛ばすものだけにしましょう。そして、商品ページでは「カートに入れる」というCTAボタン1つに絞ることで、そこをクリックしてもらいやすくなります。

9.購入ページでは購入完了までのステップが少ないほどグッド!

モバイル上の購入ページでは、ECサイトの会員ページ登録を必須にするなど、デスクトップサイトで行いがちな無駄な入力を極力避ける構造にしましょう。せっかく購入画面まで行ったのに、入力情報が多すぎるためにページから離脱されてしまうのはもったいないことです。

10.トップページからもダイレクトにカートへのリンクを!

トップページにセール品や売りたい商品を載せるECサイトは多く存在します。そんな場合は、トップページにもカートへのリンクを配置しておきましょう。商品ページへ飛ばして詳細を見てもらいたいという気持ちもあるかもしれませんが、モバイルECサイトの目的は「手っ取り早く買ってもらう」ことだということを忘れないように。買いやすく、売りやすいECサイトへと改善しましょう。

A/Bテストも駆使して改善を

モバイルサイトのユーザビリティを向上するためには、写真の見せ方やCTAボタンの出し方など少しの工夫が大切です。ちょっとしたことでも大きな効果を生みます。ここで紹介したアイデアをぜひ活用してみてください。

また、A/Bテストを行いどちらのデザインがクリックスルー率やコンバージョン率が高いかなど、データをもとに改善をすることも重要になります。試行錯誤をくりかえし、ユーザビリティ改善にさらなる改善を加えることが大切なのです。

▶ こちらの記事もおすすめします!

[ ウェブ制作において使えるビジネスフレームワークまとめ ]

参考:

The following two tabs change content below.
baxooka
バズーカの運営チームです。 デジタルマーケティングの情報を日々更新中!よろしくお願いします!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする