Shopify で販売していて、スマホのメニューに悩んでいるなら、多くの大手 EC アプリが使っているパターンがあり、そこから学ぶ価値があります。それが Tab Bar と Slide Menu を組み合わせる やり方です。素早い移動は Tab Bar に任せ、じっくり探す回遊は Slide Menu に任せる。この記事は、その2つがどう連携するのか、そして FAB がその構図のどこに収まるのかについてのものです。
私もかつて店を運営していて、よくある失敗をしました。すべてを1つのハンバーガーメニューに詰め込み、「必要ならタップしてくれるだろう」と信じていたのです。実際のところ、買い物客は私たちが思っているよりもずっと辛抱強くありません。
1種類のメニューだけでは足りない理由
スマホでは、買い物客の行動はかなりはっきりと2つのグループに分かれます。
1つ目のグループは、自分が欲しいものを分かっています。カートを見に来る、検索する、ホームに戻る、といった目的です。彼らは素早く動いて、まっすぐそこへ行きたいのです。
2つ目のグループは、まだ何を買うか決めていません。カテゴリーをぶらぶら見て回り、面白いものはないか探したいのです。彼らには店全体の地図が必要です。
1つのメニューでは、この両方をうまく満たすのは難しいものです。すべてをハンバーガーに詰め込めば、1つ目のグループは、本来ワンタップで済むはずのことに余計な一手間を取られます。Nielsen Norman Group の調査によると、主要なナビゲーションをボタンの後ろに隠すと、項目を開いて表示しているときに比べて見つけにくく、使うのも遅くなります。一方で、カテゴリーツリー全体を画面に出そうとすれば、1つ目のグループは情報に圧倒され、画面はごちゃごちゃになります。
解決策は、どちらか一方を選ぶことではありません。役割を分けることです。
Tab Bar は主要な目的地を担当する
Tab Bar は画面下部に固定されたナビゲーションバーで、通常は4〜5個の項目を持ちます。常に表示されているので、買い物客は開くためにタップする必要がありません。
下部という位置は偶然ではありません。Steven Hoober が1,300件以上のユーザー観察を通じて行った調査によると、画面上の操作の約75%は親指で行われています。画面の下部中央は、片手でスマホを持ったときに親指がもっとも届きやすい場所です。重要な目的地をそこに置けば、買い物客は正確かつ素早くタップでき、ミスも減ります。
では、Tab Bar には何を入れるべきでしょうか。もっともよく使われ、もっとも速くたどり着く必要がある目的地だけです。たとえば、ファッションストアならこうなります。
- ホーム
- 検索
- カテゴリー（または「商品」）
- カート
- アカウント
5項目がちょうどいいバランスです。それより多いと各ボタンが窮屈になってタップしづらくなり、少ないと貴重なスペースを無駄にします。ここはサブカテゴリーを1つずつ並べる場所ではなく、いくつかの大きな入口を置く場所です。
Slide Menu はカテゴリー構造全体を担当する
Tab Bar には4〜5個の枠しかありません。しかし実際の店には、たいてい数十のカテゴリーとサブカテゴリーがあります。それらはどこへ行けばいいのでしょうか。
ここで Slide Menu の出番です。Slide Menu は画面の端から開き、多階層のカテゴリー構造をまるごと収められます。買い物客がメンズからレディースへ、トップスからボトムスへ、あるコレクションから別のコレクションへ移動したいとき、その場所が Slide Menu なのです。
このパターンの良いところは、Slide Menu の開き方にあります。「カテゴリー」という項目や「もっと見る」アイコンを Tab Bar の上にそのまま置きます。買い物客がそれをタップすると、Slide Menu が滑り出てきます。こうして2つのメニューがつながります。Tab Bar は素早い移動のために常にそこにあり、同時にじっくり回遊するための Slide Menu への入口にもなるのです。
小さいけれど大切なポイントがあります。Slide Menu を使うときは、むき出しのアイコンだけにせず、テキストで明確にラベルを付け、買い物客が見つけると期待する場所に置くことです。NN/G は、標準の三本線アイコンとラベルを併用して、中に何があるか買い物客が推測できるようにすることを推奨しています。Slide Menu 自体が悪いのではありません。Tab Bar と Slide Menu の両方の仕事を1つに押し付けたときだけ、悪くなるのです。
役割分担を煎じ詰めるとこうなります。買い物客がスピードを求めるときは Tab Bar を使い、すべてを見て回りたいときは Slide Menu を開く。これこそ、多くの大手 EC アプリが使っている Tab Bar と Slide Menu の組み合わせ であり、大がかりな変更をしなくても Shopify で機能します。
FAB：置き換えではなく、補完
FAB（Floating Action Button、フローティングアクションボタン）は丸い浮遊ボタンで、たいていは画面右下に、ページのコンテンツの上に重ねて表示されます。多くの人がこれを魅力的だと感じ、ナビゲーションに使いたがります。私はそれをお勧めしません。
FAB は、ちょうど1つのアクション、それも重要で繰り返し使われるアクションのために取っておくべきです。理にかなった例をいくつか挙げます。
- サポートチャットボタン。迷ったときに買い物客がすぐ質問できる
- セール期間中の「本日のお得情報を見る」
- とても長い商品一覧ページでのトップへ戻る
FAB が主要なナビゲーションを担うべきでない理由はこうです。それはたった1つのボタンにすぎません。タップすると、メニューを開かなければならない。つまり、まさに避けたかった「ナビゲーションを隠す」パターンへ逆戻りしてしまうのです。Tab Bar は常に表示され、枠もいくつかあるので、ナビゲーションをより上手に扱えます。FAB は、単一の明確な行動喚起に向いています。
言い換えれば、Tab Bar と Slide Menu は「どこへ行くか」を担当し、FAB は「ひとつのことをする」を担当する。互いの領分を踏み越えさせないことです。
このパターンを正しく作る価値がある理由
スマホのメニューを気にかけるべき、実際的な理由があります。Baymard Institute によると、カートの平均離脱率は約70%で、モバイルではさらに高く、約80%にのぼります。買い物客がそもそもメニューから道を見つけるのに苦労しているなら、チェックアウトを考える前に離脱してしまうのです。
ページ速度も重要です。重いメニューは読み込みを遅くし、レイアウトのずれを引き起こすことがあります。Google は Core Web Vitals の「良好」のしきい値を、LCP 2.5秒未満、INP 200ミリ秒未満、CLS 0.1未満と定めています。メニューが軽く無駄がないほど、これらのしきい値内に収めやすくなります。
もう1つ天秤にかけるべきことがあります。アプリの数です。Shopify ストアはたいてい多くのアプリをインストールしており、それぞれがページ上で動くコードを1つずつ増やしていきます。1つのメニューツールで Tab Bar、Slide Menu、FAB をすべて1か所で扱えれば、別々のものをいくつも継ぎ接ぎせずに済みます。
このパターンをコードなしで作る
この組み合わせパターンの難しいところは、設定です。モバイル専用の Tab Bar、それにつながる Slide Menu、そして場合によっては CTA 用の FAB が必要で、それらすべてが互いに噛み合い、しかもデスクトップ版に手を触れないようにしなければなりません。
これこそ Navi+ が解決するために作られたものです。Tab Bar と Slide Menu を1か所で設定し、モバイル向けに別々に設定でき、ドラッグ＆ドロップで、コードは不要です。モバイルとデスクトップの設定は別々なので、デスクトップ版は通常どおり Mega Menu を使えます。テーマを変更してもメニューはそのまま残り、Core Web Vitals の足を引っ張らないよう最適化されています。
最後にお伝えしたいのは、特定のツールのことではなく、役割を分けるという考え方です。1つのメニューにすべてをやらせないこと。素早い移動は Tab Bar に、じっくり探す回遊は Slide Menu に、ひとつのアクションは FAB に任せましょう。買い物客はもっと簡単に道を見つけられるようになり、それはたいてい、彼らがより長く留まってくれるための最初の一歩になります。
この記事は、より大きなガイド モバイルナビゲーション — ハンバーガーメニューが時代遅れになりつつある理由と、代わりに使うべきもの の一部です。