> 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/experience-components/ax-avatar.md).
# AX - アバター
## 概要
**AX - アバター** Experience Cloud のコンポーネントで、プロフィール写真、イニシャル、またはアイコンを Experience Sites ページ上に表示し、ユーザー、取引先責任者、取引先、または任意の Salesforce レコードを表します。
ポータルユーザーのプロフィール、取引先担当者、連絡先一覧、またはエンティティ識別子を一貫したビジュアルスタイルで表示するために使用します。コンポーネントは、画像が利用可能な場合は自動的に表示し、利用できない場合はイニシャルまたはアイコンにフォールバックします。
ユーザープロフィールのヘッダー、コミュニティメンバー一覧、連絡先ディレクトリ、またはポータルユーザーが人やエンティティを視覚的に識別する必要があるあらゆる場所に最適です。
## 設定
Avonni Avatar コンポーネントを使用すると、Salesforce Experience Cloud サイト内でユーザーやエンティティを視覚的に一貫した形で表現できます。以下は、ニーズに合わせて Avatar をカスタマイズするための手順ガイドです:
### イニシャルの表示
Avatar コンポーネントでは、イニシャルの表示方法を柔軟に選べます:
#### **手動入力**
表示したいイニシャルが分かっている場合は、"Initials" フィールドに直接入力します。
#### **動的生成（式）**
Avonni コンポーネントを動的にするには、 [Experience Cloud 式](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#expressions)を使用できます。たとえば、以下の Avatar コンポーネントでは、次の式を使って現在ログイン中のユーザー名を自動的に表示できます:
```
{!User.Record.Name}
```
次を置き換えることができます `名称` Salesforce 組織でユーザー名を格納している実際のフィールド名と
フルネームからイニシャルを自動生成したい場合は、「Initials Auto Formatted」オプションを有効にします。これにより、Experience Cloud の式を使って名前の各単語の先頭文字を抽出し、整形します。
現在のユーザー名からイニシャルを動的に表示
### カスタム画像
プロフィール写真、ロゴ、または任意の画像を追加して、Avatar をすぐに認識できるようにします。画像は **選択済みコンテンツ** オプションを使ってアップロードします。コンポーネントが自動的にトリミングし、Avatar の形状に収まるよう整形します。
画像が追加されていない場合、Avatar には代わりにイニシャルが表示されます
### バリアント（形状）
次のいずれかを選択します **円形** または **正方形** を使用して **バリアント** フィールドで、ポータルのデザインに合わせます。円形のアバターは人物に適しており、四角形はロゴやエンティティ アイコンに適しています
### サイズ
次を使用して、ページ上での Avatar の表示サイズを制御します **サイズ** プロパティ。オプションは **極小** を **xx-large**まであり、周囲のコンテンツとのバランスを調整できます。インライン一覧には小さめ、プロフィールヘッダーには大きめが適しています。
### 主要テキストと補助テキスト
テキストフィールドを追加して、Avatar の横に追加のコンテキストを表示します。最も重要な情報（フルネームなど）には **主要テキスト** を、補足情報（役職やメールなど）には **補助テキスト** を使用します。
また、各テキストレベルにフォントスタイルを設定して、主要情報と補助情報の間に視覚的な階層を作ることもできます。
### タグ
Avatar に関する情報を分類したり強調したりするための視覚的なラベルを追加します。タグは小さなバッジとして表示され、 **タグのバリアント** オプションを使ってさまざまな色でスタイル設定できます。ステータス、部署、役割、または簡易識別子の表示に便利です。
### プロパティ
**イニシャル** は、ユーザーまたはエンティティの特定のイニシャルを表示し、 **イニシャルの自動整形** は、指定されたフルネームから自動生成して、手動入力なしで一貫した表現を実現します。
**フォールバックアイコン名** は、主要データ（画像またはイニシャル）がない場合に表示される予備アイコンを設定し、視覚的な一貫性を確保します。
**CMS 画像** と **画像 URL または式** CMS で管理されているアセットを参照するか、URL/式を指定して、アバターの画像を設定します。 **Href** アバターを指定されたアドレスへのリンクにします。
**バリアント** 円形（`円形`）または四角形（`正方形`）の形状を選択し、 **サイズ** 全体のサイズ（x-small から xx-large まで）を調整します。 **アイコンの位置** アバター内でフォールバックアイコンの位置を揃えます（`開始`, `中央`, `終了`).
**主要テキスト**, **補助テキスト**、および **サードレベルテキスト** アバターの横に主要テキスト、補助テキスト、サードレベルテキストを表示します（通常は名前、役割、追加情報の順）。それらのテキストスタイル（Heading 1～4 または Paragraph 1～2）は、［Style］タブで設定します。 **テキスト位置** は、アバターに対するこれらのテキストの配置を指定します（`左`, `中央`, `右`).
**アバターの詳細を非表示** は、アバターに関連付けられたテキストやタグなどの追加詳細を表示または非表示にします。
**タグ** バッジタグをアバターに追加して、カテゴリのマーカーや指標として使用します。
**エンティティ アイコン名**, **エンティティのイニシャル**, **エンティティの画像ソース**, **エンティティのバリアント**、および **エンティティの位置** アバター上に重ねて表示するセカンダリの「エンティティ」バッジを設定します。そのアイコン、イニシャル、画像、形状（`円形`/`正方形`）と角の位置を指定します。
**アクション** アバターにアクションボタンを追加し、 **リンク先** アバターがクリックされたときにトリガーされるインタラクションを定義します。
## ユースケース
**ユーザープロフィール** – カスタム画像と、ユーザー名用の主要テキスト、役職または部署用の補助テキストを組み合わせて、完全なプロフィールヘッダーを作成します。これにより、ポータルユーザーはプロフィールページ上で、明確かつプロフェッショナルな形でユーザーを表示できます。
**コミュニティ フォーラム** – 投稿やコメントの横に Avatar を表示して、コミュニティメンバーが誰が投稿しているかをすぐに識別できるようにします。これにより、親しみやすさが生まれ、参加を促し、会話を追いやすくなります。
**チームページ** – 名前、役割、部署または専門分野のタグを含む Avatar でチームメンバーを紹介します。これにより、ポータルユーザーは適切な連絡先を見つけやすくなり、チーム構成を一目で把握できます。
## スタイリング
{% tabs %}
{% tab title="主要テキスト" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------------- | --------------------------------- | -------------------------- |
| **主要テキストの色** | Avatar 内の主要テキストの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **主要テキストのフォントサイズ** | 主要テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **主要テキストのフォントスタイル** | フォントスタイルを制御します（例: italic、oblique） | 標準のフォントスタイル オプション |
| **主要テキストのフォントウェイト** | 主要テキストの太さを定義します | フォントウェイトの値（例: normal、bold） |
| {% endtab %} | | |
{% tab title="補助テキスト" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------------- | --------------------------------- | -------------------------- |
| **補助テキストの色** | 補助テキストの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **補助テキストのフォントサイズ** | 補助テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **補助テキストのフォントスタイル** | フォントスタイルを制御します（例: italic、oblique） | 標準のフォントスタイル オプション |
| **補助テキストのフォントウェイト** | 補助テキストの太さを定義します | フォントウェイトの値（例: normal、bold） |
| {% endtab %} | | |
{% tab title="サードレベルテキスト" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ----------------------- | --------------------------------- | -------------------------- |
| **サードレベルテキストの色** | サードレベルテキストの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **サードレベルテキストのフォントサイズ** | サードレベルテキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **サードレベルテキストのフォントスタイル** | フォントスタイルを制御します（例: italic、oblique） | 標準のフォントスタイル オプション |
| **サードレベルテキストのフォントウェイト** | サードレベルテキストの太さを定義します | フォントウェイトの値（例: normal、bold） |
| {% endtab %} | | |
{% tab title="アイコン" %}
| プロパティ名 | 説明 | 指定可能な値 |
| --------------------- | ---------------------------- | -------------------------------------- |
| **アイコンの背景色** | アイコン領域の背景色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **アイコンの前景色** | アイコン画像またはイニシャルの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **アイコン前景色ユーティリティ** | あらかじめ定義された配色をアイコンに適用します | 特定のユーティリティクラス名 |
| **アイコン画像のオブジェクトフィット** | アイコン画像がスペース内にどのように収まるかを制御します | fill, contain, cover, none, scale-down |
| {% endtab %} | | |
{% tab title="枠線" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------ | ------------------------------ | ----------------------- |
| **境界線のサイズ** | Avatar の境界線の幅を指定します | ピクセル値（例: 1px、2px） |
| **境界線の角丸** | Avatar の角の丸みを制御します | ピクセル値、%（例: 円の場合は 50%） |
| **境界線の色** | Avatar の境界線の色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **境界線スタイル** | 境界線の見た目を定義します（例: solid、dashed） | 標準の CSS 境界線スタイル |
| {% endtab %} | | |
{% tab title="イニシャル" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------------- | --------------------------- | -------------------------- |
| **イニシャルの色** | 表示されるイニシャルの文字色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **ホバー時のイニシャルの色** | Avatar にマウスオーバーしたときのイニシャルの色 | 標準のカラー値、カラー ユーティリティ クラス |
| **イニシャルのフォントウェイト** | イニシャルテキストの太さを制御します | フォントウェイトの値（例: normal、bold） |
| **エンティティの色** | イニシャルが生成されるときの背景色 | 標準のカラー値、カラー ユーティリティ クラス |
| **エンティティのフォントウェイト** | エンティティから生成されたイニシャルのフォントウェイト | フォントウェイトの値（例: normal、bold） |
| {% endtab %} | | |
| {% endtabs %} | | |
---
# 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/experience-components/ax-avatar.md?ask=&goal=
```
`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.