各メニュータイプの記事を読み終えても、最後の一歩でつまずく人は少なくありません。「では、うちのストアは結局どれを使えばいいのか?」という疑問です。その感覚はごく自然なものです。Tab Bar、Mega Menu、Slide Menuに関する理論は、自社の数字に当てはめて初めて役に立ちます。
この記事では、午後の数時間ほどで一通り進められる、5ステップのメニュー選定プロセスを紹介します。すべてのストアに当てはまる唯一の公式はありませんが、勘ではなく実際のデータをもとに判断するための進め方はあります。私自身、いくつかの小さなストアを運営し、何度か選択を誤った末にこの方法にたどり着きました。
ステップ1:自社のモバイルとデスクトップの比率を見る
「みんながモバイルが多数派だと言っている」という話を鵜呑みにしないでください。自分自身の数字を開いて、実際に確かめましょう。
Google Analytics(テクノロジー/デバイスのカテゴリー)またはShopify Analytics(デバイスタイプ別のオンラインストアセッション数)を開きます。十分なサンプル数を確保するため、直近30〜90日分のデータを取り出してください。スマートフォンとパソコンそれぞれから来たセッションの割合が見えるはずです。
この数字が、まずどちらの画面に向けて設計するかを決めます。訪問者の80%がスマートフォンから来ているなら、スマートフォンの体験がメインの舞台であり、デスクトップは二次的なものになります。B2Bを扱っていて、顧客の多くがオフィスのパソコンを使っているなら、話は逆になります。
トラフィックだけでなく、デバイス別のコンバージョン率の差も見てください。Baymard Instituteによると、モバイルでのカート放棄率は約80%で、デスクトップ(約66%)よりも高くなっています。モバイルからの訪問者が多いのにモバイルのコンバージョンが低い場合、使いにくいナビゲーションがその一因かもしれません。
ステップ2:第1階層と第2階層のカテゴリーを数える
Shopifyのナビゲーションのセクションを開き、実際に数えてみましょう。
- 第1階層のカテゴリー:最も大きなグループです。たとえばファッションショップなら「レディース」「メンズ」「アクセサリー」「セール」など。
- 第2階層のカテゴリー:各第1階層カテゴリーの中の枝分かれです。「レディース」の中には「トップス」「ボトムス」「ワンピース」「シューズ」などが含まれるかもしれません。
この数字が選択肢を絞り込みます。第1階層のカテゴリーが3〜4個しかなく、第2階層がほとんどないストアには、Mega Menuは必要ありません。Mega Menuは多階層の構造を収めるために存在するものだからです。一方で、第1階層のカテゴリーが8個あり、それぞれに5〜6個の枝分かれがあるショップで、すべてを1つのSlide Menuに詰め込めば、顧客は手が疲れるまでスクロールすることになります。
私がよく使うざっくりとした目安はこうです。構造がフラットで小さいほど、常に見えているメニュー(画面下部のTab Barなど)を選ぶべきです。構造が深く枝分かれしているほど、グループ化して展開できるメニュー(デスクトップのMega Menu、モバイルのSlide Menu)が必要になります。
ステップ3:顧客が最もたどり着く必要のある3〜5ページを特定する
これは最も飛ばされがちなステップですが、重要です。
再びGoogle AnalyticsまたはShopify Analyticsに戻り、最も閲覧されているページのレポート(Top pages / Landing pages)を開きます。顧客が本当に必要とする3〜5個の行き先を書き出してください。それらはたいてい、ホームページ、いくつかの主要なコレクション、検索ページ、カート、そして場合によっては注文追跡ページや問い合わせページに分類されます。
なぜ3〜5個だけなのか。それが、最もタップしやすい場所に置ける「ショートカット」の妥当な数だからです。モバイル画面下部のTab Barには、窮屈にならない範囲で通常4〜5個の項目しか収められません。最も重要な4つの行き先を正しく特定できれば、Tab Barに何を置くべきかが正確にわかります。
このステップでは正直になりましょう。顧客に見せたいもの(たとえばブランドストーリーのページ)が、顧客が購入のために必要とするものとは限りません。願望ではなく、行動データに従ってください。
ステップ4:4つの要素に基づいてメニュー構成を選ぶ
ここまでの3ステップを、これまでの記事で取り上げた4つの要素、つまり主要なデバイス、カテゴリーの階層の深さ、重要な行き先の数、そして商品カテゴリーの特性と組み合わせます。それらの記事の比較表と照らし合わせてください。以下によくある組み合わせをいくつか示します。
| あなたの状況 | おすすめの構成 |
|---|---|
| モバイル訪問者が中心、フラットな構造、明確な行き先が4つ | 下部のTab Bar + 残りはSlide Menu |
| カテゴリーが多く、枝分かれも多い、デスクトップのトラフィックも相当ある | デスクトップにMega Menu + モバイルにSlide Menu |
| 際立たせたいアクションが1つ必要(チャット、予約、電話) | そのアクション用のFAB + メインメニューの組み合わせ |
| 画像が多くテキストが少ないカタログ(化粧品、食品) | ビジュアルなGrid Menu |
スマートフォンの持ち方についての補足です。Steven Hooberの調査によると、約半数のユーザーは片手でスマートフォンを持ち、その作業の大半を親指で行っています。親指が無理なく届く範囲は画面の下半分です。だからこそ、下部のTab Barは、画面上隅のハンバーガーアイコンよりもタップしやすいのが普通です。上隅は「ぎりぎり届かない」ゾーンに入ってしまうからです。
ここで、隠されたナビゲーションについても考えるべきです。Nielsen Norman Groupの計測によると、常に見えているメニューは、ハンバーガーアイコンの裏に隠されたメニューに比べて約1.5倍多く見つけられ、使われています。これはハンバーガーが間違っているという意味ではありません。二次的な項目を収めるには今でも有用です。要は、最も重要な行き先をその裏に隠してはいけない、ということです。
ステップ5:Navi+を導入し、プロトタイプを作り、実機で確認する
ここまでで仮説ができています。残る作業は、それを作って自分の目で確かめることです。
Navi+を使えば、Tab Bar、Mega Menu、Slide Menu、FAB、Grid Menuをコードなしで、ドラッグ&ドロップだけで作成でき、モバイルとデスクトップを別々に設定できます。ステップ4で選んだ構成を、デバイスごとに1つのスタイルでそのまま組み立て、プレビューモードをオンにします。メニューはテーマとは独立して作られるため、後でテーマを変更してもそのまま残ります。
強調しておきたい点はこれです。エミュレーターだけでなく、実際のスマートフォンで確認してください。
ブラウザのエミュレーターは正しい画面サイズを再現してくれますが、実際の指がボタンをタップする感覚までは再現できません。ボタンが小さすぎないか、Tab Barがキーボードやスマートフォンのナビゲーションバーに隠れてしまわないか、といったことです。実際にスマートフォンを手に取り、本物の顧客のように何かを購入しようとして初めて表面化する問題もあります。
プレビューの際は、速度にも目を向けてください。GoogleはCore Web Vitalsの「良好」のしきい値を、LCP 2.5秒未満、INP 200ミリ秒未満、CLS 0.1未満と定めています。重いメニューはページをカクつかせたり、レイアウトをずらしたりすることがあります。Navi+はこれらの指標への影響を抑えるよう最適化されていますが、それでも自分のストアで確認するべきです。
最後に、調整を恐れないでください。ステップ4で選んだ構成は出発点であって、最終判断ではありません。ナビゲーションのツールを1つ追加したり削除したりするのは、大した手間ではありません。プロトタイプを作り、数週間後に数字を見て、それから調整する。そうしてこそ、このプロセスは本当に成果を生みます。
要するに、良いメニュー選定プロセスは、どのメニュータイプが好きかから始めるのではなく、数字から始まります。モバイルとデスクトップの比率、カテゴリーの階層の深さ、そして顧客が本当に必要とする行き先です。4つの要素に1つの実機プロトタイプを加えれば、どんな一般的なアドバイスよりも、あなたのストアに近い答えが得られるはずです。
この記事は、より大きなガイド「Shopifyストアに適したメニュータイプの選び方」の一部です。