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