Shopifyのナビゲーションは、購入者が探す内容からメニュー名とリンク先を決め、テーマでの表示まで確認して設計します。項目を一律に7つ以内へ減らしたり、階層を増やしたりするだけでは、探しやすさは判断できません。この記事では、メニューの整理表、管理画面での設定、公開前テストの手順を紹介します。
メニュー名より先に、探す目的とリンク先を整理する
最初に、購入者が何を探すかを書き出します。商品名が分かる人、用途で比較する人、配送条件を調べる人では、必要な入口が異なります。問い合わせやストア内検索の言葉を参考に、表示名と行き先を一組で決めてください。
| 探す目的 | 表示名の例 | リンク先で確認すること |
|---|---|---|
| 商品群から選ぶ | タオル・寝具 | 該当する商品が一覧で比較できる |
| 用途から選ぶ | 贈り物を探す | ギフト対象と条件が分かる |
| 購入前の条件を調べる | 配送・送料 | 対象地域、費用、発送の案内がある |
| 購入後に相談する | お問い合わせ | 連絡方法と必要な情報が分かる |
「Collection」「Journal」のような表現が購入者に伝わるかは、ブランドや利用者によります。日本語へ置き換えることを一律の正解とせず、名前から内容を予想できるかで判断します。社内の部署名や商品管理上の分類を、そのまま使わないようにします。
ヘッダーとフッターで役割を分ける
ヘッダーには商品を探す入口など利用頻度の高い導線を、フッターにはストア情報や問い合わせなどを整理する方法があります。ただし、配送や返品など購入前に必要な情報を、最下部にしか置かない設計が適切とは限りません。商品ページなど、判断する場面からも到達できるか確認します。
メニューの項目数に、すべてのストアへ適用できる正解はありません。似た名前の重複、分類の混在、長すぎるラベルがないかを確認し、探す課題を実際に試して決めます。
Shopify管理画面で設定する手順
- 変更前を記録：現在のメニュー名、項目、順序、階層、リンク先を保存します。テーマでどのメニューを使っているかも記録します。
- 行き先を用意：商品、コレクション、案内ページなど、リンクする対象を作成・確認します。
- メニューを編集：管理画面の「コンテンツ」から「メニュー」を開き、対象のメニューを選びます。
- 名前と行き先を設定：項目を追加・編集します。ストア内の対象は、可能なら一覧から選択し、行き先を確認します。
- 順序と階層を調整：必要な項目を並べ、子項目は親項目の下へ配置して保存します。
- テーマへ割り当て：テーマ編集のヘッダーやフッターで、意図したメニューが選択されているか確認します。
メニューの編集とテーマの表示設定は別の作業です。管理画面で項目を保存できても、公開テーマに別のメニューが割り当てられていれば表示は変わりません。まず表示に使われているメニューを確認してください。
階層を増やす前に、テーマ側の表示を確認する
Shopifyの公式案内では、メインメニューの親項目の下に、さらに2段階の入れ子を作れると説明されています。ただし、表示場所や開き方はテーマによって異なります。最大の深さまで使うことを目標にせず、PCとスマートフォンで目的のリンクへ進めるかを試します。
展開用の親項目と、一覧ページへ進むリンクの操作を区別します。親項目を押すとすぐ移動してしまい子項目を開けない、といった問題がないか確認してください。必要なら子項目に「すべての商品を見る」などの入口を用意し、その役割を伝えます。
公開前に行う表示・操作テスト
| 条件 | 試すこと | 合格の目安 |
|---|---|---|
| PCの通常表示 | 親項目から子項目へ進む | メニューが意図せず閉じず、正しい一覧が開く |
| スマートフォン | メニュー開閉・階層の移動・戻る | 現在の階層と戻り方が分かる |
| キーボード | Tabで移動しEnterなどで操作する | 現在位置が見え、必要な項目を選べる |
| 長いラベル | 文字の折り返しと拡大を確認する | 別の項目と重ならず内容を読める |
| 商品詳細への直接流入 | 商品一覧や案内ページを探す | トップへ戻らなくても必要な入口が見つかる |
リンク先の内容と公開状態も点検する
- リンク先が404や非公開ページになっていない
- 表示名と、開いたコレクションやページの内容が一致する
- 古いキャンペーンや空の商品群へ案内していない
- 別の言語・販売地域でも行き先と表示が適切である
- 検索やフッターなど他の入口とも矛盾しない
Googleは、通常のリンクをクロール可能にするため、リンク先URLを持つHTMLのa要素を使うことなどを案内しています。独自メニューへ作り替える場合は、見た目だけでなくリンクとして機能することも確認します。メニューを整理しただけで検索順位が上がるとは断定できません。
公開後は「探せたか」を確認する
初めて使う人に「ギフト対象の商品を探す」「送料の案内を開く」などの課題を伝え、迷った項目や戻った場所を記録します。答えを先に教えず、名前から何を予想したかを聞くと、分類や表示名の問題を見つけやすくなります。
メニューのクリック数だけでは、目的を達成できたかは分かりません。クリック後の一覧、商品詳細、問い合わせの変化も確認します。変更前後で広告や在庫も変わっている場合、購入率の差をナビゲーションだけの効果として扱わないようにします。
よくある質問
主要メニューは7項目以内にすべきですか？
固定の上限として決める必要はありません。分類とラベルの分かりやすさ、表示幅、購入者の目的から検討し、実際に探す操作で確認します。
メニューを保存しても表示されません。
公開テーマが使っているメニューと、編集したメニューが一致するか確認します。階層の深さ、テーマの対応状況、言語や販売地域による表示の違いも調べます。
テーマを複製すればメニューも元に戻せますか？
テーマとメニューの変更は分けて記録します。同じメニューを公開テーマが参照している場合もあるため、複製テーマだけでの確認が本番へ影響しないと決め付けず、作業用メニューの割り当ても確認してください。
公式資料
公式情報の確認日：2026年10月21日。設計例とテスト表はAO編集の実務向け整理です。
関連記事・ご相談
ストアURL、現在のテーマ、探しにくい商品やページをお知らせください。Shopifyのメニュー改善を相談する
コメント