スマホECユーザビリティの極意:fifth

Pocket

女性向けアパレルEC「fifth」(運営:株式会社CODE SHARE)はパソコンサイトや従来のモバイルサイト設計とは明らかに違うスマホのユーザビリティを追求しています。

モバイルのファーストビューを再定義する

fifthスマホサイトでは表示領域の半分以上を一枚のブランド写真が埋めています。

 

img01-0710

 

従来のモバイルサイト設計ではファーストビューが命題で一切の無駄を排除し、一瞬でユーザーが何ができるサイトなのか伝える必要がありました。利用シーンや表示領域を理由にパソコンサイトと比較してモバイルは離脱が多いためにユーザー利益(3,000円以上で送料無料etc)、信頼性(○○のオフィシャルECですとテキストで書くetc)を狭い表示に詰め込んでいました。それに対してスマホは通信速度、操作性、表示容量の向上を背景にビジュアル豊かに画像を並べて上下スクロールによってサイトの世界観を伝えるファーストビュー設計もあります。

 

言ってみれば「もっとも伝えたいこと」はファーストビューで必ずしも伝える必要はなく、ビジュアル訴求による世界観の伝達を優先し、「面白そう」「楽しそう」「欲しい商品がありそう」とサイトに期待させることが重要になっているケースがあるということだと考えます。

 

操作説明を熟読しないでもかんたんに使い始めることができるスマホアプリがよいのと同じように購入フローやポリシーページ以外ではスマホユーザーは一字一句テキストは読まず、自分の感覚に従ってページを送ります。

 

fifthの場合、商品の価格帯も比較的安価なので10~20代女性が世代別のメインだと想定すると、日常生活ではスマホしか経験しないユーザーも少なくないと思います。

 

そのためスマホに特化したユーザビリティの追求ができるというのもありますし、アパレルだから写真訴求が有効というのもありますが従来のファーストビュー思想にとらわれずスマホECのファーストビューを再考するタイミングなのかもしれません。

 

影が薄いフリーワード検索&カテゴリ検索

fifthではフリーワード検索やカテゴリ検索は目立たない位置にあります。

 

img02-0710

 

フリーワード検索は従来のサイト設計ではファーストビューに配置することが多く、カテゴリ検索も比較的上位に配置し、ユーザーが欲しいと思うワードや商品カテゴリーをユーザー自身の意思に従って絞り込んでいくフローが一般的です。ユーザーが欲しいと思うものはすぐにユーザーに探して貰うための設計でした。

 

今までそれが使い慣れた導線だった訳ですが当然ながらユーザーに考えさせる時間が必ず発生するフローでもあると言えます。一瞬でもユーザーは脳みそを動かして文字入力をしたり、カテゴリーを掘り下げていたのですが、写真を大きく見せることにより「かわいい」、「これが欲しい」と感覚的にブランドや商品を伝えるようにしています。

 

「直感的」がスマートデバイスのキーワードだとすると思考させるよりも感覚で伝えるほうがスマホユーザーに合致する訴求になります。そのためfifthではフリーワード検索はタップして出てくるサイドメニュー欄に、カテゴリー検索はサイトの最下部に配置し存在感のややない配置にしています。また別の視点ではページを遷移するよりもページをスクロールしたほうが興味が長続きするという点も考えられます。

 

横にスライドすると別メニューを表示する

新着商品やランキング、予約受付商品などをTOPページのタブで切り替えて表示します。

 

img03-0710

 

ここもスマホらしい工夫のひとつで横にスライドする(フリック操作)は多くのスマホサイトで実装されている表現なのでユーザーも違和感なく操作できるのだと考えられます。従来のモバイルサイト設計では「情報は隠さない」ことが鉄則でした。例えば新着商品の表示場所の下にランキングを縦に表示することが自然でしたがfifthではTOPページには表示されていない商品を横スライドで出す点が斬新なユーザビリティです。

 

小さなキャンペーンバナーや商品を横スライドで表現することは別のスマホサイトでもよく見ますがメニュー全体をスライドで表示するのは新しく、数値的な効果は検証が必要だと思いますが、新しさを追求する点で高評価です。スライドできることに気付かないかもしれないリスクに対しては案内文を出すことによりアナウンスしているのは親切ですね。

 

サイト名で検索するユーザーとブランド名で検索するユーザーどちらにも対策

fifthはスマホECの新しいユーザビリティを研究している成果だと感じ評価できますが、一方で他の多くのスマホECとは異なったメニュー配置なので商品に早くたどり着きたいユーザーは「ブランド世界観や商品の魅力の伝達」のための画像ばかりの容量のあるTOPページにはストレスを感じる場合もあるかもしれません。

 

しかし考えてみると目当てのブランドの商品を探そうと思っている場合には「fifth」とサイト名で検索するのではなく例えば「ECURY」(ブランド名)でGoogle等で検索をすることが多いと想像します。

 

「ECURY」でGoogle検索をすると第一位に表示されるのがfifthのECURYページでSEOへの対策も十分です。そして「ECURY」ページは新しさを追求したユーザビリティではなく迷いにくい一般的な構成です。「fifth」と検索したユーザーにはfifthTOPページで期待感を創出し、それに対してブランドが決まっているユーザーには早く商品に到達できるために一般的な構成にしている点は考えられています。

 

ユーザーのスクロールに合わせた固定ナビゲーションの工夫

fifthはスクロールを多用して上下移動するサイト設計ですがナビゲーションメニューが常に固定表示されています。

 

img04-0710

 

もしこの固定ナビゲーションがなく、スクロールで移動して、上のほうにあった「お気に入り」や「カート」に戻るためにまたスクロールをし直すというのでは面倒です。写真を多く、すばやく一枚の画面で見せるためのスクロール重視にしていますが、どこを見ていてもユーザーが必要とするメニューは固定で配置することで自然な導線になっています。またユニークなのはTOP途中にある「NEW」、「RANKING」などのメニューもスクロールをずっと下げていくと固定される点です。TOPページが長いので導線を確保するためにユーザーのスクロール動作に合わせて固定メニュー化するのは新しい取り組みです。

 

商品詳細ページでも新しいユーザビリティを追求

詳細ページで驚くのは着用イメージの充実です。スマホの表示領域につき、おおよそ一枚の大きな写真を10枚近く1商品で表示することによりユーザーに商品イメージを正しく伝え、結果的に購入キャンセルを削減する間接的な理由にもなるはずです。

 

img05-0710

 

また固定ナビゲーションは商品詳細ページでも実装されています。「着用イメージ」、「素材・サイズ」、「レビュー」、「コーディネイトアイテム」が詳細ページ内で固定化され、また横スライドで移動できる点も新しいと思います。

 

まとめ

10代や20代女性をメインターゲットとしたサイトであるため横スライドや欲しいと思わせる写真の多様を実践できるという点もありますし、そもそもアパレルECであるから写真が売上に繋がる重要要素になるので、すべてのスマホサイトで該当するユーザビリティではないと思います。しかしファーストビューの視点や商品詳細ページでの魅力の伝え方は商材に関わらずスマホで商売するサイトには参考になる点も少なくないと思います。何より従来の設計の常識にとらわれない新しい発想に基づくサイト設計だと考えます。

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*