Elementorで余白が崩れる原因は「感覚で動かす」ことにある

Elementorでサイトを作っていると、「PCではきれいなのにスマホで余白が変」「セクションごとに間隔がバラバラ」「少し直したら別の場所が崩れた」ということがよく起きます。

これはデザインセンスの問題というより、余白を感覚で足していることが原因です。Elementorは直感的に操作できる反面、セクション、カラム、コンテナ、ウィジェットのどこに余白を入れているのか分からなくなりやすいツールです。

余白は「どこに入れたか」で意味が変わる

Elementorの余白には、主に外側の余白と内側の余白があります。外側に余白を入れると、隣の要素との距離が変わります。内側に余白を入れると、要素の中身と枠の距離が変わります。

ところが制作中は、「ちょっと狭いからここを20px足そう」とその場で調整しがちです。これを繰り返すと、同じ見た目でも中身はかなり複雑になります。後からスマホ表示を直すときに、どの余白が効いているのか分からなくなります。

まずは、余白を入れる場所を決めておくことが大事です。セクション全体の上下余白は親コンテナで管理する。テキストとボタンの間隔はウィジェット間で管理する。カード内の余白はカード側で管理する。このように役割を分けるだけで、崩れ方はかなり減ります。

初心者がやりがちなのが、すべての余白をpxで固定することです。pxは分かりやすい反面、画面幅が変わっても同じ距離を維持します。PCでちょうどいい80pxの余白が、スマホでは大きすぎることがあります。

Elementorでは、PC、タブレット、スマホごとに余白を変えられます。大事なのは、スマホだけ最後に慌てて直すのではなく、最初から「PCでは広め、スマホでは詰める」という前提で設計することです。

特に見出し前後、ファーストビュー、CTA周辺の余白は、スマホで読みにくさに直結します。スマホ表示では、余白を減らすだけでなく、要素の順番やテキスト量も一緒に見る必要があります。

余白崩れを直すときは、いきなり細かい数値を触らないほうがいいです。まず全体を見て、どの階層の余白が問題かを確認します。

最初にセクション単位の上下余白を見ます。次にカラムやコンテナの内側余白を見ます。最後にウィジェット単位の余白を見ます。親から子へ順番に見れば、不要な二重余白に気づきやすくなります。

逆に、ボタンや見出しなど末端のウィジェットから触ると、局所的には直ったように見えても、別画面でまた崩れます。

案件で迷わないためには、自分用の余白ルールを作るのが効果的です。たとえば、セクション上下はPCで80px、スマホで48px。見出し下は24px。本文とボタンの間は32px。カード内側は24px。このように基準値を決めます。

すべての記事やページで完全に同じにする必要はありません。ただ、基準があると「今回は例外として広げる」と判断できます。基準がない状態では、すべてがその場の気分になります。

Elementorの余白崩れは、派手なテクニックよりも、地味なルール化で減らせます。制作で毎回同じところに悩むなら、TOFUラボのような制作者向けの相談環境で、自分の作り方を一度見直してもらうのも選択肢です。余白は見た目の問題に見えて、実際には制作手順の問題だからです。