# AX - アバターグループ

## 概要

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

チームメンバー、プロジェクトの貢献者、アカウントの連絡先、または関連するユーザーやレコードのグループを表示するのに使用します。コンポーネントはアバターを水平に積み重ね、表示領域に収まりきらないアバターがある場合は「+X」インジケーターを表示します。

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

***

## **構成オプション**

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

アバターグループが適切な人々を表示するための情報の場所を指定します。ここで **データソース** が登場します。アバターを Salesforce データの中核に接続するようなものだと考えてください。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FAcBRZkX5tTdeHV5x9Sj3%2F2024-07-03_07-00-12.png?alt=media&#x26;token=7d531fb7-f96a-467e-a4db-7a2e14574666" alt=""><figcaption></figcaption></figure>

#### **手動**

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

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

手動オプションは手間がかかりますが、アバターグループに表示する人物を完全にコントロールできます。

#### **クエリ**

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

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

1. **オブジェクトを選択：** アバター情報が格納されている Salesforce のオブジェクト（User、Contact、カスタムオブジェクトなど）を選択します。
2. **データをマッピング：** アバターグループの属性（名前、役職、プロフィール写真など）と選択したオブジェクト内の対応するフィールドを接続します。これにより、アバターグループは各人物の正しい詳細をどこで見つけるかを正確に把握できます。

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

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

* **四角：** アバターは四角形で表示され、クラシックでクリーンな外観になります。
* **円形：** アバターはよりモダンで親しみやすい円形で表示されます。
* **空（プレースホルダー）：** 画像が利用できない場合、イニシャルやプレースホルダーアイコンが空の円または四角の中に表示されます。画像データがない場合でも視覚的一貫性を保つためにこのオプションを選択してください。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fc2MGMHqLVZSEmJYSevHl%2F2024-07-03_06-58-10.png?alt=media&#x26;token=be18a92e-7f21-4f0d-aa5c-eb26f06be465" alt=""><figcaption></figcaption></figure>

### **サイズ**

* 各アバターの寸法を制御します。サイトのレイアウトや文脈に合わせて、x-small、small、medium、large、x-large、xx-large の範囲からサイズを選択できます。

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

* **スタック：** アバターが垂直に積み重ねられ、狭いスペースやサイドバーに最適です。
* **グリッド：** アバターがグリッドレイアウトに配置され、大きなグループやチームを表示するのに適しています。
* **リスト：** アバターが水平方向の行で表示され、スペースが限られているが複数のアバターを表示したい場合に便利です。

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

* グループに表示されるアバターの数を制限します。これにより、クリーンなレイアウトを維持し、視覚的に圧倒するのを防げます。

### **イニシャル自動フォーマット（トグル）**

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

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

このセクションは、アバターにクリック時にユーザーを別の場所に移動させる“スーパーパワー”を与えるようなものです！

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FwfmpTEyR3WNRZYc0uewy%2F2024-07-03_06-53-05.png?alt=media&#x26;token=a52e1cb1-f3c7-4541-8892-aadf30eaaf32" alt=""><figcaption></figcaption></figure>

#### なぜこれが役立つのか？

* **ユーザープロフィール：** 専門家のチームを表示することを想像してみてください。リンク先をアクションに設定すると、アバターをクリックしてその人のフルプロフィールページを開くことができます。
* **カスタムアクション：** クリックで特定の Flow をトリガーしたり、外部サイトにリダイレクトしたりすることもできます。

#### 仕組み

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

リンク先機能を使用すると、アバターグループは単なる顔の表示以上のものになり、追加情報やアクションへのゲートウェイになります。&#x20;

***

## **Avonni アバターグループコンポーネントの使用**

これらの構成オプションにより、Avonni アバターグループコンポーネントをニーズに合わせて調整できます。たとえば、プロジェクトページでチームメンバーを表示したり、アカウントページで顧客のアバターを表示したり、コミュニティメンバーの視覚的に魅力的な一覧を作成したりできます。

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

Avonni アバターグループコンポーネントを活用することで、Experience Cloud サイトのユーザーに対してよりパーソナライズされ情報豊かな体験を作成でき、つながりを促進しオンラインコミュニティ内の人的要素を強調できます。