モバイルトラフィックは現在Shopifyストア訪問の70%以上を占めています。小さな画面でのナビゲーションの動作は、あなたが行う最も重要なUX判断のひとつです。このページでSmart MenuとNavi+がモバイルをどのように扱うか、そしてその違いが重要な理由を詳しく説明します。
Smart Menuのモバイル対応
Smart Menuのモバイル体験は標準的なハンバーガーメニューパターンに従います：
- 訪問者がページに到着：ナビゲーションは非表示
- 訪問者が上部コーナーの☰アイコンをタップ
- ドロップダウンまたはスライドアウトメニューが表示
- 訪問者がカテゴリーをタップしてナビゲート
このパターンは親しみやすく機能的です。しかし根本的な問題があります：訪問者がメニューを積極的に開かない限り、商品カタログ全体が見えません。 ほとんどのモバイル訪問者は開きません。
Smart Menuのモバイル制限：
- Tab Bar / ボトムナビゲーションなし
- FAB（フローティングアクションボタン）なし
- 固定されたナビゲーションなし：常に意図的なタップが必要
- デバイスごとの公開ルールなし（モバイルとデスクトップで異なるメニューを表示できない）
Navi+のモバイル対応
Navi+はモバイルファーストで設計されており、3つの異なるモバイルナビゲーションパターンをサポートしています：
Tab Bar（ボトムナビゲーション）
Tab Barは画面下部の固定バーに4〜5個のナビゲーションリンクを配置します。常に表示されており、訪問者はどのページからでもメニューを開かずに任意のカテゴリーをタップできます。Instagram、Amazon、TikTokなどのネイティブアプリの動作を反映しています。
Tab Barがよりコンバージョンする理由：
- メインカテゴリーを確認するためのタップが不要：常に表示されている
- 親指に優しい位置（画面下部 = 自然な親指の届く場所）
- セッションごとのカテゴリーブラウズステップを約1〜2タップ削減
- Tab Barナビゲーションを見たモバイルショッパーは平均してセッションごとに20〜35%多くのページを訪問
FAB（フローティングアクションボタン）
FABは画面上に固定されたフローティングボタンで、通常は高優先度のアクション向けに使用されます：「セール」「新着商品」「お問い合わせ」「カート」。全ページにわたって固定ショートカットを追加しますが、フルバーのような永続的な画面スペースを使いません。
Slide Menu（モバイルファーストルール付き）
Navi+のSlide Menu（ハンバーガー/ドロワースタイル）はSmart Menuよりもカスタマイズ性が高く、アイコン、画像、バッジ、Smart Publishルールを使ってモバイルとデスクトップで異なるコンテンツを表示できます。
コンバージョンへの影響
| モバイルUX要素 | Smart Menu | Navi+ |
|---|---|---|
| Tab Bar（常時表示） | ✗ | ✓ |
| FABボタン | ✗ | ✓ |
| モバイル専用公開ルール | ✗ | ✓ |
| モバイルナビのアイコン | ~（限定的） | ✓ |
| ダークモードモバイルメニュー | ✗ | ✓ |
| 固定ナビゲーション | ✗ | ✓（Tab Bar） |
どちらを使うべきか？
Smart Menuのモバイルアプローチが適している場合：
- ストアが非常にシンプル（5個以下のトップレベルカテゴリー）
- オーディエンスが主にデスクトップショッパー
- ハンバーガーメニューだけが必要でそれ以上は不要
Navi+が適している場合：
- トラフィックの50%以上がモバイル（ほとんどのストアで当てはまる）
- 主要なモバイルアプリのナビゲーション体験を再現したい
- 固定的で親指に優しいナビゲーションのためにTab Bar + FABが欲しい
- モバイルとデスクトップで異なるメニューを表示したい
モバイルが主要チャネルである現代のShopifyストアにとって、この2つのアプローチの差は大きいです。ハンバーガーメニューは機能的ですが、Tab Barは戦略的です。
→ 全比較を確認： Navi+ vs Smart Menu