# AX - アバター
## 概要
**AX - アバター** は、ユーザー、取引先責任者、取引先、または任意の Salesforce レコードを表すために、プロフィール写真、イニシャル、またはアイコンを Experience Sites のページに表示する Experience Cloud コンポーネントです。
ポータルユーザーのプロフィール、アカウント担当者、連絡先リスト、またはエンティティ識別子を、統一されたビジュアルスタイルで表示するために使用します。コンポーネントは、画像がある場合は自動的にそれを表示し、ない場合はイニシャルまたはアイコンにフォールバックします。
ユーザープロフィールのヘッダー、コミュニティメンバーのリスト、連絡先ディレクトリ、またはポータルユーザーが人物やエンティティを視覚的に識別する必要があるあらゆる場所に最適です。
***
## アバターのカスタマイズ
Avonni Avatar コンポーネントは、Salesforce Experience Cloud サイト内でユーザーやエンティティを視覚的に一貫して表現するのに役立ちます。ニーズに合わせてアバターをパーソナライズするためのステップバイステップガイドはこちらです:
### **イニシャルの表示**
Avatar コンポーネントは、イニシャルの表示方法に柔軟性を提供します:
#### **手動入力**
表示したいイニシャルがわかっている場合は、「イニシャル」フィールドに直接入力します。
#### **動的生成（式）**
Avonni コンポーネントを動的にするには、 [Experience Cloud 式](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#expressions)を使用できます。例えば、以下の Avatar コンポーネントでは、次の式を使用して現在ログインしているユーザーの名前を自動的に表示できます:
```
{!User.Record.Name}
```
置き換えることができます `名前` を、Salesforce 組織でユーザー名を保存している実際のフィールド名に。
フルネームから自動的にイニシャルを生成したい場合は、「イニシャルの自動整形」オプションを有効にします。これにより、Experience Cloud の式を使用して名前中の各単語の最初の文字を抽出して整形します。
現在のユーザー名からイニシャルを動的に表示する
### **カスタム画像**
プロフィール写真、ロゴ、または任意の画像を追加して、アバターを一目で認識できるようにします。次を使用して画像をアップロードし、 **選択したコンテンツ** オプションで、コンポーネントが自動的にトリミングと整形を行い、アバターの形状に収まるようにします。
画像が追加されていない場合、アバターは代わりにイニシャルを表示します
### **バリアント（形状）**
次のいずれかを選択します: **円形** または **正方形** を、 **バリアント** フィールドで選択してポータルのデザインに合わせます。円形アバターは人物に適しており、正方形はロゴやエンティティのアイコンに向いています
### **サイズ**
ページ上でのアバターの表示サイズを、 **サイズ** プロパティで制御します。オプションは **特小** から **特特大**まであり、周囲のコンテンツとのバランスを取ることができます—インラインリストには小さめ、プロフィールヘッダーには大きめが適しています。
### **一次テキストと二次テキスト**
テキストフィールドを追加して、アバターの横に追加コンテキストを表示します。 **一次テキスト** には最も重要な情報（フルネームなど）を、 **二次テキスト** には補足情報（役職やメールなど）を使用します。
また、各テキストレベルのフォントスタイルを設定して、一次情報と二次情報の間に視覚的な階層を作ることができます。
### **タグ**
アバターに関する情報を分類・強調するための視覚ラベルを追加します。タグは小さなバッジとして表示され、 **タグのバリアント** オプションで異なる色にスタイル設定できます。ステータス、部署、役割、その他の簡易識別子の表示に便利です。
***
## **使用例**
**ユーザープロフィール** – カスタム画像と、ユーザー名の一次テキスト、役職や部署の二次テキストを組み合わせて、完全なプロフィールヘッダーを作成します。これにより、ポータルユーザーはプロフィールページで明確でプロフェッショナルな表示を得られます。
**コミュニティフォーラム** – 投稿やコメントの横にアバターを表示して、コミュニティメンバーが誰が貢献しているかをすばやく識別できるようにします。これにより、エンゲージメントを促し、会話を追いやすくする個人的な要素が加わります。
**チームページ** – 名前、役割、部署や専門分野のタグを含むアバターでチームメンバーを紹介します。これにより、ポータルユーザーは適切な連絡先を見つけ、チーム構成をひと目で理解できます。
***
## 仕様
{% tabs %}
{% tab title="プロパティ" %}
| 名前 | 説明 |
| ---------------- | ------------------------------------------------------------------ |
| **イニシャル** | アバター内に表示する特定のイニシャルを入力します。ユーザーまたはエンティティを表す文字を手動で定義できます |
| **イニシャルの自動整形** | この機能は、提供されたフルネームに基づいてイニシャルを自動生成・表示し、手動入力なしで一貫した表現を保証します |
| **フォールバックアイコン名** | 主データ（画像やイニシャルなど）がない場合にアバターに表示するバックアップのアイコンを決定し、視覚的な継続性を確保します |
| **サイズ** | さまざまな UI コンテキストに収まるようにアバターの全体寸法を調整します |
| **バリアント** | 円形（`円形`）または正方形（`正方形`）の形状を選択して、デザインの好みに合わせてアバターを整えます |
| **アバターの詳細を非表示** | アバターに関連する追加の詳細（テキストやタグなど）を表示・非表示に切り替えます |
| **一次テキスト** | アバターの横に表示されるメインテキストで、名前や主な識別子に使われます |
| **一次テキストのスタイル** | 一次テキストのフォントスタイルを指定します（見出し1〜4、段落1〜2などから選択） |
| **二次テキスト** | 一次テキストの下に表示される追加テキストで、補足情報や小見出しに適しています |
| **二次テキストのスタイル** | 二次テキストのフォントスタイルを定義します（見出し1〜4から段落1〜2までの選択肢） |
| **三次テキスト** | 三段階目のテキストで、通常はアバターに関連する追加の詳細や属性に使用されます |
| **三次テキストのスタイル** | 三次テキストのフォントスタイルを選択します（見出し1〜4、段落1〜2 など） |
| **テキストの配置** | 同伴するテキストをアバターに対してどのように配置・整列するかを指定し、より良いビジュアルレイアウトを実現します |
| **タグ** | アバターに関連付けられた任意のバッジタグのプロパティを設定し、アバターにカテゴリーマーカーやインジケーターを追加する手段を提供します |
| {% endtab %} | |
{% tab title="外観" %}
| 属性 | プロパティ名 | 説明 | 取り得る値 |
| ------------- | ----------------- | --------------------------------- | ---------------------------------- |
| **一次テキスト** | 一次テキストの色 | アバター内のメインテキストの色を設定します | 標準の色値、カラーのユーティリティクラス |
| **一次テキスト** | 一次テキストのフォントサイズ | 一次テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **一次テキスト** | 一次テキストのフォントスタイル | フォントスタイルを制御します（例: italic、oblique） | 標準的なフォントスタイルの選択肢 |
| **一次テキスト** | 一次テキストのフォントウェイト | 一次テキストの太さを定義します | フォントウェイトの値（例: normal、bold） |
| **二次テキスト** | 二次テキストの色 | 補足テキストの色を設定します | 標準の色値、カラーのユーティリティクラス |
| **二次テキスト** | 二次テキストのフォントサイズ | 二次テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **二次テキスト** | 二次テキストのフォントスタイル | フォントスタイルを制御します（例: italic、oblique） | 標準的なフォントスタイルの選択肢 |
| **二次テキスト** | 二次テキストのフォントウェイト | 二次テキストの太さを定義します | フォントウェイトの値（例: normal、bold） |
| **三次テキスト** | 三次テキストの色 | 三段階目のテキストの色を設定します | 標準の色値、カラーのユーティリティクラス |
| **三次テキスト** | 三次テキストのフォントサイズ | 三次テキストのサイズを変更します | フォントサイズの値（例: 12px、1rem） |
| **三次テキスト** | 三次テキストのフォントスタイル | フォントスタイルを制御します（例: italic、oblique） | 標準的なフォントスタイルの選択肢 |
| **三次テキスト** | 三次テキストのフォントウェイト | 三次テキストの太さを定義します | フォントウェイトの値（例: normal、bold） |
| **アイコン** | アイコンの背景色 | アイコン領域の背景色を設定します | 標準の色値、カラーのユーティリティクラス |
| **アイコン** | アイコンの前景色 | アイコン画像またはイニシャルの色を設定します | 標準の色値、カラーのユーティリティクラス |
| **アイコン** | アイコン前景色ユーティリティ | アイコンにあらかじめ定義された配色を適用します | 特定のユーティリティクラス名 |
| **アイコン** | アイコン画像のオブジェクトフィット | アイコン画像をスペース内でどのようにフィットさせるかを制御します | fill、contain、cover、none、scale-down |
| **ボーダー** | ボーダーサイズ | アバターのボーダーの太さを指定します | ピクセル値（例: 1px、2px） |
| **ボーダー** | ボーダーの角丸 | アバターの角の丸みを制御します | ピクセル値、%（例: 円形には 50%） |
| **ボーダー** | ボーダーの色 | アバターのボーダーの色を設定します | 標準の色値、カラーのユーティリティクラス |
| **ボーダー** | ボーダースタイル | ボーダーの見た目を定義します（例: solid、dashed） | 標準的な CSS のボーダースタイル |
| **イニシャル** | イニシャルの色 | 表示されるイニシャルの文字色を設定します | 標準の色値、カラーのユーティリティクラス |
| **イニシャル** | イニシャルのホバー時の色 | アバターにホバーした際のイニシャルの色 | 標準の色値、カラーのユーティリティクラス |
| **イニシャル** | イニシャルのフォントウェイト | イニシャルの文字の太さを制御します | フォントウェイトの値（例: normal、bold） |
| **イニシャル** | エンティティカラー | イニシャルが生成される場合の背景色 | 標準の色値、カラーのユーティリティクラス |
| **イニシャル** | エンティティのフォントウェイト | エンティティから生成されたイニシャルのフォントウェイト | フォントウェイトの値（例: normal、bold） |
| {% endtab %} | | | |
| {% endtabs %} | | | |