ストアが50商品の節目を越えると、状況は変わり始めます。立ち上げ当初にお客様を案内していたやり方が、今では窮屈に感じられるようになります。成長期のストアが抱えるナビゲーションの課題がはっきりと見えてきます。それはもはや「メニューがあれば十分」という話ではなく、「そのメニューがお客様を十分な速さで正しい場所へ導けているか」という話なのです。
私はかつて、まさにこの段階を通り抜けたストアを運営していました。商品カタログは予想以上の速さで増え、古いメニュー構造が静かにボトルネックになっていきました。数字を見て、ようやくそれに気づいたのです。
ステージ2とはどんな状態か
最もわかりやすい兆候は、カタログが急速に拡大していくことです。ほぼ毎月のように新しいコレクションを追加していきます。シーズン別、製品ライン別、プロモーション別といった具合に。立ち上げ当初の、4つか5つの項目が並ぶフラットなメニューは、もはや手に余る状態です。
トラフィックも増えていきます。さらに重要なのは、実際の行動データが手に入り始めることです。お客様がどこから来て、何をクリックし、どこで離脱するのか。以前は推測するしかなかったものを、今は計測できるようになります。
そして、新しい層のお客様が現れます。リピーターです。彼らは過去に購入したことがあり、あなたが何を売っているかを知っていて、今回はより速く目的のものを見つけたいと思っています。初めて訪れる人ほど、じっくり見て回る忍耐を持ち合わせてはいません。もしメニューが手間取らせるようなら、以前は好きだったストアであっても、いらだちを覚えてしまうでしょう。
ナビゲーションをいつアップグレードすべきか
かなりはっきりとした兆候がいくつかあります。推測する必要はありません。数字を見ればよいのです。
- お客様が商品にたどり着くまでに3回以上クリックしなければならない。 クリックが1回増えるごとに、お客様があきらめる機会が生まれます。カテゴリの階層が深くなるほど商品までの経路は長くなり、各段階での離脱が積み重なっていきます。
- 検索の利用率が上がる。 検索ボックスを使う人が増えるのは、たいてい良い兆候ではありません。メニューが必要な場所へ導けていないために、お客様が自分で入力せざるを得なくなっているのです。検索はあくまで補助手段であって、メインの経路ではありません。
- カタログの拡大とともに直帰率がじわじわ上がる。 カタログが増えているのに離脱率も上がっている、という組み合わせは要注意です。根本的な原因は多くの場合、お客様が訪れても明確な経路が見えず、そのまま去ってしまうことにあります。
より広い文脈も心に留めておく価値があります。Baymard Instituteによれば、ECにおけるカート放棄率の平均はおよそ70%で、長年ほとんど変わっていません。メニューでそのすべてを解決できるわけではありませんが、こんがらがった経路がお客様をつなぎとめる助けにならないことは確かです。
成長期のストアに向けた、より明確な構造
この段階になると、ストアにはリンクの羅列ではなく、本当の意味での構造が必要になります。ここでメガメニューが意味を持ち始めます。
デスクトップでは、メガメニューを使うことで、いくつもの階層の奥に隠すのではなく、展開したパネル内に多くのカテゴリを一度に表示できます。お客様はひと目で全体像を把握できます。どんな製品ラインがあって、それがどうグループ分けされているのか。これは人間の目がページを走査する仕方に合っています。Nielsen Norman Groupは、ナビゲーションを隠すこと（アイコンの背後に完全に格納してしまう形式）は、見えているナビゲーションに比べてコンテンツの発見しやすさを低下させると指摘しており、この影響はモバイルよりもデスクトップでより強く表れます。
言い換えれば、広い画面では隠さないこと。見せること。メガメニューはまさにそのために作られたものです。
商品が50〜500ほどの段階であれば、まだ何列も詰め込んだメガメニューは必要ありません。2列のレイアウトでたいてい十分で、読みやすくもあります。目を引くいくつかのカテゴリには画像を添えることもできます。たとえばファッション系のショップが「新作コレクション」や「ベストセラー」の画像をメニューの中に直接置く、といった具合です。これは案内であると同時に、購入意欲をそそる役割も果たします。
モバイル：Tab Barが主要な行き先を、Slide Menuが残りを担う
日本のお客様の多くはスマートフォンで買い物をするため、モバイルが主戦場になります。そしてモバイルには独自の制約があります。画面が狭いこと、そして人々が片手でスマホを持っていることです。
親指で最も届きやすいのは画面の下3分の1あたり、いわゆるサムゾーンです。画面下部に配置されたナビゲーションバー（Tab Bar）がこれほど便利なのは、このためです。最も重要な行き先が常に親指の届く範囲にあり、上の隅まで手を伸ばす必要がありません。
この段階での役割分担としては、次のような分け方が理にかなっています。
- Tab Barは、4つか5つの主要な行き先を担い、常に画面下部に表示しておきます。ホーム、カテゴリ、検索、カート、アカウントなどです。これらはお客様が最も頻繁に戻ってくる場所なので、手の届くところに置いておきます。
- Slide Menuは、大きく膨らんだカタログを担います。何十ものカテゴリやサブカテゴリがあるとき、画面の端から開くスライドメニューなら、画面のスペースを常時占有することなく、階層立ててきれいに整理できます。
この2つは、互いに置き換えるものではなく、補完し合うものです。Tab Barはよく使う場所へのアクセスの速さを担い、Slide Menuはカタログの深さを担います。ここでもNielsen Norman Groupの原則が当てはまります。すべてをハンバーガーアイコンの背後に隠してしまわないこと。最も重要な経路は見えるように保ち、残りだけをスライドメニューに入れるのです。
メニュー分析を見始める
ステージ2と立ち上げ初期の大きな違いは、意思決定を下せるだけのデータが手元にあることです。今こそ、メニュー分析を本格的に追い始める時期です。
どのメニュー項目が多くクリックされ、どの項目がほとんど触れられていないかを見てみましょう。目立つ場所に置いたのに誰もクリックしないカテゴリは、名前が適切でないか、位置が悪いか、あるいはお客様がそもそも関心を持っていないのかもしれません。逆に、奥深くに埋もれているのに多くクリックされている項目は、もっと上に引き上げるべきだというサインです。
ショップの内部にいる誰かの勘でメニューを並べるのはやめましょう。お客様が実際に動く通りに並べるのです。メニュー分析は、その経路を可視化し、大がかりな全面刷新をするのではなく、少しずつ調整していくのを助けてくれます。
ツールを追加するときに一つ心に留めておきたいのが、ページの速度です。Googleによれば、Core Web Vitalsの「良好」とされる基準値は、LCPが2.5秒未満、INPが200ミリ秒未満、CLSが0.1未満です。メガメニューやスライドメニューも、重い作りにしてしまうと、これらの数値を悪化させかねません。ストアが大きくなるほど多くのアプリを入れる傾向があり、アプリそれぞれが読み込み時間を増やしうるので、メニューは軽く保ち、ページを遅くしないようにすべきです。
Navi+でのおすすめ構成
コードに一切触れたくないという場合、この段階のストアに合うと私が考える構成を、Navi+で組んだ例として挙げておきます。
- デスクトップ： 2列のMega Menuに、1つか2つの目立つカテゴリには画像を添える。ごちゃつかせずに、十分わかりやすく。
- モバイル： 画面下部に4つか5つの主要な行き先を並べるTab Barと、カテゴリツリー全体を収めるSlide Menuの組み合わせ。
- 計測： メニュー分析をオンにして、どの項目が使われているかを把握し、少しずつ微調整していく。
Navi+はモバイルとデスクトップを別々に設定できるので、一つのレイアウトで両方を無理にこなさせる必要はありません。メニューはドラッグ＆ドロップで操作でき、コードは不要で、テーマを変更してもそのまま維持されます。これは便利なポイントです。というのも、この段階のストアは見た目を切り替えることが多いからです。このツールはページを遅くしないよう最適化されており、「Built for Shopify」バッジも取得しています。
ステージ2で最も大切なのは、壮大なメニューを作ることではなく、明確で計測可能なメニューを作ることです。そうすれば、ストアがさらに成長したときに、すでに土台と、数字を見て前進し続ける習慣が備わっていることになります。
この記事は、より大きなガイドストアの成長段階ごとのナビゲーション設計 — 10商品から10,000商品までの一部です。