UIの視点から見るLOHACOアプリの特徴

Pocket

Yahoo!と文房具メーカーのASKUL(アスクル)が業務・資本提携した、インターネット通販サービス『LOHACO(ロハコ)』は近年急成長を遂げているECサイトの一つだ。
そんなLOHACOのアプリは、他のECサイトにない珍しいUIをしているので、是非本稿で紹介したい。

キュレーションサイトに寄せたECサイトの新しいUI

LOHACOアプリを見れば分かると思うが、最大の特長は「iemo(イエモ)」などのようなデザイン性の高いキュレーションサイトに寄せていることだ。
キュレーションサイトといえば、ユーザー自らが情報を取捨選択することで、オリジナルのコンテンツが簡単にできるものである。
前述した家具・インテリア系の「iemo(イエモ)」をはじめ、ニュース系なら「antenna(アンテナ)」、女性情報に特化した「MERY(メリー)」など幅広いジャンルのものが存在するが、全体を通してみると女性に向けたコンテンツが多いと言える。
おそらく両者のユーザー層がマッチしていることがデザインを寄せた要因と考えられる。

   null   null
【左:LOHACO 中:iemo 右:antenna】

スマホの場合、テキストでしっかり訴求するよりも1枚の画像だけのほうがユーザーに対して情報を伝えられるというケースもある。
ビジュアル面がしっかりしていれば、これは特に有効な手法といえる。
またそれぞれの特集ページはクリップができるようになっており、クリップしたページはメニューからいつでも見れるというのも嬉しい点だ。

UIの視点から見たLOHACOアプリの特徴

ヘッダー&フッターのデザイン

LOHACOアプリは、HOMEページとそれ以降の下層ページでヘッダーのアイコンが変わる。
ページによってヘッダーやフッターのデザインが変わってしまうと、UI的にわかりにくいため修正したほうがいいだろう。
ZOZOTOWNなどのようにヘッダーだけで無理にすべてのアイコンを表示するのではなく、フッターも含めて表示すると良い。
例えばこんな感じだ。ヘッダーは検索窓とカテゴリ一覧だけにし、商品を探すという行動に特化したコンテンツのみを置き、フッターにはHOMEやカートなどのアイコンを置けば、UI的により優れたサイトとなるはずだ。

またパンくずを表示しているが、スマホサイトでは不要なため外したほうがいいだろう。

遊び心のあるカテゴリページ

商品を探す際に、カテゴリから絞り込んでいって目的の商品を見つけるといった行動は誰しもがすることだ。
すべてのカテゴリが集約されているカテゴリ一覧では、ユーザーの探しやすさを意識したUI設計のため、多くのサイトではテキスト表記のみ、またはアイキャッチを入れた程度のシンプルなものが一般的である。
LOHACOも同様にシンプルレイアウトなのだが、これに「動き」をプラスしており、選ぶのが楽しくなるような遊び心のあるデザインがとても魅力的だ。

   null

上図のとおり、まずカテゴリをタップすると、選んだカテゴリが左上に固定配置され、下に関連したカテゴリが並ぶ。
このように動きを追加することで、ユーザーに商品を探すという楽しさを与えている。
また固定配置されたカテゴリの右側には、ランキングアイコンがあり人気商品をすぐにチェックしたいユーザーにとっては有り難い設計だ。

商品詳細

商品詳細ページはLOHACOらしいデザインと見やすい情報設計で好感がもてる。
カートボタンが邪魔にならない程度の高さでページ下部に常時表示されていたり、
連動しているTポイントをしっかり表示しているのもユーザーにとって嬉しい点である。

さらに以下の点を考慮できるとより良いサイトになるはずだ。

  • LOHACOに掲載されている商品を見ると
    ミネラルウォーター、お茶、ティッシュにおむつなど日用品が目立つ。
    日用品であれば、まとめて購入されるというユーザーが想定できるため、
    商品詳細上で数量選択ができるようにすると、使いやすさが向上するだろう。
  • 現状レコメンドの下に口コミという設計になっているが、
    ユーザー心理を考えると、これは逆である。
    その商品が気になって商品詳細に訪れているのだから、
    まずは商品に直接的に関わる情報を見せるべきだ。
    レコメンドはあくまでもその次である。
    セグメントごとに持つ役割をしっかりと把握をして、ページ構成を考えることが重要なのだ。
  • Pocket

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

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

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

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

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

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

    【弊社実績一例】



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

    コメントをどうぞ

    *