Shopifyでホーム・商品一覧・会社概要リンクを備えたメニューバーを作成する方法（PC・モバイル対応）
ストア開設時に用意する最初のメニューは、「ホーム」「商品一覧（カタログ）」「会社概要（About）」という厳選された3つのリンクだけで十分です。Shopify管理画面の「コンテンツ > メニュー」で一度構築すれば、PCのヘッダーやモバイルのドロワーに表示されるほか、スマートフォン画面下部に固定タブバーとして配置することで、購入者が常にリンクを見つけられるようになります。
- 3つの必須リンク：ホームはトップへ戻り、商品一覧は全商品を一覧表示し、会社概要はストアの信頼性を担保します。
- 2通りの自動表示：同じメニュー構成がPCヘッダーとスマートフォンの引き出しメニュー（ドロワー）の両方に反映されます。
- スマホでの操作性：ボトムタブバーを追加すれば、主要な3ページが常にスマホ画面に表示され、1タップで移動できます。
クイックアンサー：ホーム・商品一覧・会社概要メニューバーの作成手順
オンラインストア > ページで会社概要ページを作成し、コンテンツ > メニューでメインメニューを開いて3つの項目を追加します：ホーム（リンク先タイプ：ホームページ）、商品一覧（/collections/allまたはコレクション）、会社概要（作成したページ）。保存すると、テーマの設定に応じてPCヘッダーおよびスマホのドロワーに反映されます。スマホ向けにタブバーを追加することもできます。
設定の5ステップ：
- 会社概要ページを作成：オンラインストア > ページで作成し、表示状態を「表示」にして保存します。
- コンテンツ > メニューを開く：Shopify管理画面からメインメニューを選択します。
- 3つのリンクを追加：ホーム（リンク種別：ホームページ）、商品一覧（
/collections/allまたは特定コレクション）、会社概要（作成ページ）。 - メニューを保存：テーマカスタマイズ画面でヘッダーに該当メニューが割り当てられていることを確認します。
- モバイルで表示確認：ドロワーの動作を実機で確認し、必要に応じて下部固定タブバーを導入します。
ホーム・商品一覧・会社概要メニューバーを構成する要素
新規ストアをオープンする段階で、階層の深い複雑なメニューを用意する必要はありません。3つのリンクに絞り込むことで、初めて訪れたユーザーを迷わせない明確な導線が完成します：
- ホーム（Home）： ストアの起点となるアンカーとして機能し、どの階層からでもワンクリックでトップページへ戻れます。
- 商品一覧（Catalog）： 訪問者が商品を探し、コレクションを閲覧し、購買行動を起こすための中心的な売り場です。
- 会社概要（About）： ブランドの成り立ちや品質へのこだわりを伝え、初めて訪れた買い物客に確かな安心感を与えます。
最初のメニューを3項目にとどめることで、画面サイズを問わず高い視認性を保てます。ニールセン・ノーマン・グループ（NN/g）の調査によれば、常時表示されるナビゲーション項目は第1階層が4〜5項目以内である場合に最も高い効果を発揮します。3つの基本リンクにしておくことで、小さなスマホ画面でも文字が省略されず、将来的に「お問い合わせ」や「FAQ」を追加する余白も確保できます。
ステップ1：会社概要ページを作成し商品一覧のリンク先を選ぶ
メニューを組み立てる前に、各項目が正しくリンクできるようにリンク先ページをあらかじめ公開状態にしておきます。
会社概要ページの作成
Shopify管理画面でオンラインストア > ページを開き、ページを追加をクリックします。タイトルに会社概要またはAbout Usと入力します。事業の経緯や商品へのこだわり、購入者への約束など簡潔なブランドストーリーを記載します。Shopify公式のページに関するドキュメントでは、ページは頻繁に変更されない基本情報の掲載に適していると説明されており、会社概要ページの作成ガイドでも顧客の信頼獲得における重要性が強調されています。表示状態を表示にして保存してください。なお、About pageを作成しただけでは自動的にメニューバーには追加されません。次のメニュー編集ステップで手動登録する必要があります。
商品一覧のリンク先選定
Catalog linkの接続先をストアの運用方針に合わせて選択します：
| リンク先 | 管理画面での指定方法 | 適しているケース |
|---|---|---|
全商品ページ（/collections/all） |
URL欄にyour-store.com/collections/allを指定 |
公開中の全商品をデフォルトのアルファベット順で網羅。 |
| 特定コレクション | コレクション一覧から指定 | 注力商品や厳選したラインナップを優先して見せたい場合。 |
Shopifyヘルプセンターのカタログページ仕様にある通り、すべてのShopifyストアには全商品をA-Z順で一覧表示する/collections/allが標準装備されています。並び順を変更したい場合は、ハンドル名をallとしたコレクションを作成するか、個別に作成したコレクションへ直接リンクさせます。
ステップ2：コンテンツ > メニューでメニューを構築する
リンク先が準備できたら、ナビゲーションメニューを管理画面で組み立てます。
図1：コンセプトイラスト（Concept illustration）— ステップ2：コンテンツ > メニューでメニューを構築する
ホームリンクの追加
コンテンツ > メニューを開き、メインメニューを選択してメニュー項目を追加をクリックします。名前にホームと入力します。リンクの項目でホームページを選択します。この専用タイプを選ぶと、Shopifyが自動的にストアのルートURLを割り当てます。
商品一覧リンクの追加
再度メニュー項目を追加をクリックし、名前に商品一覧（またはカタログ）と入力します。リンク欄でリストからコレクションを選ぶか、全商品ページ/collections/allを使用します。Shopify公式のメニュー編集ドキュメントでは、生のURLを直接貼り付けるとリンクが切れ、404エラーの原因になると警告されています。リストに目的のページがある場合は、リストから選択してください。
会社概要リンクの追加
メニュー項目を追加をクリックし、名前に会社概要と入力します。リンク欄でページを展開し、ステップ1で作成したページを選択します。
並び順の整理と保存
追加した3項目を確認します：
| リンク名 | リンク種別 | リンク先 | 備考 |
|---|---|---|---|
| ホーム | ホームページ | ストアトップ（/） |
自動割り当て。 |
| 商品一覧 | コレクション / URL | /collections/allまたはコレクション |
商品を表示。 |
| 会社概要 | ページ | 公開した会社概要ページ | ブランド理念を伝達。 |
各項目の左側にあるハンドルアイコンをドラッグし、ホーム、商品一覧、会社概要の順に並べ替えます。実際のストアフロントにもこの順序で反映されます。Shopifyは保存前の変更件数が200件に制限されているため、こまめにメニューを保存をクリックしてください。項目の文字欄には絵文字を含めることも可能です。
ステップ3：PCのヘッダーにメニューを表示する
管理画面でメニューを作成・保存しただけでは、ストアの表面に自動配置されるわけではありません。配置場所はテーマの設定によって制御されます。
PCヘッダーにメニューを反映させるには、オンラインストア > テーマを開き、有効なテーマのカスタマイズをクリックします。左側サイドバーのヘッダーセクションを選択します。そこで先ほど作成したメニューを指定します。設定項目の名称はテーマによって異なるため、このセクション内でメニューの選択項目を探してください。
デスクトップ画面では、アイコンの後ろに隠すのではなく、全リンクを横並びで常時表示できるテーマレイアウトを選択してください。ニールセン・ノーマン・グループのデスクトップナビゲーション調査では、大画面でメニュー項目を隠してしまうと目的のページを見つけにくくなることが実証されています。ワイド画面でDesktop header menuが3つのリンクを視認性高く表示しているか確認してください。
モバイル画面で同じメニューがどのように表示されるか
PCディスプレイでは横方向にゆとりを持ってリンクを配置できますが、スマートフォン画面では横幅が著しく制限されます。
図2：コンセプトイラスト（Concept illustration）— モバイル画面で同じメニューがどのように表示されるか
多くのShopify標準テーマでは、モバイル画面になるとヘッダーが自動的に折りたたまれ、ハンバーガーアイコンをタップして開くサイド引き出しメニュー（Menu drawer）の中にリンクが収納されます。NN/gのモバイル調査では、隠れたナビゲーションは露出したメニューに比べて利用頻度が下がる傾向があると指摘されています。3つのリンクだけであれば場所を取らないため、余計なタップを挟まずに常時操作できる導線を用意することが快適なUXにつながります。
PCとスマートフォンで異なるメニュー構造を採用したい場合は、PC用とモバイル用で別々のメニューを表示する方法を参考にしてください。
| パターン | 常時表示？ | 事前タップ要否 | 最適なケース |
|---|---|---|---|
| Desktop header menu | はい（PC画面） | 不要 | ワイドなPCディスプレイ。 |
| Mobile Menu drawer | いいえ（アイコン内） | 必要（ハンバーガー開閉） | 項目数が多い二次階層リンク。 |
| Mobile tab bar | はい（画面下部固定） | 不要（直接タップ） | 少数の最重要ページへの遷移。 |
ステップ4：スマートフォン向けにボトムタブバーを追加する
買い物客の多くがスマートフォンを使う場合、ハンバーガーボタンだけでは、タップされるまでリンクが隠れたままになります。
Bottom tab barは、主要リンクを画面下部に固定します。NN/gのモバイルナビゲーション調査によると、タブバーは常時表示される（ページをスクロールしても表示され続ける）ものです。
標準的なShopifyテーマには下部固定バー機能が備わっていないことが多いため、通常は専用アプリまたはカスタムコードが必要です。タブバーを設定する際は、PCメニューと全く同じ3つのリンク（ホーム、商品一覧、会社概要）と同一URLを割り当ててください。デバイスを切り替えても同じ導線が維持されることで、利用者の混乱を防げます。
アイコンを追加しあらゆる画面サイズで検証する
視覚的なアイコンを取り入れると項目の認識速度が高まりますが、適切なデザイン配慮が不可欠です。
文字フィールドへの絵文字入力は手軽に行えますが、本格的なSVGグラフィックアイコンを表示するにはテーマの対応やアプリの活用が必要です。ニールセン・ノーマン・グループの推奨では、アイコン単独ではなくIcon with label（アイコンと明確な文字ラベルの併用）を用いることが強く推奨されています。意味が曖昧なピクトグラム単体はユーザーに誤解を与えるためです。専用アプリをご利用の場合は、メニュー項目にアイコンを設定する手順をご覧ください。
また、タップ領域のアクセシビリティも確保してください。W3CのWCAG 2.2達成基準2.5.8では、最小ターゲットサイズとして24×24 CSSピクセル以上が定められています（一部例外あり）。
本番公開前に以下の点を入念に検証してください：
- PCワイド画面： 3つのリンクが折り返されずに横一列に綺麗に並んでいるか。
- タブレット画面： 横並び表示からハンバーガーメニューへの切り替え境界線（ブレークポイント）が崩れていないか。
- スマホ縦向き： ドロワーが滑らかに開き、3つのリンクが正しく並んでいるか。
- スマホ横向き： ナビゲーションバーが画面の高さを圧迫しすぎていないか。
- リンク機能確認： すべてのリンクをタップして目的のページへ遷移するか。
よくあるトラブルと解決策
メニューの動作が意図通りにならない場合は、以下の代表的な原因とナビゲーションメニューのリンク切れ修復ガイドを併せてご確認ください：
リンクを開くと404エラーになる
商品一覧や会社概要で404が出る場合、URLを手入力した際のスペルミスが疑われます。コンテンツ > メニューを開き、Shopifyの選択肢から直接リンク先を再指定してください。
会社概要ページがメニューに出てこない
ページを作っても自動ではヘッダーに反映されません。オンラインストア > ページで作成後、必ずコンテンツ > メニューで項目を追加し、ページの公開状態が表示になっているか確認してください。
商品一覧の並び順が意図と異なる
カタログページは開くものの、商品の並び順が不自然な場合があります。標準の/collections/allはアルファベット順です。ハンドル名をallとしたコレクションを作成してください。
ヘッダーのメニューが更新されない
管理画面で保存したにもかかわらず公開ページが変わらない場合、テーマエディタ（オンラインストア > テーマ > カスタマイズ）のヘッダー設定で別のメニューが選ばれていないか確認してください。
親メニュー項目をクリックしてもページが開かない
商品一覧の下にサブメニューを配置した際、親項目を押しても遷移しないことがあります。現在の多くのテーマでは、ドロップダウンを持つ親項目はページへのリンクではなく開閉ボタンとして動作するように設計されています。
トレードオフ：3リンクメニューでは足りなくなるケース
3つの基本リンクはスタートアップ時に最適ですが、事業が成長するにつれて設計の見直しが必要になります。
3リンクからの拡張
取り扱い商品数が複数のカテゴリーに広がり始めたら、単一の商品一覧リンクだけでは探しにくくなります。その段階で、商品一覧の下にサブメニューを追加することを検討してください。Shopifyの標準メニューでは最大2階層までのドロップダウンが可能です。さらにPCでの大規模カタログ展開には、複数列のカテゴリーやプロモーション画像を表示できるメガメニューの構築が役立ちます。
Shopify Academyによるドロップダウンメニューの階層構築チュートリアル動画も参考にしてください：
モバイルボトムタブバーの制約
タブバーは素早い操作を実現しますが、NN/gの調査では「選択肢が少数である場合」にのみ推奨されています。タブ数が4〜5個を超えるとタブバーが窮屈になります。また、下部固定バーは画面の縦幅を常に一部占有します。購入層がほぼPCユーザーで占められているストアであれば、モバイル用タブバーは無理に導入しなくても問題ありません。
Navi+がサポートする領域
Shopify管理画面でホーム・商品一覧・会社概要の3リンクを設定するのは手軽ですが、標準テーマの機能だけではモバイル環境における高度なレイアウト調整に対応しきれません。
スマートフォンの画面下部にホーム、商品一覧、会社概要をアイコンとラベル付きで固定表示したい場合、Navi+ Tab Barを利用すればテーマのLiquidコードを改変することなく導入できます。PCヘッダーには既存のShopifyメインメニューをそのまま活かしつつ、スマホでは同じ3つのリンクを下部に固定できます。
店舗規模の拡大に合わせて、Navi+は柔軟に対応します：
- Navi+ Mobile Menu： ブランドイメージに合わせた独自のモバイルドロワーを構築し、Shopifyのメニュー構成をワンタップで同期。
- Navi+ Desktop Mega Menu： 多彩な商品を複数列のグリッドやバナー付きのメガメニューとして美しく整理（最大3階層の深さまでサポート）。
ご自身のストアに最適なナビゲーション構成を検討する際は、Shopifyストアに適したメニュータイプの選び方をご参照ください。
アクションチェックリスト
公開前に以下の項目を1つずつチェックしてください：
- 会社概要ページの公開： オンラインストア > ページで作成され「表示」になっているか確認。
- 商品一覧のリンク先選定：
/collections/allまたはハンドルallのコレクションを決定。 - メニュー管理画面を開く： コンテンツ > メニューでメインメニューを開く。
- ホームを追加： リンクタイプにホームページを指定して登録。
- 商品一覧を追加： コレクションの選択肢から直接指定。
- 会社概要を追加： 作成したページをリストから選択。
- 並び替えと保存： 順序を整え、メニューを保存をクリック。
- テーマヘッダーとの連動： テーマカスタマイザーでヘッダーにメニューが適用されているか確認。
- モバイルドロワーの確認： 実機スマホでドロワーの開閉と表示をテスト。
- （任意）タブバーの有効化： ラベルとアイコン付きの3項目を下部に固定配置。
- 全リンクの実機タップテスト： PCとスマホで各リンクが正しく開くか最終確認。
よくある質問（FAQ）
商品一覧リンクはどこを指定すべきですか？
Shopifyストアには全商品をアルファベット順で表示する/collections/allがあらかじめ用意されています。並び順を変更したい場合は、ハンドル名をallとしたコレクションを作成するか、個別のコレクションを指定してください。
会社概要ページがメニューに表示されないのはなぜですか？
オンラインストア > ページでページを作成しただけでは、ヘッダーメニューに自動追加されません。コンテンツ > メニューを開き、手動でメニュー項目として追加する必要があります。
同じメニューがモバイルでも自動的に表示されますか？
はい。ほとんどのテーマでは、PCヘッダーと同じメニューがモバイルのハンバーガーメニュー（ドロワー）内で再利用されます。表示スタイルはテーマに依存するため、スマートフォン実機での確認を推奨します。
ボトムタブバーを追加するにはアプリが必要ですか？
一般的なShopifyテーマには下部固定バーが内蔵されていないため、アプリの追加またはコードのカスタマイズが必要です。この表示形式は少数の主要リンクに向いています。
メニュー項目にアイコンを付けることはできますか？
管理画面のテキスト欄に絵文字を直接入力することは可能です。本格的なSVGアイコンを表示する場合は、テーマのカスタム機能やナビゲーションアプリを使用し、必ず文字ラベルを併記してください。
メニューのリンクが404エラーになる原因は何ですか？
URLを手動で直接入力している場合、ページやコレクションのハンドル変更時にリンクが切れて404になります。Shopifyのドロップダウン選択肢から直接リンク先を指定すれば安定して動作します。
情報源・参考文献
- Shopify Help Center: Editing menus
- Shopify Help Center: Menus and links
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Add and edit pages
- Shopify Help Center: Change catalog page
- Shopify Help Center: About us page
- Nielsen Norman Group: Mobile navigation patterns
- Nielsen Norman Group: Visible navigation on mobile
- Nielsen Norman Group: Desktop navigation not hamburger
- Nielsen Norman Group: Hamburger menus and discoverability
- Nielsen Norman Group: Icon usability
- W3C: WCAG 2.2 Target Size (Minimum)
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。