この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。
Experience Cloud (LWR) でページを作っていて、こんな経験はありませんか？
- 「画像を3つ横に並べたいだけなのに、微妙に高さがズレる」
- 「PCでは綺麗なのに、スマホで見ると文字が潰れて読めない」
- 「余白（マージン）の設定が多すぎて、どこを触ればいいかわからない」
Auraサイト時代は「2列レイアウト」などの定型コンポーネントを配置するだけで済みましたが、LWRサイトでは、よりWeb標準に近い「グリッドシステム（Grid System）」の理解が不可欠です。
今回は、LWRサイトのデザインを美しく整えるための「グリッド」の仕組みと、スマホ対応（レスポンシブ）を成功させる設定手順を解説します。
1. LWRの「グリッド」を理解する（12カラムの魔法）
まず、LWRのレイアウトの基本である「12カラム（12 Columns）」の概念を押さえましょう。
LWRのページ幅は、目に見えない「12本の縦の列」で分割されています。
- 画面幅いっぱい: 12カラム（100%）
- 半分: 6カラム（50%）
- 3等分: 4カラム（33%）
- 4等分: 3カラム（25%）
コンポーネントを配置する際、「幅を何pxにするか」ではなく、「12本のうち何本分を占有させるか」を指定するのがLWRの流儀です。
2. 実践：美しい「3列タイル」を作ってみよう
今回は例として、「横浜みなとみらいのおすすめスポット」を紹介する3枚のタイルを横並びにするレイアウトを作ってみましょう。
手順①：グリッドコンポーネントの配置
ビルダーのコンポーネントパレットから「グリッド」コンポーネントをキャンバスにドラッグ＆ドロップします。
手順②：カラム数の設定
まず、土台になっている「セクション」は1個の全体の幅の列=12カラム（100%）です。セクションの中にグリッドコンポーネントを配置します。
グリッドコンポーネントのプロパティパネルで、内包するコンテンツを表示する列数を決めることができます。
- 「幅 (25 ～ 100%)」で
100を入力します。 - 「列数 (1 ～ 6)」で
3を入力します。
これで、1列あたりのカラム数が 12カラム ÷ 3 = 4カラム となり、正確に3等分の領域が作成されます。
手順③：ガター（Gutter）の調整
隣り合うタイル同士の隙間を「ガター」と呼びます。グリッドコンポーネントのプロパティパネルで設定します。ここを適切に設定しないと、タイル同士がくっついて窮屈な見た目になります。
- 「項目間のスペース」で、サイズ（小・中・大など）から好みの余白を選びます。
これでCSSを書かなくても、均等で美しい余白が自動的に適用されます。
厳密には本来のガターは「カラム（列）同士の間に設けられる余白」のことです。
「項目間のスペース」で設けられるのはマージンに近いもので、内包する要素（今回で言うとタイル）の周り=上下左右に余白を付けています。
3. スマホで崩さない！レスポンシブ設定の極意
ここが最重要ポイントです。 PCで作った「横3列」の設定のままだと、タブレットやスマホの狭い画面でも無理やり横に3つ並ぼうとして、画像や文字が綺麗にならないことがあります。
そこで、LWRの「デバイスごとの表示プロパティ」機能を使います。
設定手順
- エクスペリエンスビルダー上部のビュー切り替えアイコンで「携帯」を選択します。
- キャンバスの幅がスマホサイズになります。
- エクスペリエンスビルダー上部のビュー切り替えアイコンで「タブレット」を選択します。
- キャンバスの幅がタブレットサイズになります。
- 携帯ビュー
- タブレットビュー
携帯ビューでは自動的に1列になってくれていますが、タブレットビューではタイル内の要素が縦にズレてしまっていて不格好ですね。これに対処します。
- グリッドコンポーネントの「▼」からコンポーネントを複製します。
- どちらかのグリッドコンポーネントの「表示」タブで「コンポーネントをタブレットに表示」をオフに切り替えます。タブレットでこのコンポーネントが見えなくなりました。
- 次に、もうひとつのグリッドコンポーネントのプロパティを変更します。
- 「列数 (1 ～ 6)」で
1を入力します。 - 「項目間のスペース」で なし を選択します。
- 「列数 (1 ～ 6)」で
- 複製したグリッドコンポーネントは、デスクトップビューでも携帯ビューでも現れています。それぞれのビューで表示したい方を選びましょう。
- デスクトップビュー: 1列のコンポーネントを非表示にします。
- 携帯ビュー: 3列のコンポーネントを非表示にします。
4. まとめ
LWRサイトでレイアウトを自在に操るための3つのポイントをおさらいしましょう。
- 「12カラム」で考える: 画面を12分割したうちのいくつを使うかで幅を決める。
- 余白は「ガター」に任せる: 個別のマージン設定よりも、グリッドの「項目間のスペース」機能を使う方が整いやすい。
- デバイスごとに「幅」を上書きする: それぞれのビューに切り替えて設定変更することで、レスポンシブ対応を行う。
- デスクトップビュー
- タブレットビュー
- 携帯ビュー
グリッドを制する者は、LWRを制します。 最初は慣れないかもしれませんが、一度この「12の法則」を覚えてしまえば、どんな複雑なレイアウトもパズルのように組み立てられるようになります。
読者の声