コレクション・メニュー・ページ整理

コレクション・ナビゲーション設計——自動/手動コレクションとメニュー構造の最適化

「商品はたくさんあるのに、お客さんが目当ての商品にたどり着けない」——これはShopifyストアで最も多いUX課題のひとつです。原因の多くは、コレクションの設計とナビゲーション（メニュー）の構造にあります。このレッスンでは、自動コレクション・手動コレクションの使い分け、メニュー構造の設計原則、コレクションページのフィルター設定、ページ整理の方法を体系的に解説します。ユーザーが迷わないストア設計を学びましょう。

---

コレクション・ナビ設計マップ

コレクション・ナビ設計 — 自動/手動とメニュー構造

コレクションは「商品の仮想棚」です。1つの商品を複数のコレクションに同時に所属させることができます。メニューはコレクションへの「入り口」となる道標です。

---

自動コレクションの設定と活用

自動コレクションの仕組み

自動コレクションは、「条件に一致した商品を自動的にコレクションに追加する」機能です。条件は以下の属性で設定できます。

条件は「すべてに一致（AND）」と「いずれかに一致（OR）」のどちらかを選択できます。

自動コレクションの運用例

「セール」コレクション 条件: タグが「sale」に一致。商品登録時に「sale」タグを付けるだけで自動的にセールコレクションに追加されます。セール終了後はタグを外せば自動でコレクションから除外されます。

「新着」コレクション 条件: 作成日が「過去30日以内」。このコレクションは運用不要で自動メンテナンスされます。

「在庫あり」コレクション 条件: 在庫数が「0より多い」。欠品商品を自動的に除外したコレクションを作れます。

💡 タグ運用の重要性: 自動コレクションの威力を最大化するには、商品タグの命名規則を最初に決めて統一することが重要です。「Sale」「sale」「SALE」がバラバラに存在すると、自動コレクションがうまく機能しません。タグは小文字英数字に統一することを推奨します。

自動コレクション内の商品並び順

自動コレクションでも、コレクション内の商品の並び順は管理できます。並び順の選択肢は以下のとおりです。

• ◆手動でソート（任意の順番）
• ◆最新順（作成日時）
• ◆価格の高い順・安い順
• ◆ベストセラー順（過去の売上実績）
• ◆A-Z（アルファベット順）

---

手動コレクションの活用

手動コレクションが有効なケース

手動コレクションは「編集者が選んだ商品を特定の順番で並べたい」場合に適しています。自動化できない「キュレーション感」や「ストーリー性」のある陳列が可能です。

活用例

• ◆「スタッフおすすめ」: 週替わりでスタッフが厳選した5点を特集
• ◆「コーディネートセット」: 上下・インナー・アクセサリーをセットで提案
• ◆「新生活応援パック」: 特定シーズンのキャンペーン向け商品を集結
• ◆「○○コラボコレクション」: コラボ商品のみをまとめたランディングページ的な使い方

⚠️ 手動コレクションの運用コスト: 商品の追加・削除・並び替えは毎回手動で行う必要があります。商品数が多いストアでは自動コレクションを基本とし、手動は特集ページなど限られた用途に絞ることを推奨します。

---

ナビゲーション（メニュー）設計

メニューの種類と設置場所

Shopifyのナビゲーションは「オンラインストア → ナビゲーション」から管理します。主なメニューは以下の3種類です。

ヘッダーメニュー（メインナビゲーション） 全ページのヘッダーに表示される最重要メニューです。アクセス頻度の高いコレクション・特集ページ・会社情報への動線を配置します。項目数は5〜7個程度が視認性の上限です。

フッターメニュー 法的な必須ページ（特定商取引法・プライバシーポリシー・返品ポリシー）へのリンクを配置します。これらを適切に設置することはECサイト運営の法的義務でもあります。

モバイル専用メニュー（ハンバーガーメニュー） テーマによってはモバイル専用のメニューを別途作成できます。スマートフォンからのアクセスが70%以上を占めるECストアでは、モバイルのナビゲーション設計が特に重要です。

ドロップダウンメニューの設計

階層構造のドロップダウンメニューは、商品カテゴリが多い場合に有効です。「ナビゲーション → メインメニュー → 項目を追加 → 入れ子にする」で設定できます。

ただし階層は2段まで（親 → 子）に抑えることを推奨します。3段以上になるとモバイルでの操作性が著しく低下し、ユーザーが途中で離脱します。

必須ページ一覧

---

コレクションページのフィルター設定

フィルターが重要な理由

商品数が50件を超えるコレクションでは、ユーザーが目的の商品を探すのにフィルター機能が不可欠です。フィルターがないと離脱率が高まります。

フィルターの設定方法

フィルターは「オンラインストア → ナビゲーション → コレクションとサーチのフィルター」から設定します。ただし、フィルター機能はテーマがサポートしている必要があります。Shopifyの標準テーマ（Dawn・Craft・Refresh等）は標準対応しています。

設定できるフィルター項目

• ◆価格帯（スライダーまたは選択肢）
• ◆商品タイプ
• ◆在庫あり/なし
• ◆カラー（商品オプションから自動取得）
• ◆サイズ（商品オプションから自動取得）
• ◆タグ

💡 フィルターとタグの連携: フィルターに「タグ」を使う場合、タグの命名規則が整理されていることが前提です。「color_blue」「color_red」のように接頭辞を統一すると、フィルターの表示が整然とします。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆コレクション設計図の作成: 自分のストアの商品を分類し、必要なコレクション一覧（自動/手動の別・条件・想定商品数）を書き出す
2. ◆タグ命名規則の整備: 現在使用しているタグをすべてリストアップし、重複・表記ゆれを整理して統一ルールを決める
3. ◆メニュー構造の設計: ヘッダーメニュー・フッターメニューの項目と階層構造を紙またはスライドで設計し、実際のナビゲーション設定に反映する
4. ◆フィルター動作確認: コレクションページでフィルターが正しく動作するかテストし、商品タグとフィルター設定が連動しているか確認する

📝まとめ

コレクションとナビゲーションはストアの「情報アーキテクチャ」です。自動コレクションはタグ運用と組み合わせることで運用コストを最小化できます。メニュー設計では「ユーザーが3クリック以内に目標商品に到達できるか」を常に意識してください。ナビゲーションの改善はSEOにも効果的です。コレクションページのURLとタイトルを最適化することで、カテゴリキーワードでの検索流入が期待できます。コレクション設計を一度正しく行えば、ストアの成長に伴う追加商品も自動的に整理されていきます。