スマホECの新しいユーザビリティ

Pocket

「Amazonログイン&ペイメント」に注目しています。Amazonアカウントで他社ECサイトにログインし、支払いできるシステム連携です。サイト独自の会員登録は必要ありません。導入の結果、ECサイトの成約率が改善されるかもしれませんね。スマホにも実装されており「出前館」等のサイトでログインしてみましたが便利でした。

今回はzozotown、楽天市場のような最大手ECのユーザビリティとは一線を引き、独自のユーザビリティを追求するサイトを見ていきたいと思います。今回ピックアップするのは10代、20代女性向けファッションECです。取扱い商材がアパレルであることとターゲット層が若いから取り組める事例もあるかもしれませんがスマホらしい使い方を追求した新しい事例だと思いますので参考にしてみて下さい。

(1)TOPページに100点以上の商品掲載
(2)フリーワード検索は重要視しない検索導線
(3)ナビゲーションメニューの固定配置
(4)横スライドの活用
(5)商品詳細ページの訴求力

(1)TOPページに100点以上の商品掲載

ファッションEC「DHOLIC」はTOPページに数多くの商品を掲載しています。ユーザーはランキングやセールページ、カテゴリ検索等の各メニューから遷移するのではなくTOPページからダイレクトに商品詳細ページへ遷移することを狙っています。スクロールによる上下移動にユーザーが慣れていることと表示容量の制限が基本的にはないので実装できる取り組みです。多数の商品情報をTOPページに掲載することによりタップ数を減らす効果があります。

一般的に新着情報を確認する場合、複数の商品がTOPページに掲載されており、新着のリンクをタップすると該当の商品が新着ページに掲載されています。しかしDHOLICでは画面遷移数を減らすために「NEW ARRIVALS」は全て商品をTOPで表示します。デフォルト(初期表示)では6商品表示なのですが「もっと見る」をタップすると遷移することなくTOPページ上で6商品追加されます。さらに「もっと見る」をタップすると6商品追加され、最大78商品(6商品ずつ×13回)です。

「WEEKLY BEST」等他のコーナーも同様の作りなのでTOPページだけで100商品以上を掲載しています。これはスマホらしい新しい導線ですね。ユーザーが直感的に「かわいい」「かっこいい」と思うようにTOPページで訴求し一覧画面をたどることなく詳細ページ迄進めるようにしています。ページ遷移させるよりもスクロールを用いて遷移数を減らす新しい導線です。

図1-0630

(2)フリーワード検索は重要視しない導線

ファッションEC「fifth」のフリーワード検索はファーストビューにはなく一階層下のメニュー欄の中に影薄く配置されています。従来のモバイルサイトではフリーワード検索はTOPの最上位にありユーザーが商品名やブランド名を自分の意思で検索していましたがfifthではブランドの世界観を伝えるためにスマホの表示領域を最大限使って1枚のブランド画像を大きく表示しています。感覚的に商品やブランドをスクロールしながら探すということに注視した画面設計なのは明らかです。fifthでは商品の魅力を視覚的に訴え購買に繋げようとしています。

図2-0630

(3)ナビゲーションメニューの固定配置

TOPページに大量の商品が掲載されている「DHOLIC」ではTOPページの下のほうにスクロールすると「MENU」や「NEW」、「BEST」、「REVIEW」等のナビゲーションがサイト最上部に固定されます。

図3-0630

これはTOPページが長いのでユーザーが「あ、レビュー欄が見たい」、「あ、新着商品を見たい」等と思い立った時にすぐに移動できるように固定配置していると考えられます。つまりサイト回遊のしやすさを狙ったものです。ポイントは希望のカテゴリに移動できる「MENU」や新着情報の「NEW」が固定される点です。従来のモバイルサイトでナビゲーションメニューを固定化する場合、マイページや会員登録、ショッピングカート等のECサイトのメインメニューでしたが「DHOLIC」ではあくまでも商品コンテンツを優先しています。これも商品やブランドの魅力に触れて貰う機会を出来るだけ多く作ることを追求した設計だと思います。

(4)横スライドの活用

スマホECサイト一覧ページで表示を切り替えることができるのは一般的になりつつあります。左側に写真を掲載し、商品名や価格等の情報を右側に表示する形式と画像をパネル型に表示する形式の2種類を選択することが出来る構成が一般的です。zozotownや楽天市場スマホサイトでも実装されているので操作に慣れているユーザーも多いでしょう。「DHOLIC」では4種類選択出来ます。

商品名も価格もない形式の写真集パネル型と横スライドで1商品ずつ表示する形式が追加されています。一覧ページの商品を1商品ずつスライドさせることになるのでタップ数という視点では多くなりますがスライドは指の動きが一定するので利用シーンによっては扱いが楽になる場合もあるでしょうし一覧ページでありながらサムネイル画像ではないので画像が大きいという利点もあります。

「fifth」では次の商品画像を表示するための横スライド操作ではなくコーナー全体を横スライドで移動できる取り組みです。新着商品やランキング、予約受付商品などをTOPページのタブだけではなく、コーナー全体をスライドさせると表示が切り替わります。スライドが重くなるので実験的な取り組みなのかもしれませんがスマホECユーザビリティとして新しい取り組みだと評価出来ます。

従来のモバイルサイト設計では「情報は隠さない」ことが鉄則でした。モバイルの小さな表示領域にすべての情報を出すことが大切だったのですが横スライドに慣れたユーザーが違和感なく操作できる土壌があるので取り入れているのかもしれませんね。一般的なモバイルECのメニュー配置は新着商品を表示したその下に縦にランキングやカテゴリ検索を並べていましたがfifthではTOPページには表示されていないコーナーを横スライドで出しているのが斬新です。小さなキャンペーンバナーや商品を横スライドで表現することは別のスマホサイトでもよく見ますがメニュー全体をスライドで表示するのは新しいと思います。

(5)商品詳細ページの訴求力

「DHOLIC」では商品詳細ページの画像が極めて充実しています。従来のモバイルサイトでは「拡大」や「裏」等の固定画像やカラーバリエーションを表示していましたが「DHOLIC」ではファッション雑誌のようにクリエイティブな写真を掲載し、商品イメージを正しく伝わるようにしています。私が見た商品では20点以上の詳細画像がありました。ユーザーのイメージとギャップを無くすことになるので結果的にキャンセル率や返品率の減少の効果も想定でき、ビジネスに大きく繋がる工夫だと考えます。

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*