この記事をシェアする

大手ファッション系ECサイト「ZOZOTOWN」から見るユーザビリティの極意

サマーセールがにぎわい、秋服も出始めているこの頃、インターネットを使ってショッピングを楽しんでいる方も多いのではないでしょうか。

今回は、国内最大のファッション通販サイト「ZOZOTOWN(ゾゾタウン)」に、どのようなユーザビリティの工夫がされているのか、PCサイトとスマホサイトを比べながらご紹介します。

           <PCサイト>              <スマホサイト>

zozotown_top

公式サイト:http://zozo.jp/

ユーザーの負荷を下げる会員登録

ユーザビリティ向上にとって、ユーザーの負荷を最小化することは大切なポイントです。

ZOZOTOWNの会員登録には、その工夫が見られました。

住所の記入がいらない!

ZOZOTOWNでは、郵便番号だけ入力すれば、住所を記入せずに新規会員登録ができます。

           <PCサイト>               <スマホサイト>

zozotown_member

住所の記入がいらない会員登録

入力が面倒で、セキュリティ面でも心配な住所の記入は、ユーザーにとって負荷となります。

それを無くすことで、初めてサイトを利用する人でも、気軽に会員登録することができるようになっている点は、ユーザビリティの視点から見ても高評価です。

便利なナビゲーションメニュー

ナビゲーションメニューは、ユーザーがサイト内のページを行き来をサポートするため、ユーザビリティ向上において重要な役割を果たします。

限られた画面スペースの中で、コンテンツを邪魔することなく、便利なメニューをつくれるかどうかがポイントとなります。

          <PCサイト>               <スマホサイト>

zozotown_menu_pc_phone

ZOZOTOWNのナビゲーションメニュー

「ZOZOTOWN」では、アイコンやドロップダウンメニューを駆使して、PCサイトとスマホサイトそれぞれに適した、シンプルでわかりやすいナビゲーションメニューを実現しています。

見やすいアイコン

ユーザビリティを向上させるためには、ただ単にアイコンを配置するのではなく、それが誰にでもパッと見て直観的にわかりやすいものである必要があります。

PCサイト

ナビゲーションメニューには、ショップからのお知らせ・お気に入りの商品・カートに入れた商品という、3つの便利な機能がアイコンで表示されています。

zozotown_icon

便利な機能をアイコンで表示

アイコンだけでは何を意味するのか伝わらないため、カーソルを合わせたときに簡単な説明文が出てくるようになっています。

zozotown_icon_2

カーソルを合わせると表示される簡単な説明文

「詳しくはこちら」をクリックすると、さらに詳しい説明が見られます。

zozotown_icon_3

クリックすると表示される詳細な説明文

アイコンの説明文は、カーソルを合わせたときとクリックしたときで表示する内容を変えれば、簡単に知りたいユーザーと詳しく知りたいユーザー、それぞれのニーズに応えることができます。

ユーザビリティを向上させるためには、ユーザーの知りたい情報をタイミングよく提供することも心がけましょう。

スマホサイト

スマホサイトのナビゲーションメニューにも、カートのアイコンが表示されています。

zozotown_top_phone

トップに表示されたカート

また、カートに今いくつの商品が入っているのか数字が表示されることで、一目でわかるようになっている点も便利ですね。

アイコンを駆使しながら、カートや検索などよく使う項目はトップページに表示しているところも、ユーザビリティの向上につながっていると考えられます。

シンプルなメニュー

ショッピングをする際、トップスやスカートなどカテゴリを決めてから買い物する人も多いと思います。ウェブサイトにカテゴリ別に検索できる機能があると便利ですよね。

しかし、トップスの中でもTシャツ・パーカー・タンクトップなど洋服のカテゴリは実にたくさんあり、それを全てトップページに表示しては、見つけづらくなってしまいます。

ZOZOTOWNのウェブサイトのように、ドロップダウンメニューやスライドメニューを活用して、たくさんの情報をシンプルにまとめることで、ユーザビリティを向上できます。

PCサイト

トップページ左側にあるメニューでは、大まかに分類されたカテゴリが表示されています。

zozotown_category_pc

サイト左側のカテゴリメニュー

そして、詳しい分類はカーソルを合わせたときに表示することで、シンプルで見やすいナビゲーションメニューになっています。

zozotown_category_pc2

階層的なカテゴリメニュー

スマホサイト

トップページの下部だけでなく、ナビゲーションメニューにある三本線をクリックするとスライドして現れるメニューの中にもカテゴリ別検索が含まれています。

zozotown_slidemenu_phone

スライドして現れるメニュー

メニュー内の「カテゴリから探す」をクリックすると、全てのカテゴリが表示されます。

zozotown_slidemenu_category

メニューの中のカテゴリ別検索

スマホの画面スペースは特に限られていますが、スライドして現れるメニューにカテゴリ別検索があることにより、スクロールをたくさんする必要なく、見つけられて使いやすいです。

スクロールしても隠れない

「ZOZOTOWN」のナビゲーションメニューは、スクロールしても隠れずについてくるようになっています。

zozotown_scroll_pc

スクロールしても隠れないメニュー

画面の下部に移動して、サイト内検索をしたい、カートの中身を見たい、と思ったときに一番上のメニューまで戻るのは、面倒ですよね。

スクロールしてもメニューがついてくれば、どこからも使えて便利なため、ユーザビリティの向上につながります。

まとめ

このように日本最大のファッション通販サイト「ZOZOTOWN」は、ユーザビリティに考慮したサイト設計がなされています。

そして、そこからユーザビリティにおいて大切な以下のポイントがわかりました。

  • ユーザーの負荷を最小化する
  • ユーザーが直観的にわかりやすいアイコンを使う
  • ユーザーの知りたい情報をタイミングよく提供する

ユーザビリティの改善は、コンバージョン率アップやコストの削減に非常に有効なので、ぜひ皆さんも自社のサイトのユーザビリティを考えてみてください。

そうは言っても、どうしたらいいのかわからないという方は、「ユーザビリティ改善ツール」を活用して、簡単に改善するのがおすすめです。

WalkMe(ウォークミー)

この記事をシェアする

フォローする