モバイルトラフィックはShopifyストア訪問の70%以上を占めるようになりました。小さな画面でナビゲーションがどのように動作するかは、最も高い影響力を持つUXの決定の1つです。このページでは、Meteor Mega Menu と Navi+ がモバイルを処理する方法と、その違いがなぜ重要なのかについて説明します。
Meteor Mega Menu がモバイルを処理する方法
Meteor はデスクトップメガメニューテンプレートと並行してモバイルメニュースタイルを含みます。プランによって2～3のモバイルテンプレートに制限されます。機能的ですが、マーチャント レビューは繰り返される制限を指し示します: 「より多くのモバイルカスタマイズ、それはあまりにも厳密で、価格のために良く見えない」 はアプリのレビューページに表示される種類のフィードバックです。
Meteor モバイル制限:
- Tab Bar / ボトムナビゲーションなし
- FAB（フローティングアクションボタン）なし
- モバイルテンプレート数はプランによって制限（無料で2、有料階層で3）
- デバイスごとの公開ルールなし（モバイル vs デスクトップで異なるメニューを表示することはできません）
Navi+ がモバイルを処理する方法
Navi+ はモバイルファーストで設計され、3つの異なるモバイルナビゲーションパターンをサポートしています。
Tab Bar（ボトムナビゲーション）
Tab Barは4～5のナビゲーションリンクを画面下部の固定バーに配置します。常に表示されます。訪問者はメニューを開かずに任意のページからカテゴリをタップできます。これはInstagram、Amazon、TikTokなどのネイティブアプリの動作と同じです。Meteorはすべての価格階層でこれに相当するものがありません。
FAB（フローティングアクションボタン）
FABは画面に固定されたままのフローティングボタンで、通常は「セール」、「新着」、「連絡」、「カート」などの優先度の高いアクションに使用されます。完全なバーのために画面のスペースを使用せずに永続的なショートカットを追加します。
スライドメニュー（モバイルファースト対応）
Navi+ のスライドメニュー（ハンバーガー/ドロワースタイル）はアイコン、画像、バッジをサポートし、Smart Publishルールを使用してモバイル vs デスクトップで異なるコンテンツを表示できます。Meteorのモバイルテンプレートが提供しないもの。
コンバージョンへの影響
| モバイルUX要素 | Meteor Mega Menu | Navi+ |
|---|---|---|
| Tab Bar（常に表示） | ✗ | ✓ |
| FABボタン | ✗ | ✓ |
| モバイル固有の公開ルール | ✗ | ✓ |
| モバイルメニューの商品画像 | ✓（有料階層） | ✓ |
| モバイルテンプレート制限 | プランごと2～3 | ハードキャップなし |
| 永続的なナビゲーション | ✗ | ✓（Tab Bar） |
どちらを使うべきか
Meteor のモバイルアプローチを使用する場合:
- ストアはShopifyのみで、シンプルな既存ナビゲーションメニュー
- WCAG 2.2 AAアクセシビリティ準拠があなたにとってモバイルナビゲーションパターンより重要
- デスクトップメガメニューのモバイルメニューバリアントのみが必要
Navi+ を使用する場合:
- トラフィックの50%以上がモバイル（ほとんどのストアに当てはまる可能性が高い）
- 主要なモバイルアプリのナビゲーション体験を再現したい
- Tab Bar + FAB の永続的で親指にやさしいナビゲーションが必要
- モバイル vs デスクトップで異なるメニューを表示したい
モバイルがプライマリチャネルである最新のShopifyストアでは、モバイルメニューテンプレートと本物のTab Barの間のギャップは重要です。1つはデスクトップメニューのより小さなバージョン。もう1つは、人がフォンでブラウズする方法に合わせて作成されたナビゲーションパターン。
→ 完全な比較を参照してください: Navi+ vs Meteor Mega Menu