--- title: "Commerceレンダリングで店舗を作ろう" slug: "build-a-storefront-with-commerce-renderings" abstract: "店舗構築に使えるコマースレンダリングの概要。" --- # Commerceレンダリングで店舗を作ろう Sitecore Experience Accelerator(SXA)用のコマースレンダリングは、[コマーステナントやサイトを作成する](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/create-a-commerce-tenant-and-site.html)際にツール[ボックス](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/the-toolbox.html "The Toolbox")に追加されるコマース専用レンダリングです。コマースレンダリングはウェブ開発チームによって利用され、eコマースストアフロントの生産を迅速化できます。構造とデザインを分離するSXAにより、フロントエンド開発者、クリエイティブデザイナー、コンテンツ作成者、開発者が並行して作業できます。 > !注最良の結果を得るためには、Commerceレンダリング作業を始める前に[SXA](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/recommendations--using-renderings.html)の機能をよく理解してください。 SXAのCommerceレンダリングは、eコマース向けに特別にカスタマイズされており、ターゲットはSitecore Commerce Engineです。Commerceレンダリングを使って、既成のSXA Storefrontを基にストアフロントを構築することも、下から上にストアフロントを構築することもできます。SXA Storefrontの上に構築することで、まず一歩リードでき、その後[SXA Storefrontをカスタマイズ](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-your-storefront.html) して自分だけのものにできます。もし一からストアフロントを構築するなら、ツールボックス内のCommerceレンダリングを使って自分でページデザインを作成できます。 > !重要商取引レンダリングは商 [取引の偽造防止メタレンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-meta-renderings.html "Commerce meta renderings")に依存しています。すべてのストアフロントページに偽造防止のメタレンダリングを含めることで、商取引レンダリングが期待通りに動作するようにしてください。 > > SXAストアフロントテンプレートでは、反偽造メタレンダリングが商取引メタデータ部分設計のに含まれており、サイトが要求する反偽造トークンHTMLを生成します。ページにCommerceレンダリングを追加するには: 1. エクスペリエンスエディターで既存のページや部分デザインを開くか、レンダリングを含めたい新しいページや部分デザインを作成してください。 2. ツールボックスで、矢印をクリックしてカテゴリを展開します。 ![Toolbox](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Toolbox10.png) 3. レンダリングをクリックしてドラッグしてページ [に追加](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/add,-edit,-and-delete-a-rendering-472682.html)してください。 4. 必要に応じて、[レンダリング用の関連コンテンツを選択するか作成](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/select,-modify,-and-create-a-data-source.html)してください。 > !注もしSXAストアフロントをベースにサイトを構築している場合、レンダリングに関連付けられるコンテンツ項目はすでに*sitecore/Content/Sitecore/Your Storefront/Data/Commerce/Toolbox カテゴリ/レンダリング名*で作成されています。 *sitecore/Content/Sitecore/Storefront/Data/Commerce/Account/Registration* 選択したレンダリングはページ上に表示されます。一部のレンダリングにはプレースホルダー画像やデータが含まれることもあります。例えば、商品ページはエクスペリエンスエディターで次のように見え、ストアフロントモックアップテーマが適用されています: ![Product Page shown in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/E321AC387EA64FC786C872F6F205983E.png) > !注レンダリングの外観は、サイトに適用される [テーマ](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/storefront-themes.html) によって異なります。 5. レンダリング時にフィールドラベル、ボタンラベル、プレースホルダーテキストを編集できます: - エクスペリエンスエディターで直接ページ上のコンテンツを編集することもできます。 - 他のコンテンツの編集はコンテンツエディターでのみ可能です。コンテンツエディターで関連するコンテンツ項目を開くには、レンダリングを選択し、 ![636B9623277E4D5089A1B25D732A001F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/636B9623277E4D5089A1B25D732A001F.png)をクリックし、その後 **「関連アイテムを編集」**をクリックします。 > !注エクスペリエンスエディターでレンダリング時に見えるテキスト文字列に加え、ライブサイトでのみ表示される検証メッセージも存在します。検証メッセージはコンテンツエディター内の関連するコンテンツ項目で編集可能です。その他の構成オプションは、各レンダリングごとに個別に以下のトピックで説明されています。 - [コマース会計レンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-account-renderings.html "Commerce Account renderings") - [コマースカートのレンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-cart-renderings.html "Commerce Cart renderings") - [商業カタログのレンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html "Commerce Catalog renderings") - [コマースチェックアウトのレンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-checkout-renderings.html "Commerce Checkout renderings") - [商業命令のレンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-orders-renderings.html "Commerce Orders renderings") - [コマース共有レンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-shared-renderings.html "Commerce Shared renderings") > !注SXA Storefrontでは、データ入力用のフォームを含むコンポーネントは標準的な.NET MVCおよびAJAXフォーム技術で実装されています。したがって、あらかじめ定義されたフォームでは入力フィールドとボタンのラベルのみをカスタマイズできます。