カテゴリーツリー

概要

カテゴリーツリーページは主に2つのセクションに分かれており、すぐに始められる強力なメニューからの構築機能があります：

🌳 ツリービュー（左パネル）

目的：この階層はストアフロントに表示されるパンくずリストとサブカテゴリーブロックを定義します。 ツリービューのコレクションは以下のことを行います：

• ✅ パンくずナビゲーションパスに表示される

• ✅ コレクションページにサブカテゴリとして表示される

• ✅ 多層ナビゲーション構造を作成する

• ✅ 構造化データ（SEO）に含まれる

📦 未割り当てカテゴリ（右パネル）

目的：非表示のパンくずリスト＆サブカテゴリ - ストアに存在するがナビゲーション構造の一部ではないコレクション。 未割り当てカテゴリのコレクションは以下のことを行います：

• ❌ パンくずリストに表示されない

• ❌ サブカテゴリーブロックとして表示されない

• ❌ ナビゲーション階層に含まれない

• ✅ 直接URLでアクセス可能

ツリービュー - 主な機能

🔍 検索

場所：ツリービューの上部にある検索ボックス 機能：

• 名前でカテゴリを素早く見つける

• リアルタイムでツリーをフィルタリングする

• 大規模なカテゴリ構造のナビゲートを支援する

🔄 更新ボタン

場所：右上隅 目的：Shopifyストアから最新の公開コレクションを取得し、メニューを同期する 使用タイミング：

• Shopify管理画面で新しいコレクションを追加した後

• ストアの最近の変更を同期するため

• 大規模な再編成を行う前に

• ドロップダウンにメニューが表示されない場合

🎯 メニューから構築

場所：ツリービュー見出しの隣のボタングループ 目的：既存のShopifyナビゲーションメニュー構造に基づいてカテゴリーツリーを自動的に構築する

仕組み

• ドロップダウンからメニューを選択（メインメニュー、フッターメニューなど）

• "メニューから構築"ボタンをクリック

• アプリが自動的に：

• - メニューからすべての公開コレクションをインポート

• - メニュー階層（親→子関係）を保持

• - 多層ネスト（3階層以上）をサポート

• - 未使用のコレクションを「未割り当て」パネルに移動

インポートされるもの：

• ✅ 公開コレクションのみ - 公開されたコレクションにリンクするメニュー項目のみ

• ✅ メニュー階層 - 親→子関係が保持される

• ✅ 多階層ネスト - 深いメニュー構造（3階層以上）をサポート

除外されるもの:

• ❌ 下書き/未公開のコレクション - 公開済みのコレクションのみインポートされます

• ❌ HTTPリンク - 外部リンクやカスタムURLはスキップされます

• ❌ 商品リンク - 直接の商品リンクはインポートされません

• ❌ ページリンク - ページへのリンクは除外されます

• ❌ その他のメニュー項目 - ブログ、検索、カートリンクなどはインポートされません

重要な制限事項:

• ⚠️ 公開済みのコレクションのみ - 下書きや未公開のコレクションはインポートされません

• ⚠️ メニューリンクのみ - メニューにあるコレクションのみインポートされます

• ⚠️ 出発点のみ - 作成後にカスタマイズ（コレクションの追加や再編成など）が必要になる可能性があります

メニューのキャッシュ

メニューは読み込みを高速化するために24時間キャッシュされます。キャッシュのタイムスタンプはボタングループの隣に表示されます（例: "Cached 14:30:25"）。

メニューを同期する必要がありますか？

ドロップダウンにメニューが表示されない場合は、更新ボタンをクリックしてShopifyストアから最新のメニューを同期してください。

メニュードロップダウンの視覚的インジケーター

• コレクション項目 - 通常の色、ツリーに同期可能

• 非コレクション項目（HTTPリンクなど） - タイプバッジ付きの薄いグレー色（例: "HTTP"）

• デフォルトメニュー - 緑色の「Default」バッジ

⬇️ すべて折りたたむボタン

場所: 検索ボックスの隣 目的: 展開されたすべてのカテゴリを折りたたみ、トップレベルの項目のみを表示 使用例:

• 主要なカテゴリの概要を把握する

• 複雑なツリーを素早くナビゲートする

• 構造変更を行う前に

⬆️ すべて展開ボタン

場所: すべて折りたたむボタンの隣 目的: すべてのカテゴリを展開し、完全な階層を表示 使用例:

• 完全なカテゴリ構造を見る

• 深くネストされた項目を見つける

• ナビゲーション全体を一度に確認する

ドラッグ＆ドロップ操作

ツリーはカテゴリの整理のための強力なドラッグ＆ドロップ機能をサポートしています。

