> 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 Sites ページ上でプロフィール写真、イニシャル、またはアイコンを表示して、ユーザー、取引先責任者、取引先、または任意の Salesforce レコードを表す Experience Cloud コンポーネントです。
ポータルユーザーのプロフィール、取引先担当者、連絡先リスト、またはエンティティ識別子を、一貫した視覚スタイルで表示するのに使用します。コンポーネントは、利用可能な場合は自動的に画像を表示し、そうでない場合はイニシャルまたはアイコンを使用します。
ユーザープロフィールのヘッダー、コミュニティメンバーの一覧、連絡先ディレクトリ、またはポータルユーザーが人やエンティティを視覚的に識別する必要があるあらゆる場所に最適です。
## 設定
Avonni Avatar コンポーネントを使用すると、Salesforce Experience Cloud サイト内でユーザーやエンティティを視覚的に一貫した形で表現できます。以下は、Avatar をニーズに合わせてカスタマイズするための手順ガイドです。
### イニシャルの表示
Avatar コンポーネントでは、イニシャルの表示方法に柔軟性があります。
#### **手動入力**
表示したいイニシャルがわかっている場合は、「イニシャル」フィールドに直接入力します。
#### **動的生成（式）**
Avonni コンポーネントを動的にするには、 [Experience Cloud 式](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#expressions)を使用できます。たとえば、以下の Avatar コンポーネントでは、次の式を使用して現在ログインしているユーザーの名前を自動表示できます。
```
{!User.Record.Name}
```
次のものを置き換えることができます `名前` を、Salesforce 組織でユーザー名を保存している実際の項目名に置き換えられます。
フルネームからイニシャルを自動生成したい場合は、「イニシャル自動整形」オプションを有効にします。これにより、Experience Cloud 式を使用して名前の各単語の先頭文字を抽出し、整形します。
現在のユーザー名からイニシャルを動的に表示
### カスタム画像
プロフィール写真、ロゴ、または任意の画像を追加して、Avatar をすぐに見分けられるようにします。画像は **選択済みコンテンツ** オプションを使用してアップロードします。コンポーネントは自動的に切り抜き、Avatar の形状に収まるよう整形します。
画像が追加されない場合、Avatar には代わりにイニシャルが表示されます
### バリアント（形状）
次のいずれかを選択します **正方形** （既定）と **円形** を使用して **バリアント** 、ポータルのデザインに合わせます。円形のアバターは人物に適しており、正方形はロゴやエンティティアイコンに適しています
### サイズ
ページ上で Avatar の表示サイズを次の **サイズ** プロパティで制御します。オプションの範囲は **X-Small** から **小**, **中** （デフォルト）、 **大** と **X-Large** から **XX-Large**までなので、周囲のコンテンツとのバランスを取れます—インラインの一覧では小さく、プロフィールヘッダーでは大きく表示します。
### プライマリテキストとセカンダリテキスト
テキストフィールドを追加して、Avatar の横に追加の情報を表示します。 **プライマリテキスト** を最も重要な情報（たとえばフルネーム）に使用し、 **セカンダリテキスト** を補足情報（たとえば役職やメールアドレス）に使用します。
各テキストレベルごとにフォントスタイルを設定して、プライマリ情報とセカンダリ情報の間に視覚的な階層を作成することもできます。
### タグ
Avatar に関する情報を分類したり強調したりするための視覚ラベルを追加します。各タグには **ラベル** と **バリアント** があり、バッジに色を付けます — `代替反転`, `Base`, `ブランド`, `エラー`, `情報`, `反転`, `オフライン`, `成功` または `警告` — ステータス、部署、役割、または簡単な識別子を表示するのに便利です。
### プロパティ
**イニシャル** は、ユーザーまたはエンティティの特定のイニシャルを表示し、 **イニシャル自動整形** は、提供されたフルネームから自動生成して、手動入力なしで一貫した表示にします。
**フォールバックアイコン名** は、画像やイニシャルなどの主要データがない場合に表示される代替アイコンを設定し、視覚的な一貫性を保ちます。既定値は `standard:account`.
**CMS 画像** と **画像 URL または式** は Avatar の画像を設定します — CMS 管理のアセットを参照するか、URL/式を指定します。 **リンク先** は、アバターを指定したアドレスへのリンクにします。
**バリアント** 形状を選択し `正方形` （デフォルト）または `円形` 、そして **サイズ** 全体の寸法を調整します（`X-Small`, `小`, `中` （デフォルト）、 `大`, `X-Large`, `XX-Large`). **アイコンの位置** は、アバター内でフォールバックアイコンの位置を揃えます（`開始`, `中央` （デフォルト）、 `末尾`).
**プライマリテキスト**, **セカンダリテキスト**、および **第3テキスト** は、アバターの横にメイン、補足、3段目のテキストを表示します（通常は名前、次に役割、最後に追加情報）。それぞれに個別の **テキストスタイル** 設定がパネル内の直下にあります — `見出し 1` から `見出し 4`、または `段落 1` / `段落 2`. **テキストの位置** は、それらのテキストのアバターに対する配置を指定します（`左`, `中央`, `右` （既定））。
**アバターの詳細を非表示** は、テキストやタグなど、アバターに関連付けられた追加情報を表示または非表示にします。
**タグ** アバターにバッジタグをカテゴリマーカーまたは指標として追加します。
**エンティティアイコン名**, **エンティティのイニシャル**, **エンティティの画像ソース**, **エンティティのバリアント**、および **エンティティの位置** アバター上に重ねる2つ目の「エンティティ」バッジを設定します — そのアイコン、イニシャル、画像、形状（`正方形`、既定の `円形`）と角の位置（`左上` （デフォルト）、 `右上`, `左下`, `右下`).
**アクション** アバターにアクションボタンを追加します — それぞれにラベル、アイコン、名前、クリック時の操作があり、さらにメニューアイコンとメニュー位置（`左下`, `右下`, `左上`, `右上`）もあり、アクションが複数ある場合に使用されます。 **リンク先** は、アバターをクリックしたときに発生する操作を定義します。
## ユースケース
**ユーザープロファイル** – カスタム画像と、ユーザー名のプライマリテキスト、役職や部署のセカンダリテキストを組み合わせて、完全なプロフィールヘッダーを作成します。これにより、ポータルユーザーのプロフィールページに、明確でプロフェッショナルな表示を提供します。
**コミュニティフォーラム** – 投稿やコメントの横にアバターを表示して、コミュニティメンバーが誰が投稿しているかをすばやく識別できるようにします。これにより親しみやすさが生まれ、参加を促し、会話を追いやすくなります。
**チームページ** – 名前、役割、部署や専門分野のタグを含むアバターでチームメンバーを紹介します。これにより、ポータルユーザーは適切な連絡先を見つけやすくなり、チーム構成をひと目で把握できます。
## スタイル
{% tabs %}
{% tab title="プライマリテキスト" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ---------------------- | ------------------------------ | ------------------------- |
| **プライマリテキストの色** | アバター内のメインテキストの色を設定します | 標準の色値、色のユーティリティクラス |
| **プライマリテキストのフォントサイズ** | プライマリテキストのサイズを変更します | フォントサイズ値（例: 12px、1rem） |
| **プライマリテキストのフォントスタイル** | フォントスタイルを制御します（例: イタリック、オブリーク） | 標準のフォントスタイルオプション |
| **プライマリテキストのフォントウェイト** | プライマリテキストの太さを定義します | フォントウェイト値（例: normal、bold） |
| {% endtab %} | | |
{% tab title="セカンダリテキスト" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ---------------------- | ------------------------------ | ------------------------- |
| **セカンダリテキストの色** | 補足テキストの色を設定します | 標準の色値、色のユーティリティクラス |
| **セカンダリテキストのフォントサイズ** | セカンダリテキストのサイズを変更します | フォントサイズ値（例: 12px、1rem） |
| **セカンダリテキストのフォントスタイル** | フォントスタイルを制御します（例: イタリック、オブリーク） | 標準のフォントスタイルオプション |
| **セカンダリテキストのフォントウェイト** | セカンダリテキストの太さを定義します | フォントウェイト値（例: normal、bold） |
| {% endtab %} | | |
{% tab title="第3テキスト" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------------- | ------------------------------ | ------------------------- |
| **第3テキストの色** | 第3レベルのテキストの色を設定します | 標準の色値、色のユーティリティクラス |
| **第3テキストのフォントサイズ** | 第3テキストのサイズを変更します | フォントサイズ値（例: 12px、1rem） |
| **第3テキストのフォントスタイル** | フォントスタイルを制御します（例: イタリック、オブリーク） | 標準のフォントスタイルオプション |
| **第3テキストのフォントウェイト** | 第3テキストの太さを定義します | フォントウェイト値（例: normal、bold） |
| {% endtab %} | | |
{% tab title="アイコン" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ---------------------- | ------------------------------ | ---------------------------------- |
| **アイコン背景色** | アイコン領域の背景色を設定します | 標準の色値、色のユーティリティクラス |
| **アイコンの前景色** | アイコン画像またはイニシャルの色を設定します | 標準の色値、色のユーティリティクラス |
| **アイコン前景色ユーティリティ** | アイコンに事前定義された配色を適用します | 特定のユーティリティクラス名 |
| **アイコン画像の object-fit** | アイコン画像がそのスペース内にどのように収まるかを制御します | fill、contain、cover、none、scale-down |
| {% endtab %} | | |
{% tab title="ボーダー" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------ | ---------------------------- | -------------------- |
| **ボーダーサイズ** | アバターの枠線の幅を指定します | ピクセル値（例: 1px、2px） |
| **ボーダー半径** | アバターの角の丸みを制御します | ピクセル値、%（例: 円形では 50%） |
| **ボーダー色** | アバターの枠線の色を設定します | 標準の色値、色のユーティリティクラス |
| **ボーダースタイル** | 枠線の外観を定義します（例: solid、dashed） | 標準の CSS 枠線スタイル |
| {% endtab %} | | |
{% tab title="イニシャル" %}
| プロパティ名 | 説明 | 指定可能な値 |
| ------------------- | --------------------------- | ------------------------- |
| **イニシャルの色** | 表示されるイニシャルの文字色を設定します | 標準の色値、色のユーティリティクラス |
| **イニシャルのホバー時の色** | アバターにホバーしたときのイニシャルの色 | 標準の色値、色のユーティリティクラス |
| **イニシャルのフォントウェイト** | イニシャル文字の太さを制御します | フォントウェイト値（例: 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.