ストアに優れた品揃え、適正な価格、きれいな写真がそろっていても、お客さまは必要なものを見つけられずに離れてしまうことがあります。そんなとき、問題は多くの場合、商品ではなくナビゲーションにあります。この記事では、Shopifyでよく使われるメニュータイプを一つずつ取り上げ、さらに重要な点として、それぞれがどのボトルネックを解決するために作られたのかを見ていきます。技術的な話は最小限にとどめ、お客さまが買いやすくなるのはどこなのかに焦点を当てます。
詳しい話に入る前に、覚えておく価値のある数字を一つ。Baymard Instituteによれば、カートの平均放棄率はおよそ70%前後で、長年ほぼ変わっていません。そのすべてがナビゲーションに起因するわけではありませんが、一部は、お客さまが目的のページにたどり着けない、あるいはたどり着くのが遅すぎてあきらめてしまうケースです。
Mega Menu：品揃え全体をひと目で見せる
Mega Menuは大きなパネルを開き、多くのカテゴリーを一度に、しばしば画像つきで表示します。これはデスクトップで特定のボトルネックを解決します。つまり、お客さまがそのストアで何を売っているのか、品揃えがどれほど豊富なのかを知らない、という状況です。
数百のSKUを持つファッションショップを想像してみてください。メニューが「メンズ / レディース / アクセサリー」しか並んでいなければ、お客さまはクリックして、ページの読み込みを待ち、それからようやく中身を見ることになります。クリックのたびに、気が変わる隙が生まれます。Mega Menuなら、「シャツ、ジーンズ、ジャケット、シューズ……」をマウスをかざすだけでひと目で見渡せ、興味を引くいくつかの画像も添えられます。
これがうまくいくのは、お客さまが幾層もの階層を手探りで進むよりも、明確にグループ分けされた幅広いメニューをざっと見て自分の位置をつかむ傾向があるからです。多くの商品ラインを持つストアにとって、これはデスクトップ版でまず検討する価値のあるShopifyメニュータイプであることが多いでしょう。
一つ注意点があります。Mega Menuは、見せる価値があるほど品揃えが幅広い場合に力を発揮します。商品が15点しかないなら、通常のメニューで十分です。それをMega Menuに詰め込んでも、スカスカで雑然として見えるだけです。
Tab Bar：ハンバーガーをやめ、主要なアクションを指先へ
モバイルでは、多くのストアがナビゲーションをすべて三本線のアイコン（ハンバーガーメニュー）の中に隠すのを標準にしています。ここで最も役立つのが、画面下部に固定されたナビゲーションバーであるTab Barです。
理由は二つあります。一つ目は、Nielsen Norman Groupのユーザビリティ調査が示すように、ハンバーガーの中に隠れたナビゲーションは、表示したままのナビゲーションに比べてはるかに気づかれにくく、使われにくいということです。タスクにかかる時間も長くなります。要するに、隠れているものはタップされにくいのです。
二つ目は、人がスマートフォンをどう持つかです。1,300人以上を観察したSteven Hooberの調査によると、ほとんどの人は片手でスマートフォンを持ち、主に親指で操作します。親指が最も届きやすいのは、画面の下半分です。ハンバーガーは画面の上隅、まさに届きにくい場所にあります。Tab Barは、ホーム、カテゴリー、検索、カートを画面下部、ちょうど親指が休む位置に配置します。
ほぼすべての注文がスマートフォンから来るベトナムの事業者にとって、カートを開いたり検索したりするのにワンタップで済むかどうかが、注文かアプリを閉じるかの分かれ目になり得ます。モバイルでは、私はこれをまず試してみることをよくおすすめします。
Slide Menu：多階層のカテゴリーツリーを圧迫感なく見せる
Tab Barはいくつかの主要な導線には向いていますが、深い階層のカテゴリーツリー全体を収めることはできません。それを担うのがSlide Menu、画面の端からスライドして現れるパネルです。
ここでのボトルネックは、多階層の構造を持つストアです。大きな部門があり、その下にサブカテゴリー、さらにその下にサブカテゴリーがある、といった具合です。それを一度にすべて出すとお客さまは圧倒され、隠しすぎると見てもらえません。Slide Menuは一度に一階層ずつ開くことでこれに対応します。「日用品」をタップすると、その中の項目の階層へスライドして移ります。
身近な例としては、ネットスーパーやパーツ販売店があり、そこには何十もの商品グループがあります。お客さまは延々と長いリストをスクロールせずに、カテゴリーツリーをたどっていけます。Slide Menuは各ステップで画面をすっきり保ち、お客さまが自分のペースで深く進めるようにします。
Slide MenuとTab Barは排他的なものではありません。よくある構成は、Tab Barに最もよく使われる導線を任せつつ、「カテゴリー」タブで全体の構造を表示するSlide Menuを開く、というものです。
FAB：一つの重要なアクションを常に手の届くところに
FAB（フローティングアクションボタン）は、通常は画面下隅にある固定の丸いボタンで、お客さまがスクロールしてもコンテンツの上に浮いたまま表示されます。これは小さいけれどよくあるボトルネックを解決します。お客さまが商品ページを途中まで読んだころには、重要なボタンがすでに視界から消えてしまっている、という問題です。
お客さまが説明、写真、レビューを見るために下にスクロールしていくと、最初に上部にあった「カートに追加」「Zaloでチャット」「電話で注文」のボタンが消えてしまっています。上までスクロールして戻らなければならず、その余分な一手間ごとに離脱の隙が生まれます。FABは、お客さまに取ってほしい一つのアクションを常にその場に固定し、親指が届きやすいゾーンに置きます。
肝心なのは控えめにすることです。FABが持つCTAは一つだけにすべきです。三つも四つも浮かぶボタンを詰め込むと、コンテンツを覆ってしまい逆効果になります。一つのボタンに、一つの役割を。
読み込み速度：美しいが遅いメニューは、見栄えの悪いメニューよりたちが悪い
このセクションは、上の四つのタイプと同じくらい重要です。見た目はエレガントでも、ページがカクついて読み込みが遅くなるメニューは、お客さまが使う前にお客さまを失ってしまいます。
GoogleはCore Web Vitalsによって体験を測定し、その「良好」の基準は次の通りです。LCPは2.5秒未満（メインコンテンツがどれだけ速く表示されるか）、INPは200ミリ秒未満（タップしたときの反応の良さ）、CLSは0.1未満（安定性、レイアウトが動き回らないこと）。重いメニューはこの三つすべてを引き下げかねません。特にCLSは、遅れて読み込まれるメニューがその下のコンテンツを飛び跳ねさせ、お客さまが誤ったところをタップしてしまう原因になります。
これに触れておく価値があるのは、ストアが多くのアプリをインストールしがちで、追加するアプリ一つひとつが負荷を増やし得るからです。雑に書かれたメニューアプリは、すべてのページを静かに遅くしてしまいます。
ここでNavi+は違ったやり方をしようとしています。Navi+はノーコードのナビゲーションビルダーで、Tab Bar、Mega Menu、Slide Menu、FAB、Grid Menuを作成でき、モバイルとデスクトップを別々に設定でき、Core Web Vitalsを引き下げないように最適化されています。メニューはテーマを変えてもそのまま保たれるので、見た目を一新するたびに一から作り直す必要はありません。詳しくはnaviplus.ioでご覧いただけます。ここで触れるのは、速度こそ、メニューアプリを選ぶときに事業者が忘れがちな基準であり、私たちが思う以上にコンバージョンに影響するからです。
まとめ
メニューの種類はそれぞれ異なるボトルネックに合っています。絶対的な「ベスト」は存在せず、あるのはお客さまがどこで迷っているかに合うものだけです。
- Mega Menu — デスクトップで品揃え全体が見えない。
- Tab Bar — モバイルで主要なアクションがハンバーガーの中に隠れている。
- Slide Menu — 多階層のカテゴリーツリーが圧倒してしまう。
- FAB — お客さまがスクロールするうちにメインのCTAが離れていく。
- 速度 — 上の四つのタイプを意味あるものにする土台。
実践的なやり方は、自分のストアでのお客さまの動線を振り返り、どこでつまずきやすいかを見極めたうえで、まさにその箇所を直すメニュータイプを選ぶことです。とりあえずインストールする、ではなく。
この記事は、より大きなガイドお客さまはストアを訪れても買わない理由 — そしてナビゲーションがどう関わるかの一部です。