Shopifyメニュービルダーアプリの使い方入門（初心者向けステップバイステップ）

マーチャントがメニュー作成アプリを検索すると、ECサイトのナビゲーションではなく飲食店の料理メニューのチュートリアルが表示されることがよくあります。本ガイドは、Shopifyストアのオンラインショップ用ナビゲーションメニューの設計と公開に特化しています。すでに売上が立っている稼働中のストアで初めてナビゲーションアプリを設定するのは不安に感じられるかもしれませんが、プログラミング言語の知識は不要です。

紙の上でカテゴリをスケッチし、テーマの複製版で練習し、まずは1つのメニュータイプに集中して、実機のスマートフォンでタッチ操作を確かめてから公開しましょう。

Quick answer: how to get started with a Shopify menu builder app

Shopifyメニュービルダーアプリを使い始めるには、まず紙の上でメニューをスケッチし、学ぶメニュータイプを1つ選び、テーマエディタでアプリ埋め込みをオンにして、少数の項目を作成し、スマホ実機で確認した上で公開して各リンクを点検します。

1. Step 1: Sketch your menu structure: 紙にコレクション構成を書き出し、管理画面の「コンテンツ > メニュー」で基本リンクを整える。
2. Step 2: Pick one menu type to learn first: 顧客の利用端末に合わせて、Tab Bar、Mobile Drawer、またはMega Menuのいずれかを選ぶ。
3. Step 3: Install the app and turn on the app embed: アプリを追加し、テーマエディタのサイドバーでアプリ埋め込みをオンにして保存する。
4. Step 4: Build your first menu: 明確なラベル、分かりやすいアイコン、確実なリンク先で4〜5個の主要項目を作成する。
5. Step 5: Match your brand: テーマの背景色、フォント、表示位置に合わせてデザインを調整する。
6. Step 6: Preview on a phone and a desktop: 複製テーマのプレビューを開き、スマートフォンの実機ですべてのリンクをタップ確認する。
7. Step 7: Publish, check every link, and fix common problems: アプリ内で公開ボタンを押し、本番ストアで動作と表示の重複を確認する。

作業時間が1時間しかない場合は、複製したテーマ上でステップ1〜3とステップ6を集中的に実施してください。

Four terms to learn before you start

設定画面を開く前に、頻出する5つの基本用語を確認しておきましょう。

Step 1: Sketch your menu structure before you open the app

準備なしにアプリを開いて作業を始めるのは避けましょう。設定画面の中で直接階層を組み立てようとすると、情報が散漫になり判断に迷います。まずは紙の上で内容を整理します。

顧客にとって不可欠な遷移先をリストアップします：主要コレクション、注目の商品群、重要ページ（会社概要、配送ポリシー、お問い合わせ）、ブログ記事 (Shopify Help Center)。紙の上にメニュー構造をスケッチ（sketch your menu structure）し、2〜3階層のツリーを描きます。4〜5個の主要カテゴリを定め、その下にサブコレクションを配置します。

次にShopify管理画面を開き、コンテンツ > メニュー にアクセスします (Shopify Help Center)。不要なリンクを整理し、コレクションURLを確認します。親項目がグループ化専用で個別ページを持たない場合は、リンク欄に # を入力します (Shopify Help Center)。

階層の深さは整理して保ちましょう。Shopifyの標準仕様では、第1階層項目の下に最大2階層のドロップダウンメニューを配置できます (Shopify Help Center)。管理画面であらかじめ整理しておくことで、アプリ側への連携が非常にスムーズになります。

Shopify’s own video shows how to nest menu items:

Step 2: Pick one menu type to learn first

近年のメニューアプリには、ボトムバー、メガメニュー、スライド式ドロワー、フローティングボタンなど多様な形式があります。最初のセッションで全てを作ろうとすると混乱します。顧客が利用している端末に合わせて、最初に学ぶメニュータイプを1つ選定（pick one menu type）してください。

図1：コンセプトイラスト（Concept illustration）— Step 2: Pick one menu type to learn first

Mobile shoppers first

訪問者の大半がスマートフォンを使っている場合、スマホで見つけやすくタップしやすいメニューが何より重要です（下記の Nielsen Norman Group の引用を参照）。モバイル重視のストアでは、まず次の2つを学ぶのがおすすめです：

