--- title: "ウェブページの要素" slug: "elements-of-a-web-page" abstract: "ストアフロントページを構成する要素の概要。" --- # ウェブページの要素 オンラインストアのウェブページは以下の基本要素で構成されており、すべてエクスペリエンスエディターツールボックスで利用可能です。 - [ページデザイン](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-a-web-page.html#UUID-19a34272-7ee4-11a5-7ac6-d1123754aeb5_N1535749736852 "Page designs") - [部分的な設計](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-a-web-page.html#UUID-19a34272-7ee4-11a5-7ac6-d1123754aeb5_N1535749748132 "Partial designs") - [レンダリング](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-a-web-page.html#UUID-19a34272-7ee4-11a5-7ac6-d1123754aeb5_N1535749759228 "Renderings") - [レンダリングバリアント](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-a-web-page.html#UUID-19a34272-7ee4-11a5-7ac6-d1123754aeb5_section-idm45778815368944 "Rendering variants") ![Diagram of the elements of a storeront page](https://doc.sitecore.com/api/markdown-image/xp/ja/users/100/sitecore-experience-commerce/images/AnatomyPage.png) ## ページデザイン [ページデザイン](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-the-storefront-site-template.html "Elements of the Storefront site template")は、部分的なデザインからなる構造です。例えば、同じレンダリングタイプのすべてのウェブページで一貫性のあるヘッダーとフッターを持つページデザインを作成できます。ブログページ、ランディングページ、商品ページなど、それぞれに特定のレイアウトを持つ複数のページデザインを作成できます。 ## 部分的な設計 [部分的なデザイン](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-the-storefront-site-template.html "Elements of the Storefront site template")とは、選ばれたコンポーネントの集合です。これを使ってページの共通デザイン要素を作成し、ウェブショップ全体で簡単に再利用できます。ヘッダーやフッターは、一貫した見た目と雰囲気を確保するために使われる一般的な部分デザインです。 ## レンダリング [レンダリング](https://doc.sitecore.com/xp/ja/users/100/sitecore-experience-commerce/elements-of-the-storefront-site-template.html "Elements of the Storefront site template")とはページの要素(コンポーネントとも呼ばれます)です。レンダリングはエクスペリエンスエディターのツールボックスに一覧表示されます。レンダリングを必要な場所に直接ドラッグ&ドロップすることでウェブページを作成します。利用可能なレンダリングには、シンプルなテキスト、画像、動画、ソーシャルメディアプラグイン、リストや検索要素が含まれます。 ## レンダリングバリアント レンダリングバリアントは、デフォルトのレンダリングを基にカスタマイズされたレンダリングです。レンダリングバリアントを使って、コンテンツを異なる方法で視覚化します。