推奨事項: ページの構造化

Current version: 10.1

SXA では、再利用可能なコンテンツとレイアウトを使用して Web サイトを構築します。これらすべてが組み合わさって、ページのレイアウトが作成されます。

このトピックでは、ページ デザイン、パーシャル デザイン、スニペット、コンポジットを使用する際の推奨事項について説明します。

パーシャル デザインでページ レイアウトをデザインする

編集担当者の作業を楽にするために、可能な限りパーシャル デザインを使ってデザインします。パーシャル デザインを使うと、一貫したスタイルを作成し、編集担当者の作業を容易にできるほか、エクスペリエンス エディターのパフォーマンス向上に役立ちます。 

パーシャル デザインについて知っておくべきこと:

  • レンダリングがパーシャル デザインに配置され、ページ デザインを通じてページに割り当てられる場合、記事などの一般的なページを作成するときに、必要な操作が少なくなります。

  • 空のコンテナー レンダリングまたは空のプレースホルダーを使った別のレンダリングをパーシャル デザインに配置して、拡張ポイントの明確な定義を編集担当者に提供します。それらのプレースホルダーで、プレースホルダーの制限を設定して、それらの領域で許可されるコンポーネントを示します。

  • ローカル カスタマイズが必要な場合は、スニペットとページ ブランチを活用します。パーシャル デザインにより、パフォーマンスが向上します。

関連トピック

複雑な再利用可能構造をパーシャル デザインまたはコンポジットに入れる

独自のレイアウトを必要としないページの作成で、編集担当者に複数のレンダリングを配置させないでください。たとえば、記事のページはどれも同じように見える傾向があるため、パーシャル デザインで構造を定義する際の最適な候補となります。対照的に、サイトによって大きく異なる傾向があるランディング ページは、大きなプレースホルダーを備えた最小限のページ デザインを使用する最適な候補となります。こうすることで、編集担当者は柔軟に作業できます。

ページの作成前にページ レイアウトを決定する必要がある場合は、パーシャル デザインを使います。

編集担当者がレイアウトのスタイル設定や変更ができるようにする場合は、コンポジットまたはスニペットの利用を検討します。

レンダリングのグループに独自のレイアウトが必要で、編集担当者がエクスペリエンス エディターでこのレイアウトをデザインできるようにする場合は、コンポジットを使います。再利用可能なレンダリングのグループを作成する場合は、スニペットの利用を検討します。スニペットは、エクスペリエンス エディターで個別にデザインできるいくつかのレンダリングで構成されています。パーシャル デザインと同じように、さまざまな種類のレンダリングをグループ化し、このグループをさまざまな場所で再利用できます。スニペットとパーシャル デザインの違いは、スニペットは拡張可能であり、スタイルを変更でき、ページ上で何度でも使えることです。

関連トピック:

サイトから不要なレンダリングを削除する

一部のレンダリングを使用せず、スタイルの設定も行っていない場合は、サイトの [有効なレンダリング] セクションから削除することを検討します。ツールボックスを整理整頓しておくと、編集担当者の作業が大幅に楽になります。ページにレンダリングをドロップしたものの、スタイルが未設定で、Web サイトのイメージにも適合していないとなれば、イライラを招きかねません。

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

プレースホルダーに配置できるレンダリングを管理するために、プレースホルダー制限を設定できます。使う予定がない、または使いたくないレンダリングを除外することで、編集担当者の仕事がはるかに簡単になります。

関連トピック

ページのプレゼンテーションの詳細を設定するために標準値を使わない

1 つのテナント内では、すべてのサイトが同じテンプレート セットを使います。それぞれが個別のスタイル アイテムを持つことも、異なるグリッドを使うこともできます。テナント全体で 1 つの共有サイトをスタイルのホルダーとして使わない限り、一部のサイトでレイアウトが壊れる可能性があります。

代わりに、事前設定されたレンダリングのセットを含むパーシャル デザインまたはスニペットを使うことができます。この方法でプレゼンテーションを設定すると、柔軟性のバランスが取れるだけでなく、エクスペリエンスが合理化され、管理しやすくなります。

テナント内のすべてのサイト間で共有したいデザインがある場合は、再利用できるように、ページとパーシャル デザインを含む共有サイト機能の作成を検討します。

関連トピック:

パーシャル デザインの継承を使用する

わずかに異なるパーシャル デザインを作る場合は、共通のレイアウト要素を使ってベースとなるパーシャル デザインを作成し、より具体的なパーシャルにそのパーシャル デザインを継承することを検討します。パーシャルの継承により、デザインの共有部分を 1 か所で管理し、作成中のさまざまなページ タイプにそれらの変更を簡単に伝えることができます。

たとえば、わずかに異なる 2 つのヘッダーが必要な場合など、パーシャルの継承を利用することで、ナビゲーション レンダリングを使って基本的なパーシャル デザインを 1 つ作成し、その上に別のパーシャルを作成して、異なるロゴで相違点を埋めることができます。このようにすると、わずかにしか違わないテンプレートをいくつも作成せずに済みます。

スプリッターを使ったレンダリングのレイアウト変更よりも、レンダリングのグリッド設定の変更を優先する

デフォルトでは、ページにレンダリングを追加すると、列の全幅が使われます。エクスペリエンス エディターでは、レンダリングのグリッド設定でこれを変更できます。デフォルト設定を完全に変更するには、コンテンツ エディターでグリッド設定を変更する必要があります。 

ページに追加のスプリッターを配置する前に、まずレンダリングのレイアウト変更を常に検討します。このようにして、レンダリングの数を制限することで、ページの応答性が向上し、エクスペリエンス エディターの速度が向上します。

関連トピック:

Do you have some feedback for us?

If you have suggestions for improving this article,