> 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" インジケーターを表示します。
チームの名簿、コラボレーショングループ、ケースの割り当て表示、または顧客ポータルやパートナーポータルで共有レコードへのアクセス権を持つ人を示すのに最適です。
## 設定
### データソース
Avatar Group に適切な人を表示させるために、情報の取得先を指定します。ここで **データソース** が登場します。これは、アバターを Salesforce データの中心につなげるようなものだと考えてください。
#### **手動**
このオプションは、小規模なチームや、特定のイベントやプロジェクトに対してのみアバターを表示したい場合に最適です。
1. **各ユーザーを追加:** 含めたい各個人について、Avatar Group の設定に詳細を直接入力します。
2. **主要情報を入力:** これには次が含まれます:
* **アバター画像:** 写真がある場合は、ここでアップロードできます。
* **イニシャル:** 画像がない場合に表示されます。
* **その他の詳細:** その人の役職や部署など、追加情報を含めることができます。
手動オプションはより手間がかかりますが、Avatar Group に誰を表示するかを完全に制御できます。
#### **クエリ**
チームの変更が頻繁な場合や、アバターを常に Salesforce 組織内の最新情報と一致させたい場合には、このオプションが最適です。
仕組みは次のとおりです:
1. **オブジェクトを選択:** アバター情報が保存されている Salesforce オブジェクト（User、Contact、またはカスタムオブジェクトなど）を選択します。
2. **データをマッピング:** Avatar Group の属性（Name、Title、Profile Picture など）と、選択したオブジェクト内の対応する項目を結び付けます。これにより、Avatar Group は各人物の正しい詳細がどこにあるかを正確に把握できます。
クエリオプションを使用すると、Avatar Group は Salesforce データの動的な反映となり、常に最も正確で最新の情報を表示します。
### バリアント
* **正方形:** アバターは正方形で表示され、クラシックで洗練された見た目になります。
* **円形:** アバターは、よりモダンで親しみやすい円形で表示されます。
* **空:** 画像が利用できない場合、イニシャルまたはプレースホルダーアイコンが空の円形または正方形の中に表示されます。画像データがない場合でも見た目の一貫性を保ちたい場合に、このオプションを選択してください。
### サイズ
* 各アバターのサイズを制御します。サイトのレイアウトや用途に合わせて、x-small、small、medium、large、x-large、xx-large から選択できます。
### レイアウト
* **スタック:** アバターは縦に積み重ねて表示されます。狭いスペースやサイドバーに最適です。
* **グリッド:** アバターはグリッドレイアウトで配置されます。ユーザーやチームの大人数を見せるのに最適です。
* **リスト:** アバターは横一列に表示されます。スペースが限られていても複数のアバターを見せたい場合に便利です。
### 最大件数
* グループ内に表示するアバターの数を制限します。これにより、レイアウトをすっきり保ち、表示要素が多すぎてユーザーを圧倒しないようにできます。
### イニシャルの自動整形（トグル）
* 画像が利用できないときに、ユーザーやチームのイニシャルを自動で表示するには、このオプションを有効にします。画像データがない場合でも一貫した視覚表現を提供できます。
### アイコンの位置
* **アイコンの位置** グループ内のアバターの配置を整えます — `開始`, `中央`、または `終了`.
## インタラクション
### リンク先（アバターをインタラクティブにする）
このセクションは、アバターにスーパーパワーを与えるものだと考えてください。クリックするとユーザーを別の場所へ移動させます！
#### なぜこれが便利なのですか？
* **ユーザープロフィール:** 専門家チームを表示している場面を想像してください。アクションへのリンクを設定すると、アバターをクリックした際にその人の詳細プロフィールページを開けます。
* **カスタムアクション:** クリックで特定の Flow を起動したり、外部サイトへリダイレクトしたりしたい場合があります。
#### 仕組み
1. **種類を選択:** クリックでユーザーをどこへ移動させるかを選択します。レコードページ、カスタムページ、Flow、外部 URL などが対象です。
2. **アクション名をカスタマイズ:** ナビゲーション相互作用を使用する場合は、呼び出すアクション名を選択します。
Link To 機能を使うことで、Avatar Group は単なる顔写真の表示以上のものになり、追加情報やアクションへの入り口になります。
## ユースケース
これらの設定オプションにより、Avonni Avatar Group コンポーネントを用途に合わせて調整できます。たとえば、プロジェクトページでチームメンバーを紹介したり、取引先ページに顧客のアバターを表示したり、コミュニティメンバーの視覚的に魅力的な一覧を作成したりできます。
Avonni Avatar Group コンポーネントは非常に柔軟です。スタイル設定で見た目をさらにカスタマイズしたり、インタラクティブな要素を追加してアバターをクリック可能にしたり、ユーザープロフィールにリンクさせたりできます。
Avonni Avatar Group コンポーネントを活用することで、Experience Cloud サイトのユーザーに、よりパーソナライズされ、情報量の多い体験を提供できます。つながりを促進し、オンラインコミュニティの中の人間的な要素を際立たせます。
## スタイリング
グループの外観を **［スタイル］** プロパティエディタのセクションからカスタマイズします。
{% tabs %}
{% tab title="マージン" %}
グループの外側の余白を制御します（上 / 右 / 下 / 左）。
{% endtab %}
{% tab title="パディング" %}
グループの内側の余白を制御します（上 / 右 / 下 / 左）。
{% endtab %}
{% tab title="サイズ" %}
グループ全体の寸法を制御します。
{% endtab %}
{% tab title="枠線" %}
グループの枠線を制御します（色 / サイズ / スタイル / 半径）。
{% endtab %}
{% tab title="スタック枠線" %}
重なったアバター間の枠線のスタイルを設定します。
* **色 / サイズ / スタイル:** スタック枠線の外観を制御します。
{% endtab %}
{% tab title="もっと見るボタン" %}
"+X" の「もっと見る」ボタンのスタイルを設定します。
* **背景 / テキスト / 枠線の色:** 通常時、アクティブ時、ホバー時の色を設定します。
* **枠線サイズ / 枠線半径:** ボタンの枠線を調整します。
* **ブロック開始 / ブロック終了 / インライン開始 / インライン終了:** ボタン周辺の余白を設定します。
{% 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-group.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.