複数選択

複数項目を選択する方法:

• 最初の項目を選択: カテゴリをクリック

• 項目を追加: - ⌘/Ctrl を押しながらクリック = 個別の項目を追加 - Shift を押しながらクリック = 範囲選択

• 一緒にドラッグ: 選択した任意の項目をドラッグすると、すべての選択項目が一緒に移動

カテゴリの移動

単一項目:

• カテゴリをクリックしてホールド

• 新しい位置にドラッグ

• 配置場所: - 項目間 = 同じレベル（兄弟） - 項目の上に = その項目の子（ネスト） - ネスト中に左にドラッグ = ネスト解除（一段上に移動）

複数項目:

• 複数のカテゴリを選択（⌘/Ctrl + クリック）

• 選択した任意の項目をドラッグ

• すべての選択項目が一緒に移動

• グループとして配置場所にドロップ

視覚的フィードバック

• ドラッグインジケーターラインが項目の配置場所を示す

• ターゲットの親カテゴリにホバーでハイライト

• インデントレベルがネストの深さを示す

未割り当てカテゴリパネル

目的と動作

このパネル内のコレクションは以下から非表示になります:

• Breadcrumbs

• サブカテゴリーブロック

• カテゴリ階層

• 構造化データ

なぜコレクションを未割り当てのままにするのか？

• 内部/管理者専用コレクション

• 現在アクティブでない季節限定コレクション

• テスト用コレクション

• その他の目的で使用されるコレクション（割引、バンドルなど）

ツリービューへの追加

方法1：ツリーでカテゴリが選択されている場合

• ツリービュー（左パネル）でカテゴリをクリックして選択

• 未割り当てパネルで1つ以上のコレクションにチェックを入れる

• 追加をクリックするか、コレクションをドラッグ

• → コレクションは選択したカテゴリの子になります

方法2：カテゴリが選択されていない場合

• ツリービューで何も選択されていないことを確認

• 未割り当てパネルで1つ以上のコレクションにチェックを入れる

• 追加をクリックするか、コレクションをドラッグ

• → コレクションはツリーの一番下（ルートレベル）に追加されます

未割り当ての検索

場所: 未割り当てパネル上部の検索ボックス 機能:

• 未割り当てコレクションのリストを絞り込み

• 特定のコレクションを素早く見つける

• 件数を表示: "未割り当てコレクション27件を表示中"

未割り当ての更新

アイコン: 検索横の更新アイコン 目的: Shopifyから未割り当てコレクションのリストを更新

キーボードショートカット

• ⌘/Ctrl + クリック = 複数カテゴリ選択

• Shift + クリック = カテゴリ範囲選択

• Drag = カテゴリの移動

• Click collapse icon = カテゴリの子要素の切り替え

• Hold ⌘/Ctrl + クリックで折りたたみ = すべての子要素を再帰的に折りたたむ

変更の保存

自動保存: 変更は自動的に保存されません 手動保存:

• 右下の「保存」ボタンをクリック

• すべての変更がまとめて適用されます

• 更新を反映するにはストアフロントをリフレッシュしてください

カスタムコレクション表示名

ツリーで使用される任意のコレクションにカスタム表示名を設定できます。これにより、実際のShopifyコレクション名を変更せずに、パンくずリストやサブカテゴリーでより見やすく短い、または顧客に優しいラベルを表示できます。

• ✅ 内部/管理者用に元のShopifyコレクションタイトルを保持

• ✅ ストアフロントのナビゲーション（パンくずリスト＋サブカテゴリー）で異なるラベルを表示

• ✅ SEOに適した表現、省略形、一貫した命名に便利

表示名の編集方法

カテゴリツリーでコレクションをクリックし、表示名をインラインで編集します。 注意事項:

• 変更は保存をクリックしたときに保存されます（ツリー構造の変更と同様）

• 表示名を空欄にするとカスタム名が削除され（コレクションタイトルにフォールバック）

• 推奨: モバイルUX向上のため短め（例: 20～40文字）にすること

ストアフロントでの表示

表示名が存在する場合、ストアフロントUIは元のタイトルより表示名を優先します。表示名が設定されていない場合は、アプリはShopifyコレクションタイトルにフォールバックします。 影響する箇所:

• コレクションレベルのパンくずラベル

• サブカテゴリーのブロックタイトル/リンク（テーマで有効の場合）

カテゴリ構造の例

メニューから作成の例

作成前: あなたのShopify Main Menu:

