> 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-profile-card.md).
# AX - プロフィールカード
## 概要
**AX - プロフィールカード** は、Experience Sites ページ上で、プロフィール画像、名前、詳細、必要に応じて背景画像を含むスタイル付きカード形式でユーザーまたは連絡先情報を表示する Experience Cloud コンポーネントです。
チームメンバー、顧客の連絡先、パートナー担当者、またはコミュニティ貢献者を、一貫したビジュアル形式で紹介するために使用します。Experience Builder で、表示するフィールドを設定し、プロフィール画像を追加し、スタイルをカスタマイズし、アクションボタンを含めます。
チームディレクトリ、連絡先リスト、コミュニティメンバープロフィール、「担当者を紹介」セクションなど、ポータルにプロフェッショナルなプロフィール表示が必要なあらゆる場面に最適です。
{% hint style="danger" %}
このコンポーネントは [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズが可能で、LWR サイトに最適です。Aura サイトでは、このレベルのカスタマイズはサポートされていません。
{% endhint %}
***
## はじめに
この簡単なチュートリアルを使って、Profile Card コンポーネントの基本を学び、ユースケースの作成を始めましょう。
{% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %}
***
## チュートリアル
| 名前 | 説明 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
| [**Profile Card を設定して現在のユーザー情報を表示する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Experience Cloud 上にユーザー情報を表示する Avonni Card を設定して、パーソナライズを強化します。 |
***
## スロット
Avonni Profile Card コンポーネントは、スロットを通じて幅広い情報を柔軟かつ動的に表示できます。これらのスロットは、コンポーネント内に他のコンポーネントを挿入できる指定領域であり、広範なカスタマイズと機能を可能にします。
#### スロットの種類
1. **コンテンツスロット:**
* 詳細情報のための主要エリアです。
* テキスト、リスト、画像、カスタムコンポーネントなど、さまざまな要素を追加するのに最適です。
* 包括的なデータやインタラクティブな要素を表示できます。
2. **ヘッダースロット:**
* タイトル、見出し、導入コンテンツ専用です。
* テキストラベル、アバター、アイコン、または文脈を提供する任意のコンポーネントに適しています。
* Profile Card の目的をすぐに理解しやすくします。
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 url="" flowId="SM5nEWQrD61sIelW6FK0" %}
主要なアカウント詳細、ブランディング、アクションを前面に押し出した、洗練された情報豊富なアカウントプロフィールカードで、パートナー向けエクスペリエンスサイトを変革しましょう。
***
#### **達成できること**
* **ブランドヘッダー:** 会社ロゴとともにアカウント名と業界を表示し、すぐに視覚認識できるようにします
* **コンテキストに応じたアクション:** カードからワンクリックで新しい商談フローを直接起動します
* **簡潔なレコード詳細:** ページを圧迫することなく、最も関連性の高いアカウント項目を表示します
***
#### **始める前に**
* **カスタムロゴフィールド:** 会社ロゴの URL を保存するための Account オブジェクト上のカスタムフィールド
* **画面フロー:** 起動準備が整った新規商談の画面フロー
* **ボタンコンポーネント:** コンポーネントライブラリで利用可能
* **レコード詳細コンポーネント:** コンポーネントライブラリで利用可能
***
#### **設定方法**
{% stepper %}
{% step %}
#### **プロフィールカードをページに追加する**
* AX - プロフィールカード コンポーネントを 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="/pages/dc821f53af680f5554da87764b9ae7bc1cda96ed" %}
[AX - レコード詳細](/experience-cloud/experience-cloud-ja/experience-components/ax-record-detail.md)
{% endcontent-ref %}
{% content-ref url="/pages/4a0af31aedd0a6bb02a2ffd273f4dbf1f1526a12" %}
[AX - Button](/experience-cloud/experience-cloud-ja/experience-components/ax-button.md)
{% endcontent-ref %}
***
### 例2: 現在のユーザーのプロフィール情報
{% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %}
ユーザーがエクスペリエンスサイトに到着した瞬間から、温かくパーソナライズされた歓迎を届け、最初の訪問からつながりを築き、プラットフォームの利用を促進します。
***
#### **達成できること**
* **パーソナライズされた挨拶:** 人間味のある、一般的すぎない動的なウェルカムメッセージで、各ユーザーを名前で呼びかけます
* **役割の文脈:** ユーザーの名前の下に役職を表示し、同僚や顧客が相手をすぐに理解できるようにします
* **プロフィール写真:** ユーザーのプロフィール画像を自動で取得し、洗練された親しみやすい印象にします
***
#### **設定方法**
{% stepper %}
{% step %}
### **プロフィールカードをページに追加する**
* AX - プロフィールカード コンポーネントを Experience サイトのページにドラッグします
{% endstep %}
{% step %}
### **カードヘッダーを設定する**
* ヘッダーを次に設定 `ようこそ、{!User.Record.Name}`
* スタイルを次に設定 `見出し 2`
* サブタイトルを次に設定 `{!User.Record.Title}`
{% endstep %}
{% step %}
### **プロフィール画像を設定する**
* アバター画像 URL を次に設定 `{!User.Record.SmallPhotoUrl}`
* アバターの位置を次に設定 `中央上`
{% endstep %}
{% step %}
### **ページをプレビューする**
{% endstep %}
{% endstepper %}
***
**リンク**
{% content-ref url="/pages/bd2e4b9c031e7b86399990ee2e040f29b741b0a7" %}
[AX - アバター](/experience-cloud/experience-cloud-ja/experience-components/ax-avatar.md)
{% endcontent-ref %}
{% content-ref url="/pages/4cbc651fe440a06eaef3c09d45c82faba3186692" %}
[AX - アコーディオン セクション](/experience-cloud/experience-cloud-ja/experience-components/ax-accordion-section.md)
{% endcontent-ref %}
---
# 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-profile-card.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.