--- title: "推奨事項:ページの構成" slug: "recommendations--structuring-pages" abstract: "レイアウトのベストプラクティス。" --- # 推奨事項:ページの構成 SXAでは、再利用可能なコンテンツとレイアウトを使ってウェブサイトを構築します。これらすべての要素が組み合わさってページのレイアウトを作り上げます。 このトピックでは、[ページデザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/page-designs.html "Page designs")、部分デザイン、スニペット、合成図の作業に関する以下の推奨事項を説明します。 ## ページレイアウトを部分的なデザインで設計する エディターの作業を楽にするために、できるだけ部分 [的なデザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-change-a-partial-design.html "Create and change a partial design")を活用しましょう。部分的なデザインは一貫したスタイルを作り、編集者の作業を楽にし、エクスペリエンスエディターのパフォーマンスを向上させます。 部分的なデザインについて知っておくべきこと: - レンダリングが部分的なデザインに配置され、 [ページ](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-content-editor.html "Create and assign a page design in the Content Editor")デザインを通じてページに割り当てられる場合、編集者は記事のような汎用ページを作成する際の操作を減らす必要があります。 - 部分的なデザインに空のコンテナレンダリングや空のプレースホルダー付きのレンダリングを配置し、編集者が明確に定義した拡張ポイントを得られます。それらのプレースホルダーには、どのコンポーネントがその領域で許可されているかを示す [ためのプレースホルダー制限](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/set-placeholder-restrictions.html "Set placeholder restrictions") を設定してください。 - ローカルカスタマイズが必要な場合は [スニペット](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/configure-a-snippet.html "Configure a snippet") やページブランチを活用しましょう。部分的なデザインはパフォーマンスを向上させます。 関連トピック - [ページデザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/page-designs.html "Page designs") - [部分的なデザインを作成・変更する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-change-a-partial-design.html "Create and change a partial design") - [コンテンツエディターでページデザインを作成・割り当て](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-content-editor.html "Create and assign a page design in the Content Editor") - [エクスペリエンスエディターでページデザインを作成・割り当て](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-experience-editor.html "Create and assign a page design in the Experience Editor") ## 複雑な再利用可能な構造を部分設計や複合設計に配置する 編集者に複数のレンダリングを配置させて、独自のレイアウトを必要としないページを作成させないでください。例えば、すべての記事ページは見た目が同じ傾向があるため、[部分的なデザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-content-editor.html "Create and assign a page design in the Content Editor")で構造を定義するのに最適な候補となります。対照的にランディングページは大きく変化しやすいため、最小限のページデザインに大きなプレースホルダーを配置することで編集者に大きな柔軟性を与えるのに適しています。 ページ作成前にレイアウトを決めるべき場合は部分的なデザインを用いましょう。 編集者がレイアウトをスタイリングしたり変更できるようにしたいなら、コンポジットやスニペットの使用を検討してください。 レンダリングのグループを独自のレイアウトにしたい場合、そしてエディターがエクスペリエンスエディターでデザインできるようにしたい場合に [コンポジットを使う](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/composite-renderings.html) のが良いでしょう。再利用可能なレンダリングのグループを作りたいときはス [ニペット](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/configure-a-snippet.html) の使用を検討してください。スニペットは、エクスペリエンスエディターで別々にデザインできる複数のレンダリングで構成されています。部分的なデザインと同様に、異なる種類のレンダリングをグループ化し、そのグループを異なる場所で再利用できます。スニペットと部分的なデザインの違いは、スニペットが拡張可能で、スタイリングを変更でき、ページ上で好きなだけ使える点です。 関連トピック: - [ページデザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/page-designs.html "Page designs") - [部分的なデザインを作成・変更する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-change-a-partial-design.html "Create and change a partial design") - [エクスペリエンスエディターでページデザインを作成・割り当て](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-experience-editor.html "Create and assign a page design in the Experience Editor") - [マルチサイト機能を使ってデータソースとプレゼンテーションを共有します](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/share-data-sources-and-presentation-using-the-multisite-feature.html) ## 不要なレンダリングをサイトから削除しましょう もし一部のレンダリングを使っておらず、スタイリングもしていない場合は、サイトの **「Available Renderings** 」セクションから削除することを検討してください。クリーンな [ツールボックス](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/the-toolbox.html)は編集者の作業をずっと楽にします。レンダリングをページに置いておいて、スタイリングされておらず、ウェブサイトのブランドに合わないと気づくのはフラストレーションが溜まることがあります。 ![image1.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/image1.png) ## プレースホルダー制限を設定する プレースホルダーに入れられるレンダリングをある程度コントロールするために、[プレースホルダーの制限を設定する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/set-placeholder-restrictions.html "Set placeholder restrictions")ことができます。使うつもりがない、あるいは使いたくないレンダリングを除外することで、編集者の作業がずっと楽になります。 関連トピック - [ツールボックス](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/the-toolbox.html) - [プレースホルダー制限を設定する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/set-placeholder-restrictions.html "Set placeholder restrictions") - [ツールボックスの再構築](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/restructure-the-sxa-toolbox.html "Restructure the SXA Toolbox") ## ページの表示詳細設定に標準値を使わないでください 1つのテナント内のすべてのサイトは同じテンプレートセットを使用しています。それぞれが別々のスタイルアイテムを持つこともあれば、異なるグリッドを使うこともあります。テナント全体をスタイルホルダーとして共有 [サイト](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/share-data-sources-and-presentation-using-the-multisite-feature.html) に使わない限り、一部のサイトではレイアウトが壊れてしまうことがあります。 代わりに、部分的なデザインやス [ニペット](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/configure-a-snippet.html "Configure a snippet") と事前に設定されたレンダリングセットを組み合わせて使うのも良いでしょう。このようにプレゼンテーションを設定することで、柔軟性のバランスが生まれ、体験がよりスムーズで管理しやすくなります。 もしテナント内のすべてのサイトで共有したいデザインがある場合は、ページと部分的なデザインを含む [共有サイト機能](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/share-data-sources-and-presentation-using-the-multisite-feature.html)を作成し、それらを再利用できるようにすることを検討してください。 関連トピック: - [ページデザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/page-designs.html "Page designs") - [部分的なデザインを作成・変更する](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-change-a-partial-design.html "Create and change a partial design") - [コンテンツエディターでページデザインを作成・割り当て](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-content-editor.html "Create and assign a page design in the Content Editor") - [エクスペリエンスエディターでページデザインを作成・割り当て](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-assign-a-page-design-in-the-experience-editor.html "Create and assign a page design in the Experience Editor") ## 部分設計継承を使用 わずかに異なる部分的なデザインを作成する場合は、共通のレイアウト要素でベース部分的な [デザイン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-and-change-a-partial-design.html "Create and change a partial design") を作成し、その部分的なデザインをより具体的な部分的な部分に継承することを検討してください。部分的な継承により、共有されたデザインの側面を一か所にまとめ、著者が作成しているすべてのページタイプに簡単にその変更を伝えることができます。 例えば、わずかに異なるヘッダーが必要な場合などです。部分的な継承を活用することで、例えばナビゲーションレンダリングで1つのベース部分デザインを作成し、その上に他の部分部分を作成し、異なるロゴで違いを埋めるなど、さまざまな方法を選べます。こうすることで、わずかな違いだけの多数のテンプレートを作成する手間を避けられます。 ![SXA-base-partial-design.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-base-partial-design.PNG) ## レンダリングのグリッド設定を変更することを優先し、スプリッターを使ってレイアウトを変えることを優先してください デフォルトでは、ページにレンダリングを追加すると、その列の幅全体が使われます。エクスペリエンスエディターで、レンダリングのグリッド設定でこれを変更できます。デフォルト設定を永久に変更するには、コンテンツエディターでグリッド設定を変更する必要があります。 ページに追加のスプリッターを置く前に、必ずレンダリングのレイアウトを変更することを検討してください。これによりレンダリング回数を制限でき、ページの反応が良くなり、エクスペリエンスエディターの速度が向上します。 関連トピック: - [グリッドレイアウト](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/the-grid-layout.html) - [レンダリングのレイアウトを変更する](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/change-the-layout-of-a-rendering.html) - [グリッド設定](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/the-grid-settings.html "The grid settings") - [ページのレイアウトを変更する](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/change-the-layout-of-a-page.html)