このエントリーをはてなブックマークに追加

ユーザテストはこう活用する!『ユーザテスト×食品ギフトECサイト』3.商品ページ解説編

食品ギフトECサイト_サムネイル当ブログではアイトラッキングを中心とした調査を紹介していますが、アイトラッキングだけが消費者の行動を知る手段ではありません。

このシリーズでは、リモートユーザテストと定量的なデータの活用・専門家評価により、競合サイトをベースにした商品購入の動き・商品購入の際に必要な条件・競合サイトの抱える課題を抽出し、それらの問題解決をするためのギフト向け牛肉ECサイトデザインを作成した事例をご紹介します。

前回に引き続き、デザインの詳細解説をしてまいります。今回は商品ページです。

『おかいもの研究室が作った食品ギフトECサイト』シリーズの目次

  1. 制作の流れ紹介編
  2. ヘッダ解説編
  3. 商品ページ解説編 ← 今回はここ
  4. ギフト紹介ページ解説編
  5. トップページ・その他解説編

完成したデザイン

完成したデザインはこちらからご確認いただけます。

商品ページ / ギフトトップ / ギフトカテゴリ / トップページ

※ダミーとはいえ実際の本店サイト構築システムであるCARTSTARを使用して構築しています。商品検索や商品注文などができてしまいますが、実際に商品をお届けすることは出来ません。また表示確認のため様々なダミー商品データ・ダミーページが登録されておりますので、ご理解の上閲覧ください。

迷わない商品ページ

商品ページは、全体としては以下のようなことを考慮して構築しました。

◯商品写真を出来る限り大きく表示する
◯商品が購入できるサイトであることがすぐに分かる
◯ページ上部に商品写真が充実している
◯商品情報を順序良く理解できるレイアウト
◯大手モール向けの商品データを活用できる
◯商品ページ内で送料が分かる
◯他の商品も見たいと思った時に使える『おすすめ商品』


商品写真を出来る限り大きく表示する

まず、食品のECサイトということで、美味しそうに見せるためには写真の大きさは重要と考えました。またギフト用途となれば、どんな包装で届くのかといった見栄えも重要になってきます。写真で判断する情報が多い、という前提でレイアウトを考えました。

そのために、商品写真をできるだけ大きくできるよう試みました。しかし、年齢層の高めのユーザやタブレットなどの画面が小さな環境を考慮すると、商品名や価格も読みやすくする必要があります。

つまり、写真を大きく表示するスペースも限られてくるのですが、レフトナビゲーションを取り去ることで、写真の横幅を500pxまで広げることが出来るようになりました。

商品ページカゴ周り_01
└写真・商品名・価格のいずれもが大きく表示できたレイアウト

通常、サイドナビのついたサイトを構築すると、全体約1000px − サイドナビ200px = メイン部分800px弱となり、価格やカートに入れるボタンなどを並べるととても窮屈なレイアウトになってしまいます。


商品が購入できるサイトであることがすぐに分かる

大手モールサイトの場合とは異なり、ユーザはECサイトを探して本店サイトに到達しているとは限りません。商品を買い物カゴへ追加するためのボタンが画面の下の方にあるレイアウトでは、買い物ができるサイトであることが伝わりにくくなってしまいます。

商品が買えるページであることを簡単に伝えるには、『商品名』『価格』『買い物カゴに入れられるボタン』をすぐに見せることが重要であると考えました。

ただし、ターゲット像を考慮して商品名や価格は大きめに表示しています。前回もご紹介したとおり、縦幅768pxというコンパクトなディスプレイのシェアが高いため、最初の画面内に『買い物カゴに入れる』ボタンがファーストビューに入らない可能性があります。

しかし、ファーストビューで画面下に続きがあることが伝わるような商品画像のサムネイル集の配置をするなどの工夫を施し、またユーザが画面をスクロールしてくれることを期待しつつ、セカンドビューまで見てもらえるように考慮しています。

タブレット_ファーストビュー
└ファーストビューで、一部のパーツが見切れることで続きがあることが分かる


ページ上部に商品写真が充実している

ファーストビュー部分に表示される写真の下に、小さいサイズのサムネイル写真が表示されていますが、ここにマウスポインタを持ってくると写真が切り替わるようになっています。

オンマウスで写真が切り替わる
└オンマウスで写真が切り替わっている

また、写真を大きくしたい場合も、大きく表示されているエリアにマウスポインタを持ってくるだけで自動的に拡大されます。

