広告にお金を注ぎ込み、アクセスは安定して入ってくる。それなのに注文は伸びない。最初に思いつくのは、たいていランディングページの調整や、商品写真の差し替え、あるいは値下げでしょう。どれも検討する価値はあります。けれど、ほとんどの人が立ち止まって問わない疑問があります。訪問者は、本当に欲しい商品にたどり着けているのか？
ここで、ECストアのナビゲーションは、見た目以上にはるかに大きな役割を果たしています。ナビゲーションは、ページの上に貼り付けた飾りのレイヤーではありません。訪問者を「興味」から「カートに追加」のクリックまで運ぶ、その道筋そのものです。この道がでこぼこしていると、訪問者は文句を言いません。ただ静かに去っていくだけです。そして、その理由はレポートには表れません。去っていった人は、メモを残してくれないからです。
この記事では、同じ問題を4つの側面から見ていきます。訪問者がストアで実際にどう振る舞うか、ナビゲーションが売上をどちらの方向に引っ張るか、Shopifyで最も頻繁に現れる失敗、そしてボトルネックを解消するメニュータイプ。それぞれが独立しているので、どの順番から読んでも構いません。
- ナビゲーションは商品発見の最初のステップです。
- モバイルで親指が届くかどうかが、離脱を左右します。
- 適切なメニュータイプはカート前のタップ数を減らします。
ECストアで訪問者が実際にとる行動
あなたのストアにやってくる訪問者は、ストアオーナーであるあなたが自分のストアを動き回るようには動きません。あなたはどのカテゴリーがどこにあるか把握しています。訪問者は知りません。彼らはやってきて、数秒だけあたりを見回し、そして残るか去るかを、たった一つのシンプルな問いで判断します。「私が必要なものは、すぐ近くにあるか？」
いまや大半のアクセスはスマートフォンからです。多くの調査が、ECのアクセスの半分以上をモバイルが占めていると報告しています。これは訪問者の操作の仕方を変えます。スマホでは、たいてい片手で端末を持ち、親指で操作します。Steven Hoober の調査（UXmatters 掲載）は、1,300 件以上のインタラクションを観察し、そのほとんどが親指で行われていることを突き止めました。そこから生まれたのが「サムゾーン（親指の届く範囲）」という考え方です。画面の中央下部は最も届きやすく、一方で上の両隅は最も届きにくく、しばしば持ち方を変える必要があります。
問題は、多くのストアでメニューがちょうどその上隅 — 最も届きにくい場所 — に置かれていることです。カテゴリーを切り替えるには、訪問者は親指を伸ばすか、両手を使わなければなりません。そのたびに、わずかな摩擦が生まれます。そして摩擦が積み重なって、離脱につながるのです。
ここでよく誤解されることがあります。多くの人が、訪問者は迷ったら検索ボックスを探しに行くと信じています。実際には、そうとは限りません。Baymard Institute の調査では、ファッション系のストアにおいて、ほぼすべてのテストユーザーが検索ではなくメインメニューから始めていました。検索はあくまで予備の手段でした。数千の SKU を抱える大規模サイトでは、その割合はもっと均等になります。つまり、ほとんどの中小規模のストアにとって、いまだに玄関口はメニューであって、検索ボックスではないということです。
訪問者は親指で動き、数秒で判断し、道を見つけるためにメニューに頼る — これを理解すると、多くのデザイン上の選択が一気に腑に落ちてきます。
詳しく読む完全ガイドを読む → ECストアで訪問者が実際にとる行動
ナビゲーションが売上に与える影響
ナビゲーションは見た目の問題だと思いがちです。けれど、それはシンプルな連鎖を通じて、まっすぐお金につながっています。訪問者はまず商品を見つけなければ閲覧できず、閲覧しなければカートに追加できず、カートに追加しなければ購入手続きに進めません。各ステップで数人が脱落していきます。メニューは最初のステップです。最初のステップで漏れが起きれば、その後のすべてのステップでも人が失われていくのです。
ある基準となる数字が、この問題の規模を示してくれます。Baymard Institute によると、平均的なカート放棄率はおよそ 70% です。しかもこれは、とにかく何かをカートに入れることができた人だけの話です。その手前には、もっと大きな集団がいます。ストアには来たものの、カートに追加したくなるものを何一つ見つけられなかった人たちです。この集団はレポートにはほとんど見えませんが、損失の最大の割合を占めています。
ナビゲーションが静かに売上を蝕む経路はいくつかあります。
- 道のりが長すぎる。 商品にたどり着くまでに必要なタップが一つ増えるたびに、訪問者が離脱しうるポイントが生まれます。深いカタログに浅いメニューでは、訪問者は当て推量で進むしかありません。
- 訪問者が途中で迷う。 あるカテゴリーにたどり着いたものの、隣のカテゴリーへ移る手段が見当たらず、ホームページに戻るか、去ってしまいます。
- 端の商品が無駄になる。 メニューに載っていない商品は、ほとんど誰の目にも触れません。良い商品があるのに、埋もれているのです。
- 重いメニューでページが遅くなる。 かさばるナビゲーションは読み込み速度を引き下げます。そして速度はコンバージョンに直結します。
最後の点には、それだけで一言添える価値があります。Google は Core Web Vitals についてかなり明確な基準を設けています。LCP は 2.5 秒未満、INP は 200ms 未満、CLS は 0.1 未満。雑に作られたメニューは、読み込み中にレイアウトをずらしたり（CLS を押し上げる）、メインの描画を遅らせたりします。メニューが現れる前に、訪問者は辛抱を切らしてしまうのです。
良い知らせは、この段階でのコンバージョン率は、多くの人が思っているよりも弾力的であることが多いという点です。商品までの道のりを短くしたり、メニューを親指の届く範囲に持ってきたりするのに、価格や商品を変える必要はありません。それでも注文を後押しできるのです。
詳しく読む完全ガイドを読む → ナビゲーションが売上に与える影響
Shopifyストアでよくあるナビゲーションの失敗
ほとんどの Shopify ストアは、テーマに付属するデフォルトのメニューを使っています。テーマは見た目を整えてくれますが、あなた固有のカタログを訪問者に案内することまではしてくれません。だからこそ、いくつかの失敗が、ストアからストアへと繰り返し現れるのです。
すべての端末で、ナビゲーションをハンバーガーボタンの裏に隠してしまう。 ハンバーガーは見た目がすっきりしますが、選択肢を隠してしまいます。Nielsen Norman Group は、隠れたナビゲーションが訪問者の商品発見のしやすさを明らかに低下させること、そして隠れたメニューは見えているメニューよりもはるかに使われないこと、特にデスクトップでそれが顕著であることを突き止めました。訪問者は、見えないものをタップしません。彼らの助言は簡潔です。隠す必要がないなら、隠さないこと。
モバイルとデスクトップでメニューをそのままコピーする。 横長の画面に最適化された構造は、たいてい狭い画面に詰め込むと過剰になります。モバイルには、より少ない選択肢を、より下に、親指に近づけて配置する必要があります。
カテゴリーツリーが浅すぎる、または深すぎる。 浅すぎると、一つのカテゴリーに 100 個もの商品が詰め込まれ、訪問者は手が痛くなるまでスクロールすることになります。深すぎると、訪問者はたどり着くまでに 4 階層も 5 階層もタップしなければなりません。どちらも疲れます。
テーマを変えるたびにメニューが壊れる。 これは Shopify 特有の問題です。テーマを変えるとはナビゲーションをゼロから作り直すことを意味するため、多くのストアは、せっかくの労力が消えてしまうのを恐れて、最適化そのものを避けてしまいます。
ページを遅くするアプリを入れすぎる。 どのアプリも少しずつスクリプトを追加します。メニューもまたアプリの一つです。そしてそれが重ければ、Core Web Vitals を後ろへ引きずる一因になります。
これらの失敗に共通すること。どれも「エラー」としては表に出てきません。ストアはちゃんと動き、注文も入ります。ただ、一定数の訪問者を静かにせき止めているだけなのです。
詳しく読む完全ガイドを読む → Shopifyストアでよくあるナビゲーションの失敗
メニュータイプはナビゲーションのボトルネックをどう解消するか
すべてのストアにとって唯一「正しい」メニュータイプというものはありません。それぞれのタイプが異なるボトルネックを解消し、ほとんどのストアはいくつかの組み合わせを必要とします。モバイル用に一式、デスクトップ用に一式、というように。
下の表は、それぞれのタイプが何に最も向いているかをまとめたものです。
| メニュータイプ | 最も向いている用途 | 解消するボトルネック |
|---|---|---|
| Tab Bar（モバイル下部バー） | モバイル | 主要な動線をサムゾーンに持ってくる |
| Mega Menu（デスクトップ） | デスクトップ | 幅広いカタログ、多数のカテゴリーを一度に |
| Slide / Hamburger Menu | 両方 | 二次的なカテゴリーをすっきりまとめる |
| FAB（フローティングボタン） | モバイル | 重要な一つのアクションを常に手の届く範囲に |
| Grid Menu | 両方 | 画像つきでカテゴリーを視覚的に見せる |
モバイルでは、Tab Bar が特に注目に値します。これは重要な動線 — ホーム、カテゴリー、カート、アカウント — を、画面の上隅まで手を伸ばさせる代わりに、画面下部の届きやすいサムゾーンに配置します。Mega Menu はその対極で、デスクトップにおいて、訪問者に何階層もクリックさせることなく多くのカテゴリーの枝を並べたいときに向いています。
肝心なのは、一つのタイプを選ぶことではなく、モバイルとデスクトップのストアナビゲーションを別々に設定すべきだということです。ここで、メニュー専用に作られたツールが役立ちます。Navi+ なら、上記の5タイプ — Tab Bar、Mega Menu、Slide Menu、FAB、Grid Menu — をすべて、ドラッグ&ドロップで、コードなしに作ることができ、モバイルをデスクトップとは別に設定できます。テーマを変えてもメニューはそのまま残るので、ゼロから作り直す必要がありません。また、読み込み速度を後ろへ引きずらないよう最適化されています。これこそ、テーマの型にはめ込まれる代わりに、自分のカタログ構造に合わせて形づくれるShopifyメニューです。
詳しく読む完全ガイドを読む → メニュータイプはナビゲーションのボトルネックをどう解消するか
どこから始めるか
ストア全体をいますぐ作り直す必要はありません。ほんの小さなステップだけで、問題を見つけることができます。
- パソコンではなく、自分のスマホでストアを開く。
- 特定の商品を一つ選び、初めての訪問者になったつもりで探してみる。
- その商品ページにたどり着くまでに何回タップしたか数える。
- メインメニューが親指の届く範囲の内側にあるか、外側にあるかを確かめる。
- Google の Core Web Vitals ツールにストアをかけ、赤が出るものがないか見てみる。
簡単な確認スマートフォンでストアを開き、1つの商品を選び、そこに到達するまでのタップ数を数えます。
一つの商品を見つけるのに手数がかかりすぎたり、メニューが手の届きにくいところにあったりするなら、修正すべき具体的なものが見つかったということです。そしてそれはたいてい、広告にさらにお金を注ぎ込むよりもずっと安く済みます。
ナビゲーションは、一度設定したら終わりというものではありません。カタログは増え、流入元は移り変わり、訪問者の習慣も変わります。メニューも、それに合わせて見直す必要があります。最初に踏み出す、いちばん穏やかな一歩は、やはり上のテストです。スマホを手に取り、見知らぬ人を演じて、商品を探しに行ってみてください。たどり着くまでに何手かかったか。その答えは、たいていどんな分析レポートよりも多くを語ってくれます。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。