---
title: "商業航行図"
slug: "commerce-navigation-renderings"
abstract: "Commerce Navigationレンダリングの概要と、それらの設定方法。"
---
# 商業航行図

お客様が店舗を迅速かつ簡単にナビゲートできるようにすることは、ウェブストアを構築する際に重要な考慮事項です。この問題に対処するために、ツールボックスの**Commerce Catalog**セクションから2つのナビゲーションレンダリングが用意されています。

![Commerce Catalog in the Toolbox](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ToolboxCommerceCatalog.png)

> !注デフォルトでは、Sitecore 9.2以降、既存サイトはカテゴリナビゲーションレンダリングを使用し、新規サイトはコマースナビゲーションレンダリングを使用します。

## カテゴリナビゲーションレンダリング

カテゴリナビゲーションレンダリングは、インデックスからクエリしてメニュー項目を取得し、それをストアフロントサイトにレンダリングするコマース特有のコンポーネントです。このレンダリング:

-   ワイルドカードページはサポートしますが、メニュー項目は1レベルのみです。
-   レスポンシブデザインおよびモバイルデバイスをサポートします。
-   レンダリングバリアントには対応 *していません* 。

## 商業航海図のレンダリング

Commerce Navigationレンダリングは[SXAナビゲーション](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/the-navigation-renderings.html) コンポーネントのクローンで、コンテンツ内のアイテムをターゲットにメニュー項目を取得し、それをストアフロントサイトにレンダリングします。このレンダリングコンポーネントはインデックスを使用しません。このナビゲーションレンダリングとSXAナビゲーションレンダリングの違いは、MVCレンダリングビュー(*sitecore/レイアウト/レンダリング/feature/Commerce Experience Accelerator/Commerce Catalog/Commerce Navigation*)と、別のレンダリングバリアントのルートです。SXAナビゲーションレンダリングとは異なり、このビューはレスポンシブデザインやモバイルデバイスをサポートするためにBootstrapを使用しています。デフォルトのStorefrontブランドテーマは、コンポーネントにJavaScriptとスタイリングを追加し、カテゴリナビゲーションレンダリングのように見た目と操作感を持たせます。

このレンダリング:

-   インデックスを使わずにコンテンツ内の項目をターゲットにするため、 [直接ナビゲーション](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/navigation-methods.html) を有効にする必要があります。
-   複数のメニューレベルをサポートしています(ただし、ストアフロントブランドのテーマのデフォルトのJSとスタイリングは最初のトップレベルのみを対象としています)。
-   レンダリングバリアントをサポートしています。
-   レスポンシブデザインおよびモバイルデバイスをサポートします。

以下の図示のように、モバイル端末ではストアフロントのナビゲーションメニューがデフォルトで崩壊しています。

![Storefront navigation on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Mobile.png)

以下の図は、店舗フロント上のCommerce Navigationレンダリングの例を示しています。これは、Storefront Brandedテーマを用いた対応するカテゴリナビゲーションレンダリングと同じ見た目と操作感を持っています。現在、Storefront Brandedテーマは1つのメニューレベルのみをサポートしていますが、より多くのレベルをサポートするようにカスタマイズ可能です。

![Commerce Navigation rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CommerceNavigation.png)

##### 構成

Commerceナビゲーションのレンダリングは、[**コントロールプロパティ**](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/configure-a-commerce-rendering.html "Configure a Commerce rendering")ダイアログボックスで設定します。以下の設定プロパティはダイアログボックスの **ナビゲーション設定** セクションで利用可能です。

財産

使用方法

スタートページ

ナビゲーションを開始させたい第一レベルのカテゴリを指定します。デフォルトでは、このフィールドはHabitatカタログ内のカテゴリに設定されています。Habitatカタログを使用していない場合、このフィールドはGUIDが表示され、使用中のカタログ内のカテゴリを指すように設定するまではストアフロントサイトにカテゴリナビゲーションが表示されません。  
  
\>\[!重要\]  
\> 標準的なURLがメタデータに出力されるようにするために、カタログの [カテゴリナビゲーションも設定](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/set-up-a-catalog-for-a-storefront-site.html) する必要があります。

最上位ナビゲーションレベル

ナビゲーションを始めたいレベル(ルートからカウント)を設定します。デフォルトではこれは1に設定されています。

下部ナビゲーションレベル

ナビゲーションを終わらせたいレベル(ルートからカウント)を設定します。デフォルトではこれは1に設定されています。

ナビゲーションフィルター

ストアフロントサイトで使うナビゲーションのスタイル(例:Breadcrumbs Navigation、フッターナビゲーション、メインナビゲーション、サイドバーナビゲーション、サイトマップナビゲーションなど)を設定します。

フラットページ構造

すべてのアイテムが同じレベルに現れるかどうかを指定してください。

ルートページを含める

スタートページが別レベルとして含まれているかどうかを指定してください。

[コマースナビゲーションのレンダリングをカスタマイズ](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customize-the-commerce-navigation-rendering.html)してブランド要件に合わせることができます。