> 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. **アクションスロット:** * ボタンやハイパーリンクなどのインタラクティブ要素用に予約されています。 * プロフィール編集やナビゲーションなどのアクションを提供し、ユーザー操作を促進します。 * カードの対話性とユーザーエンゲージメントを高めます。 ### プロパティ **タイトル** と **サブタイトル** カードの見出しと補足行を設定します。役職や部署などの追加情報にはサブタイトルを使用してください。 **タイトルテキストのスタイル** と **サブタイトルのテキストスタイル** パネル内でそれらを並べて配置し、各行のタイポグラフィを設定します: `見出し 1` から `見出し 4`、または `段落 1` / `段落 2`. **CMS 背景** と **背景ソース** カードの背景画像を設定します。CMS から画像を選ぶか、URL を指定して、奥行きと文脈を加える視覚的に豊かな背景にできます。 **フッターを表示** カードにフッター領域を表示します。 **コンテンツの内側余白を削除** コンテンツ周囲の余白を削除し、カードの端にぴったり収まるようにします。 **CMS アバター画像** と **アバター画像 URL または式** アバター画像を定義します。 **アバターの代替アイコン名** 画像がない場合に表示されるアイコンを設定します。 **アバターバリアント** アバターの形状を設定します（`四角` または `円`がデフォルト）し、 **アバターサイズ** そのサイズ（`X-小`, `小`, `中` （デフォルト）、 `大` または `X-大`). **アバター位置** カード上のアバターの配置を決めます — `左上` （デフォルト）、 `中央上`, `右上`, `左下`, `下中央`, `右下`, `左`, `中央` または `右` — で、 **小 / 中 / 大 コンテナでのアバター位置** ブレークポイントごとに位置を上書きします。 ## スタイル {% tabs %} {% tab title="ヘッダー" %} | 名前 | 説明 | 使用方法 | | -------------- | ---------------------------------------------------------------------- | ------------------------------------------------------ | | **ヘッダースタイル属性** | 背景色、文字色、フォントサイズ、スタイル、ウェイト、さらに境界線のカスタマイズまで、オプションを使ってヘッダーを幅広くスタイリングできます。 | ヘッダーの外観を微調整して、視覚的に印象的で読みやすい Profile Card のヘッダーを作成できます。 | | {% endtab %} | | | {% tab title="背景と境界線" %} | 名前 | 説明 | 使用方法 | | ------------- | -------------------------------------------- | ---------------------------------------------------------------- | | **背景色と境界線** | カード全体の背景色をカスタマイズし、サイズ、角丸、色などの境界線プロパティを定義します。 | これらの機能により、Profile Card の外観をさらに視覚的に差別化し洗練できます。デザインの好みに確実に合わせられます。 | | {% endtab %} | | | | {% endtabs %} | | | ## ユースケース | 名前 | 説明 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | [**現在のユーザー情報を表示するように 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 を設定し、パーソナライズを強化します。 | ### 例 1: アカウントハイライトパネル（コンテナ） {% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %} 重要なアカウント詳細、ブランド、アクションを前面中央に配置する、洗練され情報豊富なアカウントプロフィールカードで、パートナー向けエクスペリエンスサイトを変革しましょう。 *** #### **実現できること** * **ブランドヘッダー:** 会社ロゴとともにアカウント名と業種を表示し、ひと目で認識できるようにします * **コンテキストアクション:** ワンクリックでカードから直接「新しい商談」フローを起動します * **コンパクトなレコード詳細:** ページを圧迫することなく、最も関連性の高いアカウント項目を表示します *** #### **始める前に** * **カスタムロゴ項目:** 会社ロゴの URL を保存するための Account オブジェクト上のカスタム項目 * **画面フロー:** 起動準備が整った「新しい商談」画面フロー * **ボタンコンポーネント:** コンポーネントライブラリで利用可能 * **レコード詳細コンポーネント:** コンポーネントライブラリで利用可能 *** #### **設定方法** {% stepper %} {% step %} #### **Profile Card をページに追加する** * 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="/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 %} ### **Profile Card をページに追加する** * 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="/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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` 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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.