比較テストで見えた成果を出すモバイルECサイトのユーザビリティ（第8回）

第7回では、モバイルメールマガジンの本文の注意点やレイアウトのポイントを紹介しました。今回は、モバイルショッピングサイトに関するユーザビリティ調査結果の内容を基に、モバイルショッピングサイト構築・リニューアル時のポイントを紹介します。

モバイルショッピングサイトは「信頼感」「購入のしやすさ」「軽さ」が重要

モバイルショッピングの利用経験があるユーザーに、利用にあたって重視する点を聞いたところ、第1位は「信頼感（63.1％）」、第2位は「購入のしやすさ（60.3％）」、第3位は「スムーズさ（ページの軽さ）（59.9％）」となりました（図1）。

商品自体の信頼性はもちろんのこと、個人情報の入力や決済を行うモバイルショッピングサイトでは、セキュリティなどの観点から「信頼感」が最も重要視されることが推察されます。

2つ目の「購入のしやすさ」については、携帯端末は画面が小さくページ閲覧にも制限があるため、商品検索から購入までのフローはPCサイト以上にユーザビリティの重要性が高いと言えます。

また、ページ遷移が多くなってしまうモバイルサイトでは、表示速度が遅くなるような重いサイトはユーザーにとってストレスになるため、「信頼感」や「購入のしやすさ」を欠くことなく、バランスよく「軽さ」を保ったサイト設計が重要になってきます。

上記を踏まえたうえで、モバイルショッピングサイト構築のポイントを紹介します。

1. トップページは画像を多く配し、デザインを作り込む
2. 商品一覧ページには大きめな画像を入れ、商品ごとの区切りを明確に
3. 商品ページには商品の詳細情報を掲載
4. 購入への導線はページ下部に設置
5. 価格はページ上下に表示して目立たせる
6. 商品画像は豊富なアングルの写真を複数用意

1　トップページは画像を多く配し、デザインを作り込む

ショッピングサイトのトップページは商品購入への入り口となるページであることから、ユーザーへの印象を考慮したページ制作が非常に重要です。

IMJモバイルでは、トップページの情報量とデザインの違いがユーザーへ与える影響を調査するために、画像の使用量が多く適度なデザインを施した「サイトA」、シンプルなデザインで画像の使用も最小限にした「サイトB」、また「サイトA」の要素にさらに情報を付加した「サイトC」を比較しました（図2）。

その結果、使いやすいサイト1位として、画像を多く配し適度なデザインを施したサイトAとCを選んだユーザーが、合わせて7割超という結果が得られ、画像を配したサイトの利用意向が高いことがわかりました（図3）。一方、画像を配していないサイトBを最下位の3位に選んだユーザーは、6割に近くに上ります。

前述したようにモバイルショッピングサイトは「信頼感」が最も重要視されることから、トップページに画像を配することや、デザイン性を持たせることが商品訴求やサイトのイメージに好影響を与えていることが推察されます。

ただし、画像や情報を入れ込み過ぎることは、ページの容量やスクロールの長さを増加させることになり、かえって印象が悪くなることがあるので注意しましょう。

2　商品一覧ページには大きめな画像を入れ、商品ごとの区切りを明確に

商品一覧ページはユーザーが商品を検索する中で最初のステップになります。目的の商品が一覧の中にあっても、見つけにくいページではユーザーが離脱してしまう可能性があるため、注意が必要です。

モバイルショッピングサイトでの商品検索結果の適切な商品一覧の表示イメージを調査したところ、最も大きい商品画像一覧を表示するサイトと商品ごとの区切りを明確にしたサイトが支持されました（図4、5、6）。

商品画像を大きく掲載し、商品毎の区切りを明確にすることで、ユーザーは商品の判別がしやすくなり、よりスムーズに目的の商品を検索できるでしょう。ただし、ページの容量やスクロールの長さには注意が必要です。

3　商品ページには商品の詳細情報を掲載

