--- title: "利用可能なレンダリングの中から選ぶ" slug: "choosing-between-available-renderings" abstract: "Storefrontサイトテンプレートで利用可能なレンダリングと推奨されるレンダリングの比較。" --- # 利用可能なレンダリングの中から選ぶ Sitecore Experience Accelerator(SXA)およびSXAのコマースコンポーネントの新機能やレンダリングを活用するため、Storefrontサイトテンプレートには更新されたレンダリングが含まれており、以下の表で詳細が説明されています。最初の表は検索関連のレンダリングを、2つ目の表はナビゲーションレンダリングを示しています。 > !重要1列目と2列目のレンダリングは同じページに存在できますが、混同してはいけません。つまり、グループ内で複数の検索ベースのレンダリンググループを一緒に使うことはできますが、1列目と2列目からのレンダリングが混在することはできません。例えば、StorefrontサイトのテンプレートホームページはデフォルトでCommerce [Search Results](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html "Use the Commerce Search Results rendering")レンダリングを使った2つのプロモーション商品グループを含みます。1つはテレビ用、もう1つはMiraノートパソコン用です。一方は1列目のレンダリング、もう1つは2列目のレンダリングに基づいています。 おすすめ(1) 前駆者(2) (1)の(2)に対する利点 集約面フィルターレンダリング [製品側面](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) [SXA集約ファセット](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/use-the-sxa-search-filter-components.html)フィルターレンダリングは、含まれるファセットがレンダリングバリアント上で設定され、特定の検索結果シグネチャに紐づけられた個々のフィルターファセットで構成されているため、[カスタマイズ](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/walkthrough--configuring-and-displaying-facets-on-the-storefront.html)が容易で柔軟性が高いです。 アグリゲートされたファセットフィルターレンダリングに関連付けられたレンダリングバリアントは、アグリゲートされたファセットフィルターツールバーから使いたいバリアントを選択することで変更できます。アグリゲートされたファセットフィルターレンダリングは、ユーザーが複数のファセット値を選択することができ、AJAXコールを使ってページロードのパフォーマンスを向上させます。アグリゲートされたファセットフィルターレンダリングには、任意のフィルタータイプのレンダリングを挿入できます。 一方、Product Facetsレンダリングはレンダリングバリアントをサポートしておらず、すべてのファセットを同時にレンダリングします。さらに、すべてのファセットは同じチェックリストタイプであるため、プレゼンテーションや顧客の使いやすさの選択肢が限られています。レンダリングされるファセットはカテゴリやページアイテムで設定可能です。 \> \[!注\] \> 両方のレンダリングで、カテゴリごとに異なる面のリストを設定でき、どちらのレンダリングも選択できる面を隠し(設定されていても)選べません。 Commerce Search 結果 [製品リスト](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) [プロモート商品](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) [Commerce Search Results](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html)レンダリングは標準SXA Search結果レンダリングに基づいており、検索署名とインデックスクエリを使ってアイテムを取得します。[Home](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-home-page.html)、[Category](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-category-page.html)、[Search Results](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-search-results-page.html)、[Product Detail](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-product-detail-page.html)ページのストアフロントサイトテンプレートと共に使用されており、カスタマイズが容易で柔軟性が高く、現代のストアフロントの要件や商品ブースティングのサポートも満たしています。 これらのレンダリングの比較については、「 [製品リストの選び](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/choosing-between-available-renderings-for-product-lists.html)方」を参照してください。 フィルター(チェックリスト) フィルター(日付) フィルター(ドロップダウン) フィルター(管理範囲) フィルター(半径) フィルター(レンジスライダー) フィルター(スライダー) [製品側面](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) チェックリストや日付、スライダーまで7種類の [フィルタータイプ](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/use-the-sxa-search-filter-components.html) レンダリングがあり、それぞれ異なる顧客の使いやすさのオプションや機能を提供します。これらのフィルターレンダリングは個別にページにドラッグすることも、集約されたファセットフィルターレンダリングの一部として使用できます。プロダクトファセットレンダリングでは、設定されたすべてのファセットが同じチェックリストタイプとしてレンダリングされるため、プレゼンテーションや顧客の使いやすさの選択肢は限定的です。 もっと読み込む ( [製品リスト](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) および [プロモート製品](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) レンダリングの両方の一部) どちらのレンダリングセットでも、ページングか無限スクロールかは任意です。Load Moreレンダリング機能により、無限スクロールセットアップでさらに多くの結果を読み込むことができます。 Load Moreレンダリングを固定された場所に表示するレンダリングの一部ではなく、別のレンダリングとして扱うことで、ページレイアウト設計の柔軟性が増します。 ページサイズ [ページごとの製品リスト項目数](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) [ページサイズレンダリング](urn:resource:component:22236%5Clistitem-idm273154223244376)では、顧客がページごとに表示されるアイテム数を選択できます。 ページセレクター [製品リストページ](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) [ページセレクター](https://doc.sitecore.com/xp/en/users/sxa/104/sitecore-experience-accelerator/en/walkthrough--adding-search-functionality-to-your-page.html#UUID-6fcd2204-71ff-ef90-688f-9fdd388a1939_para-idm273152351866964)は[検索結果のシグネチャ](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html#UUID-96546f7e-dbe7-bbb0-b467-d38963d60c39_para-idm273141267978796)を使用し、異なる検索レンダリンググループで複数回使用可能です。 結果数 [製品リストページ情報](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) 結果カウントは [検索結果署名](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html#UUID-96546f7e-dbe7-bbb0-b467-d38963d60c39_para-idm273141267978796) を使用し、異なる検索レンダリング群のページ上で複数回使用できます。 結果バリアントセレクター NA 結果バリアントセレクターのレンダリングは、限定リスト、詳細、タイルなど、さまざまな検索結果表示オプションから選択できます。 Search Box Search Bar [Search Box](https://doc.sitecore.com/xp/en/users/sxa/104/sitecore-experience-accelerator/en/walkthrough--adding-search-functionality-to-your-page.html#UUID-6fcd2204-71ff-ef90-688f-9fdd388a1939_para-idm273152351654986)は[検索結果の署名](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html#UUID-96546f7e-dbe7-bbb0-b467-d38963d60c39_para-idm273141267978796)を使用し、異なる検索レンダリング群のページ上で複数回使用できます。例えば、Storefrontサイトテンプレートでは、ページ上部のグローバル検索とカテゴリ内のローカル検索の両方で、カテゴリページ上の検索結果を絞り込むために使われます。 Search Boxはタイプ先行や予測提案をサポートしています。 ソート結果 [製品リストのソート](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html) [SXAのソート結果](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/walkthrough--adding-search-functionality-to-your-page.html)レンダリングは検索結果の順序付けに使われます。検索シグネチャを設定し、同じシグネチャを両方のレンダリングに使うことで、Sort Resultsレンダリングを「Load More」ボタンなど他のレンダリングとリンクさせることができます。新しい[ソートオプション](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/create-and-configure-a-sort-order-for-a-list-of-products.html)も定義できます。 Sort Resultsレンダリングでは、関連性に基づいて結果を並べ替えたり、ランダムに並べ替えたりできます。関連性を使うことで、特定の商品やページを他よりも優先的に宣伝するためのブースティングルールを定義できます。 以下の表はナビゲーションレンダリングを示しています。 おすすめ(1) 前駆者(2) (1)の(2)に対する利点 商業航行 カテゴリナビゲーションとSXAナビゲーション [Commerce Navigation](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-navigation-renderings.html)レンダリングは標準的なSXAナビゲーションレンダリングに基づいていますが、別のレンダリングバリアントルートと異なるMVCレンダリングビューを持っています。SXAナビゲーションレンダリングとは異なり、レスポンシブデザインをサポートするためにBootstrapを使用しています。インデックスは使わず、コンテンツ内のアイテムをターゲットにしています。その前身であるCategory Navigationレンダリングはレンダリングバリアントに対応しず、検索ベースです。 Search Results ページ一覧 ページ内容 サブカテゴリナビゲーション [Search Results](https://doc.sitecore.com/xp/en/users/sxa/104/sitecore-experience-accelerator/en/walkthrough--adding-search-functionality-to-your-page.html#UUID-6fcd2204-71ff-ef90-688f-9fdd388a1939_para-idm273152351740486)のレンダリングは、[Commerceの検索範囲](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/commerce-search-scopes.html)を使ったサブメニューにサブカテゴリをリストアップするなど、さまざまなシナリオで利用できます。 Search Resultsレンダリングは、検索結果を取得するために別のAJAX呼び出しを使用します。一方、SubcategoryナビゲーションレンダリングはAJAXコールを使わず、クエリを初期のサーバー側レンダリングの一部として処理するため、パフォーマンスが向上します。このため、StorefrontのサイトテンプレートはデフォルトでSubcategoryナビゲーションレンダリングを使用しています。 Search ResultsとSubcategory Navigationレンダリングはどちらも検索ベースですが、Subcategory Navigationレンダリングはレンダリングバリアントをサポートしていません。そのため、カスタマイズが簡単ではなく、Search Resultsレンダリングよりも柔軟性が劣ります。 > !注更新されたレンダリングはカスタマイズの柔軟性が増していますが、キャッシュ [やパフォーマンス](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/understanding-asynchronous-calls-and-caching.html) の要件を満たしているか確認してください。