--- title: "推奨事項:レンダリングの活用" slug: "recommendations--using-renderings" abstract: "どのレンダリングを使い、どう使うかを考えてみてください。" --- # 推奨事項:レンダリングの活用 SXAには、モジュール化されたコンポーネントベースの設計を保証するための、あらかじめ定義されたレンダリングやレンダリングバリアントのライブラリが付属しています。カスタムレンダリング(バリアント)を作成することもできます。レンダリングを賢く使うことで、作業をより効率的に進めることができます。 ## 作業に適したレンダリングを使いましょう ページレイアウトの大部分をレンダリングするために、ページコンテンツ、ページリスト、プロモ、リッチテキストなどの汎用レンダリングは避けてください。目的に合った正しいレンダリングを使いましょう。標準レンダリングを[クローン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/copy-and-customize-a-rendering.html "Copy and customize a rendering") し、そのレンダリングの目的を表す名前を付けることを検討してください。 例えば、以下のデフォルトのレンダリングクローンの名前は、ビジネスユーザーがその目的を即座に理解しやすくします。 - **ティーザー(ページコンテンツレンダリングのクローン)は、ページへのリンクを設定してコンテンツをティーラスするよう設定されています。** - **ハイライト** や **Call to Action** (プロモレンダリングのシンプルなコピー)を使い、仕事に適したスタイルやレンダリングバリエーションのセットを提供します。 - **Hero Carousel** (Carouselコンポーネントのクローン)で、事前に設定されたスライドデータソースやプロジェクト専用のレンダリングバリアントを持つコンポーネントが使えます。 ## スニペットレンダリングをレンダリングのグループとして使う 編集者がページの一部を形成するためにレンダリングのセットを使うことが多い場合は、スニペットレンダリングの使用を検討してください。 ス [ニペット](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/en/add,-reuse,-and-edit-a-snippet.html) レンダリングは複数のレンダリングを埋め込むことをサポートし、それらを [設定](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/configure-a-snippet.html "Configure a snippet") でき、スニペットのコピー、その設定、内容をページに追加することも指定できます。編集者がスニペットを変更する際、その変更はその特定のページにのみ適用されます。 ## 著者が編集したコンテンツにはプレーンHTMLレンダリングを使用しないでください 複雑なコンポーネントの場合は、Plain HTMLレンダリングを使うことを検討すると良いでしょう。なぜなら、HTMLの配置に完全な自由度が提供されるからです。しかし、このページへのコンテンツ追加方法は、すべてのコンテンツエディターがHTMLコードの編集方法を知っているわけではないため、編集者が扱いづらい場合があります。Plain HTMLレンダリングの代わりに、クローンや [バリアント](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/rendering-variants.html "Rendering variants")、またはHTMLスニペットの使用を検討してみてください。 プレーンHTMLレンダリングを使う前に、以下の他の選択肢を検討してください: - [SXAレンダリング(Promoレンダリングなど)をコピーしてカスタマイズしてください。](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/copy-and-customize-a-rendering.html "Copy and customize a rendering") - より複雑な [レンダリングバリアント](https://doc.sitecore.com/xp/en/developers/sxa/18/sitecore-experience-accelerator/en/create-a-rendering-variant.html)を作成しましょう。こうすることで、レンダリングバリアントのコンポーネントマークアップを完全にコントロールしつつ、テキストや画像はエディターで編集可能にできます。これはビジュアルコンポーネントの推奨されるアプローチです。 - Meta Partial DesignにHTMLスニペットを使いましょう。もし編集するビジュアルコンテンツがない場合は(例えば、ページにJavaScriptコードを配置したい場合)、Meta Partial DesignにHTMLスニペットを使用することを検討してください。 > !注この機能はSXAバージョン1.7以降で利用可能です。 ## リッチテキストフィールドの内容が完全に編集可能であることを確認しましょう サイト展開後にマーケターが維持することが期待されるテキストを提供する際は、WYSIWYGエディターで維持できないマークアップやクラスを入れ **て** はいけません。 ![image1.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/image1.png) もしエディターがテキスト要素(テーマ内で特定のスタイルでスタイリングする必要がある)にクラスを付ける必要がある場合は、Sitecore**リッチテキストエディター**[に追加する必要があります](http://firebreaksice.com/sitecore-rich-text-editor-css-class-tips/)。この方法では、ドロップダウンメニューで利用可能です。エディターはHTMLビューに切り替えることなくコンテンツのスタイルを付けることができます。 また、コンテンツ公開後の驚きを避けるために、リッチテキストエディター内の見た目にスタイルが反映されているか確認する必要があります。 ![image2.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/image2.png) ページにより複雑なHTMLコードが必要な場合は、複雑なHTMLをリ**ッチテキスト**欄に置くのではなく、[コンポーネントのクローン](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/copy-and-customize-a-rendering.html "Copy and customize a rendering")作成、レンダリングバ[リアン](https://doc.sitecore.com/xp/en/developers/sxa/18/sitecore-experience-accelerator/en/create-a-rendering-variant.html)トの設定、[カスタムコンポーネントの作成](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/walkthrough--building-a-simple-rendering.html "Walkthrough: Building a simple rendering")を検討してください。