# レコード詳細ページのヘッダーを作成する

## 概要

このチュートリアルでは、標準コンポーネントとAvonniコンポーネントの両方を含むさまざまなコンポーネントを統合して、Experience Cloudサイト用のレコードページヘッダーを構築します。次のコンポーネントを使用します：

* [Avonni コンテナ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-kontena)
* [Avonni メディアオブジェクト](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-mediaobujekuto)
* [Avonni アバター](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-abat)
* リッチコンテンツエディタ

<details>

<summary>なぜこれらのコンポーネントを使用するのか？</summary>

#### Avonni コンテナ

* **目的：** Avonni コンテナはヘッダーの基礎要素として機能します。これは他のすべてのコンポーネントに対して構造化されカスタマイズ可能なスペースを提供します。
* **使用する理由：** クリーンなレイアウトを維持するために不可欠であり、サイトのブランディングに合わせてスタイリングすることで一貫した外観と感触を確保できます。コンテナはメディアオブジェクト、アバター、リッチコンテンツを一体として内包します。

#### Avonni メディアオブジェクト

* **目的：** このコンポーネントは、通常テキストに並んで表示される画像や動画などのメディアをコンテンツブロックの横に表示します。
* **使用する理由：** ヘッダーでは、Avonni メディアオブジェクトがレコードの主要情報の横に関連する画像やアイコンを上品に表示できます。たとえば、製品の説明の横に製品画像を表示するなどです。メディアとコンテンツの組み合わせは視覚的な魅力を高め、ユーザーに即時のコンテキストを提供します。

#### Avonni アバター

* **目的：** Avonni アバターはユーザーや組織などの画像を表示し、人、会社、その他のエンティティを表すことができます。
* **使用する理由：** ヘッダーでは、アバターがレコードの対象を視覚的に表現できます。例えば、取引先担当者レコードにユーザープロフィール画像を表示するなどです。これにより個人的な要素が加わり、ヘッダーがより親しみやすく視覚的に魅力的になります。

#### リッチコンテンツエディタ

* **目的：** リッチコンテンツエディタは、さまざまな書式設定オプションを含むリッチテキストコンテンツの作成と編集を可能にします。
* **使用する理由：** このコンポーネントは、フォーマットされた使いやすい形でレコードに関する詳細情報をヘッダーに表示するために使用できます。短い説明、連絡先情報、またはレコードに関連するその他のデータなど、テキストの表示方法に柔軟性を提供します。

</details>

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FKPismE2yExHlL3RGxAgI%2F2023-11-17_05-54-39.png?alt=media&#x26;token=fd0d6af2-1d59-462f-825c-5ed768c32e11" alt=""><figcaption><p>最終結果</p></figcaption></figure>

## 対話型ステップバイステップ構成ガイド

{% @arcade/embed flowId="WSIrtqDu3Qz8KKpXTMmz" url="<https://app.arcade.software/share/WSIrtqDu3Qz8KKpXTMmz>" %}