• Tab Bar: スマホ画面の最下部に固定されるバー。ホーム、一覧、検索、カートなどの主要な行き先を、常時表示される1本のバーにまとめます。
• Mobile Drawer: タップすると画面脇からスムーズにスライドするパネル。多階層のカテゴリやアカウント情報を見やすく整理できます。

Desktop shoppers first

取り扱いカテゴリが多く、注文の大部分がPCブラウザから行われるストアの場合は以下を優先します：

• Mega Menu: マウスホバーやクリックで複数列のカテゴリやバナーを一望できる横長ドロップダウンパネル。

ナビゲーションの分かりやすさは視覚的な手がかりに左右されます。Nielsen Norman Groupの調査でも次のように指摘されています：”visual salience, information scent, context, tappability signifiers, and user expectations also affect navigation discoverability on mobile devices” (Nielsen Norman Group)。

ストア規模に合わせたメニュー選定については how to choose the right menu type をご覧ください。また、親指操作を最適化する tab bars and hybrid mobile navigation の導入事例も参考になります。本日はまず1つの形式に絞りましょう。

Step 3: Install the app and turn on the app embed

Shopifyアプリストアから目的のアプリをインストールします。インストール後、管理画面の アプリ に表示されますが、自動的にストア上に表示されるわけではありません。

最新のShopifyアプリは アプリ埋め込み (App embed) を利用します。Shopifyの公式仕様によれば、アプリ埋め込みはテーマ上にオーバーレイとして表示される要素であり (Shopify Help Center)、Liquidファイルを汚すことなく導入できます。

アプリ埋め込みを有効化する手順（turn on the app embed）：

1. Shopify管理画面で オンラインストア > テーマ を開く。
2. 作業用テーマ（ステップ6で作成する複製テーマを推奨）の カスタマイズ をクリック。
3. 左サイドバーの アプリ埋め込み アイコンをクリック (Shopify Help Center)。
4. インストールしたアプリを見つけ、トグルスイッチを オン に切り替える。
5. 右上の 保存する をクリック。
6. ストアをプレビューしてアプリが機能しているか確認 (Shopify Help Center)。

Shopifyドキュメントには、アプリ埋め込みはあらゆるテーマバージョンで使用可能と記載されています (Shopify Help Center)。ただし、すべての外部アプリが独自カスタマイズされたテーマデザインに自動でフィットするとは限りません。また、将来テーマを変更した際は、新しいテーマでアプリを再有効化する必要があるという保守ルールを覚えておきましょう (Shopify Help Center)。

テーマの拡張構造について詳しくは、how app embeds work with your theme をご確認ください。

Step 4: Build your first menu: items, links, and icons

アプリ管理画面を開き、最初のメニューを組み立てます。まずはステップ1のスケッチに沿って、主要項目を4〜5個に絞って作成します。

作成時の実務ポイント：

• 明確な項目名：「新着商品」「コレクション」「人気ランキング」「お問い合わせ」など、迷わない名称を付けます。
• 公開中の実在ページにリンク： 必ず公開済みのコレクションや固定ページを設定します。中身のない空カテゴリへのリンクは避けてください。
• 直感的なアイコン： スマホ向けタブバーでは、意味がすぐ分かるアイコン（ホームなら家、検索なら虫眼鏡、カートならバッグ）をテキストと併せて表示します。
• サブ項目は控えめに： 主要リンクの表示が整ってから下位リンクを追加します。Shopify標準の「最大2階層の入れ子構造」を意識しましょう (Shopify Help Center)。
• 既存のShopifyメニューを接続： 多くのアプリでは「コンテンツ > メニュー」の内容を読み込めます。お使いのアプリが対応していれば、手作業で入力する代わりにこの機能を使いましょう。

注：本記事では最初のメニューの基本構築に焦点を当てています。複数列のメガメニューや販促バナーの組み込みについては別記事で詳しく解説しています。

Step 5: Match your brand: colors, fonts, and position

色合いや書体がテーマと合っていないメニューは、不審な印象を与えて離脱を招きます。ストア本来のデザインと違和感なく溶け込むようにカスタマイズしましょう。

確認すべき3つのポイント：

