> 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 コンテナー](/experience-cloud/experience-cloud-ja/experience-components/ax-container.md)
* [Avonni メディアオブジェクト](/experience-cloud/experience-cloud-ja/experience-components/ax-media-object.md)
* [Avonni アバター](/experience-cloud/experience-cloud-ja/experience-components/ax-avatar.md)
* リッチコンテンツエディター

<details>

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

#### Avonni コンテナー

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

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

* **目的:** このコンポーネントは、通常は画像や動画などのメディアをコンテンツブロックの横に表示します。
* **使用する理由:** ヘッダーでは、Avonni メディアオブジェクトを使って、レコードの主要情報の横に関連する画像やアイコンを上品に表示できます。たとえば、商品画像を説明文の横に表示するような使い方です。メディアとコンテンツを組み合わせることで視覚的な関心を高め、ユーザーにすぐに文脈を伝えます。

#### Avonni アバター

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

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

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

</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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.