スマホECのサイズ・カラー・在庫表示

Pocket

今回はスマホECの商品詳細ページにおけるサイズ・カラーの選択と在庫表示のユーザビリティを勉強したいと思います。購入フローに入る直前の操作なのでお客様を迷わせないことが重要です。興味半分に商品詳細ページまで到達したお客様をスムーズな導線で購入フローに案内することが求められます。各サイトの事例を見ていきましょう。

<目次>
1-  サイズ・カラー・在庫表示の5事例
1-1 スニーカー通販「ヒラキ」
1-2 家具通販「ニトリ」
1-3 ネットモール「楽天」
1-4 テレビショッピング「はぴねすくらぶ」
1-5 ファッション通販「.st」
2-    設計上の重要な視点

1-   サイズ・カラー・在庫表示の5事例

1-1 スニーカー通販「ヒラキ」

「ヒラキ」はスマホECのユーザビリティを追求した独自の設計をしています。プルダウンで選択肢を隠さず、サイズ・カラー・在庫状況を俯瞰して確認できる好例です。まずユーザーは自分が欲しいカラーのボタンをタップします。このボタンのサイズ感はタップのしやすさと1画面に収まる大きさを考慮している丁度良いバランスです。1画面で自分が希望するカラーにおけるサイズパターンと在庫状況が見える点がスマホらしい工夫です。

欲しいカラーをタップすればそれが今買えるのか、買えないのかが瞬時に判明するのでスピード感のある購入判断が可能です。白色のスニーカーの在庫が無ければ、黒はどうか、赤はどうかとボタンを次々にタップするだけのシンプルな操作です。また在庫状況が図式化(在庫ありは●、在庫小は▲等)されているので情報が整理整頓されておりスマホユーザーの視線の移動を理解した設計だと感じます。

サイズはユーザーが選ぶ必要はなくサイト側が提供しているサイズを縦に並べて、ユーザーが選択した欲しいカラーの在庫があるのかどうかを確認できます。

img01_1130

1-2 家具通販「ニトリ」

選択可能な全パターンが詳細ページで一覧化されており、瞬間的に俯瞰して見ることが出来ます。プルダウンを用いて選択肢を隠すことなくサイズ、カラーを詳細ページで平面的に配置しているので感覚的な操作が出来る点が高評価です。

サイズとカラーは連動しておりベッドの「S(シングル)」選択時にはカラーは「ブラック」、「ホワイト」が選べる状態ですが、「D(ダブル)」では自動的に「ブラック」のみになります。選べない選択肢は自動的に非表示にする点は工夫の一つです。また選択肢のボタン表記は「S」、「D」とあり、それだけではどのような意味かユーザーには瞬時に分かりにくいと思いますがボタン上部にテキストで「シングル」、「ダブル」とフォローしています。

普段社内で使っている言葉として「シングル」のことを「S」と表記するのかもしれませんが消費者には伝わらない言葉です。自分達の業務の常識ではなく、お客様の立場を想像して表現しているので好感を持ちます。

1-3 ネットモール「楽天」

楽天では商品詳細ページ上にサイズとカラーの選択肢と在庫情報は表示していません。

img02_1130

詳細ページ上の「サイズ×カラーを選択」ボタンをタップした後に出てくる画面で掲載しています。そのボタンの上段でテキストによる商品説明をしていますので「サイズ×カラーを選択」ボタンをタップする時には既にユーザーはカラーとサイズの全種類を把握しているので操作に迷いは少ないでしょう。

つまり、このボタンを押した時に初めて商品のパターンを知る構成で無ければユーザーは迷わないということです。タップ後の画面では大きな項目でカラーを表示し、その中で各サイズごとの在庫状況を表示します。在庫がある商品は選択が可能、在庫がない商品はタップができない仕様になっているので親切です。

在庫状況は図式で表していますがスニーカー通販「ヒラキ」とは異なり表形式ではないので画面が長くなる傾向があります。選択画面が1画面に入らないことに対して多少使いづらさを感じるユーザーはいるかもしれませんがプルダウンで情報を隠す構成よりは便利なのでユーザビリティ視点では参考になる点も多いと思います。

1-4 テレビショッピング「はぴねすくらぶ」

ファッション商品ではカラーとサイズをどちらもプルダウンを開いて選択することが求められます。商品説明欄でどのような商品パターンがあるのか記載しているのでプルダウンを開いて初めてパターンを知る訳ではありませんが「▼お選びください」をタップしないといけない操作はタップ数を増やすことになります。

スマホWebのユーザビリティの基本はタップ数を極限まで減らすことです。その視点で見れば改善したほうがポイントです。在庫状況はプルダウン選択時には分かりません。購入手続きに進もうと「カートに入れる」ボタンを押すと「ご注文の個数はご用意できません」とページ上段にメッセージが表示されます。

「カートに入れる」ボタンを押下しているというのは購入する気になっている証なので、その後に買えないことが分かるのは失望感が大きく即離脱に繋がるでしょう。「カートに入れる」ボタンを押した時には買えると思って進んでいるので商品詳細ページで在庫状況が分かるのが正しいユーザビリティです。

1-5 ファッション通販「.st

商品詳細ページで提供しているサイズとカラーをテキストで書いています。ユーザーはどのような選択肢があるのか瞬間的に把握できます。プルダウンを開かないでも全パターンを理解できるのは親切な表記ではあるものの、一方で在庫状況はプルダウンを開かないと分からないのは不便に感じます。

プルダウン内は表現できる領域が狭いために本サイトのようにカラーとサイズと金額と在庫状況を一行に示すのは伝わりにくいと思います。購入決定に至る重要な判断材料である在庫情報が途中で切れてしまうこともあると思います。評価できるポイントは「残りわずか」のような曖昧にした表現ではなく「残り3点」、「残り4点」と数を具体的に表記している点です。購入を急かす作用があると思います。

本サイトは商品テイストから考えると比較的ユーザー層は若いため具体的な件数表示は感情を煽ることに繋がり易い傾向があるのかもしれません。

2-   設計上の重要な視点

事例で見てきたようにサイズ・カラー・在庫のユーザビリティの重要な視点はお客様が選択できる商品の全パターンを俯瞰して1画面で見えることです。プルダウンで情報を隠すことはしないでください。タップをしないと何を選択できるか分からないのは不便です。不便さを感じたらスマホユーザーはすぐに離脱して別のサイトに行ってしまいます。在庫はサイズとカラーを選択したら即把握できることが必要です。スマホはスピード勝負です。別画面に行かないと在庫があるか分からないようではお客様は面倒くささを感じてしまいます。

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*