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

Version: 10.4

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

このトピックでは、ページデザイン、パーシャルデザイン、スニペット、およびコンポジットの操作に関する次の推奨事項について説明します。

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

編集者の作業を容易にするために、パーシャルデザインを使用してできるだけデザインします。パーシャルデザインは、一貫性のあるスタイルを作成し、エディターの作業を容易にし、エクスペリエンスエディターのパフォーマンスを向上させるのに役立ちます。

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

レンダリングをパーシャルデザインに配置し、ページデザインを通じてページに割り当てると、エディターは記事などの汎用ページを作成する際に必要な操作が少なくなります。
パーシャルデザインに空のコンテナレンダリングまたは空のプレースホルダーを持つ別のレンダリングを配置して、エディターに明確に定義された拡張ポイントを提供します。これらのプレースホルダーにプレースホルダーの制限を設定して、それらの領域で許可されるコンポーネントを示します。
スニペットとページブランチを活用し、ローカルでのカスタマイズが必要です。パーシャルデザインにより、パフォーマンスが向上します。

複雑な再利用可能な構造をパーシャルデザインや複合材に配置

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

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

エディターがスタイルを設定したり、レイアウトを変更したりできるようにする場合は、コンポジットまたはスニペットの使用を検討してください。

コンポジットは、レンダリングのグループに独自のレイアウトを持たせ、エディターがエクスペリエンスエディターでデザインできるようにする場合に使用します。再利用可能なレンダリングのグループを作成する場合は、スニペットの使用を検討してください。スニペットは、エクスペリエンスエディターで個別に設計できる複数のレンダリングで構成されます。パーシャルデザインと同様に、さまざまな種類のレンダリングをグループ化し、このグループをさまざまな場所で再利用できます。スニペットとパーシャルデザインの違いは、スニペットは拡張可能であり、スタイルを変更でき、ページ上で必要な頻度で使用できる点です。

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

一部のレンダリングを使用しておらず、スタイルが設定されていない場合は、サイトのAvailable Renderingsセクションからレンダリングを削除することを検討してください。すっきりとしたツールボックスは、編集者の生活をはるかに楽にします。レンダリングをページにドロップしたのに、それがスタイル設定されておらず、Webサイトのブランディングに合っていないことに気付くと、イライラすることがあります。

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

プレースホルダに配置できるレンダリングをある程度制御するために、プレースホルダの制限を設定できます。使用する予定のないレンダリングや使用したくないレンダリングを除外すると、エディターの作業がはるかに簡単になります。

ページのプレゼンテーションの詳細を設定するために標準値を使用しないでください

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

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

サイトコレクション内のすべてのサイト間で共有するデザインがある場合は、ページとパーシャルデザインを含む共有サイト機能を作成して、それらを再利用できるようにすることを検討してください。

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

互いにわずかに異なるだけのパーシャルデザインを作成する場合は、共通のレイアウト要素を使用して基本パーシャルデザインを作成し、そのパーシャルデザインをより具体的なパーシャルに継承することを検討してください。パーシャルの継承を使用すると、デザインの共有部分を1か所で管理し、作成者が作成しているすべての異なるページタイプにそれらの変更を簡単に反映できます。

たとえば、わずかに異なる2つのヘッダーが必要な場合です。パーシャルの継承を利用することで、たとえばナビゲーションレンダリングを使用して1つの基本パーシャルデザインを作成し、その上に他のパーシャルを作成し、異なるロゴで違いを埋めることができます。これにより、わずかな違いだけで多数のテンプレートを作成するのを回避できます。

レンダリングのレイアウトを変更するためにスプリッターを使用するよりも、レンダリングのグリッド設定を変更することを優先します

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

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