あるパワースポーツストアが、デスクトップとモバイルの両方でナビゲーションを どう見直したか、その小さな物語です。テーマも変えず、既存のアプリも外していません。
Turbo Powersports は ATV、スノーモービル、ジェットスキー向けの部品やアクセサリーを 販売しているお店で、カタログがとても広く、カテゴリーも何層にも分かれています。 お使いのテーマは、ヘッダーにシンプルなメニューバーと、モバイル用のハンバーガースライドメニューがあるだけでした。
はっきりとした問題が二つありました。
1. メガメニューがない — すべてのカテゴリーが、ヘッダーの短いドロップダウンの 奥に隠れていました。ストアに訪れたお客様には、お店が何を扱っているのかが見えず、 代表的な画像もなく、主要な商品グループをざっと眺める手段もありません。
2. スライドメニューが簡素で、階層が十分に表現できていない — テーマ標準の スライドメニューはありましたが、大きな項目を並べているだけで、これほど深いカタログには ふさわしい階層分けができていませんでした。
私は Turbo Powersports に、テーマを変えずレイアウトにも触れず、必要な場所に Navi+ のメニューを3つだけ差し込むことをご提案しました。それぞれのメニューが、 別々の役割を担います。
デスクトップでは、メガメニューを車両タイプ別（ATV / スノーモービル / ジェットスキー / UTV など）、 部品グループ別（Engine / Body / Wheels など）に分かりやすく列を分け、それぞれに代表的な画像を添えました。 お客様はマウスを乗せるだけで、ストア全体が広がるように見える — もう推測したり、試しにクリックしたりする必要はありません。
スライドメニューは、深いカタログの部分を担当します — 車両タイプごとの子グループ、 モデル別、製造年別と細かく辿っていけます。モバイルではハンバーガーを押すと開き、 ネイティブアプリのように階層をたどれます。デスクトップでは、ホバー式のメガメニューよりも リスト形式のナビゲーションが好きなお客様のための予備手段となります。
モバイル専用で、画面の下部に固定されます。それぞれのタブはただのナビゲーションリンクではなく、 カートパネル、検索パネル、スライドメニューをその場で開く役割も持ちます。 そのおかげでヘッダーはすっきり整理され、カートアイコン・検索アイコン・ハンバーガーをページ上部に 詰め込む必要がなくなりました — ヘッダーは見違えるほどシンプルになり、それでいて機能はそのまま残り、 親指の届く範囲に収まっています。
カテゴリーの構造が分かりやすく整理され、デスクトップでもモバイルでも漏れなく表示されるようになりました。 お客様は このストアには何があるのか、ブランドは何者なのか、探しているものはどこにあるのかを、 最初の一瞬で理解できます。
結果として、商品認知とブランド認知の課題、そして分かりやすく親しみやすい 新しいカテゴリー構造という課題を解決できました。テーマを変えることも、 稼働中のアプリを外すこともありませんでした。
Turbo Powersports ストアでの3つのメニューのウォークスルー
これらは Turbo Powersports に限らず、広く何層にも分かれたカタログを持つほとんどのストアに応用できるポイントです。