一般的なメニューを探る

👀 アクションで見たいですか? ライブデモを見る → 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 navigation example

Tab Bar — fixed nav bar with icon + label, feels like a native app


2. Slide Menu (別名: ドロワーメニュー, ハンバーガーメニュー)

左または右からスライドイン — 無制限のアイテム、サイズ制限なし、サイト全体の構造にフィットします。最も人気があり、モバイルフレンドリーなナビパターンです。ハンバーガーアイコン、Tab Barアイテム、または親指の届く範囲に配置された任意のボタンでトリガーできます。フルカタログ、アカウントリンク、ポリシー、常に表示する必要のないものに使用します。

プラットフォーム: モバイル (非常に人気) · デスクトップ (あまり一般的ではない)

Slide Menu example

Slide Menu — slides in from the side, unlimited depth and items


3. デスクトップMega Menu (別名: ドロップダウンメニュー, マルチカラムメニュー)

ヘッダーの下に展開するマルチカラムのドロップダウン — デスクトップナビゲーション全体を1か所でカバーするように構築されています。大画面の利点を最大限に活用し、画像、バナー、複数のカラムにわたるリッチなレイアウトを提供します。デフォルトのヘッダーメニューを完全に置き換えます。デスクトップでの substantial catalog を持つ店舗の標準です。

プラットフォーム: デスクトップのみ (非常に人気)

Desktop Mega Menu example

Desktop Mega Menu — multi-column dropdown with images and rich layouts


4. モバイルMega Menu (別名: ヘッダーメニュー, スクロール可能なトップメニュー)

ヘッダーのすぐ下にあるコンパクトなメニューバー — 常に表示され、タップは不要です。横にスクロールするか、タブに分割して、トップカテゴリを瞬時に表示します。モバイルウェブサイトで最も認識されているナビパターンの1つです。顧客が1タップでアクセスすべき4〜8の優先カテゴリを持つ店舗に最適です。

プラットフォーム: モバイルのみ (人気)

Mobile Mega Menu example

Mobile Mega Menu — always-visible horizontal bar just below the header


5. FAB & サポート (別名: フローティングボタン, スピードダイヤル)

任意のコーナーに固定されたフローティングボタン — スクロールに関係なく常に表示されます。複数のアクションに展開します:WhatsApp、Messenger、チャットウィジェット(Shopify Inbox、Tidio、Crisp)、ホットライン、または任意のカスタムリンク。顧客が助けやサポートドキュメントを必要とする際に最初に見る場所です。必要ないときは自動的に隠れて画面スペースを節約できます。

プラットフォーム: デスクトップ (人気) · モバイル (非常に人気)

FAB floating button example

FAB & Support — floating button that expands into chat, hotline, and quick actions


6. グリッドメニュー (別名: アイコンメニュー, カテゴリーグリッド)

アイコンまたは画像とラベルを持つタイルのグリッド — 各タイルが含まれています。任意のページセクションに直接埋め込まれ、サイト全体のナビではありません。アプリのような外観と感触を店舗に与え、6〜12のカテゴリを一目で表示するのに理想的です。特にホームページ、ランディングページ、Slide Menus内でうまく機能します。

プラットフォーム: モバイル (人気)

Grid Menu example

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+は代わりに専門のメニュータイプを提供します。顧客に最適な体験を提供するために、適切なタイプにコンテンツを再分配する必要があります。