> 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" %}
## 設定
### スロット
Avonni Profile Card コンポーネントは、スロットを通じて幅広い情報を柔軟かつ動的に表示できます。これらのスロットは、コンポーネント内の他のコンポーネントを挿入できる指定領域であり、広範なカスタマイズと機能拡張を可能にします。
#### スロットの種類
1. **コンテンツ スロット:**
* 詳細情報の主要エリアです。
* テキスト、リスト、画像、カスタムコンポーネントなど、さまざまな要素を追加するのに最適です。
* 包括的なデータやインタラクティブ要素を表示するために使用できます。
2. **ヘッダー スロット:**
* タイトル、見出し、導入コンテンツ用です。
* テキストラベル、アバター、アイコン、または文脈を提供する任意のコンポーネントに適しています。
* Profile Card の目的を即座に理解しやすくします。
3. **アクション スロット:**
* ボタンやハイパーリンクなどのインタラクティブ要素用に確保されています。
* プロフィール編集やナビゲーションなどのアクションを提供し、ユーザー操作を促進します。
* カードのインタラクティビティとユーザー エンゲージメントを高めます。
### プロパティ
**タイトル** と **サブタイトル** カードの見出しと補足行を設定します — 役職や部署などの追加コンテキストにはサブタイトルを使用します。テキストスタイル（H1～H4、P1～P2）は Style タブで設定します。
**CMS 背景** と **背景ソース** カードの背景画像を設定します — CMS から画像を選択するか、深みと文脈を加える視覚的に豊かな背景として URL を指定します。
**フッターを表示** カードにフッター領域を表示し、また **コンテンツの内側余白** コンテンツ周囲の余白を削除し、カードの端にぴったり配置します。
**CMS アバター画像** と **アバター画像の URL または式** アバター画像を指定し、 **フォールバック用アバターアイコン名** 画像がない場合に表示するアイコンを設定します。
**アバターのバリアント** アバターの形状（`円形` または `正方形`）と **アバターのサイズ** サイズ（x-small ～ x-large）を設定します。
**アバターの位置** カード上のアバターの配置位置（左上、中央上、右下など）を指定し、 **小 / 中 / 大コンテナでのアバターの位置** ブレークポイントごとに位置を上書きします。
## スタイリング
{% tabs %}
{% tab title="ヘッダー" %}
| 名称 | 説明 | 使用例 |
| -------------- | ------------------------------------------------------------- | --------------------------------------------------- |
| **ヘッダースタイル属性** | 背景色、文字色、フォントサイズ、スタイル、ウェイト、さらには枠線のカスタマイズまで、ヘッダーを幅広くスタイル設定できます。 | ヘッダーの見た目を細かく調整して、視覚的に印象的で読みやすいプロフィールカードのヘッダーを作成します。 |
| {% endtab %} | | |
{% tab title="背景と枠線" %}
| 名称 | 説明 | 使用例 |
| ------------- | ------------------------------------------- | -------------------------------------------------------- |
| **背景色と枠線** | カード全体の背景色をカスタマイズし、サイズ、角丸、色などの枠線プロパティを設定します。 | これらの機能により、プロフィールカードの見た目をさらに差別化し洗練させ、デザインの好みに合わせることができます。 |
| {% endtab %} | | |
| {% endtabs %} | | |
## ユースケース
| 名称 | 説明 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| [**現在のユーザー情報を表示するようプロフィールカードを設定する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Experience Cloud 上でユーザー情報を表示する Avonni カードを設定し、パーソナライズを強化します。 |
### 例 1: アカウント ハイライト パネル（コンテナ）
{% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %}
主要なアカウント詳細、ブランド要素、アクションを前面に押し出した、洗練された情報豊富なアカウントプロフィールカードで、パートナー向けエクスペリエンスサイトを変革します。
***
#### **達成できること**
* **ブランド付きヘッダー:** 会社ロゴとともにアカウント名と業界を表示し、一目で認識できるようにします
* **コンテキストに応じたアクション:** カードからワンクリックで新規商談フローを直接起動します
* **コンパクトなレコード詳細:** ページを煩雑にせず、最も関連性の高いアカウント項目を表示します
***
#### **始める前に**
* **カスタムロゴ項目:** 会社ロゴの URL を保存する Account オブジェクト上のカスタム項目
* **スクリーンフロー:** 起動できる新規商談のスクリーンフロー
* **Button コンポーネント:** コンポーネントライブラリで利用可能
* **Record Detail コンポーネント:** コンポーネントライブラリで利用可能
***
#### **設定方法**
{% stepper %}
{% step %}
#### **プロフィールカードをページに追加する**
* AX – Profile Card コンポーネントを Experience Account レコードページにドラッグします
{% endstep %}
{% step %}
#### **カードのヘッダーを設定する**
* Header を次に設定: `{!Item.Name}`
* Style を次に設定: `見出し 2`
* Subtitle を次に設定: `{!Item.Industry}`
{% endstep %}
{% step %}
#### **会社ロゴを追加する**
* Avatar Image URL を次に設定: `{!Item.LogoURL__c}`
* Variant を次に設定: `円形`
* Size を次に設定: `中`
{% endstep %}
{% step %}
#### **カスタムアクションボタンを追加する**
* Button コンポーネントを Actions スロットにドラッグします
{% endstep %}
{% step %}
#### **コンパクトなレコードレイアウトを追加する**
* Record Detail コンポーネントを Content スロットにドラッグします
{% 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 - ボタン](/experience-cloud/experience-cloud-ja/experience-components/ax-button.md)
{% endcontent-ref %}
***
### 例 2: 現在のユーザーのプロフィール情報
{% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %}
ユーザーがエクスペリエンスサイトにアクセスした瞬間に、温かくパーソナライズされた歓迎を届け、つながりを築いて初回訪問からプラットフォームの利用を促進します。
***
#### **達成できること**
* **パーソナライズされたあいさつ:** 画一的ではなく人間味のある動的な歓迎メッセージで、各ユーザーを名前で呼びかけます
* **役割の文脈:** ユーザーの名前の下に役職を表示し、チームメイトや顧客が相手をすぐに理解できるようにします
* **プロフィール写真:** ユーザーのプロフィール写真を自動取得し、洗練された親しみやすい印象を与えます
***
#### **設定方法**
{% stepper %}
{% step %}
### **プロフィールカードをページに追加する**
* AX – Profile Card コンポーネントを Experience Site ページにドラッグします
{% endstep %}
{% step %}
### **カードのヘッダーを設定する**
* Header を次に設定: `ようこそ、{!User.Record.Name}`
* Style を次に設定: `見出し 2`
* Subtitle を次に設定: `{!User.Record.Title}`
{% endstep %}
{% step %}
### **プロフィール画像を設定する**
* Avatar Image URL を次に設定: `{!User.Record.SmallPhotoUrl}`
* Avatar Position を次に設定: `上中央`
{% 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.