• カラーパレット： テーマ設定を確認し、背景、ヘッダー、テキストのカラーコード（HEX）をメモします。アプリ側でも同じ色を指定し、屋外のスマートフォン画面でも視認できる十分なコントラストを確保します。
• フォントと文字サイズ： テーマの本文と同じフォントファミリーを選びます。スマホでも読みやすくタップしやすい文字サイズを保ってください。
• 配置位置： タブバーは画面最下部に固定し、モバイルドロワーは左端から展開させ、メガメニューはヘッダー直下に配置します。

画面下部の「カートに追加」固定ボタンやチャットウィジェットの上にメニューが重なってしまわないよう、余白を調整してください。

デザインの一貫性については、make navigation feel like your store で詳しく解説しています。

Step 6: Preview on a phone and a desktop before you publish

未検証のまま本番ストアにメニューを公開してはいけません。以下の3つの検証ルールを守ってください：

図2：コンセプトイラスト（Concept illustration）— Step 6: Preview on a phone and a desktop before you publish

• Duplicate theme first: Shopifyの公式ヘルプでは、設定変更前に「make a backup copy so that you can discard your changes and start again if you need to」と推奨されています (Shopify Help Center)。オンラインストア > テーマ から本番テーマの複製を作成し、その複製上でアプリを有効化して作業を進めてください。
• Tap every item: パソコンの簡易プレビューだけで済ませず、Preview on a phone：実際のスマートフォンでプレビューURLを開いてください。片手で端末を持ち、すべてのリンクやタブをタップして反応速度を確かめます。
• Check the theme menu: テーマ標準のヘッダーメニューとアプリメニューが重複していないか観察します。メニューの表示位置はテーマによって異なるため (Shopify Help Center)、テーマエディタで標準メニューブロックを非表示にする必要があるか判断します。

最後にPCモニタでもブラウザ幅を広げてメガメニューのレイアウト崩れがないか確認します。

Step 7: Publish, check every link, and fix common problems

実機での動作確認を終えたら公開します。Navi+ を含む一部のメニューアプリでは、テーマエディタでのアプリ埋め込み有効化に加えて、アプリ管理画面側で「公開」ボタンを押す必要があります (Navi+ Help Center)。

Check every link: 公開後、ブラウザのシークレットウィンドウで本番URLを開き、すべてのリンクをクリックして遷移先を確かめます。問題がある場合は以下の表を参照してください：

解決しない複雑な表示崩れがある場合は、アプリ公式のサポート窓口にお問い合わせください。

Trade-offs: when you don’t need a menu builder app yet

客観的な判断として、すべてのShopifyストアにメニューアプリが必要なわけではありません。標準機能で足りる状況を把握しておくことで、余計な工数を省けます。

取扱商品が少ない小規模ストアであれば、Shopify標準の コンテンツ > メニュー だけで十分なことが多いです (Shopify Help Center)。標準メニューでも最大2階層の入れ子構造をサポートしており (Shopify Help Center)、余計なアプリを追加せずにシンプルに運用できます。

アプリを追加すると、管理画面が増え、テーマ変更時の再有効化作業などの保守管理が伴います (Shopify Help Center)。

しかし、商品数が増加し、スマホ用固定タブバー、柔軟なドロワー、画像付きメガメニューなどテーマ標準では実現できない要望が出てきた段階では、専用アプリの導入が大きな価値をもたらします。

ストアの現状評価については、Shopify theme menu limitations の記事も合わせてご参照ください。

What to learn next: Icon Menu, Floating Button, and seasonal menus

基本メニューの稼働が軌道に乗ったら、次のステップとして新しいナビゲーション形式を試してみましょう：

• Icon Menu: トップページに丸型アイコンのカテゴリ一覧を並べ、視覚的な商品探しをサポート。
• Floating Button (FAB): 画面隅に丸いボタンを固定し、配送追跡やサポートチャットへ1タップで誘導。
• 季節限定メニュー: セール期やホリデーシーズンに合わせて特集コレクションをメニューの先頭に配置。

視覚的ナビゲーションのメリットについては when an icon menu beats a text list をご覧ください。公開後は 5 metrics worth tracking で顧客の反応を測定しましょう。

Where Navi+ fits

本記事で解説したすべてのステップを直感的な操作で実践できるアプリとして、Navi+ Tab Bar & Mega Menu をご紹介します。

