一般的なメニューを探る
👀 アクションで見たいですか? ライブデモを見る → showcase.naviplus.io
ほとんどの店舗は1つのメニュータイプしか使用しませんが、各タイプは異なる目的に役立ちます。複数のメニュータイプを組み合わせることで、顧客により良い体験を提供できます:即時アクセスのためのTab Bar、深いカタログのためのSlide Menu、デスクトップでの発見のためのMega Menu、サポートのためのFAB — 各々が完璧に1つの仕事を行います。
1. Tab Bar (別名: ボトムナビゲーション, ナビバー, ボトムナビ)
固定ナビゲーションバー — 下部、上部、左、または右に配置可能。アイコン + ラベルを持つ4〜5セクションを保持します。店舗をネイティブアプリのように感じさせます。モバイルとデスクトップの両方で機能します。主なサイト全体のナビゲーションとして最適 — 常に表示され、常に親指の届く範囲にあります。使用例: Shein, ASOS, Zara, Etsy, H&M, Nike, Uniqlo.
プラットフォーム: デスクトップとモバイル (非常に人気)

Tab Bar — fixed nav bar with icon + label, feels like a native app
2. Slide Menu (別名: ドロワーメニュー, ハンバーガーメニュー)
左または右からスライドイン — 無制限のアイテム、サイズ制限なし、サイト全体の構造にフィットします。最も人気があり、モバイルフレンドリーなナビパターンです。ハンバーガーアイコン、Tab Barアイテム、または親指の届く範囲に配置された任意のボタンでトリガーできます。フルカタログ、アカウントリンク、ポリシー、常に表示する必要のないものに使用します。
プラットフォーム: モバイル (非常に人気) · デスクトップ (あまり一般的ではない)

Slide Menu — slides in from the side, unlimited depth and items
3. デスクトップMega Menu (別名: ドロップダウンメニュー, マルチカラムメニュー)
ヘッダーの下に展開するマルチカラムのドロップダウン — デスクトップナビゲーション全体を1か所でカバーするように構築されています。大画面の利点を最大限に活用し、画像、バナー、複数のカラムにわたるリッチなレイアウトを提供します。デフォルトのヘッダーメニューを完全に置き換えます。デスクトップでの substantial catalog を持つ店舗の標準です。
プラットフォーム: デスクトップのみ (非常に人気)

Desktop Mega Menu — multi-column dropdown with images and rich layouts
4. モバイルMega Menu (別名: ヘッダーメニュー, スクロール可能なトップメニュー)
ヘッダーのすぐ下にあるコンパクトなメニューバー — 常に表示され、タップは不要です。横にスクロールするか、タブに分割して、トップカテゴリを瞬時に表示します。モバイルウェブサイトで最も認識されているナビパターンの1つです。顧客が1タップでアクセスすべき4〜8の優先カテゴリを持つ店舗に最適です。
プラットフォーム: モバイルのみ (人気)

Mobile Mega Menu — always-visible horizontal bar just below the header
5. FAB & サポート (別名: フローティングボタン, スピードダイヤル)
任意のコーナーに固定されたフローティングボタン — スクロールに関係なく常に表示されます。複数のアクションに展開します:WhatsApp、Messenger、チャットウィジェット(Shopify Inbox、Tidio、Crisp)、ホットライン、または任意のカスタムリンク。顧客が助けやサポートドキュメントを必要とする際に最初に見る場所です。必要ないときは自動的に隠れて画面スペースを節約できます。
プラットフォーム: デスクトップ (人気) · モバイル (非常に人気)

FAB & Support — floating button that expands into chat, hotline, and quick actions
6. グリッドメニュー (別名: アイコンメニュー, カテゴリーグリッド)
アイコンまたは画像とラベルを持つタイルのグリッド — 各タイルが含まれています。任意のページセクションに直接埋め込まれ、サイト全体のナビではありません。アプリのような外観と感触を店舗に与え、6〜12のカテゴリを一目で表示するのに理想的です。特にホームページ、ランディングページ、Slide Menus内でうまく機能します。
プラットフォーム: モバイル (人気)

Grid Menu — icon + label tiles embedded into a page section
どのように組み合わせるか
1つだけ選ぶ必要はありません。最もパフォーマンスの良い店舗は複数のメニュータイプを重ねて使用します — 各々が特定の仕事を行います:
| 目標 | 推奨 |
|---|---|
| モバイルでの主なサイト全体のナビ | Tab Bar + Slide Menu |
| フルデスクトップナビゲーション | デスクトップMega Menu |
| モバイルでのトップカテゴリの表示 | モバイルMega Menu |
| 常にオンのサポートと連絡 | FAB & サポート |
| ホームページでの視覚的カテゴリブラウジング | グリッドメニュー |
よくある質問
モバイルでうまく機能するメニューが欲しいです。どのタイプを選べばいいですか?
Tab BarまたはSlide Menuから始めてください — 両方ともモバイル用に構築されています。Tab Barは4〜5の主要セクションへの即時アクセスを提供し、Slide Menuはアイテム数に制限なくサイト全体の構造を保持します。
私の店舗にはたくさんのカテゴリがあります。顧客を圧倒せずにすべてを表示するにはどうすればよいですか?
デスクトップではDesktop Mega Menu(マルチカラム、画像とバナーをサポート)を使用し、モバイルではSlide Menu(無制限のアイテム、スクロール可能)を組み合わせてください。各々がそのプラットフォームを完璧に処理します。
複数のメニュータイプを同時に使用できますか?
はい — そして、そうすべきです。人気のある組み合わせ:Tab Bar(主なナビ) + Slide Menu(フルサイト構造) + FAB(WhatsApp / サポート)。各タイプは異なる目的を持ち、重複はありません。
顧客がサポートに簡単にアクセスできるようにしたいです。何を追加すればいいですか?
FAB & サポートボタンを追加してください。画面のコーナーに固定され、常に表示され、WhatsApp、Messenger、ホットライン、チャットウィジェットを1つのボタンにまとめることができます。
グリッドメニューはどこに配置すべきですか?
グリッドメニューはサイト全体のナビではありません — ページセクション(ホームページ、カテゴリページ)に埋め込まれています。アプリスタイルのタイルとして6〜12の特集カテゴリを視覚的に表示するために使用してください。
間違ったメニュータイプを選んだらどうなりますか?
問題ありません — いつでもメニューを追加、編集、削除できます。作業を保存したい場合は、後で再利用するためにJSONファイルとしてエクスポートしてください。Word文書を保存するようなものだと思ってください。
私はStarterプランで1つのメニュー枠しかありません。もっと試すにはどうすればいいですか?
BusinessまたはEliteにアップグレードしてください — コミットする前にすべてを探索するための7日間の無料トライアルが得られます。
Navi+に既存のメニューをインポートできますか?
はい。Navi+はAI支援のインポートをサポートしています — ただし、結果を調整する必要があります。理由は次のとおりです:今日のほとんどのウェブサイトには、モバイルで自動的にハンバーガーメニューに折りたたまれる単一のMega Menuがあります。Navi+は代わりに専門のメニュータイプを提供します。顧客に最適な体験を提供するために、適切なタイプにコンテンツを再分配する必要があります。