Prototype - ECトップ

Toshiyuki　Kurashima
Web Designer & Coder
OVERVIEW

ECサイトのリニューアル改修提案の際にプロトタイプとして制作したものです。

YEAR 2020

| 課題 / 概要

■ 課題

現在運用中のサイトについては

  • カテゴリー階層が深くなっている所があり、何がどこにあるのかわかりにくい
  • モバイルサイトのグローバルナビゲーションの視認性に課題
  • FAQやお問い合わせなど商品ページ以外への誘導が若干不親切

等の課題があった

■ 概要

簡単なワイヤーフレームから実装したものなのでデザインに関しては詰めておりません。
RWDとして実装した際に注意した点としては

  • どのデバイスでもユーザーの方に負担なくご利用いただけるUIとなっているか
  • 見たいと思ったカテゴリーへの誘導がなされているか
  • 特にナビゲーションは改装が深いカテゴリーがあるのでユーザーの方の視点にたって制作できているか

この3点に注力して細かいデザイン面は抜きにして実装しています。

| 詳細

当初、Future shopデフォルトのナビゲーションを想定していたが、階層が深くなっていることもあり

  • メガメニュー
  • ドロップダウンメニュー

の2択が想定されたが、メガメニュー採用の場合メインビジュアルの視認性に影響があることを考えてグローバルナビゲーションを採用

グローバルナビゲーションはDesktop/tableの際とスマートフォンの際の表示を切り替え(PC/Tablet→ドロップダウンメニュー、SP→ハンバーガーメニュー)、
サイドバーはクリックで大分類から小分類までクリックでアコーディオンの動きを付加しています。

メインビジュアルはVegas.js、スライドはSlick.jsを利用した実装を行っています。

URL: http://nanamesoar.tokyo/

github URL: https://github.com/nanamestripe/proto-01

| 反応

商品分類が多くあり、一部の商材は分類が重複しているためユーザーのかたからは探している商品がわかりにくいといった声を頂戴していた。

結果、社内からは特集ページや商品への動線がわかりやすくなったとの声を頂いた。

WEBSITE