この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。
前回までの記事で、拡張 CMSを使った「コンテンツ」の表示方法はマスターしましたね。
ですが、Experience Cloudの真骨頂は、やはり「Salesforce内の顧客データ（CRM）」をセキュアに表示できる点にあります。
- 「パートナーに、自分の担当する商談情報を見せたい」
- 「顧客に、契約している商品リストを確認させたい」
- 「マイページで、登録情報の変更をさせたい」
これらを実現するために必須となるのが、「オブジェクトページ」と「レコード詳細コンポーネント」です。 今回は、LWRサイトでCRMデータを扱うための最初の一歩を解説します。
「オブジェクトページ」とは何か？
通常のWebページ（HomeやAboutなどのシングルページ）とは異なり、アクセスするURLによって表示内容が変わるページの仕組みです。
https://.../account/001xxxxxxxxxxxxにアクセス → A社の情報を表示https://.../account/001yyyyyyyyyyyyにアクセス → B社の情報を表示
LWRサイトでは、URLに含まれる レコードID (:recordId) を読み取り、自動的にそのレコードの情報をページ上のコンポーネントに流し込む（バインディングする）仕組みを持っています。
実践：取引先の「詳細ページ」を作ってみよう
今回は例として、「取引先（Account）」の詳細情報を表示するページを作成します。
手順①：オブジェクトページの作成
エクスペリエンスビルダーを開き、ページ管理メニューから「新規ページ」を作成します。
- [オブジェクトページ] を選択します。
- Salesforceオブジェクトの一覧から「取引先 (Account)」 を検索して選択します。
- [作成] をクリックします。
これで、自動的に以下の2つのページが生成されます。
- 取引先 関連リスト (Account Related List): レコードの関連リストを表示するページ
- 取引先 リスト (Account List): レコードの一覧を表示するページ
- 取引先 詳細 (Account Detail): 個別のレコードを表示するページ
今回は「詳細 (Account Detail)」ページを編集していきます。
- 新規オブジェクトページを作成
- 取引先を選択
- 3種類のページが作成された
手順②：ページ上部に社名を表示する（データバインディング）
ページを開くと、最初は真っ白（またはデフォルトのテンプレート）です。 まずは、ページの上部に、現在表示している取引先の「名前」を大きく表示してみましょう。
- 「テキストブロック」などを配置し、テキストを入力するモードにします。
- 右側プロパティの「テキストまたは式」にある入力欄に
Nameと入力し、 [取引先名] を選びます。
これで、画面上にサンプルとしてひとつの取引先名が表示されます。
CMSの記事で紹介した手法と全く同じです。LWRでは、CMSコンテンツもCRMレコードも、同じ「データバインディング」の仕組みで統一的に扱えるのが大きなメリットです。
項目を表示する：「レコードの詳細」コンポーネント
詳細ページに項目を表示するために、標準の「レコードの詳細」コンポーネントを使用します。
設定と仕様（LWRの注意点）
このコンポーネントを配置してプロパティパネルを見ると、設定項目が非常に少ないことに気づくはずです。 LWRのレコードの詳細コンポーネントは、Salesforce側の「ページレイアウト」の設定をそのまま読み込んで表示するという仕様になっています。
- 表示項目と並び順: エクスペリエンスビルダー上では変更できません。Salesforce設定の [オブジェクトマネージャー] > [取引先] > [ページレイアウト] で設定されたレイアウトがユーザーの権限にしたがってそのまま反映されます。
「自由に配置して編集させたい」場合は？
ここで多くの初心者が悩みます。「項目を自由に並べ替えたいけれど、ページレイアウトをいじりたくない」「特定の項目だけを横並びにしたい」という場合です。
残念ながら、標準の「レコード詳細」コンポーネントや、前述の「データバインディング（{!Item.Field}）」では、「自由なレイアウトでの編集フォーム」を作ることはできません（データバインディングは表示専用です）。
もし、デザインにこだわった入力フォームが必要な場合は、以下のいずれかの方法をとる必要があります。
- 画面フロー: フローで入力画面を作り、ページに埋め込む（ノーコード）。
- LWC開発:
lightning-record-edit-formなどを使って独自のフォームを開発する（プロコード）。
まずは標準の「レコード詳細」と「ページレイアウト」の組み合わせで要件を満たせないか検討しましょう。それが最も工数が少なく、メンテナンスも楽な方法です。LWCによる開発は、どうしてもデザインや挙動をカスタマイズしたい場合の「奥の手」として取っておくのが賢明です。
レコードの一覧を表示するには？
詳細ページの次は、そこへ辿り着くための「一覧ページ」も必要ですね。 自動生成された「取引先 リスト (Account List)」ページに移動しましょう。
「レコードリスト」コンポーネント
コンポーネントパレットから「レコードリスト」を配置します。
- オブジェクト: 取引先
- リストビュー名: Salesforce側で作成済みのリストビュー（例：「すべての取引先」や「私の取引先」）を選択します。
これだけで、Salesforceのリストビュー設定（表示項目や検索条件）を引き継いだ一覧表がサイト上に表示されます。リスト内のレコード名をクリックすると、先ほど作った「詳細ページ」へ自動的に遷移します。
モバイルでの見え方は？
リストビューをモバイルで見た時の表示や動作はどうなるでしょうか。確認してみます。
Auraサイト
Auraサイトでは携帯ビューでリストを表示したとき、必ずレコードカードの形式となります。また、カードをスワイプするとアクションが見える仕様でした。
LWRサイト
LWRサイトでは、まずプロパティで「テーブル」か「カード」のどちらにするかを選択できます。
さらに、カード型の場合、スワイプでアクションが見える仕様は廃止となっています。
テーブル型は横幅の狭いモバイルでは見づらいですから、カード型にしておくのがよいでしょう。
- テーブルかカードか
- カード
- テーブル
まとめ
LWRでSalesforceデータを扱う基本ステップは以下の通りです。
- [オブジェクトページ] を作成して、データの受け皿を作る。
- ページタイトルなどは [データバインディング] (
{Item.Name}) で動的に表示。 - 詳細情報は [レコード詳細] コンポーネントで、ページレイアウト項目を配置。
- 一覧表示は [レコードリスト] で、既存のリストビューを活用。
これで、あなたのサイトは単なる「情報発信サイト」から、顧客データと連動する「Webシステム」へと進化しました。
次回は、CRMデータを活用して、ユーザー情報変更を受け付ける「画面フロー（Flow）」の埋め込みとデザイン調整について解説します。
読者の声