Main Menu
├─ Women (COLLECTION)
│  ├─ Dresses (COLLECTION)
│  │  ├─ Summer Dresses (COLLECTION)
│  │  └─ Evening Dresses (COLLECTION)
│  └─ Tops (COLLECTION)
├─ Men (COLLECTION)
│  ├─ Shirts (COLLECTION)
│  └─ Pants (COLLECTION)
├─ About Us (HTTP) ← Skipped
└─ Contact (HTTP) ← Skipped

「メニューから作成」をクリック後: あなたのCategories Tree:

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
  └─ 👕 Tops

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants

結果:

• すべてのコレクションアイテムが階層を保持したままインポートされました

• HTTPリンク（About Us、Contact）は自動的にスキップされました

• ドラッグ＆ドロップでさらにカスタマイズ可能です

ファッションストアの例

📁 Women
  └─ 👗 Dresses
      └─ ☀️ Summer Dresses
      └─ 🌙 Evening Dresses
      └─ 👔 Casual Dresses
  └─ 👕 Tops
  └─ 👖 Bottoms

📁 Men
  └─ 👔 Shirts
  └─ 👖 Pants
  └─ 🧥 Outerwear

📁 Sale
  └─ 50% Off
  └─ Clearance

エレクトロニクスストアの例

📁 Computers
  └─ 💻 Laptops
      └─ Gaming Laptops
      └─ Business Laptops
  └─ 🖥️ Desktops
  └─ ⌨️ Accessories

📁 Smartphones
  └─ 📱 iPhone
  └─ 📱 Samsung
  └─ 📱 Google Pixel

ベストプラクティス

メニューから作成を最初に使う

推奨ワークフロー:

• まずはメニューから作成を使う - 既にナビゲーションメニューがある場合は、メニューから作成を使って素早く開始しましょう

• 構造を確認する - インポートされた階層が妥当かチェックしましょう

• 必要に応じてカスタマイズ - 欠けているコレクションを追加したり、再編成や深さの調整を行いましょう

• 保存してテスト - 変更を保存し、ストアフロントのBreadcrumbsを確認しましょう

メリット:

• 手動設定に比べて時間を節約できる

• 既存のメニュー構造を保持できる

• カスタマイズのためのしっかりした出発点を提供する

シンプルに保つ

良い構造:

• 最大2〜3階層の深さ

• 各階層に5〜7カテゴリー

• 明確で説明的な名前

悪い構造:

• 階層が深すぎる（混乱を招く）

• 一度に多すぎるカテゴリー（圧倒される）

• "その他"や"雑多"のような曖昧な名前

顧客の視点で整理する

顧客のように考える:

• 彼らはどのように商品を探すか？

• 彼らのメンタルモデルは何か？

• 彼らにとって何が最も重要か？

ファッションの例: ✅ 性別でまず分類（Women > Dresses） ❌ 色でまず分類（Red > Women's Items） エレクトロニクスの例: ✅ デバイスタイプで分類（Laptops > Gaming） ❌ ブランドでまず分類（Apple > All Products）

一貫した命名を使う

すべきこと:

• Women's Dresses

• Men's Shirts

• Kids' Shoes

してはいけないこと:

• Dresses for Women

• Shirts (Men)

• Children Footwear

幅と深さのバランスを取る

幅（フラット）: 小規模カタログに適している

📁 Dresses
📁 Tops
📁 Pants
📁 Accessories

深さ（ネスト）: 大規模カタログに適している

📁 Women
  └─ Dresses
  └─ Tops
  └─ Pants

避けるべき一般的なミス

❌ 階層が深すぎる

悪い例:

Home › Fashion › Women › Clothing › Dresses › Casual › Summer › Floral

良い例:

Home › Women › Dresses › Summer Dresses

❌ 命名の不一致

悪い例:

• Women's Dresses

• Tops for Women

• Female Accessories

• Women Shoes

良い例:

• Women's Dresses

• Women's Tops

• Women's Accessories

• Women's Shoes

❌ 重複するカテゴリ

悪い例:

📁 Sale Items
📁 Clearance
📁 Discounted Products

良い例:

📁 Sale
  └─ 50% Off
  └─ Clearance

店舗規模別のヒント

小規模店舗（100商品未満）

フラットでシンプルに保ちましょう:

📁 New Arrivals
📁 Dresses
📁 Tops
📁 Accessories
📁 Sale

中規模店舗（100〜1000商品）

1レベルの深さを追加しましょう:

📁 Women
  └─ Dresses
  └─ Tops
📁 Men
  └─ Shirts
  └─ Pants
📁 Sale

大規模店舗（1000商品以上）

完全な階層構造を使用しましょう:

📁 Women
  └─ Clothing
      └─ Dresses
      └─ Tops
  └─ Accessories
📁 Men
  └─ Clothing
  └─ Accessories

よくある質問