商品ページは検索した商品の情報を得るページであるとともに、購入フローの入り口となるため、商品の情報を正確かつ魅力的に伝え、購入フローに遷移させるようなページ設計が必要になります。

商品ページの商品詳細情報によるユーザーへの印象の変化を調査するため、ファッション系の商品を例に、サイズ、生産国、洗濯方法などの詳細情報を商品ページに掲載したサイトAと、リンク先の詳細情報ページに載せたサイトBを比較したところ、結果として、約6割のユーザーが商品ページへの商品詳細情報の掲載を支持しました、（図7、8）。

商品ページ内に詳細情報を掲載することが有効だと言えます。これは商品ページに詳細情報が掲載されていることで、商品自体の信頼性がユーザーにより伝わりやすく、かつページ遷移の手間が省けるからだと考えられます。

なお、詳細情報が多くなりすぎると、スクロールの長さが増加してしまうので、情報が多い場合は、優先順位の低い情報は別ページに設けるなどの検討も必要です。

4　購入への導線はページ下部に設置

商品ページにおける「購入への導線」の最適なレイアウトを調査するため、「色／サイズ選択」、「数量入力」、「お買い物カゴに入れるボタン」など、購入への導線をページ下部に配置したサイトC、ページ上部に配置したサイトD、ページ上下両方に配置したサイトCを比較しました。結果として、購入への導線はページ下部に位置するサイトCが最も支持されました（図9、10）。

「欲しい商品が決まっているとき」は早く購入に至るため、ページ上部に設置されたレイアウトが好まれると予想されましたが、実際は逆の結果となりました。ユーザーは予め購入する商品が決まっていたとしても、再度商品情報を見たうえで購入フローに遷移するからだと考えられます。

5　価格はページ上下に表示して目立たせる

商品ページにおける価格表示の最適なレイアウトを調査するため、価格表示と本文の色が同じサイトFと、価格表示が赤文字のサイトG、価格表示の背景色を赤くして文字を白抜きにしたサイトH、価格表示を赤文字でページ上下に配置したサイトIを比較しました（図11）。

その結果、価格表示が赤または背景色赤・白抜きのサイトは価格表示に色の変化がないサイトと比較して支持されることがわかりました。また、多くのユーザーがページ上下に価格表示があるレイアウトを支持しています（図12）。

価格表示に色の変化をつけることや、ページの上下に配置することは、情報をユーザーにより伝えやすくすることにつながります。価格は商品購入で欠かせない検討要素の1つです。取り扱う商材にもよりますが、商品ページにおける価格表示などの重要な情報は、色の変化をつけるとともにページの上下両方に配置するなど、わかりやすくユーザーに伝える工夫をすることが望ましいでしょう。

6　商品画像は豊富なアングルの写真を複数用意

商品画像によるユーザーへの印象の変化を調査するため、商品のみの画像を掲載したサイトJと、利用シーンを含めた画像を掲載したサイトKを比較しました。

また、それぞれについて画像が1つの場合のサイトJ～Kと、複数ある場合のサイトL～Mの比較も行いました（図13）。

その結果、商品のみの画像を掲載したサイトと利用シーンを含めた画像を掲載したサイトでは、利用シーンを掲載したサイトがよりユーザーの支持を得ました（図14）。

ファッション系の商品は、着用写真によって利用シーンがイメージしやすくなるので、利用シーンを含めた画像を掲載することで、商品への信頼感が増すでしょう。

また、商品画像が1つの場合と複数のアングルからの商品画像がある場合では、後者の方がユーザーの支持を得られる結果となりました。モバイルはPCに比べ、画像が小さく一枚の画像では細部の確認が困難であるため、複数のアングルの商品画像は商品の情報をよりユーザーに伝える効果があると言えます。

以上のことから、商品ページには利用シーンがイメージできる画像、複数のアングルで掲載しましょう。

今回はモバイルショッピングサイトの「トップページ」から「商品詳細ページ」におけるユーザビリティのポイントを紹介しました。

次回は「買い物カゴ」から「購入完了」に至るまで、購入フローのユーザビリティについて紹介する予定です。