Quick answer: how to create a menu with the Navi+ app on Shopify
ShopifyでNavi+アプリを使ってメニューを作成するには、Shopify App StoreからNavi+をインストールし、Add menuをクリックしてメニュータイプを選び、テンプレート・白紙・AIから作成を開始し、テーマのApp embedsでStore Connectorを有効にして公開します。
- Shopify App StoreからNavi+をインストールし、アプリ画面を開きます。
- Add menuをクリックし、希望するナビゲーションの種類を選択します。
- 既製テンプレート、白紙のキャンバス、またはAI骨格から作成を開始します。
- コレクション、商品、固定ページへのリンクを追加・整理・装飾します。
- テーマのApp embedsでStore Connectorをオンにして保存し、Publish to websiteをクリックします。
- モバイル実機およびPCブラウザで公開されたナビゲーションを確認します。
テーマコードの編集は不要です。Navi+はShopifyのテーマapp embedを通じて動作するため、テーマファイルを編集せず、アプリ内でメニューを作成してプレビューできます。
Before you start: which Navi+ menu type do you need?
構築前に適切なナビゲーション形式を選んでおくと、作り直しを避けられます。ストアごとにカタログの規模は異なるため、購入者の閲覧のしかたに合ったタイプを選びましょう。
図1：コンセプトイラスト（Concept illustration）— Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | モバイル画面最下部に固定されるアイコン付きの固定ナビゲーションバー | モバイル訪問者が中心で主要なショッピング導線へ即座に誘導したい場合 |
| Mobile Menu | カタログ全体を格納するスライド式ドロワーまたはハンバーガーメニュー | 幅広い商品カテゴリーをすっきりと整理したモバイル目次が必要な場合 |
| Desktop Mega Menu | 商品、コレクション、バナー、アイコンを表示する多列ドロップダウン | PC利用者に複数カテゴリーや注目キャンペーンを一目で俯瞰させたい場合 |
| Mobile Mega Menu | モバイル画面向けに設計されたメガメニューのレイアウトを作成します | 多階層のカタログで、小さな画面を圧迫せずに深い閲覧経路が必要なとき |
| Icon Menu と Floating Button | 商品、コレクション、ページへリンクするアイコンタイルまたはフローティングボタンを追加します | ヘッダーを占有せずに、サポート、カート、注目のプロモーションへ素早く誘導したいとき |
モバイル訪問者が中心のストアは、Tab BarまたはMobile Menuから始められます。Nielsen Norman Groupが指摘するように、隠れたナビゲーションは見えているナビゲーションより見つけにくくなります。画面下部のTab Barは、閉じたドロワーの奥に隠さず、主要な行き先を表示し続けます。
Navi+では複数のメニュータイプを併用できますが、まずは1つのメニューを完成させて実機テストすることをおすすめします。判断基準の詳細は適切なメニュータイプの選び方ガイドをご覧ください。
Step 1: Install Navi+ from the Shopify App Store
Shopify App StoreのNavi+ Tab Bar & Mega Menu掲載ページにアクセスします。公式ストアからのインストールは、Shopify標準のインストールフローで進みます。
Installをクリックしてセットアップを開始します。Shopifyが標準の権限確認画面を表示します。Navi+はテーマのapp embedを通じてメニューを表示します。このapp embedはステップ5で有効にします。
権限を承認するとセットアップが完了し、アプリはShopify管理画面内で自動的に開きます。次回以降は、Shopify管理画面の左側メニューにあるAppsからいつでも起動できます。
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
Navi+のダッシュボードで、上部にある目立つAdd menuボタンをクリックします。Choose kind of menu画面が開き、Tab Bar、Mobile Menu、Desktop Mega Menu、Mobile Mega Menu、Icon Menu、Floating Buttonの6枚のカードが表示されます。目的に合ったカードを選択します。
Start from a template
Create from a templateを選ぶと、あらかじめ用意されたデザインレイアウトを閲覧できます。自社商品の構成に合ったものが見つかったら、Use this templateをクリックします。プレースホルダーのリンクやアイコンが読み込まれ、すぐに編集を始められます。
Start blank
ノートなどに明確なカテゴリー設計がすでに完成している場合は、Blankを選択します。サンプルのリンクを削除する手間がなく、最初から自由な設計が可能です。まだ構造が決まっていない場合は、作成前にメニュー構造をスケッチする手順をご確認ください。
Build the structure with AI
手作業の入力を省いて素早く骨格を作りたい場合は、内蔵のAIアシスタントを活用します。ストアのコンセプトや取り扱い品目を簡単な言葉で説明すると、AIがエディター内にメニュー骨格を自動生成します。生成後、リンク先の紐付けや配色は手動で調整できます。
Use your existing Shopify menu
Navi+は、既存のShopifyナビゲーションメニューを出発点として接続することもできます。エディタに取り込んだら、公開前に入れ子の位置を確認し、Shopify側の元のメニューを変更したときも再確認してください。
Step 3: Add and arrange menu items
項目の追加と並べ替えはドラッグ＆ドロップで行います。新しい項目を追加し、ドラッグして順序を変え、親項目の下に入れ子にできます。
Link to products, collections, and pages
すべてのメニュー項目には有効なリンク先が必要です。Navi+では、項目を商品、コレクション、ページにリンクできます。カテゴリは論理的に整理し、第1階層の項目名は短く保ち、売れ筋のコレクションを先頭に置きましょう。詳細はShopifyでのメニューリンク設定ガイドをご参照ください。
Nest items up to three levels
商品数が多い場合、項目の階層化によって画面の煩雑さを防げます。Navi+のBusinessプランでは、最大3階層までメニューを構成できます。Shopifyの標準メニュー機能は公式ガイドによると最上位項目の下に最大2階層のドロップダウンに対応しています。
Step 4: Customize icons, images, colors, and layout
ツリーが整ったら、ブランドに合わせてスタイルを調整します。Tab Barでは分かりやすいアイコンを選び、モバイルでラベルが読みやすいか確認します。Mega Menuでは、コレクション画像を追加し、カタログに合うレイアウトを選びます。
テキストと背景の色を、使用中のShopifyテーマに合わせて調整します。読みやすいことを確認するため、テキストとアイコンのコントラストは必ず実機のスマートフォン画面で確認してください。
公開前に、Publishタブを開き、Test this menuでメニューをプレビューしてください。スタイルの詳細はメニューのスタイル変更ガイドをご覧ください。
Step 5: Turn on Store Connector in App embeds, then publish
ストアにNavi+を表示するために、テーマコードを書いたり編集したりする必要はありません。Shopifyのテーマapp embedを通じて動作します。
図2：コンセプトイラスト（Concept illustration）— Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
日常的にアクセスがあるストアでは、複製したテーマでテストするのが安全なベストプラクティスです。Shopifyのテーマ管理ガイドに記載されている通り、テーマを複製してバックアップを用意すれば、本番の顧客に影響を与えずに検証できます。
Turn on Store Connector
Shopify管理画面からOnline Store > Themesに進み、Customizeをクリックします。サイドバーのApp embedsアイコンを押し、Store Connectorを探してトグルをオンにし、Saveをクリックします。この有効化作業は1サイトにつき1回のみで完了します。
Click Publish to website
Navi+アプリに戻り、メニューを開いてPublish to websiteをクリックします。アプリは選択した種類に応じて、Replace your main menu、Add below your header、Use your existing menu iconなどの配置オプションを提示します。Navi+は3つの配信グループに分けて案内するため、適合する配置を選択して公開トグルをオンにします。
Step 6: Preview on mobile and desktop and fix common problems
公開後は、PCブラウザだけでなく必ず実機のスマートフォンでストアを確認してください。タッチ操作での指の届きやすさや余白の感触は、PCシミュレーターでは見落としがちです。
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connectorが別テーマで有効、または保存されていない | 本番テーマのエディタを開き、App embedsでStore ConnectorをオンにしてSaveを押す |
| Two menus show at once | テーマ標準のヘッダーメニューが非表示になっていない | Navi+の公開設定でReplace your main menuを選ぶか、テーマ側のメニューを非表示にする |
| Menu disappeared after changing theme | テーマ変更時にApp embed設定が自動引き継ぎされない | 新しいテーマのエディタを開き、App embedsでStore Connectorを再有効化して保存する |
Menu does not appear
公開後にメニューが表示されない場合、下書きテーマ側でStore Connectorをオンにしていたり、テーマエディタでSaveボタンを押し忘れていないか確認してください。
Two menus show at once
既存メニューとNavi+メニューが重複して表示される場合、テーマ標準のナビゲーションブロックが残っています。Navi+側でReplace your main menuを設定するか、テーマ側のヘッダー設定で標準メニューを非表示にします。
Menu disappeared after changing theme
Shopifyテーマを切り替えると、App embedは自動でオンになりません。新しいテーマのエディタを開き、Store Connectorを再度オンにして保存してください。詳細はメニューが表示されない場合のチェックリストをご確認ください。
How to turn off a Navi+ menu or go back to your theme menu
Navi+はapp embedで動作するため、既定のナビゲーションに戻す際にテーマコードを編集する必要はありません。
アプリを有効にしたまま個別のメニューをオフにするには、Navi+のダッシュボードを開きます。作成した各メニューには On / Off のステータスが表示されます。メニューを Off にすると本番ストアでの表示が止まり、テーマ既定のメニューが再び表示できます。
テーマ全体でNavi+の表示を完全に止めたい場合は、Online Store > Themes > Customizeを開き、App embedsタブでStore ConnectorをオフにしてSaveを押します。複製テーマでテストしていた場合は、下書きを破棄するだけで完結します。
Trade-offs: when you don’t need Navi+ yet
専用のメニューアプリには多彩な利点がありますが、すべてのShopifyストアに最初から必須というわけではありません：
第1に、商品数が少なくシンプルな構成の場合、Shopify標準のメニュー機能（最大2階層のサブメニュー対応）とテーマ付属のモバイルメニューで十分なケースが多くあります。数個のリンクのために外部アプリを入れると管理負担が増えます。
第2に、テーマ変更時には運用上の注意が必要です。新しいテーマへ移行するたびに、Store Connectorの埋め込みを手動でオンにし直す必要があります。
第3に、AIによる骨格生成は便利ですが、完成品をワンクリックで提供するものではありません。リンク先の割り当てや画像選定、色調整には一定の作業時間が必要です。
最後に、Tab Bar、ドロワーメニュー、フローティングボタンなどを一度に過剰に配置すると、狭いモバイル画面が圧迫され、かえって顧客を迷わせてしまう恐れがあります。
Where Navi+ fits
最初のメニューがストア上で順調に機能し始めたら、次のステップとして異なる役割を持つ2つ目のメニューを追加するのが一般的です。例えば、頻繁に使う操作（検索、カート、人気商品）を画面下の固定Tab Barにまとめ、全カテゴリーの一覧はMobile Menuドロワーに収める組み合わせが定番です。お問い合わせ用に控えめなFloating Buttonを添えるのも効果的です。
追加のメニューもすべてダッシュボード内の同じAdd menuボタンから作成できます。さらに、Navi+の機能はノーコードでShopify以外のWebサイトにも展開可能です。マルチデバイス設計の詳細はデスクトップとモバイルメニューの作成手順をご覧ください。
最初のメニューが完成したら、次はTab Barと並行して全商品を網羅するMobile Menuなど、別の目的のメニューを追加してみましょう。同じAdd menuボタンから簡単に作成できます。まだ導入されていない方は、Shopify App StoreのNavi+ Tab Bar & Mega Menuからご利用ください。
Action checklist
Shopifyストアでのメニュー作成・公開・検証を進める際は、こちらのチェックリストをご活用ください：
- ショップの当面の目的に最適なメニュータイプを選定する
- Navi+ダッシュボードのAdd menuをクリックする
- テンプレート、白紙、AI骨格から作成手法を選択する
- 各項目に商品、コレクション、ページのリンク先を割り当てる
- カテゴリー階層を最大3レベル以内に整理する
- PublishタブのTest this menuで見た目と操作感をテストする
- アクセスがある本番環境の場合はテーマを複製してテストする
- App embedsでStore ConnectorをオンにしてSaveをクリックする
- Publish to websiteをクリックして希望の配置場所を選択する
- 実機のスマートフォンとPCブラウザで挙動を確認する
テーマコードを触らずに快適なナビゲーションを構築するには、Shopify App StoreのNavi+ Tab Bar & Mega Menuをご活用ください。
FAQ
Do I need to edit theme code to show a Navi+ menu?
いいえ。テーマのLiquidコードを編集する必要はありません。ShopifyのテーマエディタでStore ConnectorのApp embedを有効にし、アプリ内でメニューを公開するだけで完了します。この有効化は1サイトにつき1回のみで済みます。
Can I use my existing Shopify menu with Navi+?
はい。Navi+は既存のShopifyメニューと接続できます。接続後は、各階層を確認し、カテゴリとリンクが意図どおりに表示されるかチェックしてください。
Should I start from a template or with AI?
好みのデザイン傾向が決まっている場合はテンプレートが早いです。AIは説明文からメニューの骨格を素早く作成してくれますが、リンク先や配色の手動設定は必要です。
How many levels can a Navi+ menu have?
現在、Businessパッケージでは最大3階層までメニューを構造化できます。比較として、Shopify標準機能では親項目の下に最大2階層のドロップダウンがサポートされています。
How do I turn a Navi+ menu off?
Navi+ダッシュボードで該当メニューのスイッチをOffにするだけでいつでも非表示にできます。テーマ全体で無効化したい場合は、テーマエディタのApp embedsでStore Connectorをオフにして保存します。
Why is my Navi+ menu not showing?
公開中の本番テーマではなく下書きテーマ側でStore Connectorをオンにしていたり、保存ボタンを押し忘れている場合がほとんどです。テーマを変更した際も再設定が必要です。
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。