AX - プロフィールカード
概要
AX - プロフィールカード は、Experience Sites ページ上で、プロフィール画像、名前、詳細、必要に応じて背景画像を含むスタイル付きカード形式でユーザーまたは連絡先情報を表示する Experience Cloud コンポーネントです。
チームメンバー、顧客の連絡先、パートナー担当者、またはコミュニティ貢献者を、一貫したビジュアル形式で紹介するために使用します。Experience Builder で、表示するフィールドを設定し、プロフィール画像を追加し、スタイルをカスタマイズし、アクションボタンを含めます。
チームディレクトリ、連絡先リスト、コミュニティメンバープロフィール、「担当者を紹介」セクションなど、ポータルにプロフェッショナルなプロフィール表示が必要なあらゆる場面に最適です。
このコンポーネントは スロットを活用し 高度なカスタマイズが可能で、LWR サイトに最適です。Aura サイトでは、このレベルのカスタマイズはサポートされていません。
はじめに
この簡単なチュートリアルを使って、Profile Card コンポーネントの基本を学び、ユースケースの作成を始めましょう。
チュートリアル
Experience Cloud 上にユーザー情報を表示する Avonni Card を設定して、パーソナライズを強化します。
スロット
Avonni Profile Card コンポーネントは、スロットを通じて幅広い情報を柔軟かつ動的に表示できます。これらのスロットは、コンポーネント内に他のコンポーネントを挿入できる指定領域であり、広範なカスタマイズと機能を可能にします。
スロットの種類
コンテンツスロット:
詳細情報のための主要エリアです。
テキスト、リスト、画像、カスタムコンポーネントなど、さまざまな要素を追加するのに最適です。
包括的なデータやインタラクティブな要素を表示できます。
ヘッダースロット:
タイトル、見出し、導入コンテンツ専用です。
テキストラベル、アバター、アイコン、または文脈を提供する任意のコンポーネントに適しています。
Profile Card の目的をすぐに理解しやすくします。
アクションスロット:
ボタンやハイパーリンクなどのインタラクティブな要素用に予約されています。
プロフィール編集やナビゲーションなどのアクションを提供し、ユーザー操作を促進します。
カードの対話性とユーザーエンゲージメントを高めます。
設定
タイトルとタイトルのテキストスタイル
H1、H2、H3、H4、P1、P2 など、さまざまなテキストスタイルから選択して、タイトルとその外観を定義します。
これを利用して、目を引く、スタイルの効いた目立つ見出しをプロフィールカードに付けましょう。
サブタイトルとサブタイトルのテキストスタイル
サブタイトルを追加して外観をカスタマイズし、スタイルの選択によって追加の文脈情報を表示できます。
役職や部署などの追加情報を提供するためにサブタイトルを使い、プロフィールカードの情報量を高めます。
CMS 背景または背景 URL
CMS から画像を選ぶか URL を指定して背景をカスタマイズし、視覚的に豊かな背景を設定できます。
適切に選ばれた背景画像は、プロフィールに奥行きと文脈を加え、視覚的な魅力を高めます。
CMS アバター画像またはアバター画像 URL
CMS から画像を選択するか URL を使用してアバターを定義し、プロフィール表示に個人的な印象を与えます。
アバターは個人的な印象を加え、プロフィールをより魅力的で親しみやすいものにします。
アバターのバリアントとサイズ
円形や四角形などのバリアントと、x-small から x-large までのサイズから選んで、アバターの形状と大きさをカスタマイズします。
プロフィールカード全体のデザイン美に合わせてアバターの外観を調整し、視覚的な一貫性と魅力を確保します。
アバターの位置
左上、中央上、右下などの位置を選んで、カード上のアバターを配置します。
プロフィールカード内でバランスの取れた調和のあるレイアウトを実現するために、アバターの位置を調整します。
ヘッダーのスタイル属性
背景色、文字色、フォントサイズ、スタイル、太さ、さらには枠線のカスタマイズまで、さまざまなオプションでヘッダーを大幅にスタイル設定できます。
ヘッダーの見た目を細かく調整して、視覚的に印象的で読みやすいプロフィールカードのヘッダーを作成します。
背景色と枠線
カード全体の背景色をカスタマイズし、サイズ、角丸、色などの枠線プロパティを定義します。
これらの機能により、プロフィールカードの外観をさらに差別化し洗練させ、デザインの好みに合わせることができます。
ユースケース例
例1: アカウント強調パネル（コンテナー）
主要なアカウント詳細、ブランディング、アクションを前面に押し出した、洗練された情報豊富なアカウントプロフィールカードで、パートナー向けエクスペリエンスサイトを変革しましょう。
達成できること
ブランドヘッダー: 会社ロゴとともにアカウント名と業界を表示し、すぐに視覚認識できるようにします
コンテキストに応じたアクション: カードからワンクリックで新しい商談フローを直接起動します
簡潔なレコード詳細: ページを圧迫することなく、最も関連性の高いアカウント項目を表示します
始める前に
カスタムロゴフィールド: 会社ロゴの URL を保存するための Account オブジェクト上のカスタムフィールド
画面フロー: 起動準備が整った新規商談の画面フロー
ボタンコンポーネント: コンポーネントライブラリで利用可能
レコード詳細コンポーネント: コンポーネントライブラリで利用可能
設定方法
リンク
AX - レコード詳細AX - Button例2: 現在のユーザーのプロフィール情報
ユーザーがエクスペリエンスサイトに到着した瞬間から、温かくパーソナライズされた歓迎を届け、最初の訪問からつながりを築き、プラットフォームの利用を促進します。
達成できること
パーソナライズされた挨拶: 人間味のある、一般的すぎない動的なウェルカムメッセージで、各ユーザーを名前で呼びかけます
役割の文脈: ユーザーの名前の下に役職を表示し、同僚や顧客が相手をすぐに理解できるようにします
プロフィール写真: ユーザーのプロフィール画像を自動で取得し、洗練された親しみやすい印象にします
設定方法
リンク
最終更新
役に立ちましたか？