Elementorでウィジェットの間にすき間を空けたい時、便利な「スペーサー」ウィジェットをポイポイと置いていませんか？直感的にすき間を作れるので初心者には大人気ですが、実はこれを多用すると、後々「取り返しのつかない修正地獄」に陥る可能性があります。今回は、スペーサーに頼ってはいけない理由と、プロが行っている正しい余白の作り方を分かりやすく解説します！
スペーサーを多用してはいけない2つの理由
① スマホ対応（レスポンシブ）の手間が増える
PC画面で50pxのスペーサーを置いたとします。スマホで見ると広すぎるため、一つひとつのスペーサーを選択してスマホ用に小さく調整する羽目になります。ページが長くなるほど管理が追いつかなくなります。
② サイトの動きが重くなる（無駄なコードの増加）
スペーサーはただの透明なすき間に見えますが、裏側では「透明な箱を表示させるためのコード」がしっかり書かれています。多用するとサイトの構造（DOM）が複雑になり、ページの表示速度が遅くなる原因になります。
正解はマージン・パディングとギャップ
では、どうやって余白を作るのが正解なのでしょうか？それは、これまでのコラムでも解説してきた「ウィジェット自体の余白設定」を使うことです。
- マージンとパディング：
要素自体の外側や内側に余白を持たせます。 - コンテナ（セクション）のギャップ：
横並びや縦並びの要素の「間」を均等に空けたい時は、親コンテナのギャップ機能に数値を入れます。無駄なウィジェットを増やさずに一括管理できます。
これらを正しく使うことで、コードがスッキリし、スマホ画面に切り替えた時の調整も劇的にラクになります。
過去の記事をはこちらから。
スペーサーの正しい使い方は？
じゃあスペーサーは絶対に使っちゃダメなの？と思うかもしれませんが、そんなことはありません。
例えば、ここの画像とテキストの間だけ、全体のルールとは別に少し広く取りたい、といった、局所的な調整には非常に便利です。 サイト全体の余白ベースとして使うのではなく、最後の微調整のスパイスとして数個だけ使うのが、プロの賢い使い方です。
筆者がスペーサーを使うタイミングとしては、インライン要素を縦に並べたい時にスペーサーの出番です。「ブロックで全幅にすれば？」という方もいると思いますが、ウィジェット背景に色を入れている時や、ウィジェットにエフェクトを実装している時などがそれにあたります。このピンポイントでスペーサー使用はElementor 制作での細かいTipsですね。
まとめ
- スペーサーを多用するとスマホ調整が大変になり、サイトの表示も遅くなる。
- 余白の基本はコンテナのギャップや、要素のマージン・パディングで作る。
- スペーサーは全体のレイアウト用ではなく、局所的な微調整にのみ使う。
便利な機能ほど、使い所が肝心です。修正に強く表示の速い、プロ仕様のサイト設計を目指しましょう！
