ベストプラクティス

推奨事項

Version:

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

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

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

このトピックでは、ページデザイン、部分デザイン、スニペット、合成図の作業に関する以下の推奨事項を説明します。

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

エディターの作業を楽にするために、できるだけ部分的なデザインを活用しましょう。部分的なデザインは一貫したスタイルを作り、編集者の作業を楽にし、エクスペリエンスエディターのパフォーマンスを向上させます。

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

レンダリングが部分的なデザインに配置され、ページデザインを通じてページに割り当てられる場合、編集者は記事のような汎用ページを作成する際の操作を減らす必要があります。
部分的なデザインに空のコンテナレンダリングや空のプレースホルダー付きのレンダリングを配置し、編集者が明確に定義した拡張ポイントを得られます。それらのプレースホルダーには、どのコンポーネントがその領域で許可されているかを示すためのプレースホルダー制限を設定してください。
ローカルカスタマイズが必要な場合はスニペットやページブランチを活用しましょう。部分的なデザインはパフォーマンスを向上させます。

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

編集者に複数のレンダリングを配置させて、独自のレイアウトを必要としないページを作成させないでください。例えば、すべての記事ページは見た目が同じ傾向があるため、部分的なデザインで構造を定義するのに最適な候補となります。対照的にランディングページは大きく変化しやすいため、最小限のページデザインに大きなプレースホルダーを配置することで編集者に大きな柔軟性を与えるのに適しています。

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

編集者がレイアウトをスタイリングしたり変更できるようにしたいなら、コンポジットやスニペットの使用を検討してください。

レンダリングのグループを独自のレイアウトにしたい場合、そしてエディターがエクスペリエンスエディターでデザインできるようにしたい場合にコンポジットを使うのが良いでしょう。再利用可能なレンダリングのグループを作りたいときはスニペットの使用を検討してください。スニペットは、エクスペリエンスエディターで別々にデザインできる複数のレンダリングで構成されています。部分的なデザインと同様に、異なる種類のレンダリングをグループ化し、そのグループを異なる場所で再利用できます。スニペットと部分的なデザインの違いは、スニペットが拡張可能で、スタイリングを変更でき、ページ上で好きなだけ使える点です。

不要なレンダリングをサイトから削除しましょう

もし一部のレンダリングを使っておらず、スタイリングもしていない場合は、サイトの 「Available Renderings 」セクションから削除することを検討してください。クリーンなツールボックスは編集者の作業をずっと楽にします。レンダリングをページに置いておいて、スタイリングされておらず、ウェブサイトのブランドに合わないと気づくのはフラストレーションが溜まることがあります。

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

プレースホルダーに入れられるレンダリングをある程度コントロールするために、プレースホルダーの制限を設定することができます。使うつもりがない、あるいは使いたくないレンダリングを除外することで、編集者の作業がずっと楽になります。

ページの表示詳細設定に標準値を使わないでください

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

代わりに、部分的なデザインやスニペットと事前に設定されたレンダリングセットを組み合わせて使うのも良いでしょう。このようにプレゼンテーションを設定することで、柔軟性のバランスが生まれ、体験がよりスムーズで管理しやすくなります。

もしテナント内のすべてのサイトで共有したいデザインがある場合は、ページと部分的なデザインを含む共有サイト機能を作成し、それらを再利用できるようにすることを検討してください。

部分設計継承を使用

わずかに異なる部分的なデザインを作成する場合は、共通のレイアウト要素でベース部分的なデザインを作成し、その部分的なデザインをより具体的な部分的な部分に継承することを検討してください。部分的な継承により、共有されたデザインの側面を一か所にまとめ、著者が作成しているすべてのページタイプに簡単にその変更を伝えることができます。

例えば、わずかに異なるヘッダーが必要な場合などです。部分的な継承を活用することで、例えばナビゲーションレンダリングで1つのベース部分デザインを作成し、その上に他の部分部分を作成し、異なるロゴで違いを埋めるなど、さまざまな方法を選べます。こうすることで、わずかな違いだけの多数のテンプレートを作成する手間を避けられます。

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

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

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