ほとんどのストアは、メニューを一度だけ — 開店のときに — 設定し、その後は何年もそのまま放置します。けれどもストアは止まっていません。カタログは増え、トラフィックは上がり、新しいコレクションを追加し、新しい市場を開拓します。それなのにメニューだけは開店初日のまま。ナビゲーションがストアの成長スピードに追いつけなくなると、商品も写真もそれ以外のすべてが以前より良くなっているのに、体験だけが少しずつ悪くなっていきます。
この記事のテーマはストアの段階別ナビゲーションです。同じストアでも、成長の各時点で必要なナビゲーションの種類は異なります。メニューは多ければ良いというものではなく、いつでも立派なメガメニューが必要なわけでもありません。大切なのは、自分のストアが今どの段階にいるのかを見極め、今のメニュー構造がそれにまだ合っているかどうかを確認することです。以下では3つの段階を、各段階で注意すべきサインとやるべきこととともに見ていきます。
- ナビゲーションは初期設定ではなくストアの段階に合わせます。
- 小さなカタログは簡潔さ、大きなカタログは構造と速度が必要です。
- カタログ、テーマ、市場が変わるたびにメニューを見直します。
ストアが成長するにつれて、なぜナビゲーションも変える必要があるのか
メニューは「一度設定すれば終わり」というものではありません。それは、買い手をホームページから本当に必要としている商品へと導く枠組みです。ストアに商品が10点しかないとき、その枠組みはとてもシンプルです。ところがストアに商品が10,000点、カテゴリが数十もあるとき、同じ古い枠組みでは買い手は道に迷ってしまいます。
注目すべきは、購入の意思決定のほとんどが、画面スペースの非常に限られたスマートフォンで行われるという点です。Steven Hoober の調査（Smashing Magazine が引用）によれば、ユーザーの約49%は片手でスマートフォンを持ち、主に親指で操作しています。親指がもっとも届きやすいのは画面の下半分 — だからこそ、画面下部のナビゲーションバー（タブバー）がモバイルでますます一般的になっているのです。
一方で、ナビゲーションを隠すことにもコストがあります。Nielsen Norman Group は、メインメニューを隠すこと（ハンバーガーメニューのように）は、ユーザーがナビゲーションを見つけにくくし、行動までの時間を長くし、サイトが使いにくいという感覚を強める、と結論づけています。これはハンバーガーメニューが間違いだという意味ではありません。メニューの表示方法にはそれぞれコストがあり、そのコストはストアの規模によって変わる、ということです。
これを理解すると、ナビゲーションを段階別に分けて考えることが、ずっとイメージしやすくなります。
段階1 — 新規ストア、小規模カタログ（商品50点未満）
この段階で最大の敵は、メニューが少なすぎることではなく、やりすぎることです。新規ストアはしばしば大手ブランドの構造を真似します。複数列のメガメニュー、何十ものサブ項目、入れ子になったドロップダウン。ストア全体でわずか30点しか商品がないのに、です。
カタログが小さいうちは、買い手に複雑な分類システムは必要ありません。必要なのは、数少ない主要な選択肢をすぐに見せ、できるだけ速くそこへ到達させることです。フラットで項目が少なく、分かりやすいメニューは、ほとんどの場合、多階層のメニューに勝ります。
この段階で心に留めておきたい原則をいくつか挙げます。
- メイン項目の数は最小限に抑える — 通常3〜5項目で十分です（例：商品、コレクション、会社概要、お問い合わせ）。
- デスクトップでは、多階層のドロップダウンに隠すのではなく、開いて表示されるメニューを優先する。
- モバイルでは、すべてをハンバーガーに詰め込むのではなく、もっとも重要な3〜4のアクション（ホーム、検索、カート、アカウント）のための画面下部のタブバーを検討する。
- まだ存在しないもののためにカテゴリを作らない。空っぽの「コレクション」項目は、買い手をがっかりさせるだけです。
目標は、買い手をできるだけ速く商品にたどり着かせ、ストアを整然と、そして実際の規模に正直に見せることです — コンテンツがまだ埋めていない構造を見栄えのために並べることではありません。
詳しく読む完全ガイドを読む → 段階1 — 新規ストア、小規模カタログ（商品50点未満）
段階2 — 成長中のストア（50〜500点）
ここは、多くのストアオーナーが気づかないうちにメニューが「きしみ始める」段階です。カタログはフラットなメニューでは支えきれないほどに増えましたが、アーキテクチャ全体を作り直さざるを得ないほど大きくはなっていません。この中間地帯がもっとも見落とされやすいのです。
よくあるサイン：新しいコレクションを次々と追加するものの、どこに置けばいいか分からず、すべてをどんどん長くなる一つの「商品」項目に積み上げてしまう。あるいは、買い手が必要なものを見つけるために、果てしないドロップダウンリストをスクロールしなければならない。この時点で、カテゴリのグループ化が必要になります。
そして、ここがデスクトップでメガメニューがその居場所を獲得し始めるときでもあります — 見栄えのためではなく、買い手にドロップダウンを一つずつ探させるのではなく、多くのカテゴリを列ごとに整理して一度に表示するためです。モバイルでは、タブバーが引き続きコアアクションを担い、カテゴリの閲覧は、明確にグループ分けされたスライドメニューの中に収めることができます。
この段階でカタログが拡大するにつれてやっておきたいことをいくつか挙げます。
- コレクションを、ストア内部の整理の仕方ではなく、買い手にとって意味のあるまとまり（製品ラインごと、シーンごと、対象者ごと）にグループ化する。
- カテゴリの数が、通常のドロップダウンで一目で伝えられる範囲を超えたら、デスクトップでメガメニューを検討する。
- モバイルとデスクトップの設定を分ける。ワイドな画面でうまくいくものが、狭い画面でうまくいくとは限らず、その逆もまた然りです。
- 速度に目を配る。メニューに項目、画像、ドロップダウンが増えるほど、ページを遅くするリスクが高まります — なぜこれが重要なのかは、次のセクションで説明します。
段階2は、本格的なメニューツールに投資すべきときです。なぜなら、カタログが増え続けるにつれて、編集の回数はずっと多くなるからです。
詳しく読む完全ガイドを読む → 段階2 — 成長中のストア（50〜500点）
段階3 — スケールしたストア（500点以上、カテゴリ15以上）
ストアがスケールすると、ナビゲーションはもはや利便性の問題ではなくなり、売上に直接影響します。数百から数千の商品が数十のカテゴリにまたがっている状態で、買い手が数秒以内に欲しいものを見つけられなければ、彼らは去っていきます。Baymard Institute によれば、Eコマースにおける平均カート放棄率はおよそ70%。分かりにくいナビゲーションは、その数字をさらに押し上げるだけです。
この規模になると、デスクトップでは複数列のメガメニューはほぼ必須であり、モバイルのタブバーは入念に考え抜く必要があります。なぜなら、通常モバイルトラフィックの方が大きな割合を占めるからです。この2つの環境には別々の設定が必要です — デスクトップのメニューを縮小して、それをモバイルメニューと呼ぶことはできません。
しかし、スケールした後の最大の問題は速度です。多くの画像と項目を持つ複雑なメニューは、不注意に作られていればページを遅くします。Google は Core Web Vitals を通じてページの読み込み体験を測定しており、その「良好」とされる基準は次のとおりです：LCP は2.5秒未満、INP は200ミリ秒未満、CLS は0.1未満。重いメニューは、この3つすべてを基準外へと押し出しかねません — 体験にもSEOにも悪影響を与えます。この段階では、ページを遅くする美しいメニューは、失敗したメニューです。
下の表は、各段階でナビゲーションのニーズがどう変わるかをまとめたものです。
| 段階 | 規模 | ナビゲーションの焦点 | 主なリスク |
|---|---|---|---|
| 1 — 新規ストア | 商品50点未満 | シンプル、フラット、商品まで速く | 複雑にしすぎること |
| 2 — 成長中 | 50〜500点 | カテゴリのグループ化、メガメニューの開始 | メニューが手に負えないほど膨らむこと |
| 3 — スケール | 500点以上 | メガメニュー、専用タブバー、速度の維持 | 重いメニューがページを遅くすること |
見落とされやすい点が一つあります。この規模になると、テーマを切り替えたときやカタログが変わり続けるときに、メニューが壊れないようにすることも必要です。ここで力を発揮するのが専用ツールです — Navi+ のように、モバイルとデスクトップを別々に設定でき、テーマを切り替えてもメニューをそのまま保ち、ページを遅くしないよう最適化されたツールは、多くの時間とリスクを節約してくれます。
詳しく読む完全ガイドを読む → 段階3 — スケールしたストア（500点以上、カテゴリ15以上）
いつメニューを見直すべきか — そして、スケールした後にアプリを乗り換えるとなぜ高くつくのか
「理想のメニューとはどんなものか」よりも実践的な問いは、「いつメニューに手を入れるべきか」です。メニューが一度に壊れることはめったにありません — ゆっくりと悪くなり、それに慣れきってしまって、もう問題が見えなくなるのです。
見直しどきを示すサインをいくつか挙げます。
- 新しいコレクションをまとめて追加したばかりで、メニューが雑然と見え始めている。
- データ上、モバイルユーザーがデスクトップユーザーよりはるかにメニューを使っていない。
- テーマの切り替え、新しい製品ラインの投入、新しい市場の開拓を控えている。
- ページ速度が落ちており、メニューがその一因ではないかと疑っている。
それ自体として取り上げておくべき落とし穴が一つあります。ストアがスケールした後にメニューアプリを乗り換えるのは、非常に高くつきます。ストアが小さいうちは、一つのアプリを外して別のアプリを入れるのに数分しかかかりません。ところが、丁寧に設定された数十のカテゴリを抱え、すべてがテーマとカタログに固く結びついた状態になると、別のツールへの移行はほぼゼロから作り直すことを意味します — しかも、繁忙期のまっただ中でインターフェースが壊れるリスクを伴って。
ストアに追加するアプリは、どれも速度に影響しうるものです。だからこそ、途中で入れ替えなければならないツールではなく、長く使い続けられるメニューツールを選ぶことを、早い段階で検討する価値があります。
詳しく読む完全ガイドを読む → いつメニューを見直すべきか — そして、スケールした後にアプリを乗り換えるとなぜ高くつくのか
どこから始めるか
段階を確認まず商品数とカテゴリ数を数え、商品まで何タップ必要かを確認します。
メニューを段階で考えたことがないなら、この2つのステップから始めれば十分です。一つ、自分のストアがどの段階にいるかを見極める — 勘ではなく、商品数とカテゴリ数にもとづいて。二つ、スマートフォンでストアを開き、初めて買い物をする見知らぬ客になったつもりで特定の商品を探してみて、何回タップが必要かを確かめる。
たいていは、これをやってみるだけで、今のメニューがまだストアに合っているかどうかがすぐに分かります。
ナビゲーションが「重要でない」段階など存在しません — 違いは、どれだけの複雑さが必要かだけです。小さなストアには無駄のないメニューが必要で、スケールしたストアには整理され、十分に速いメニューが必要です。3つの段階すべてで使えるツールを使えば、ストアが成長するたびにアプリを乗り換える必要がなくなります — そして、それこそが Navi+ の目指すところです。今日できることはシンプルです。自分のストアがどこにいるかを知り、それから、今のメニュー構成がまだそれに追いついているかを確認することです。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。