この部分は商品情報に登録した写真が表示されるのですが、下記のような写真をここに登録することで、見た目で確認したい情報はおおよそ充実できてしまいます。

  • イメージ写真1〜2枚(調理例など食欲をそそるもの)
  • 商品の表面の質感など(商品のしっかり感を伝える)
  • 内容量の分かる写真(商品名にグラム表示をすれば、併せて量感が伝わる)
  • 届いた状態が分かる写真(小分け出来るかどうかなどを確認)
  • ギフト向けに梱包された写真(のし、包装、メッセージカードなど)

商品情報を順序良く理解できるレイアウト

商品ページは、全体を以下のような順序でレイアウトしています。

  • 商品写真
  • 商品キャッチコピー+商品名
  • 価格
  • 補足情報
  • 数量
  • カートに入れる

- - - - - - - - - -

  • スペック
  • レビュー

- - - - - - - - - -

  • 商品のこだわり

商品ページ全体

これは、以下のような流れで最終的に商品をカートに入れる際に、商品情報を順序よく理解することができるような考慮をしています。

大きな写真で求めているものに近いかどうかを判断 → 商品の種類や量など写真だけで伝わらない必須情報を確認する → 目的としているものが予算内かどうか判断する → 送料やギフト対応しているかなどを確認する → 数量を指定する → カートに入れる

買おうとしている商品のことがよくわからないのに数量やギフト対応可どうかを確認することはありません。確かに自分が求めている商品で、それが予算以内だと判断してから、数量を決め、カートに入れるという、自然な流れを取り入れました。

スペックやレビューといった情報は、商品によって情報量が異なったり、細かく見たい人・そうでない人など想定しきれいない性質があります。そういったことを考慮しページの下部へ設置しました。

楽天市場の管理画面『RMS』からトラッキング情報をよくご覧になる方はお分かりかと思いますが、商品を買い物かごに追加しているユーザは閲覧ページ数が多めです。本気で商品を購入しようとしているときは、より良い商品を探すため、多くのページを確認します。そうした中で、ページによって長さが違うことによるストレスを低減するためです。


大手モール向けの商品データを活用できる

本店サイトへ出店する店舗様は、既に大手ECモールへ出店しているケースが多いと考えています。つまり、大手モールの商品データやデザインを流用することができれば本店サイトの構築スピードが高まります。

大手ECモールの商品ページのデザインは大きく分けて、商品訴求をするために大きな写真やキャッチコピー等を多用した縦幅の長いコンテンツと、賞味期限や原材料・その他スペック情報を記載した詳細情報の、二つのエリアに分けられます。

これらを、HTMLを書き換えたりせずそのまま流し込めるよう、横幅はサイトの横幅いっぱいまで、縦幅は無制限に使えるようにレイアウトを考慮しました。


商品ページ内で送料が分かる

ユーザは商品そのものが良いものかを最も気にするのは当然ですが、その次に送料をとても気にすることがネットアンケートでわかりました。

ギフト注文時の不安事項
└ギフト注文時の不安について

送料についての情報は『支払・送料について』というページへまとめられているのが一般的ですが、一旦別のページヘ移動させてしまうというのは離脱の原因にもなり、『支払・送料について』というページが存在するのを知っていることが前提となってしまいます。

そこで、各商品ページ内に送料を記述できるエリアを設けました。

スペックテーブル送料
└下から3段目が送料

食品のショップの場合は商品の入れ替わりや商品点数がそれほど多くないことが予想されますので、全商品手作業でメンテナンスすることを想定しています。一度登録してしまえば、ユーザにとっての使い勝手は高まることになります。

もちろん、グローバルナビの中に、送料に関するページヘ遷移するためのリンクも用意しています。


他の商品も見たいと思った時に使える『おすすめ商品』

商品ページ下部、フッタの上には、おすすめ商品エリアを設けました。一般的にはレコメンドエンジンを利用して自動運用をされたいかと思われますが、ここは手動での運用を想定しています。

おすすめ商品

商品点数が100〜300程度を想定しているので、システムに任せるよりも、商品のことをよく知っている『店長さんセレクト』で時期などに応じて最適な商品をおすすめすべきと考えました。

また、ジャンルごとに商品を紹介できるよう、右上にジャンル切り替えのリンクも設置できるように作られています(すき焼き|しゃぶしゃぶ…と書かれている部分)。


次回は、ギフト商品を紹介するページを詳細に解説していきたいと思います。

  1. 制作の流れ紹介編
  2. ヘッダ解説編
  3. 商品ページ解説編 ← 今回はここ
  4. ギフト紹介ページ解説編
  5. トップページ・その他解説編
このエントリーをはてなブックマークに追加

おかいもの研究室のサービスに関して
お気軽にお問い合わせください

▲ ページ先頭へ