スマホECの商品一覧ページ、カート・確認画面の商品画像表示

Pocket

従来の『LINE@』は飲食店やアパレル店などリアル店舗向けの集客ツールでしたが、刷新により法人・個人問わず利用可能になりました。これまでのEC企業のLINE活用といえば公式アカウントからの情報発信で、アカウント開設や運営のための予算を考えると大手企業のみの利用でしたが、『LINE@』の活用ができる可能性もあるかもしれません。

1.商品一覧ページのユーザビリティ
2.カート・確認画面の商品画像表示

[1]商品一覧ページのユーザビリティ

ECサイトでユーザーが商品を購入する場合、ほぼ商品一覧ページを経由します。詳細ページへ直接流入し、そのまま購入に至る時やピックアップ商品などから直接詳細ページへ遷移する場合もありますが、一般的にユーザーの遷移は一覧ページを経由するほうが多いと思います。そう考えると一覧ページの構成は非常に重要ですがどのような商品一覧画面が適切なのか各サイトごとに見たいと思います。

(1-1)なんでも酒やカクヤス:酒屋通販

「なんでも酒やカクヤス」で売られている商品はユーザーがどのような商品か知っている場合も多くあると思います。例えばビールカテゴリーから商品一覧へ進むと、「アサヒスーパードライ350ml缶」が表示されますが、それはユーザーがどのような商品なのか十分に知っている商品です。普段の生活の中で「アサヒスーパードライ」を飲んでいる人が購入するので、ユーザーは商品詳細ページで内容を吟味しないでもよいのです。数量を選択すれば購入ができます。

それを設計時に十分に理解したために商品一覧画面から数量選択とカート追加が可能です。商品詳細ページは商品の情報を確認し、購入判断をするための情報を得ることが目的だとすると、「カクヤス」ユーザーには必要がない場合もあるので、このようなショートカットの遷移を用意しているのはユーザー心理に合致した正しい導線だと考えられます。そうではないユーザー向けに詳細ページへ進む遷移もあり、ケースごとにカバーしている点はユーザーの行動をよく考えています。

図1_20150214

ただファーストビューに商品が見えていないのは残念です。すべてのページに共通しているナビゲーションや絞り込みメニューの表示が広過ぎるのではないかと感じます。また一覧ページの1ページに掲載している商品数が16件であるのも改善の余地があるでしょう。10件がガラケー時代の表示件数ですからスマホではもっと表示するのが正しいです。

データベースの負荷等にもよりますが30件などでもよいと思いますし、60件や120件等をユーザーに選択させているスマホサイトもあります。(例:ZOZOTOWN)

(1-2)東急ハンズネットストア:総合通販

「東急ハンズネットストア」の商品一覧はページ上部を整理することによりファーストビューに2商品まで表示されています。そもそも商品一覧というのはユーザーが自分の意思で希望するカテゴリーを選択、またはフリーワードを検索して流入しているので少しでも早く自分の希望に合致する商品があるのかを知りたいと考えています。その場合、ファーストビューに商品が表示されているのが正しい設計となります。

「東急ハンズ」で売られている商品は「カクヤス」の商品とは違って念入りに商品説明を読み、理解する必要があるので詳細ページをショートカットする導線はありません。価格の上限と下限設定や表示件数指定(最大120件)などの絞り込み指定は開閉式のメニューを採用することにより表示スペースを少なくしファーストビューに商品を表示できるようにしています。値引きやユーザー評価等のないサイトということもあり、一覧画面の表示はすっきりしています。

(1-3)ブングショップ.com:文房具通販

文房具ネット通販「ブングショップ.com」では「カクヤス」と同じように商品詳細ページの説明を読まないでも商品を購入できる商品が多いため、商品一覧からカートへ入れることのできる導線が設置されています。知っている商品であるにもかかわらず必ず詳細ページを読まないといけないというのはタップ数を増やすという視点でユーザーにとって不便な場合もあります。ただ「カクヤス」とは違い「ブングショップ.com」では商品ごとにカートへ入れるメニューがあるのではなく、商品一覧ページで商品ごとに数量を選択して、数量選択をした商品を一度にカートに入れることができる仕様です。

図2_20150214

個人購入も可能なサイトですが、この使い方は恐らく会社の事務担当さんが「ペンタイプ修正液を20本」、「はがき用修正液を25本」等を購入するシーンを想像します。改善点としては数量選択の表示が非常に小さくタップしにくいだけではなく、文字入力によって指定しないといけないのが不親切です。さらにはタップすると数字指定がされていないので入力切替をしないといけないのは手間です。正しくはプルダウンによる数字指定です。

[2]カート・確認画面の工夫

ECサイトではカート画面や注文確認画面でも商品サムネイル画像を表示するようにしましょう。商品画像を商品詳細まで表示するのはイメージしやすいと思いますが、重要なのは購入に至ることなので、カートに商品を入れたテンションを完了まで維持する必要があります。商品画像をカートや確認画面に表示することにより買おうとしている直前の商品が間違っていないか心配するユーザーを安心させることができ、ユーザーの購入意欲を保つことに繋がります。商品名だけや購入予定金額だけの表示ではユーザーは不安になってしまい、購入に至らないケースがあるかもしれません。

カタログ通販「ベルーナ」ではカートにも確認画面にも商品画像が表示されており自然な仕様です。確認画面では最上部に「この内容で注文する」ボタンが大きく表示されています。ユーザーによっては商品画像は見ないでも早く購入完了をしたい人もいるので、その場合に応じるために最上部に注文完了ボタンを設置しています。しっかりと注文内容を確認したい場合は、注文金額合計や支払方法、お届け先住所等と合わせて購入予定の商品を画像で確認し、間違っていないことを確認します。それによって、安心した気持ちで注文完了ボタンをタップすることになるでしょう。

一方、北欧系インテリア通販「NOCE」(ノーチェ)ではカートには商品画像が表示されているのですが注文確認画面にはありません。せっかく確認画面まで進んだユーザーが商品画像がないことにより不安になってしまっては勿体ないと思います。「NOCE」の注文確認画面ではユーザーにとって不要な情報である「商品コード」(数字の羅列)が表示されています。確認画面でユーザーが「商品コード」を確認するケースは考えにくいので、ここは商品画像の表示に改善したほうがよいでしょう。

図3_20150214

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*