> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/use-cases/building-a-record-detail-page-header.md).

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

## 概要

このチュートリアルでは、Standard と Avonni の両方のタイプを含むさまざまなコンポーネントを統合して、Experience Cloud サイトのレコードページヘッダーを作成します。使用するコンポーネントは次のとおりです。

* [Avonni Container](/experience-cloud/experience-cloud-ja/experience-components/ax-container.md)
* [Avonni Media Object](/experience-cloud/experience-cloud-ja/experience-components/ax-media-object.md)
* [Avonni Avatar](/experience-cloud/experience-cloud-ja/experience-components/ax-avatar.md)
* リッチコンテンツエディター

<details>

<summary>これらのコンポーネントを使用する理由</summary>

#### Avonni Container

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

#### Avonni Media Object

* **目的:** このコンポーネントは、コンテンツブロックの横にメディアを表示します。通常は、テキストの横に画像や動画を配置します。
* **使用する理由:** ヘッダーでは、Avonni Media Object を使用して、レコードの主要情報の横に関連画像やアイコンを上品に表示できます。たとえば、製品の説明の横に製品画像を表示するような形です。メディアとコンテンツを組み合わせることで視覚的な訴求力が高まり、ユーザーにすぐに文脈を伝えられます。

#### Avonni Avatar

* **目的:** Avonni Avatar は、ユーザーやエンティティの画像を表示し、人、会社、またはその他のエンティティを表現できます。
* **使用する理由:** ヘッダーでは、アバターによってレコードの対象を視覚的に表現できます。たとえば、連絡先レコードにユーザーのプロフィール写真を表示するような使い方です。これにより、個人的な印象が加わり、ヘッダーがより親しみやすく、視覚的にも魅力的になります。

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

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

</details>

<figure><img src="/files/caa2095126c293799cb6a335c6ac003360673884" alt=""><figcaption><p>最終結果</p></figcaption></figure>

## インタラクティブなステップバイステップ設定ガイド

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/use-cases/building-a-record-detail-page-header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.