> 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-group.md).

# AX - アバターグループ

## 概要

**AX - アバターグループ** Experience Sites のページ上で、複数のプロフィール写真、イニシャル、またはアイコンをコンパクトな横並びで表示する Experience Cloud コンポーネントです。

チームメンバー、プロジェクトの参加者、取引先責任者、または関連するユーザーやレコードのグループを表示するために使用します。このコンポーネントはアバターを横方向に重ねて表示し、表示領域に収まりきらないアバターがある場合は「+X」インジケーターを表示します。

チーム名簿、コラボレーショングループ、ケースの割り当て表示、または顧客ポータルやパートナーポータルで共有レコードにアクセスできるユーザーを示すのに最適です。

***

## **設定オプション**

### **データソース**

アバターグループに適切な人物を表示するために、どこから情報を取得するかを指定します。ここで **データソース** が役立ちます。これは、アバターを Salesforce データの中心につなぐようなものだと考えてください。

<figure><img src="/files/07ac806d91d88683304dc453b5a1b38245b6351a" alt=""><figcaption></figcaption></figure>

#### **手動**

このオプションは、小規模なチームや、特定のイベントやプロジェクトのアバターだけを表示したい場合に最適です。

1. **各ユーザーを追加:** 含めたい各ユーザーの詳細を、アバターグループの設定に直接入力します。
2. **主要情報を入力:** これには以下が含まれます:
   * **アバター画像:** 画像がある場合は、ここでアップロードできます。
   * **イニシャル:** 画像がない場合は、これが表示されます。
   * **その他の詳細:** その人の役職や部署などの追加情報を含めることができます。

手動オプションは手間がかかりますが、アバターグループに表示する対象を完全に制御できます。

#### **クエリ**

チームの変更が頻繁な場合や、アバターを常に Salesforce 組織内の最新情報に合わせたい場合は、このオプションが最適です。

仕組みは次のとおりです:

1. **対象オブジェクトを選択:** アバター情報が保存されている Salesforce オブジェクト（User、Contact、またはカスタムオブジェクトなど）を選択します。
2. **データをマッピング:** アバターグループの属性（Name、Title、Profile Picture など）と、選択したオブジェクト内の対応する項目を結び付けます。これにより、アバターグループは各ユーザーの正しい詳細をどこで見つけるべきかを正確に把握できます。

クエリオプションを使用すると、アバターグループは Salesforce データを動的に反映し、常に最も正確で最新の情報を表示します。

### **バリアント**

* **正方形:** アバターは正方形で表示され、クラシックでクリーンな見た目になります。
* **円形:** アバターは、よりモダンで親しみやすい円形で表示されます。
* **空:** 画像がない場合は、イニシャルまたはプレースホルダーアイコンが空の円形または正方形の中に表示されます。画像データがない場合でも見た目の一貫性を保ちたいときにこのオプションを選択してください。

<figure><img src="/files/901a50363c37b11ab3293ba90c7f0f3be0cbae55" alt=""><figcaption></figcaption></figure>

### **サイズ**

* 各アバターのサイズを制御します。サイトのレイアウトやコンテキストに合わせて、さまざまなサイズから選択できます。オプションには、x-small、small、medium、large、x-large、xx-large があります。

### **レイアウト**

* **スタック:** アバターは縦に積み重ねて表示され、狭いスペースやサイドバーに最適です。
* **グリッド:** アバターはグリッドレイアウトで配置され、多数のユーザーやチームを見せるのに最適です。
* **リスト:** アバターは横一列に表示され、スペースが限られているが複数のアバターを見せたい場合に便利です。

### **最大表示数**

* グループ内に表示するアバター数を制限します。これにより、レイアウトをすっきり保ち、視覚要素が多すぎてユーザーを圧倒するのを防げます。

### **イニシャルの自動書式設定（トグル）**

* このオプションを有効にすると、画像が利用できない場合にユーザーやチームのイニシャルを自動的に表示します。画像データがない場合でも、一貫した視覚表現を提供できます。

### リンク先（アバターをインタラクティブにする）

このセクションは、アバターにスーパーパワーを与えるものだと考えてください。クリックすると、ユーザーをどこか新しい場所へ連れていきます！

<figure><img src="/files/a6d7d53abecefd0153359a58dd502f4b1948a3a5" alt=""><figcaption></figcaption></figure>

#### なぜこれが便利なのですか？

* **ユーザープロフィール:** 専門家チームを表示する場面を想像してください。アクションへのリンクを設定しておけば、アバターをクリックすることでその人の詳細プロフィールページを開けます。
* **カスタムアクション:** クリックで特定の Flow を起動したり、外部サイトへリダイレクトしたりしたい場合もあるでしょう。

#### 仕組み

1. **タイプを選択:** クリック時にユーザーをどこへ移動させるかを選択します。レコードページ、カスタムページ、Flow、または外部 URL に設定できます。
2. **アクション名をカスタマイズ:** ナビゲーションのインタラクションを使用する場合は、呼び出すアクション名を選択します。

Link To 機能を使うことで、アバターグループは単なる顔の表示以上のものになります。追加情報やアクションへの入り口になるのです。

***

## **Avonni Avatar Group コンポーネントの使用**

これらの設定オプションを使うと、ニーズに合わせて Avonni Avatar Group コンポーネントを調整できます。たとえば、プロジェクトページでチームメンバーを紹介したり、アカウントページで顧客のアバターを表示したり、コミュニティメンバーの見栄えのよい一覧を作成したりできます。

Avonni Avatar Group コンポーネントは非常に柔軟であることを覚えておいてください。スタイリングで外観をさらにカスタマイズしたり、アバターをクリック可能にしたりユーザープロフィールにリンクしたりするインタラクティブ要素を追加することもできます。

Avonni Avatar Group コンポーネントを活用することで、Experience Cloud サイトのユーザーに、よりパーソナライズされた情報豊かな体験を提供し、つながりを育み、オンラインコミュニティの中にある人間らしさを際立たせることができます。


---

# 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-group.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.