---
title: "推奨事項:ページの構成"
slug: "recommendations--structuring-pages"
abstract: "レイアウトのベストプラクティス。"
---
# 推奨事項:ページの構成

[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)では、再利用可能なコンテンツとレイアウトでウェブサイトを構築します。これらすべての要素が組み合わさって、ページのレイアウトを作り上げます。

このトピックでは [、ページデザイン](https://doc.sitecore.com/sai/en/users/sitecoreai/work-with-page-designs.html) および [部分デザイン](https://doc.sitecore.com/sai/en/users/sitecoreai/work-with-partial-designs.html)の作業に関する以下の推奨事項を説明します。

## ページレイアウトを部分的なデザインで設計する

編集者の作業を楽にするために、できるだけ [部分的なデザイン](https://doc.sitecore.com/sai/en/users/sitecoreai/work-with-partial-designs.html)を使ったデザインを活用しましょう。部分的なデザインは一貫したスタイルを作り、編集者の作業を楽にします。

部分的なデザインについて知っておくべきこと:

-   レンダリングが部分的なデザインに配置され、 [ページ](https://doc.sitecore.com/sai/en/users/sitecoreai/work-with-page-designs.html)デザインを通じてページに割り当てられる場合、編集者は記事のような汎用ページを作成する際の操作を減らす必要があります。
-   部分的なデザインに空のコンテナレンダリングや空のプレースホルダー付きのレンダリングを配置し、編集者に明確な拡張ポイントを与えましょう。そのプレースホルダーに、どのコンポーネントが許可されているかを示すために [プレースホルダー制限](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/content-editor-items/layout/set-placeholder-restrictions.html "Set placeholder restrictions") を設定してください。
-   ローカルカスタマイズが必要な場合はページブランチを活用しましょう。部分的な設計は性能を向上させます。

## 複雑な再利用可能な構造を部分的な設計に配置する

編集者に複数のレンダリングを配置させて、ユニークなレイアウトを必要としないページを作成させないでください。例えば、すべての記事ページは同じように見える傾向があり、[部分的なデザイン](https://doc.sitecore.com/sai/en/users/sitecoreai/work-with-partial-designs.html)で構造を定義するのに最適な候補となります。対照的に、ランディングページは大きく変化する傾向があり、最小限のページデザインに大きなプレースホルダーを配置することで編集者に大きな柔軟性を与えるのに適しています。

ページ作成前にレイアウトを決めるべき場合は部分的なデザインを用いましょう。

## プレースホルダー制限を設定する

プレースホルダーに入れられるレンダリングをある程度コントロールするには、[プレースホルダーの制限設定](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/set-placeholder-restrictions.html)ができます。使うつもりのないレンダリングや使いたくないレンダリングを除外することで、編集者の仕事がずっと楽になります。

## 標準値の代わりにサイト固有のページブランチを使って、ページに修正可能なプレゼンテーションの詳細を設定する

単一のサイトコレクション内のすべてのサイトは同じテンプレートセットを使用しています。それぞれが別々のスタイルアイテムを持っていたり、異なるグリッドを使うこともできます。スタイルホルダーとしてサイト全体の [共有サイト](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/content-editor-items/sharing-content/share-data-sources-and-presentation-between-sites.html "Share data sources and presentation between sites") を使わない限り、一部のサイトではレイアウトが壊れてしまうことがあります。

代わりに、あらかじめ設定されたレンダリングセットを組み合わせたページブランチを使うのも良いでしょう。このようにプレゼンテーションを設定することで、柔軟性のバランスが生まれ、体験がよりスムーズで管理しやすくなります。

もしサイトコレクション内のすべてのサイトで共有したいデザインがある場合は、ページとページブランチを含む [共有サイト機能](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/content-editor-items/sharing-content/share-content-as-a-delegated-area-or-clone.html "Share content as a delegated area or clone")を作成し、それらを再利用できるようにすることを検討してください。

## 部分設計継承を使用

わずかに異なる部分的なデザインを作成する場合は、共通のレイアウト要素でベース部分 [的なデザイン](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/create-and-change-a-partial-design.html) を作成し、その部分的なデザインをより具体的な部分的な部分に継承することを検討してください。部分的な継承により、共有されたデザインの要素を一か所にまとめ、著者が作成しているすべてのページタイプに簡単に変更を伝えることができます。

例えば、2つのヘッダーが少し異なる場合などです。部分部分の継承を活用することで、例えばナビゲーションレンダリングで一つのベース部分デザインを作成し、その上に他の部分部分を付けて、異なるロゴで違いを埋めるなど、いろいろな動作が可能です。こうすることで、わずかな違いだけの多数のテンプレートを作成する手間を避けられます。

![headless-site-base-partial.png](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/headless-site-base-partial.png)

## レンダリングのグリッド設定を変更することを優先し、スプリッターを使ってレイアウトを変えることを優先してください

デフォルトでは、ページにコンポーネントを追加すると、そのカラムの幅が全て使われます。Pagesでは、レンダリングのグリッド設定でこれを変更できます。デフォルト設定を永久に変更するには、コンテンツエディターで [グリッド設定](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/grid.html "Grid") を変更する必要があります。

ページに追加のスプリッターを置く前に、必ずコンポーネントのレイアウトを変更することを検討してください。こうすることでコンポーネントの数を制限でき、ページの反応が良くなります。