ストアが商品500点、カテゴリ15を超えると、状況の性質そのものが変わります。スケールしたストアのナビゲーションの課題は、もはや「どう整理して保つか」ではなく、「それぞれ異なる意図を持つ何千人もの買い物客が、数秒のうちに目当てのものを見つけられるようにどう手助けするか」になります。ここは私が自分でストアを運営していて最も苦労した段階なので、そこで学んだことを共有させてください。
ステージ3の姿
最もわかりやすい特徴は、大規模で多層的なカタログです。もう数個のフラットなカテゴリではなく、2〜3階層のツリー構造になります。トップグループがあり、その下にサブグループ、さらに属性での絞り込みが続きます。たとえばファッションショップなら、メンズ／レディース／キッズがあり、それぞれが「トップス／ボトムス／アクセサリー」に分かれ、さらにシーンや季節で細分化されていく、といった具合です。
トラフィックもより多様になります。Google検索から来る買い物客は、たいてい何が欲しいかをすでにわかっています。FacebookやTikTokの広告から来る買い物客は、ふと思い立って訪れ、商品をクリックしてから次にどうするかを決めることが多いものです。メールから来る買い物客はリピーターで、店内の勝手をよく知っています。流入元ごとに行動が異なり、メニューはこの三者すべてを同じインターフェースで満たさなければなりません。
この段階のストアの多くは、複数の市場・言語をまたいで販売してもいます。そしてスピードはもはや死活問題です。Googleによれば、Core Web Vitalsの良好なしきい値はLCPが2.5秒未満、INPが200ms未満、CLSが0.1未満です。アプリを1つインストールするたびにこの予算が削られていくため、ページを軽く保つには相応の規律が求められます。
この規模で求められるナビゲーション
スケールしたストアのナビゲーションには、シンプルなメニューバーだけでは不十分です。必要となるのは、たいてい次のようなものです。
- より複雑なメガメニュー: カテゴリツリー全体を配置するための複数カラム。注目商品や季節キャンペーンのバナーを置くスペースも確保します。
- 最適化されたモバイルナビゲーション: 注文の大半はスマートフォンから来るので、タッチ操作はスムーズで、指の届く範囲になければなりません。
- メニューのA/Bテスト: トラフィックが十分に大きくなったら、推測ではなく計測します。
- 季節CTA用のFAB: メニュー全体に手を加えることなく、いま実施中のキャンペーンを押し出すためのフローティングボタン。
マルチカラムのメガメニュー — そしてその限界
マルチカラムのメガメニューを使うと、買い物客はホバー1回でストア構造の全体を見渡せます。これは、スペースに余裕があり、カーソルも正確に操作できるデスクトップでは大きな利点です。
ただし、複数カラムにするということは、何もかも詰め込むということではありません。買い物客は画面を左から右へ、上から下へと走査するので、一番左の最初のカラムには最も重要なグループを置くべきです。注目商品やバナーは、視線が最後に到達する一番右のカラムに置くほうが、読みの流れの真ん中に押し込むよりたいてい理にかなっています。
モバイル — 注文が決まる場所
スマートフォンでは、親指がカーソルです。Steven Hoober（UXmatters）によれば、ほとんどのユーザーは片手でスマートフォンを持ち、親指で操作するため、最もタッチしやすいのは画面の下半分です。これが、すべてを画面上部のハンバーガーメニューに押し込むよりも、画面下部に固定したTab Barのほうがたいてい効果的である理由です。
Nielsen Norman Groupも、ナビゲーションをすべてハンバーガーの背後に隠してしまうと、買い物客がメニューを使う頻度が著しく下がると指摘しています。彼らが推奨するのは組み合わせです。重要なショートカットをいくつか前面に出し、残りはスライドメニューに収めるというものです。商品500点以上のストアにとって、この組み合わせはほぼ必須です。買い物客が自分からハンバーガーを開いてカタログを探索してくれることは期待できないからです。
いくつかの難しい判断
この規模になると、選択にもはや万能の答えはありません。私が天秤にかけなければならなかったことをいくつか挙げます。
メニューをペルソナ別に分けるべきか？ たとえば「自分用」と「ギフト用」を分けるといったことです。これは、二つの買い物客グループが本当に異なる考え方をしている場合には機能します。ギフトを買う人は、シーン、予算、贈る相手を気にかけます。しかし、買い物客がそもそも意識していないペルソナを押し付けてしまうと、迷いの層をもう一つ増やすだけです。判断する前に、サイト内検索のデータを見てください。
メガメニューに検索を組み込むべきか？ カタログが大きい場合、明確な意図を持つ買い物客が目的地にたどり着く最速の手段はたいてい検索です。検索ボックスをメガメニューの中、あるいはすぐ横に置くと、ブラウジングを好む人とタイピングを好む人の両方を満たせます。これはたいてい「やるべき」判断です。
メガメニューに注目商品を使うのはいつか？ 本当に押し出す価値のある商品があるときです。新着、強めのセール対象品、あるいはそのグループのベストセラーなどです。空きスペースを埋めるためだけに注目商品を置いてはいけません。理由のない画像ボックスは、メニューをかえって雑然とさせ、遅くします。
私が自分に課したルールがあります。メニューの中のすべての要素は、「これは買い物客が前に進むのを助けるのか、それとも単なる飾りなのか」という問いに答えられなければならない、というものです。
覚えておく価値のある基準が一つあります。Baymard Instituteによれば、平均的なカート放棄率はおよそ70%で、この数字は長年にわたってほとんど変わっていません。優れたナビゲーションでチェックアウトの段階を直すことはできませんが、雑然として遅く、検索しにくいメニューは、買い物客をごく早い段階で、カートに入れる機会を得る前にすら離脱させてしまいます。
Navi+での設定のヒント
この段階では、私はたいてい一つの共通設定を使うのではなく、デスクトップとモバイルを分けます。Navi+では二つの環境を独立して設定できるので、今こそそれを活かすときです。
デスクトップでは、フルのメガメニューを使います。カテゴリツリーを複数カラムにわたって配置し、1カラムを注目商品や季節バナー用に確保し、検索ボックスをメニューの中に直接置くことも検討します。Navi+はノーコードのドラッグ＆ドロップで動くので、新しい構造を試したいときにカラムレイアウトをかなり素早く変えられます。
モバイルでは、三つのレイヤーを組み合わせます。最も重要な4〜5の導線のために、画面下部に最適化されたTab Barを置きます。これは親指ゾーンにすっきり収まります。深く見て回りたい買い物客のために、カタログ全体を収めたSlide Menuを用意します。そして季節CTA用のFAB — たとえば「11.11セール」や「旧正月ギフト」など — をその時だけオンにし、終わったらメニューを作り直すことなくオフにします。
Navi+のメニューはテーマを変えてもそのまま残り、Core Web Vitalsを引きずり下ろさないよう最適化されているので、デザインを入れ替えるたびにゼロからやり直す心配をせずに、レイアウトをより自由に試せます。
周期的に計測し、見直す
大規模であることは、意味のある形で計測できることを意味します。アナリティクスを使って、どのメニュー項目がよくクリックされ、どれがほぼ死んでいるかを把握しましょう。トラフィックが十分にあれば、メニューのA/Bテストによって二つの選択肢 — たとえば注目商品ありのメガメニューと、なしのメガメニュー — を比較し、勘ではなく数字に判断を委ねられます。
多言語ストアでは、機械翻訳したメニューがレイアウトを崩すことがある点を覚えておいてください。ドイツ語はベトナム語より長く、右から左へ読む言語もあります。各言語版をそれぞれ独立した体験として確認しましょう。原語版がきれいだからといって、翻訳版もきれいだとは限りません。
最後に、定期的な見直しスケジュールを決めましょう。たとえば四半期ごとです。この段階のカタログは絶えず変化しており、半年前には筋が通っていたメニューが、今の商品構成とはすでにずれているかもしれません。ナビゲーションは、一度作ったら終わりという作業ではありません。
この記事は、より大きなガイドストア成長のすべてのステージに対応するナビゲーション — 商品10点から10,000点までの一部です。