メニュータイプはそれぞれ、異なる課題を解決するために生まれました。間違ったものを選んでもストアがすぐに壊れるわけではありませんが、買い物客に必要以上に考えさせてしまいます。そして買い物客が考えなければならない瞬間というのは、離脱しかねない瞬間でもあるのです。この記事では、もっとも一般的なShopifyのメニュータイプを一つずつ取り上げ、それぞれについて、何であるか、どんなときに合うか、合わないか、そしてマーチャントが陥りがちな失敗を見ていきます。
詳細に入る前に、覚えておきたい数字が一つあります。Baymard Instituteによれば、ECにおける平均カゴ落ち率はおよそ70%です。すべての離脱がナビゲーションのせいだとは言えませんが、ごちゃごちゃしたナビゲーションは、買い物客がカートにたどり着く前に離れていく一因となっています。
以下の4つのタイプは、互いに排他的なものではありません。ストアでは複数を同時に使うことがよくあります。たとえばデスクトップではメガメニュー、モバイルではタブバー、といった具合です。大切なのは、適切な場面に適切なタイプを使うことです。
メガメニュー：カテゴリが多く、デスクトップで閲覧する買い物客に向く
メガメニューは、大きく展開するパネルです。最上位の項目にカーソルを合わせたりタップしたりすると、横長のパネルが開き、多くのサブカテゴリを一度に表示します。多くの場合、画像やおすすめ商品も添えられます。買い物客はストア全体の構成を一目で把握できます。
これは、ストアにカテゴリが多い場合に有効です。目安としてはたとえば10グループ以上で、買い物客の多くがパソコンから訪れるようなケースです。ファッション、化粧品、ホーム用品、家具など、買い手が決める前にあれこれ見て回るのを好む業種に向いています。買い物客はまだ何が欲しいか正確には分かっていないので、多くの道筋を目の前に並べてあげることが役立つのです。
一方、メガメニューが合わないのは、商品数が少ない場合や、買い物客の大半がスマートフォンを使っている場合です。10種類のシャツを売る店が巨大なパネルを開くのはやりすぎで、スカスカに見えてしまいます。さらに、Shopifyによればトラフィックの79%はモバイル経由なので、ワイド画面でしか映えないデザインは大半の買い物客を見捨てることになります。
もっともよくある失敗は、詰め込みすぎることです。マーチャントはすべてを見せたいので、あらゆるカテゴリやバナーを一つのパネルに盛り込んでしまいます。その結果、買い物客は圧倒されて何もクリックしません。選択肢が多すぎるのは、選択肢がないのと同じです。要素はぎゅっとグループ化し、余白を残し、本当に売りたいものだけを少数だけ目立たせましょう。
スライドメニュー：多階層のカテゴリと、目的のはっきりした買い物客に向く
スライドメニュー（三本線のアイコンから開くため、ハンバーガーメニューとも呼ばれます）は、画面の端からスライドして現れます。カテゴリをツリー状に表示し、グループをタップするとそのサブグループが展開して、数階層の深さまでたどれます。複雑な構造を狭いスペースにきれいに収める方法です。
スライドメニューが合うのは、ストアにカテゴリの階層が多く、明確な階層構造が必要な場合、とりわけモバイルファーストの考え方をとる場合です。自動車部品店を例にとると、メーカー › 車種 › 部品の種類、という具合です。スライドメニューなら、買い物客は各ステップで新しいページを読み込むことなく、適切な枝をたどって掘り下げていけます。
合わないのは、ストアがシンプルな場合です。カテゴリが少ししかないなら、それをアイコンの裏に隠すことは、買い物客の手間を増やすだけです。Nielsen Norman Groupは、隠れたナビゲーションは買い物客が目的のものを見つける確率を下げ、メニューが見えている場合よりも動作を遅くすることを示しています。
その性質を理解しておくと役立ちます。スライドメニューは情報を隠すものです。だからこそ、すでに何が欲しいか分かっている人によく合います。彼らは自分から開いて、慣れた枝へまっすぐ向かいます。一方で閲覧には弱く、買い物客はタップするまで何も見えません。買い物客に商品をふと見つけてほしいのが目的なら、スライドメニュー単体では不十分です。
タブバー：買い物客の大半がスマートフォンの場合に向く
タブバーは、スマートフォン画面の下部に固定されるナビゲーションの帯です。通常、ホーム、カテゴリ、検索、カート、アカウントなど、もっとも重要な4〜5項目を収めます。常に表示され、買い物客がどれだけスクロールしてもそこに留まります。
タブバーの強みはその位置にあります。人がスマートフォンをどう持つかについてのSteven Hooberの調査（1,300件を超える実地観察）によれば、モバイルでの操作の大半は片方の親指で行われ、画面の下部中央が親指のもっとも届きやすい場所であることが分かりました。これはしばしばサムゾーン（thumb zone）と呼ばれます。主要な操作を下部に置くということは、すでに買い物客の手が置かれているまさにその場所に置くということなのです。
タブバーが合うのは、トラフィックの大半がスマートフォン由来の場合で、これは今日の大多数のShopifyストアに当てはまります。さらに、重要なもの、とりわけカートを常にワンタップ以内に保てるので、買い物客がページの先頭までスクロールして戻る必要がなくなります。
注意したいのは、タブバーに入れられる項目はごくわずかだという点です。7つも8つもアイコンを詰め込もうとせず、もっとも重要な4〜5個を選び、残りはスライドメニューやカテゴリページに任せましょう。タブバーは近道であって、ナビゲーション全体ではないと考えてください。
FAB：一つのアクションのための、一つの浮動ボタン
FAB（フローティングアクションボタン）は、コンテンツの上に浮かぶ丸いボタンで、一つの重要なアクションのためのものです。店とのチャット、カートの表示、ページ先頭への移動など。常にそこにありながら控えめで、実質的なスペースを取りません。
FABが合うのは、どこからでも買い物客にできるようにしたいことがちょうど一つある場合です。ベトナムでよくある例は、画面の右下に浮かぶMessengerやZaloのチャットボタンです。商品を見ていて疑問を持った買い物客が、あちこち探さずにすぐタップして質問できます。
覚えておきたいのは、FABはメニューの代わりにはならないということです。FABは一つのアクションのための近道であって、ナビゲーション全体の住みかではありません。よくある失敗は、詰め込みすぎることです。一つのボタンが5〜6個の選択肢に展開したり、3〜4個の浮動ボタンが同時にコンテンツを覆い、カートに追加ボタンまで塞いでしまったり。そうなると、FABは便利さから障害物へと変わります。一つのFABに、一つの目的を。
4タイプすべてに共通すること
どのタイプを選ぶにせよ、次の3点は常に成り立ちます。
- モバイルとデスクトップの設定を分けること。 同じストアでも、2つのデバイス上の買い物客は異なる行動をとります。両方に理想的な一つのメニューというのはたいてい存在しません。デスクトップではメガメニュー、モバイルではタブバーやスライドメニュー、と使い分けるほうが良いのです。
- 速度を犠牲にしないこと。 GoogleはCore Web Vitalsの良い目標値として、LCPは2.5秒未満、INPは200ミリ秒未満、CLSは0.1未満を定めています。ページがガタついたり読み込みが遅くなったりする美しいメニューは、利益よりも害のほうが大きくなります。Shopifyのデータによれば、平均的なストアはおよそ6つのアプリを導入しているので、アプリを追加するたびにページは重くなります。取捨選択が大切です。
- テーマを切り替えたときにメニューが壊れないようにすること。 メニューがテーマに直接組み込まれていると、見た目を変えるたびにゼロから作り直さなければなりません。
これこそ、多くの人が独立したナビゲーションツールを使う理由でもあります。Navi+なら、上記の4タイプすべて（メガメニュー、スライドメニュー、タブバー、FAB、さらにグリッドメニュー）を、ドラッグ&ドロップでノーコードで作成でき、モバイルとデスクトップを別々に設定でき、テーマを切り替えてもメニューはそのまま保たれます。また、Core Web Vitalsを引き下げないように作られています。とはいえ、どのツールを使うにせよ、原則は変わりません。メニュータイプは、いちばん派手に見えるものではなく、買い物客のデバイスと買い方をもとに選びましょう。
この記事は、より大きなガイドShopifyストアに合ったメニュータイプの選び方の一部です。