Navi+は、ドラッグ＆ドロップ操作でスマホ向けボトムタブバー、メガメニュー、モバイルドロワー、アイコンメニュー、フローティングボタンを作成できるShopify専用アプリです (Shopify App Store)。既存のShopifyメニューとワンクリックで接続でき、豊富なテンプレートやAI支援によるスピーディなメニュー生成にも対応しています (Shopify App Store)。

無料プランが用意されており、初期費用なしで設定と操作を学べます (Shopify App Store)。公開フローも分かりやすく、テーマエディタで「Store Connector」をオンにしてメニューを整えた後、Navi+管理画面で「Publish to website」をクリックするだけで完了します (Navi+ Help Center)。

Navi+の公式ドキュメントでも安全な検証手順が推奨されています：”The best practice is to create a duplicate Theme and test Navi+ on that version first” (Navi+ Help Center)。複製テーマを使えば、スマホ実機でしっかり納得いくまで調整できます。

Action checklist: your first-session plan

初回の作業セッションにはこちらのチェックリストをご活用ください：

• Sketch your menu structure: 紙に4〜5個の主要カテゴリとサブコレクションを描き出す。
• Tidy Content > Menus: Shopify管理画面で不要なリンクや下書き商品を削除する (Shopify Help Center)。
• Duplicate theme first: 安全なテスト環境のために本番テーマを複製する (Shopify Help Center)。
• Pick one menu type: タブバー、モバイルドロワー、メガメニューのいずれか1つを選ぶ。
• Turn on the app embed: テーマエディタでアプリ埋め込みをオンにして保存する (Shopify Help Center)。
• Build 4–5 core items: 簡潔な表示名、アイコン、正しいコレクションリンクを設定する。
• Match colors/fonts: テーマのカラーコードや書体にデザインを合わせる。
• Tap every item on a phone: スマートフォン実機でプレビューを開きすべてのリンクをタップ確認する。
• Publish and check every link: アプリ内で公開を実行し本番環境で各リンクを点検する (Navi+ Help Center).
• Re-check after theme changes: 今後テーマを変更した際はアプリ埋め込みを再有効化する (Shopify Help Center).

これらの手順を1つのアプリで練習したい場合、Navi+ Tab Bar & Mega Menu には無料プラン、ビルド済みテンプレートがあり、既存のShopifyメニューを接続できます。複製したテーマで始めて、納得できたら公開しましょう。

FAQ

どのメニュー形式を最初に作成すべきですか？
顧客が最も利用している端末に合わせて選んでください。スマートフォン利用が主流ならTab BarまたはMobile Drawer、PCで多数のカテゴリを扱うならMega Menuから始めましょう。

事前にShopify側のメニューを変更しておく必要がありますか？
基盤となるリンクを整えるため、事前に「コンテンツ > メニュー」を整理しておくことをお勧めします (Shopify Help Center)。Navi+などのアプリは既存メニューをそのまま読み込むことができます (Shopify App Store)。

Shopifyでアプリ埋め込みを有効にするにはどうすればよいですか？
Shopifyテーマエディタを開き、左サイドバーの「アプリ埋め込み」アイコンをクリックして、対象アプリのトグルをオンにして保存します (Shopify Help Center)。

メニューアプリがストアに表示されないのはなぜですか？
テーマエディタでアプリ埋め込みがオンになっていない、保存されていない (Shopify Help Center)、テーマ変更後に再有効化されていない (Shopify Help Center)、またはアプリ側で公開ボタンが押されていないことが主な原因です (Navi+ Help Center)。

顧客に見られずにテストすることは可能ですか？
可能です。本番テーマを複製し、その複製テーマ上でアプリ埋め込みをオンにしてメニューを作成すれば、スマホ実機でプライベートに確認できます (Shopify Help Center; Navi+ Help Center)。

Shopifyのドロップダウンメニューは何階層まで作成できますか？
Shopifyの標準メニューでは、親項目（第1階層）の下に最大2階層の入れ子ドロップダウンメニューを配置できます (Shopify Help Center)。

Sources

• Shopify Help Center: Set up drop-down menus in your online store
• Shopify Help Center: Menus and links
• Shopify Help Center: App embeds and theme extensions
• Shopify Help Center: Duplicating themes
• Nielsen Norman Group: Mobile Navigation Discoverability
• Navi+ Help Center: Publishing on Shopify
• Shopify App Store: Navi+ Tab Bar & Mega Menu