【LWRレイアウト入門】CSS不要！グリッドシステムとレスポンシブ設定を使いこなして「崩れない」サイトを作る

「PCで見ると綺麗なのに、スマホで見ると崩れている」
「コンポーネント同士の間隔がバラバラで、素人っぽく見える」

Webサイト構築において、こうした悩みの原因の9割は「レイアウト（骨組み）」の理解不足にあります。 特に最新の LWR (Lightning Web Runtime) サイトでは、従来のAuraサイトのような「固定テンプレート」ではなく、「グリッド (Grid)」という柔軟な仕組みを使って画面を構成します。

これは自由度が高い反面、仕組みを知らないと「思った場所に部品が置けない」という迷路に迷い込みます。 この記事では、LWRサイト構築の基本となる「12カラム・グリッドシステム」の概念と、テーマパネルによる全体設定、そしてCSSを書かずにスマホ対応を実現するビルダー操作の極意を解説します。

LWRレイアウトの基本概念：すべては「箱」である

LWRサイトの画面作りは、マトリョーシカのような「箱」の構造を理解することから始まります。

1. セクション (Section): 画面の横幅いっぱいに広がる大きな帯。背景色や背景画像はここで設定します。
2. 列 (Column): セクションの中を縦に分割する箱。ここにコンポーネントを配置します。
3. コンポーネント: 実際に表示されるテキストや画像、LWCなど。

これらの配置を決める際に、まず最初に決定すべきは個別のコンポーネントではなく、サイト全体の「テーマ」です。

まずは「テーマパネル」で全体ルールを決める

多くの人がいきなり画面上のコンポーネントを触り始めますが、それは遠回りの原因です。 まずは画面左側のパレットアイコン「テーマ」を開きましょう。

ここでサイト全体の「レイアウトの基準」を設定できます。

• サイトの間隔調整: サイト全体の余白の密度（Density）を定義します。
• 最大コンテンツ幅: サイトが横に広がりすぎないように制限をかけます（例: 1440px）。

個別の調整に入る前に、ここで全体のトーンを決めておくのが、統一感のあるサイトを作るコツです。

12カラム・グリッド」を制する者はレイアウトを制す

Auraサイトでは「ヘッダー・本文・サイドバー」のような決まった枠がありましたが、LWRではこの「セクション」と「列」を自由に積み上げてページを作ります。

Webデザインの世界共通言語である「グリッドシステム」が、LWRには標準採用されています。 画面の横幅を 「12個のマス目」 に分割して考えます。

• 2カラム（均等）: 6マス + 6マス
• 3カラム（均等）: 4マス + 4マス + 4マス
• サイドバー付き: 4マス (サイド) + 8マス (メイン)

ビルダー上で「列の幅」を調整する際、ピクセル（px）ではなく、この「12分のいくつを使うか」で指定するのが鉄則です。 これにより、画面幅が広いモニターでも狭いノートPCでも、比率を保ったまま綺麗に伸縮します。

モバイル対応①：「列の配置」ボタンひとつで解決

レスポンシブデザイン最大の課題は、「横並びの列を、タブレットやスマートフォンでどう見せるか」です。 PCでは横に3つ並んでいるコンテンツを、モバイル端末の狭い画面でそのまま縮小すると見づらくなってしまいます。

LWRサイトでは、この問題を「セクションの設定」だけでスマートに解決できます。 列ごとの幅をひとつずつ変更する必要はありません。

LWRの「セクション」プロパティには、ビューモード（携帯 / タブレット / デスクトップ）ごとに列の配置を決める設定があります。ここには横並びと縦並びを決めるアイコンがあります。

手順：

1. ビルダー上部のアイコンをクリックし、ビューモードを携帯に切り替えます。
2. 対象の「セクション」を選択します。
3. プロパティパネルにある「列の配置」設定で、「縦積み (≡)」を選択します。

画像に示したように、ビューモードを携帯に切り替えた時には携帯用の配列を決めることができます。

これを縦に並べるよう指定するだけで、セクション内のすべての列が自動的にスマホ向けレイアウトに切り替わります。 もちろん、この変更は携帯のときにしか適用されないため、デスクトップで見ると元の美しい横並びレイアウトはそのまま維持されます。

モバイル対応②：「スマホでは隠す」という選択肢

時には、並び替えだけでは解決できないこともあります。 例えば、「PC用の巨大なメインビジュアル画像」や「複雑なデータテーブル」などは、スマホの小さな画面ではかえって邪魔になることがあります。

そんな時は、「デバイスごとに表示/非表示を切り替える」機能を使います。

手順：

1. ビューモードを携帯に切り替えます。
2. 非表示にしたいコンポーネントを選択します。
3. プロパティパネルの「表示」タブを開きます。
4. 「コンポーネントをモバイルに表示」というトグルスイッチをオフにします。

これにより、そのコンポーネントはスマホでのみ非表示になります。 逆に、「スマホでのみ表示するボタン（例：電話をかけるボタン）」を作ることも可能です。

個別調整：「スタイル」タブで微調整する

テーマ設定やグリッドで大枠を作った後、「このボタンだけもう少し下に下げたい」という微調整が必要になります。 その時は、各コンポーネントのプロパティにある「スタイル」タブを使用します。

余白（マージン・パディング）の設定

LWRのスタイルタブでは、上下左右の余白を数値で入力できます。

• 推奨単位：rem を使いましょう。
  • rem は文字サイズに基づいた相対単位です。ユーザーがブラウザの文字サイズ設定を変えた時に、レイアウトも連動して拡大縮小されるため、アクセシビリティに優れています。
  • 目安: 1rem = 約16px と考えて、0.5rem や 2rem といったキリの良い数字で統一すると美しく仕上がります。

CSSクラスの活用

スタイルタブの下部には「CSSクラス」という入力欄があります。 ここに slds-box や slds-p-around_medium といった Salesforce標準のデザインシステム (SLDS) のクラス名を入力するだけで、枠線をつけたり、統一された余白を一発で適用したりできます。

CSSファイルを書かなくても、標準クラスを知っていればデザインの幅は無限大です。

まとめ：CSSを書くのは「最後の手段」

LWRサイト構築のレイアウト戦略は、以下の「守破離」で進めます。

1. 守（テーマ）: 「テーマパネル」でサイト全体の間隔や幅を決める。
2. 破（グリッド・設定）: 「12カラム」と「モバイル設定」で骨組みを作る。「スタイルタブ」で rem 単位の微調整を行う。
3. 離（CSS）: どうしても実現できない表現のみ、CSSクラスやStyling Hooksを使用する。

ビルダーの標準機能（No-Code）を使い倒すことが、崩れにくくメンテナンスしやすいサイトへの近道です。

参考URL

拡張 LWR サイトでの画面応答型プロパティ値の割り当て

Style LWR sites with custom CSS variables