Shopify でストアを運営している方なら、メニューがどれだけ売上を左右しているか、すでに肌で感じているはずです。訪問者がトップページに到着し、ナビゲーションをひと目見て、数秒のうちに「商品を見てみよう」と思うか、あるいはそのまま離脱するか——その分岐がここで起きています。それなのに、多くの Shopify ストアはテーマに付属するデフォルトのメニューをそのまま使い続けています。デスクトップ前提に設計されたリンクの羅列を、モバイルにあとから無理に押し込んだだけの作りで、数千の他店舗とほとんど見分けがつきません。
Navi+ AI Menu Builder は、Shopify ストアフロント専用に設計された総合ナビゲーションツールです。単一のメニューパターンではなく、「システム」として提供されます。モバイル向けのボトム Tab Bar、デスクトップ向けのMega Menu、階層を深く見せたいときのSlide Menu、キャンペーンに使えるFAB、カタログ重視のカテゴリに最適なGrid Menu。すべてを1つのダッシュボードから管理できます。コード不要、テーマ編集不要、開発者の手を借りる必要もありません。
このガイドでは、Shopify における Navi+ のすべて——何を置き換えるのか、どうインストールするのか、そしてなぜ5,000以上の Shopify マーチャントがすでに導入しているのかを順を追って解説します。
Shopify のデフォルトメニューが売上を取りこぼしている理由
Shopify に最初から備わっているメニューは、EC のトラフィックの大半がデスクトップだった時代に設計されたものです。今や Shopify トラフィックのおよそ70%はモバイル経由——にもかかわらず、デフォルトのメニューパターンは根本的にはほとんど変わっていません。
- ボトムナビゲーションがない。普段使うあらゆるモバイルアプリ——Amazon、ASOS、eBay、Instagram——は、主要なアクションを画面下部の固定バーに集約しています。Shopify のデフォルトはナビゲーションを画面上部に固定したまま。6.7インチのスマートフォンでは、親指が無理なく届かない位置です。
- モバイルはハンバーガーメニュー一択。訪問者がタップしてメニューを開き、長いリストをスクロールし、もう一度タップする。商品を見るまでに3〜4タップ。タップが増えるたびに、離脱のリスクも増えます。
- テーマに縛られたスタイル。タップ領域を大きくしたい、カスタムアイコンを使いたい、カラムレイアウトにしたい——どれも Liquid を編集することになります。新しいパターンを A/B テストするのはさらに困難です。
- キャンペーンを差し込む余地がない。フラッシュセールを始めてもメニューには反映できない。視覚的に強調したいカテゴリがあっても、画像を入れる場所がない。販売チャンスがナビゲーションをすり抜けていきます。
これらは見た目の好みの話ではありません。セッションごとに実際の売上を取りこぼしている、コンバージョンの「穴」です。
Shopify における Navi+ のメニューシステム
Navi+ はデフォルトメニューを丸ごとナビゲーションシステムに置き換えます。各コンポーネントは単体でも機能しますし、自由に組み合わせることもできます。
Tab Bar — モバイルのボトムナビゲーション
画面下部に固定されたバーに、最大5つの遷移先を配置できます。ホーム、カテゴリ、検索、カート、アカウント——あるいは任意の項目を自由に設定可能です。カスタムアイコン、アクティブ状態のハイライト、カート数バッジ、そして 4,000以上の Google Material Symbols を備えた組み込みアイコンライブラリを利用できます。デフォルトテーマから移行する Shopify ストアにとって、最もインパクトの大きい1コンポーネントです。
Mega Menu — デスクトップのドロップダウン
大規模なカタログに対応した、複数カラム・画像付きのドロップダウンです。見出し、サブリンク、プロモーションバナー、注目商品ブロック、CTA をまとめて配置できます。フラットな「Shop」リンクを、中身がひと目で伝わるカテゴリ概観に置き換えると、訪問者はより多くを目にし、より深くクリックし、商品ページへ素早くたどり着きます。
Slide / Hamburger Menu
モバイルでも深い階層が必要な場面——多階層のカテゴリ、言語切り替え、アカウント関連リンク——には、メニューの中にメニューを入れ子にすることなく、スッキリしたスライドパネルで対応します。左右どちらからでも開け、全画面表示や部分表示、スムーズなトランジションも自由に設定できます。
FAB — Floating Action Button
画面の隅に1つだけ固定される浮遊ボタンです。プロモーション（「フラッシュセール →」）、優先度の高いアクション（「WhatsAppで注文」）、あるいはクイックアクセス用のメニュー起動ボタンとして活躍します。カラー、アイコン、ラベル、遷移先アクションをすべてカスタマイズできます。
Grid Menu
カタログ重視のストア向けの、タイル状メニューです。長いスクロールリストの代わりに、9枚または12枚の大きなカテゴリタイルを1画面に並べるイメージ。食品、ファッション、家電——ビジュアルが鍵となるカタログでよく採用されるパターンです。
Drawer とデフォルトコンポーネントの置き換え
Business プラン以上では、テーマ標準の Search Drawer、Cart Drawer、デフォルトメニューを Navi+ のカスタム版に置き換えられます。トリガーボタンはそのまま、UI だけがまったく別物になるイメージです。カート／メニュー／検索のアイコンや、カート数バッジ自体も差し替え可能です。
モバイルとデスクトップ、それぞれ独立して設定
Navi+ の中で、意外と見落とされがちな強みがここにあります。どのメニューも、モバイルとデスクトップで別々に設定できるのです。モバイルでは Tab Bar、デスクトップでは Mega Menu——メディアクエリを書かずに、完全に独立して切り替えられます。
Shopify ストアフロントのために設計、後付けではない
Navi+ は「Shopify でも動く汎用ウィジェット」ではありません。Shopify テーマの実際の挙動を踏まえて、その上に乗るよう設計されています。
- テーマ非依存。Dawn、Refresh、Sense、Studio、Origin、Crave、Symmetry、Impulse、Prestige、Empire、Motion、Stiletto、そしてカスタムテーマまで、どのテーマでも同じように動作します。メニューはテーマの Liquid マークアップの外側に存在するため、テーマのアップデート、テーマの差し替え、季節ごとのリデザインがあってもメニューには一切影響しません。
- テーマ編集ゼロ。Shopify App Store からインストールし、Online Store 2.0 の App Embed Block を有効化するだけで、Navi+ が自動的に組み込まれます。アンインストールもトグル1つで完了します。
- 純粋な HTML5 + CSS3、JS 依存ゼロ。テーマ側のスクリプトと競合せず、テーマ更新で挙動が壊れることもなく、他アプリとの互換性問題も発生しません。
- デフォルトでモバイルファースト。すべてのテンプレートが、モバイル向けに最適化された余白・文字サイズ・タップ領域からスタートし、そこからデスクトップへスケールアップしていきます。逆ではありません。
- エディタは Shopify 管理画面の外。フル機能のダッシュボードは専用アプリ
dash.naviplus.app上で動作します。Shopify 管理画面のオーバーヘッドに引きずられず軽快、どのデバイスからでもアクセス可能です。
パフォーマンスと信頼性
すべてのストアの、すべてのページに存在するメニューだからこそ、速さは譲れません。Navi+ はそのために設計されています。
- グローバル CDN。6大陸にエッジサーバーを展開。Elite プランでは Cloudflare + BunnyCDN のデュアル CDN によるフェイルオーバーに対応。
- Elite で 99.99% SLA、Business と Starter は 99.00% SLA。
- Core Web Vitals に配慮。レンダリングをブロックするスクリプトなし、レイアウトシフトなし、メインスレッドでの JS 処理なし。
- 軽量設計。ランタイムはメニューあたり数 KB（gzip 後）。初回描画後にレイジーロードされます。
Shopify へのインストール手順
- Shopify App Store を開き、「Navi+ AI Menu Builder」を検索して Add app をクリックします。
- Shopify 管理画面でインストールを承認します。この時点で課金は発生しません——Starter プランは永久無料です。
- アプリページの Open dashboard をクリックし、
dash.naviplus.appを起動します。 - テンプレートを選び、メニュータイプ（Tab Bar、Mega Menu、Slide、FAB、Grid）を選択し、アイコンとリンクをカスタマイズしたら Publish をクリックします。
- ストアフロントが即時に更新されます——テーマの再読み込みも、デプロイも、キャッシュのフラッシュも不要です。
ほとんどのストアでは、インストールから公開まで5分以内に完了します。
Shopify での料金プラン
プラットフォームが変わってもプランは同じ——同じ機能、同じ価格です。
| プラン | 料金 | こんなストアに |
|---|---|---|
| Starter | 永久無料 | メニュー1つ、小規模ストア、まず Navi+ を試してみたい方 |
| Business | $6.25 / 月 | 成長中のストア、複数メニュー、多言語対応、画像アップロード、アナリティクス |
| Elite | $10 / 月 | 大規模カタログ、無制限メニュー、フル SEO サポート、プレミアム CDN、ハンズオンサポート |
どちらの有料プランにも 7日間の無料トライアル が付きます——クレジットカード不要、全機能利用可能です。
Shopify マーチャントが得られるもの
- Shopify App Store で 4.9 の評価
- 5,000以上のストアが現在 Navi+ を稼働中
- 典型的なインストールでは、2〜3個の個別アプリ（ボトムバー系アプリ、Mega Menu 系アプリ、場合によっては Floating Button やチャットバブル系アプリ）が1つにまとまります
この「置き換え」のストーリーは、Navi+ がそれらの個別アプリの合計より安く済むことが多い理由でもあります。そして、「小さなアプリの寄せ集め」から「1つのメニュー専用ツール」への移行は、私たちが最もよく目にするアップグレードの動線です。
よくある質問
ストアが遅くなりませんか？
いいえ。Navi+ は外部 JavaScript ライブラリを使わないモバイルファースト設計で、初回描画後にレイジーロードされ、グローバル CDN から配信されます。レンダリングをブロックするスクリプトを追加することはなく、Core Web Vitals に影響を与えないように設計されています。
コードの知識は必要ですか？
いいえ。ダッシュボードはすべてドラッグ＆ドロップで、テンプレートから始められます。さらに踏み込みたい場合はカスタム CSS、HTML、JavaScript も利用できますが、ほとんどのストアはそれらに触れることなく運用できています。
うちのテーマで動きますか？
はい。Navi+ はテーマの外側で動作します。公式の Shopify テーマすべてに加え、カスタムテーマでも問題なく動きます。テーマのアップデートや差し替えがあっても影響を受けません。
多言語に対応していますか？
はい——Business と Elite で対応します。Shopify Markets、Translate & Adapt、あるいは任意の翻訳アプリと併用可能です。すべてのメニュー要素に、ロケールごとのラベルとリンクを設定できます。
他のアプリと競合しませんか？
いいえ。純粋な HTML / CSS で、グローバル JS も jQuery もサードパーティライブラリも使っていません。リリースのたびに、インストール数の多い Shopify アプリ群に対する互換性テストを行っています。
サポートはどうなっていますか？
Starter ではメールサポート、Business では24時間365日サポート、Elite ではハンズオンサポート（メニュー移行、レイアウト設定、UI の直接編集）を提供しています。