なぜNavi+なのか？
カテゴリー: デザイン＆インターフェース 読了時間: 8分
問題の本質
運がよければ、訪問者はサイトに着いた最初の数秒で必要なものを見つけられる。しかし現実はそうならないことがほとんどで、そのとき訪問者が最初に目を向け、最初にクリックするのはナビゲーションメニューだ。
問題は、Shopify・WooCommerce・WordPress・その他のプラットフォームでウェブサイトを構築するとき、手に入るメニューが次の3つのパターンのどれかに陥りがちな点だ――そしてどれも十分ではない：
訪問者はあなたがどのテーマを使っているか気にしない。彼らはサイトに来て、明確な道筋が見えなければ、そのまま離脱する。気づかないうちに、あなたは注文のチャンスを逃している。
プロフェッショナルなメニューソリューションが必要な理由
プロフェッショナルなメニューとは、単に「見た目が良い」ことではない。メニューはどのウェブサイトでも（「カートに追加」ボタンに次いで）2番目に多く操作される要素であるため、厳しい基準を満たさなければならない。以下があなたが求めるべき条件だ：
1. 表現力があり、ストーリーを語れる
プロフェッショナルなメニューは、各シーンに対応できるだけの表示形式を持つ必要がある：カテゴリーが多いデスクトップ向けにはMega Menu、ネイティブアプリのような操作感をモバイルユーザーに提供するTab Bar、スッキリしたハンバーガーパネルのSlide Menu、チャット・電話・予約などの緊急アクション向けのFAB、ビジュアルなランディングページ向けのGrid Menu。
さらに重要なのは、メニューが購買の旅を導くことだ――単にカテゴリーを羅列するのではなく、ターゲットユーザー、用途、シーン、ベストセラーを提示する。メニューは黙って売るセールスパーソンであるべきで、目次であってはならない。
2. テーマや他のアプリと競合しない互換性
プロフェッショナルなメニューは、サイトの他の部分と平和的に共存しなければならない。カートを隠したり、検索パネルを壊したり、チャットウィジェットと重なったりしてはいけない。「きれいなメニュー」か「現在のアプリを維持するか」の選択を迫ってはいけない。
テーマを変えても設定が消えてはならない――メニューはテーマから独立して存在し、特定のテーマのファイルにハードコードされるべきではないからだ。
3. 速く、完全に信頼できる
メニューは絶対に「死んで」はいけない。訪問者がメニューをタップして2秒固まれば、彼らは離脱する。弱い3G回線でメニューを開いて永遠に読み込まれなければ、彼らは離脱する。
プロフェッショナルなメニューは十分に速く読み込まれ、遅い通信環境でも動作し、メインページのレンダリングをブロックしてはならない。どんなときでも、どのデバイスでも、常に準備できていなければならないコンポーネントだ。
4. 個々のメニュー項目まで測定できる
これはほぼ誰も正しく実装できていない重要な要素だ。測定できないものは最適化できない――そして標準的なツールで正確に測定するのが最も難しいコンポーネントの一つがメニューだ。
Google Analyticsはリンクが何回クリックされたかは教えてくれるが、そのクリックがどこから来たかはわからない――メインメニューか、第2階層のサブメニューか、Mega Menuのバナーか、それともボトムのTab Barか？比較できない：同じ商品で、位置Aと位置Bではクリック数がどう違うか？
プロフェッショナルなメニューは各項目について2つのことを別々に計測しなければならない：何回表示されたか（インプレッション）と何回クリックされたか。そこから、位置・メニュータイプ・A/Bバリアントを比較し、時間をかけてどの選択が本当に成果を出すかを知ることができる。
このデータなしには、すべてのメニュー変更は推測に過ぎない。
5. 他のアプリやウェブサイトコンポーネントとのインタラクション
現代のメニューは静的なリンクのリストではない。検索ボックスを開く、カートパネルをトリガーする、チャットウィジェットを起動する、メールや予約アプリと連携する――そして最も重要なのは、JavaScriptを呼び出せることで、必要に応じてサイト上で動作している他のあらゆるアプリと連携できる。
ページへのリンク張りしかできないメニューは2010年代のメニューだ。現代のメニューは中央コントロールポイントであり、あらゆる重要なアクションが1タップで起動できる場所だ。
6. 多言語・マルチマーケット対応
複数のマーケットで販売しているなら、メニューもそれに追随しなければならない。Shopify Marketsとの連携、WordPress上での多言語サポート、マーケットごとの適切な通貨と適切なラベルの表示――これはプレミアム機能ではなく、基本的な要件だ。
7. 完全に自分の手中に――開発者依存からの解放
最後に、そしておそらく最も重要なこと：サイトオーナーであるあなたが、必要なときにメニューを変更できなければならない。セールシーズンの到来、新コレクションのローンチ、新たなマーケティング戦略、異なるレイアウトのA/Bテスト――これらすべてが開発者を雇わず、デプロイを待たずに、ドラッグ＆ドロップで実行できるべきだ。
私たちのソリューション：Navi+ AI Menu Builder
Navi+はノーコードのメニュービルダーだ――テーマに一切触れず、1行のコードも書かずに、どのウェブサイトにも美しく高コンバージョンのメニューを作れる。
訪問者が必要なものを見つけるのに苦労しているなら、メニューが障壁かもしれない。Navi+は数分でそれを解決するお手伝いをする。
Navi+の仕組み
Navi+はウィジェットだ――使用中のテーマを置き換えたり変更したりしない。代わりに、軽量なスクリプトをページに注入し、既存のレイアウトの上にメニューをレンダリングする。
すべてはNavi+ダッシュボードから管理される。すべての変更はコード編集なし、テンプレート変更なし、テーマの再公開なしで即座に反映される。
フロー：
- ダッシュボードでメニューを作成する。
- Navi+が小さなスクリプトを生成する。
- そのスクリプトをウェブサイトに埋め込む（ShopifyではApp Block経由、他のプラットフォームではコードスニペット経由）。
- メニューはすべてのページ読み込み時にレイアウトの上にレンダリングされる。
あらゆるプラットフォームに対応
Navi+はすでに使用しているツールと連携する：
Shopify · WordPress · WooCommerce · Wix · Webflow · Squarespace — <script>タグを受け入れるあらゆるウェブサイトにも対応。
Navi+ではないもの
- テーマではない — Navi+は現在のテーマと並行して動作し、代替するものではない。
- 手動でインストールするコードではない — 1つのApp Block（Shopify）または1つの埋め込みスニペットで完結する。
- サイトを壊すプラグインではない — Navi+が無効になれば、元のテーマメニューが自動的に戻ってくる。
スピードのための設計
Navi+のアセットはCloudflare CDN経由で配信され、平均読み込み時間は約52ms――通常、プラットフォーム自身のスクリプトよりも速い。初回読み込み後、メニューはキャッシュされ瞬時に開く。
1つのアプリに5種類のメニュー
「このメニューかあのメニューか」を選ぶ必要はない――Navi+は5種類すべてを提供し、必要に応じて組み合わせられる：
- Mega Menu — 画像・バナー・バッジを含むマルチカラムのドロップダウン。多くのカテゴリーをビジュアルに見せたいデスクトップ向けに設計。
- Tab Bar — モバイル向けの固定ボトムナビゲーションバー。ウェブサイトではなくネイティブアプリを使っているような感覚を訪問者に提供。
- Slide Menu — サイドからスライドインするハンバーガーパネル。スッキリして親しみやすく、無制限のネストレベルをサポート。
- FAB（フローティングアクションボタン） — チャット、電話、「トップへ戻る」、予約などの緊急アクション向けのフローティングボタン。
- Grid Menu — ホームページ、ランディングページ、または従来のメニューのビジュアル代替としての画像グリッド。
すべてはドラッグ＆ドロップインターフェースで設計される――コード不要、開発者不要。
テーマ非依存――テーマを変えてもメニューは残る
これがコアの差別化ポイントだ。Navi+は現在使用しているテーマに「ロックイン」されない。メニュー設定はNavi+ダッシュボードに独立して保存され、テーマに依存しない軽量なメカニズムでウェブサイトに注入される。
今日はDawnを使っていて、明日別のテーマに切り替えても――メニューはそのままそこにある。ゼロから再構築する必要はない。開発者によるマイグレーションも不要。
競合せず共存できる互換性
Navi+はサイトの他の部分と平和的に共存するよう設計されている：
- テーマのハンバーガーメニュー、検索パネル、カートドロワーを隠さない――Navi+はそれらを置き換えるのではなくトリガーすることができる。
- Zインデックスはコンテキストに応じて調整するスマートアルゴリズムによって意図的に管理され、チャットウィジェット、ポップアップ、その他のアプリと重なったり隠れたりしない。
- Navi+は外部ライブラリを使用していない――テーマの既存コードや他のアプリとの競合を完全に排除。
- 最も人気のあるテーマと広く使われているプラグイン・アプリでテスト済み。
測定可能――どのメニュー項目が実際に機能するかを知る
これはほぼ他のメニュービルダーが提供していない機能だ。Navi+はメニュー項目ごとに以下を追跡する：
- インプレッション — その項目を実際に見た訪問者数。
- クリック数 — どのポジションから（メインメニュー、第2階層のサブメニュー、Mega Menuのバナー…）。
- 項目ごとのCTR — ポジション・A/Bバリアント・メニュータイプをまたいでパフォーマンスを比較できる。
「このメニューの方が良さそう」という推測をやめ、実際のデータに基づいた意思決定ができるようになる。
ウェブサイトや他のアプリとの深い連携
各Navi+メニュー項目はただのリンクではない。以下のことができる：
- カートパネル・検索ボックス・テーマのオリジナルハンバーガーメニューを開くトリガー — 訪問者が自分で探しに行かなくて済む1タップ操作。
- チャットウィジェットを起動するコマンド（Shopify Inbox、Tidio、Messenger、Zalo…）――メニューをサポートへの入り口に変える。
- Mailto、tel:、sms: — メニューから直接電話・メール・SMSを発信。
- カスタムJavaScript — ページ上で動作する任意の関数を呼び出し、APIなしであらゆるアプリと連携。
メニューは中央コントロールポイントになる――静的な目次ではなく。
多言語・マルチマーケット対応
Navi+はShopify Marketsと直接連携し、各マーケットに適した言語・通貨・ラベルを表示する。WordPress/WooCommerceでは、Navi+は人気の多言語プラグインと連携する。一度設定すれば、各マーケットの訪問者に対してメニューが自動的に正しく表示される。
条件付き表示――正しいオーディエンスに、正しい瞬間に、正しいページで
各メニュー（および各メニュー項目）は表示ルールをサポートする：
- デバイス別（モバイルのみ、デスクトップのみ、または両方）。
- URL別（商品ページのみ表示、チェックアウトでは非表示…）。
- 訪問者の状態別（ログイン済み／未ログイン）。
- 言語・マーケット別。
すべてコードなしで設定可能――ダッシュボードで数タップするだけ。
すべてあなたの手中に――メニューを自分で所有する
すべての変更はNavi+のドラッグ＆ドロップダッシュボードから行われる。セール開始？Mega Menuのバナーを2分で差し替え。新コレクションのローンチ？Tab Barに追加してすぐ公開。別のレイアウトをA/Bテストしたい？第2バージョンを作成し、結果を測定し、勝者を残す。
デプロイなし。開発者を待つ必要なし。テーマを壊すリスクなし。
必要なときのリアルサポート
ダッシュボード内のライブチャットで、通常数分以内に返信。プラットフォーム別ガイドを完備したヘルプセンター。必要であれば、Navi+ Careチームがメニューをデザインしてくれる――まるでエキスパートをオンコール待機させているようなものだ。