あるストアオーナーが、大手ブランドの洗練されたMega Menuを見て、それをそのまま自分のストアにコピーしてきます。問題は、そのストアが扱う商品はわずか20点なのに、メニューだけはまるで大規模なマーケットプレイスよりも賑やかになってしまうこと。逆の例もあります。何百ものカテゴリーを売っているのに、シンプルな横一列のメニューバー1本で済ませているストア。顧客は訪れてもあちこちスクロールするだけで、結局このストアが何を売っているのか掴めないまま離れていきます。
どちらも同じ間違いを犯しています。ストアが本当に必要としているものではなく、自分が見て気に入ったものを基準にメニューを選んでいるのです。すべてのストアにとって唯一最高のメニュータイプというものは存在しません。最適なShopifyメニュータイプの選び方は、商品が何点あるか、顧客がどう買い物をするか、そしてそのうち何割がスマートフォンを使っているかによって変わります。この記事は、私が数多くのストアを運営し、観察してきたなかで学んだことをまとめたものです。どのタイプが一番優れているかを伝えるためではなく、どれが自分のストアに合うのかを自分自身で見極められるようにするためのものです。
- メニュー選びは好みではなくストアの状況から始めます。
- モバイルとデスクトップでは異なる導線が必要なことが多いです。
- 良いメニューは明確な買い物の詰まりを1つ解決します。
メニューが思っている以上に重要な理由
メニューは、顧客が商品を見るよりも前に最初に触れる場所です。行き先が分からなければ、買ってもらえません。当たり前のことのように聞こえますが、これは多くの人が気にとめていないある数字と直結しています。
Baymard Instituteによれば、eコマースのカート放棄率は平均でおよそ70%。これは数十件もの調査から導かれた数値で、何年もその水準で安定しています。もちろんメニューだけが原因ではありませんが、一部の顧客は単に必要なものを十分な速さで見つけられなかったというだけで離れていきます。良いナビゲーションは売上を生み出しはしませんが、悪いナビゲーションは少しずつ売上を漏らしていきます。
もう一つ重要な点があります。今や多くのストアのトラフィックはスマートフォンからのものです。小さな画面でメニューを使うときの顧客のふるまいは、パソコンの場合とはまったく異なります。だからこそ、デスクトップでうまく機能するメニューがモバイルでも同じように機能するとは限りません。Navi+のようなツールがモバイルとデスクトップを別々に設定できるようにしているのは、1つのメニューに両方を兼ねさせるのではなく、このためなのです。
メニュータイプを決める4つの要素
各メニュータイプを見ていく前に、まず自分のストアについて4つの質問に答えてみてください。この4つの要素がほぼすべてを決めます。
- 商品数とカテゴリー数。 20点の商品を扱うストアと、2,000点の商品を扱うストアでは、必要な構造がまったく異なります。カテゴリーが多いほど、顧客が圧倒されることなくその奥行きを見渡せる仕組みが必要になります。
- モバイルとデスクトップの比率。 Google Analyticsを開いて、実際に確認してください。顧客の大半がスマートフォンなら、モバイルメニューが主役で、デスクトップは脇役です。
- 顧客の買い物の仕方。 何が欲しいかをはっきり分かっていてまっすぐそこへ向かうのか、それとも見て回って探すために来るのか。目的が明確な買い手にはショートカットが、見て回る人にはきっかけが必要です。
- ストアにとって最も重要なアクション。 どのストアにも、顧客に最もしてほしいことが1つあります。チャットを始める、カートを開く、プロモーションページへ飛ぶ、などです。そのアクションは常に手の届くところにあるべきです。
2つ目の要素については、もう少し補足する価値があります。Steven Hooberが1,300人以上のユーザーを対象に行った調査では、ほとんどの人が親指でスマートフォンを操作しており、親指が最も快適に届くのは画面の下半分であることが分かりました。だからこそ、画面下部に置かれたボタンやナビゲーションバーは、上の隅に押し込まれたものよりも多くタップされる傾向があります。
詳しく読む完全ガイドを読む → メニュータイプを決める4つの要素
各メニュータイプは、それぞれ1つの問題を解決する
どのメニュータイプも、特定の問題を解決するために生まれました。その問題を理解すれば、いつ使うべきかが分かります。
Mega Menuは、デスクトップで表示される横に広いドロップダウンで、多くのカテゴリーを一度に並べ、しばしば画像も添えます。カテゴリーが多く、その奥行きを見せる必要があるストアに向いています。しかし商品が少ないストアにとっては、Mega Menuはただ空白が目立ち、無駄に複雑に感じられるだけです。
Tab Barは、モバイル画面の下部に固定されるナビゲーションバーで、通常はホーム、カテゴリー、検索、カート、アカウントといった3〜5項目を並べます。親指が最も届きやすい場所にあり、常に表示されているので、顧客がわざわざ探す必要がありません。これはモバイルで最も信頼できるレイアウトの一つです。
Slide Menu（ハンバーガー）は、3本線のアイコンの裏にメニュー全体を隠し、タップするとパネルがスライドして開きます。利点は、すっきりしていて多くの項目を収められること。欠点は、すべてを隠してしまうことです。Nielsen Norman Groupは、ナビゲーションを隠すと顧客がそれを見つける頻度が目に見えて下がることを示しています。利用が減り、使うときも後回しになるのです。Slide Menuが間違いというわけではありませんが、最も重要な項目をそのなかに隠してはいけません。
FAB（Floating Action Button）は、たいてい下の隅に浮かぶ丸いボタンで、電話をかける、チャットする、プロモーションを開くなど、単一のアクションのためのものです。ストアが顧客にしてほしいことがちょうど1つだけのとき、強力に機能します。ただし、浮かぶボタンをいくつも重ねると、コンテンツを覆い隠してしまいます。
| メニュータイプ | 向いている場合 | 注意すべき場合 |
|---|---|---|
| Mega Menu | カテゴリーが多く、主にデスクトップ | 商品が少ないストア |
| Tab Bar | モバイルのトラフィックが多い | 5項目を超えて詰め込もうとするとき |
| Slide Menu | 補助的な項目が多く、すっきりさせたい | 重要な項目を隠すとき |
| FAB | 優先すべきアクションが1つ明確 | 浮かぶボタンを複数同時に置くとき |
詳しく読む完全ガイドを読む → 各メニュータイプを徹底解説：いつ使い、いつ使わないか
ストアの種類ごとにメニューを組み合わせる
実際には、ストアが1つのメニュータイプだけを使うことはほとんどありません。価値はそれらを組み合わせることにあります。そして、うまく組み合わせられるかどうかは、あなたのストアがどのグループに当てはまるかによって決まります。
カテゴリーの多いファッションストアは、デスクトップではMega Menuで商品ラインを並べ、モバイルではTab Barを使って顧客が常にカテゴリーとカートに手を届かせられるようにすることがよくあります。2つの異なる文脈に応える2つの異なるメニューですが、その下にあるカテゴリーのロジックは同じです。
商品が1つ、あるいは数点しかないストアはその逆です。Mega Menuは過剰です。すっきりしたデスクトップのメニューバーと、モバイルではチャットのFABがあれば、たいてい十分です。この種のストアにとって最も大切なのは、カテゴリーの階層をたどらせることではなく、質問に答えて販売を成立させることだからです。
数十点から数百点ほどの中規模ストアは、たいていその中間に落ち着きます。ほどほどのデスクトップメニュー、モバイルのTab Bar、そして場合によってはポリシー、ブログ、お問い合わせといった補助的な項目を収めるSlide Menuを加えます。基本的なルールは、顧客が頻繁に必要とするものは見えるところに置き、たまにしか必要としないものは隠す、ということです。
この組み合わせがコードに触れずに実現できるのは、各メニューを各画面ごとに独立して設定できるからです。Navi+なら、モバイル用のTab Barとデスクトップ用のMega Menuを同じ場所で、ドラッグ&ドロップで作れます。テーマの編集は不要です。
詳しく読む完全ガイドを読む → ストアの種類ごとにメニューを組み合わせる
最適なメニューを決めるためのプロセス
勘で選ぶのではなく、データから判断へと導いてくれるシンプルな手順があります。
- まず数字を見る。 Analyticsを開き、モバイルとデスクトップの比率、そして顧客が最も多く訪れるページを書き出します。これが憶測ではなく、あなたの土台になります。
- 顧客が頻繁に届く必要があるものを挙げる。 たいていは3〜5個だけです。それらがTab Barやメインメニューの候補になります。
- 補助的な項目を切り分ける。 ポリシー、ブログ、会社概要など。これらはSlide Menuやフッターに入れられます。貴重なスペースを取る必要はありません。
- 優先すべきアクションを1つ選ぶ。 顧客にしてほしいことが1つはっきりしているなら、FABを検討しましょう。
- 試して、測る。 メニューを入れたら、1〜2週間ほど様子を見て、顧客が期待したとおりにタップしているかを確かめます。
最後のステップは重要ですが、よく見落とされます。それは速度です。ページを遅くするメニューを追加すれば、得られるものよりも失うもののほうが大きくなります。GoogleはCore Web Vitalsの基準を推奨しています。LCPは2.5秒未満、INPは200ミリ秒未満、CLSは0.1未満です。読み込み時にレイアウトが飛び跳ね、ページをカクつかせる重いメニューは、それだけで良好なゾーンから外れる原因になります。メニュー作成ツールを選ぶときは、ページを遅くしないよう最適化されているかに注目してください。Navi+がメニューを軽く保つことに注力し、Built for Shopifyバッジを取得しているのは、まさにこのためです。
詳しく読む完全ガイドを読む → 最適なメニューを決めるための実践プロセス
どこから始めるか
ここから開始まずモバイル比率を確認し、顧客が最もよく使う3つの導線を書き出します。
何から手をつければいいか分からないなら、まず一番小さなことから始めましょう。Analyticsを開いてモバイルの比率を確認し、それから顧客が最も届く必要のある3つのことを書き出します。この2つの情報だけで、間違った選択肢のほとんどは除外できます。あとは試して調整していくだけです。
最初から完璧にしようとしないでください。メニューは、顧客が実際にストアをどう使うかにもとづいて、少しずつ磨いていくべきものです。あなたが想像するふるまいにもとづいてではなく。
結局のところ、良いメニューとは、顧客が決して意識しないものです。顧客がそれに気づくのは、邪魔になったときだけ。だから目指すべきは、美しく見えるメニューではなく、顧客が考えずに使えるメニューです。探しているものを見つけて、そのまま先へ進む。メニューが今まさに自分を助けてくれたことに気づきもせずに。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。