# AX - プロフィールカード

## 概要

**AX - プロフィールカード** Experience Sites ページ上で、プロフィール写真、名前、詳細、任意の背景画像を含むスタイル付きカード形式でユーザーまたは連絡先情報を表示する Experience Cloud コンポーネントです。

チームメンバー、顧客の連絡先、パートナー担当者、コミュニティ貢献者などを、統一されたビジュアル形式で紹介するために使用します。Experience Builder で、表示するフィールドの設定、プロフィール画像の追加、スタイルのカスタマイズ、アクションボタンの追加ができます。

チームディレクトリ、連絡先リスト、コミュニティメンバープロフィール、「担当者の紹介」セクション、またはポータルでプロフェッショナルなプロフィール表示が必要なあらゆる場面に最適です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbR9Mq0YdqjtlwMO6JdY6%2F2023-11-07_16-05-19.png?alt=media&#x26;token=c95863f1-cc0f-4a60-b93f-58af779f2823" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
このコンポーネントは [スロットを活用し](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#understanding-slots) 高度なカスタマイズを実現しており、LWR サイトに最適です。Aura サイトではこのレベルのカスタマイズはサポートされていません。
{% endhint %}

***

## はじめに

この簡単なチュートリアルを使って、プロフィールカードコンポーネントの基本を学び、ユースケースの構築を始めましょう。

{% @arcade/embed flowId="5SMa268wZsjsteVlpI8B" url="<https://app.arcade.software/share/5SMa268wZsjsteVlpI8B>" %}

***

## チュートリアル

| 名前                                                                                                                                                                              | 説明                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| [**プロフィールカードを現在のユーザー情報を表示するように設定する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/konpnento/purofrukdo/noyzwosuruyounipurofrukdowoshimasu) | Avonni Card を設定して Experience Cloud にユーザー情報を表示し、パーソナライズを強化します。 |

***

## スロット

Avonni プロフィールカードコンポーネントは、スロットを通じて幅広い情報を柔軟かつ動的に表示できます。これらのスロットはコンポーネント内の指定領域であり、そこに他のコンポーネントを挿入できるため、広範なカスタマイズと機能拡張が可能です。

#### スロットの種類

1. **コンテンツスロット:**
   * 詳細情報を表示するための主要領域です。
   * テキスト、リスト、画像、カスタムコンポーネントなど、さまざまな要素を追加するのに最適です。
   * 包括的なデータや対話型要素を表示するために使用できます。
2. **ヘッダースロット:**
   * タイトル、見出し、または導入コンテンツ用に用意されています。
   * テキストラベル、アバター、アイコン、または文脈を提供するあらゆるコンポーネントに適しています。
   * プロフィールカードの目的をすぐに理解しやすくします。
3. **アクションスロット:**
   * ボタンやハイパーリンクなどの対話型要素用に予約されています。
   * ユーザー操作を促進し、プロフィール編集やナビゲーションなどのアクションを提供します。
   * カードの対話性とユーザーエンゲージメントを高めます。

***

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前                          | 説明                                                                  | 使用方法                                                 |
| --------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------- |
| **タイトルとタイトルのテキストスタイル**      | H1、H2、H3、H4、P1、P2 など、さまざまなテキストスタイルから選んで、タイトルとその見た目を定義します。           | これを利用して、注目を集める目立つスタイリッシュな見出しをプロフィールカードに付けます。         |
| **サブタイトルとサブタイトルのテキストスタイル**  | サブタイトルを追加し、その見た目をカスタマイズして、スタイル選択による追加の文脈情報を提供できます。                  | 役職や部署などの追加情報を提供するためにサブタイトルを使うと、プロフィールカードの情報量が増します。   |
| **CMS 背景または背景 URL**         | CMS から画像を選ぶか URL を指定して背景をカスタマイズし、視覚的に豊かな背景を作成できます。                  | 適切に選ばれた背景画像は、プロフィールに奥行きと文脈を加え、視覚的な魅力を高めます。           |
| **CMS アバター画像またはアバター画像 URL** | CMS から画像を選ぶか URL を使用してアバターを定義し、プロフィール表現に個人的な印象を加えます。                | アバターは親しみやすさを加え、プロフィールをより魅力的で身近なものにします。               |
| **アバターのバリアントとサイズ**          | アバターの形状とサイズをカスタマイズし、円形や四角形などのバリアント、x-small から x-large までのサイズから選べます。 | プロフィールカード全体のデザイン美に合わせてアバターの見た目を調整し、視覚的な一貫性と魅力を確保します。 |
| **アバターの位置**                 | 左上、上中央、右下など、アバターをカード上の任意の位置に配置します。                                  | プロフィールカード内でバランスの取れた調和のあるレイアウトになるよう、アバターの位置を調整します。    |

{% endtab %}

{% tab title="🎨 スタイリング" %}

| 名前              | 説明                                                                   | 使用方法                                                       |
| --------------- | -------------------------------------------------------------------- | ---------------------------------------------------------- |
| **ヘッダーのスタイル属性** | 背景色、文字色、フォントサイズ、スタイル、太さ、さらには枠線のカスタマイズまで、幅広いオプションでヘッダーを詳細にスタイリングできます。 | ヘッダーの見た目を微調整して、視覚的に印象的で読みやすいプロフィールカードのヘッダーを作成します。          |
| **背景色と枠線**      | カード全体の背景色をカスタマイズし、サイズ、角丸、色などの枠線プロパティを定義します。                          | これらの機能により、プロフィールカードの見た目にさらなる視覚的な差別化と洗練を加え、デザインの好みに合わせられます。 |

{% endtab %}
{% endtabs %}

***

## ユースケース例

### 例 1: アカウント強調パネル（コンテナ）

{% @arcade/embed flowId="SM5nEWQrD61sIelW6FK0" url="<https://app.arcade.software/share/SM5nEWQrD61sIelW6FK0>" %}

主要なアカウント詳細、ブランディング、アクションを前面に押し出した、洗練された情報豊富なアカウントプロフィールカードで、パートナー向けエクスペリエンスサイトを変革しましょう。

***

#### **実現できること**

* **ブランド化されたヘッダー:** 会社ロゴとともにアカウント名と業種を表示し、ひと目で認識できるようにします
* **文脈に応じたアクション:** カードから直接、ワンクリックで「新しい商談」フローを起動します
* **コンパクトなレコード詳細:** ページを圧迫することなく、最も関連性の高いアカウント項目を表示します

***

#### **始める前に**

* **カスタムロゴ項目:** 会社ロゴの URL を保存するための Account オブジェクト上のカスタム項目です
* **画面フロー:** 起動可能な準備が整った「新しい商談」画面フロー
* **ボタンコンポーネント:** コンポーネントライブラリで利用可能
* **レコード詳細コンポーネント:** コンポーネントライブラリで利用可能

***

#### **セットアップ方法**

{% stepper %}
{% step %}

#### **プロフィールカードをページに追加します**

* AX – Profile Card コンポーネントを Experience のアカウントレコードページにドラッグします
  {% endstep %}

{% step %}

#### **カードヘッダーを設定します**

* ヘッダーを次に設定 `{!Item.Name}`
* スタイルを次に設定 `見出し 2`
* サブタイトルを次に設定 `{!Item.Industry}`
  {% endstep %}

{% step %}

#### **会社ロゴを追加します**

* アバター画像 URL を次に設定 `{!Item.LogoURL__c}`
* バリアントを次に設定 `円`
* サイズを次に設定 `中`
  {% endstep %}

{% step %}

#### **カスタムアクションボタンを追加します**

* ボタンコンポーネントをアクションスロットにドラッグします
  {% endstep %}

{% step %}

#### **コンパクトなレコードレイアウトを追加します**

* レコード詳細コンポーネントをコンテンツスロットにドラッグします
  {% endstep %}

{% step %}

#### **ページをプレビューする**

* プレビュー モードでカードを確認し、レイアウト、ロゴ、アクションボタンが期待どおりに表示されることを確かめます
  {% endstep %}
  {% endstepper %}

***

#### **リンク**

{% content-ref url="ax-rekdo" %}
[ax-rekdo](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-rekdo)
{% endcontent-ref %}

{% content-ref url="ax-botan" %}
[ax-botan](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-botan)
{% endcontent-ref %}

***

### 例 2: 現在のユーザープロフィール情報

{% @arcade/embed flowId="BS4DEpYpnaHdh1ted1hR" url="<https://app.arcade.software/share/BS4DEpYpnaHdh1ted1hR>" %}

ユーザーがエクスペリエンスサイトにアクセスした瞬間から、温かくパーソナライズされた歓迎を提供し、最初の訪問からつながりを築いてプラットフォームの定着を促します。

***

#### **実現できること**

* **パーソナライズされたあいさつ:** 人間味のある、ありきたりではない動的なウェルカムメッセージで、各ユーザーを名前で呼びかけます
* **役割の文脈:** 名前の下にユーザーの役職を表示し、チームメイトや顧客が相手をすぐに理解できるようにします
* **プロフィール写真:** ユーザーのプロフィール写真を自動的に取得して、洗練された親しみやすい印象にします

***

#### **セットアップ方法**

{% stepper %}
{% step %}

### **プロフィールカードをページに追加します**

* AX – Profile Card コンポーネントを Experience サイトのページにドラッグします
  {% endstep %}

{% step %}

### **カードヘッダーを設定します**

* ヘッダーを次に設定 `ようこそ、{!User.Record.Name}`
* スタイルを次に設定 `見出し 2`
* サブタイトルを次に設定 `{!User.Record.Title}`
  {% endstep %}

{% step %}

### **プロフィール画像を設定します**

* アバター画像 URL を次に設定 `{!User.Record.SmallPhotoUrl}`
* アバターの位置を次に設定 `上中央`
  {% endstep %}

{% step %}

### **ページをプレビューする**

{% endstep %}
{% endstepper %}

***

**リンク**

{% content-ref url="ax-abat" %}
[ax-abat](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-abat)
{% endcontent-ref %}

{% content-ref url="ax-akdionsekushon" %}
[ax-akdionsekushon](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-akdionsekushon)
{% endcontent-ref %}