> 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 の表示サイズは、 **サイズ** プロパティを使って調整します。オプションは **極小** に **特大**まであり、周囲のコンテンツに合わせて調整できます。たとえば、インラインの一覧には小さく、プロフィールヘッダーには大きくできます。
### **主要テキストと副次テキスト**
テキストフィールドを追加して、Avatar の横に追加のコンテキストを表示します。 **主要テキスト** を最も重要な情報（フルネームなど）に使用し、 **副次テキスト** を補足情報（役職やメールアドレスなど）に使用します。
各テキストレベルごとにフォントスタイルを設定して、主要情報と副次情報の間に視覚的な階層を作ることもできます。
### **タグ**
視覚的なラベルを追加して、Avatar に関する情報を分類または強調表示します。タグは小さなバッジとして表示され、 **タグのバリアント** オプションを使ってさまざまな色でスタイル設定できます。ステータス、部署、役割、または簡単な識別子を示すのに便利です。
***
## **使用例**
**ユーザープロフィール** – カスタム画像と、ユーザー名を表示する主要テキスト、役職や部署を表示する副次テキストを組み合わせて、完全なプロフィールヘッダーを作成します。これにより、ポータルユーザーはプロフィールページ上で、明確でプロフェッショナルな表現を得られます。
**コミュニティフォーラム** – 投稿やコメントの横に Avatar を表示して、コミュニティメンバーが誰の発言かをすぐに識別できるようにします。これにより、親しみやすさが増し、参加を促進し、会話を追いやすくなります。
**チームページ** – 名前、役割、部署や専門性を示すタグを含む Avatar でチームメンバーを紹介します。これにより、ポータルユーザーは適切な連絡先を見つけやすくなり、チーム構成をひと目で把握できます。
***
## 仕様
{% tabs %}
{% tab title="プロパティ" %}
| 名前 | 説明 |
| ------------------ | ----------------------------------------------------------- |
| **イニシャル** | Avatar 内に表示する特定のイニシャルを入力します。ユーザーやエンティティを表す文字を手動で定義できます |
| **イニシャルの自動整形** | この機能は、入力されたフルネームに基づいてイニシャルを自動生成して表示し、手動入力なしで一貫した表現を実現します |
| **フォールバックアイコン名** | 画像やイニシャルなどの主要データがない場合に Avatar に表示する予備のアイコンを決定し、視覚的な一貫性を保ちます |
| **サイズ** | さまざまな UI コンテキストに収まるように、Avatar の全体寸法を調整します |
| **バリアント** | 円形（`円形`）または四角形（`四角形`）のいずれかの形状を選択して、デザインの好みに合わせます |
| **Avatar の詳細を非表示** | Avatar に関連付けられたテキストやタグなどの追加詳細を表示または非表示に切り替えます |
| **主要テキスト** | Avatar の横に表示されるメインテキストで、名前や主要な識別子に使用されることが多いです |
| **主要テキストのスタイル** | 主要テキストのフォントスタイルを指定し、見出し 1～4 や段落 1～2 などのオプションから選択します |
| **副次テキスト** | 主要テキストの下に表示される追加テキストで、補足情報や小見出しに適しています |
| **副次テキストのスタイル** | 副次テキストのフォントスタイルを定義します。見出し 1～4 から段落 1～2 まで選択できます |
| **三次テキスト** | 三段階目のテキストで、通常は Avatar に関連する追加詳細や属性に使用されます |
| **三次テキストのスタイル** | 三次テキストに使用するフォントスタイルを選択します。見出し 1～4 や段落 1～2 などのオプションがあります |
| **テキストの位置** | Avatar に対する付随テキストの配置や位置を指定し、よりよいレイアウトを可能にします |
| **タグ** | Avatar に関連付けられたバッジタグのプロパティを設定し、Avatar にカテゴリマーカーや指標を追加できます |
| {% endtab %} | |
{% tab title="外観" %}
| 属性 | プロパティ名 | 説明 | 指定可能な値 |
| ------------- | ------------------ | --------------------------------- | ---------------------------------- |
| **主要テキスト** | 主要テキストの色 | Avatar 内のメインテキストの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **主要テキスト** | 主要テキストのフォントサイズ | 主要テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **主要テキスト** | 主要テキストのフォントスタイル | フォントスタイルを制御します（例: italic、oblique） | 標準のフォントスタイル オプション |
| **主要テキスト** | 主要テキストのフォントの太さ | 主要テキストの太さを定義します | フォントの太さの値（例: normal、bold） |
| **副次テキスト** | 副次テキストの色 | 補足テキストの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **副次テキスト** | 副次テキストのフォントサイズ | 副次テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **副次テキスト** | 副次テキストのフォントスタイル | フォントスタイルを制御します（例: italic、oblique） | 標準のフォントスタイル オプション |
| **副次テキスト** | 副次テキストのフォントの太さ | 副次テキストの太さを定義します | フォントの太さの値（例: normal、bold） |
| **三次テキスト** | 三次テキストの色 | 三段階目のテキストの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **三次テキスト** | 三次テキストのフォントサイズ | 三次テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **三次テキスト** | 三次テキストのフォントスタイル | フォントスタイルを制御します（例: italic、oblique） | 標準のフォントスタイル オプション |
| **三次テキスト** | 三次テキストのフォントの太さ | 三次テキストの太さを定義します | フォントの太さの値（例: normal、bold） |
| **アイコン** | アイコンの背景色 | アイコン領域の背景色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **アイコン** | アイコンの前景色 | アイコン画像またはイニシャルの色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **アイコン** | アイコン前景色のユーティリティ | アイコンにあらかじめ定義された配色を適用します | 特定のユーティリティクラス名 |
| **アイコン** | アイコン画像の Object Fit | アイコン画像がその領域にどのように収まるかを制御します | fill、contain、cover、none、scale-down |
| **枠線** | 枠線の太さ | Avatar の枠線の幅を指定します | ピクセル値（例: 1px、2px） |
| **枠線** | 角の丸み | Avatar の角の丸みを制御します | ピクセル値、%（例: 円形なら 50%） |
| **枠線** | 枠線の色 | Avatar の枠線の色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **枠線** | 枠線のスタイル | 枠線の見た目を定義します（例: solid、dashed） | 標準の CSS 枠線スタイル |
| **イニシャル** | イニシャルの色 | 表示されるイニシャルの文字色を設定します | 標準のカラー値、カラー ユーティリティ クラス |
| **イニシャル** | ホバー時のイニシャルの色 | 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.