【必読】なぜ今、Aura ではなく LWR を選ぶべきなのか?

B2B不動産ポータル「Real Estate Search」

プロジェクト概要

Real Estate Search は、最新の Salesforce LWR (Lightning Web Runtime) と生成AI技術 Agentforce を組み合わせて構築された、次世代のB2B不動産仲介ポータルです。

従来の不動産業務における「電話確認」や「FAXによる図面請求」といったアナログなプロセスを排除し、「AIによる自然言語検索」「リアルタイムな空室確認・予約」 を実現することで、仲介業者の業務効率を劇的に向上させることを目的としています。

デモ動画 & スクリーンショット

ホーム画面

自然言語で探せる、AI搭載型ハイブリッド検索

ファーストビューには Agentforce と連携した「AIコンシェルジュ」を配置。「海が見える3LDK」といった曖昧な要望からでも最適な物件を提案します。画面下部には、SLDSグリッドシステムを採用したレスポンシブな検索結果一覧が表示され、従来の条件絞り込み検索もスムーズに行えます。

  • PC
  • タブレット&スマホ

Agentforceに問いかけると、間取り/家賃/おすすめの理由と一緒に提案してくれます。同時におすすめの物件のリンクが記載されたカードを表示します。

募集住戸詳細画面

没入感のある閲覧体験と、フォームレスな即時予約

物件の魅力を最大限に伝えるため、CSSとJSで完全自作した「タッチスワイプ対応画像スライダー」を搭載。さらに、空き状況(◎/×)をリアルタイムに確認してその場で枠を押さえられる「内見予約カレンダー」を実装しました。

パートナーユーザーマイページ

外出の多い仲介担当者を支える、レスポンシブ・ダッシュボード

自分の内見スケジュールを「週間カレンダー」と「リスト」の双方で管理可能。リスト表示は、PCでは一覧性の高いテーブル形式、スマホでは操作しやすいカード形式へと自動的に切り替わるため、移動中でもストレスなく予約状況の確認やキャンセル対応が行えます。

  • PC
  • タブレット&スマホ

技術スタック

本プロジェクトでは、Salesforceの標準機能を最大限に活用しつつ、UX向上のために高度なカスタム実装を行っています。

  • Platform: Salesforce Experience Cloud (Build Your Own – LWR)
  • Frontend: Lightning Web Components (LWC), SLDS (Salesforce Lightning Design System)
  • Backend: Apex, SOQL
  • AI: Agentforce (Einstein Copilot), Named Credential (Loopback API)
  • Data Model: 6 Custom Objects (Building, Listing, Feature, etc.)

開発連載記事一覧

本ポータルの機能は、以下の技術記事シリーズとして詳細に解説しています。

[Vol.1] 検索UIの構築とレスポンシブグリッド

検索UI構築:SLDSグリッドとコンポーネント分割の実践

LWRサイトの基盤となる検索画面の構築。SLDSグリッドシステムを活用した、PC・スマホ両対応のレスポンシブなコンポーネント設計について解説しています。

[Vol.2] 詳細画面と自作画像スライダー

物件詳細と画像スライダーを自作する:標準コンポーネントの壁を越えるCSS/JS実装

標準コンポーネントが不足しているLWR環境において、CSSとJSのみでタッチスワイプ対応の画像スライダーを完全自作する方法を紹介します。

[Vol.3] リアルタイム予約システム

「ダブルブッキング」を防ぐリアルタイム予約システム:Apexマトリクス生成とLWCモーダル連携

「ダブルブッキング」を防ぐためのApexロジックと、Lightning Modalを用いたモダンな予約フォームの実装。スマホでの閲覧性を高めるCSSテクニックも必見です。

[Vol.4] Agentforceの統合とAPI制限の突破

Agentforceをサイトユーザーに開放する裏技:指定ログイン情報ループバック接続とAgentforce回答解析

パートナー/カスタマーユーザーがAIを利用できない制限を「指定ログインループバック接続」で解決する裏技アーキテクチャ。AIの回答から物件IDを抽出する正規表現ロジックも公開。

[Vol.5] マイページとダークモード対応テーブル

マイページ構築の鉄則:ダークモード対応を見据えたデータテーブル自作とレスポンシブ実装

標準のdatatableを使わず、あえてHTMLテーブルで組むことで「ダークモード(サイトテーマ)」への完全追従を実現。スマホ用カードUIへの切り替えなど、実務的なTipsが満載です。

タイトルとURLをコピーしました