この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。
「Auraサイトで作っていた『ページバリエーション』が、LWRサイトに見当たらない…？」 Experience Cloud を Aura から LWR へ移行しようとした管理者が、最初につまずくのがこのポイントです。
結論から言うと、LWRサイトに「ページバリエーション」機能はありません。 また、これまで慣れ親しんだ「利用者（Audience）」という設定項目も、姿を変えています。
LWRサイトでは、「コンポーネントのバリエーション (Component Variations)」 と 「表示ルール (Visibility Rules)」 を組み合わせることで、より柔軟で高速なパーソナライゼーションを実現します。 この記事では、LWR特有の「出し分け」の作法を、図解を交えて解説します。
思考の転換：ページではなく「部品」を変える
Auraサイトでは、「一般用TOPページ」と「代理店用TOPページ」を丸ごと作り分けていました（ページバリエーション）。 しかし LWR では、ページは1つ（シングルページ）のまま、その中に配置された「部品（コンポーネント）」の中身だけを入れ替える という発想になります。
- Aura: ページAを見せるか、ページBを見せるか。
- LWR: 同じページの中で、Aパターンのバナーを見せるか、Bパターンのバナーを見せるか。
このアーキテクチャにより、ページの再読み込みが発生せず、LWR特有の高速な動作が維持されるのです。
実践：「コンポーネントのバリエーション」を作る
それでは、「代理店ランクによって、トップページのヒーローバナー（画像）を出し分ける」というシナリオで設定してみましょう。
- ビルダーで、出し分けたいコンポーネント（例：画像やテキストブロック）を選択します。
- プロパティパネル上部コンポーネント名の横の▼をクリックします。
- [コンポーネントの新しいバリエーション] をクリックします。
- デフォルト: 全員に見える基本のバナー。作成不要。
- Diamond Partner: 関連する取引先ランクが「DIAMOND」の会員向けの特別なバナー。
- バリエーションを作成したら、それぞれの内容（画像のURLやテキスト）を編集します。
- デフォルト
- Diamond Partner
これで、1つのコンポーネントの中に「複数の顔」を持たせることができました。
仕上げ：「表示ルール」でターゲットを決める
作ったバリエーションを「誰に」見せるかを定義します。ここで使うのが 「表示ルール (Visibility Rules)」 です。Auraの「利用者」に相当しますが、設定場所が異なります。
- 作成したバリエーション（例：Diamond Partner用）を選択した状態で、[表示 (Visibility)] タブを開きます。
- [表示ルールを編集] をクリックします。
- 条件を設定します。
- User > Record > 取引先責任者 > 取引先名 > ランク が DIAMOND と等しい
これで、「ダイヤモンドランクのパートナーが見た時だけ、バナーが豪華なバージョンに切り替わる」という挙動が完成します。
【開発者へのTips】LWCでの制御
標準コンポーネントだけでなく、自作した LWC でもこの「バリエーション」機能は利用可能です。 js-meta.xml に特別な記述は不要で、ビルダー側がラッパーとして機能を提供してくれます。
ただし、より高度な制御（データの中身に基づく出し分けなど）が必要な場合は、前回解説した通り lwc:if をコード内に記述する方がスマートな場合もあります。
- デザインや静的テキストの出し分け → ビルダーのバリエーション
- ロジックや動的データの出し分け → LWCコード (
lwc:if)
この使い分けが、メンテナンス性の高いサイトを作るコツです。
まとめ
LWRサイトでのパーソナライゼーションは、「ページ」から「コンポーネント」へと主戦場が移りました。
- ページバリエーションは探さない。
- 「コンポーネントのバリエーション」 を作る。
- 「表示ルール」 で条件を付ける。
この3ステップをマスターすれば、LWRサイトでも自由自在にユーザー体験をカスタマイズできます。
参考URL
LWR サイトでのコンポーネントのバリエーションの作成
LWR サイトでの動的コンポーネント表示の作成
読者の声