こんにちは、下坂栄里子です。
この記事では、ページ全体を「なんとなく窮屈な印象」から卒業させるために欠かせない、余白の基本ルール「マージン」と「パディング」の違いと使い分け方を解説します。
余白には「マージン」と「パディング」の2種類がある
ロゴの上下がキツキツになっていたり、セクションが詰まって見えたりする原因の多くは「余白」の設定です。ClickFunnelsでは、セクションの中に行（ロウ）、その中に要素という入れ子構造になっており、それぞれに余白を設定できます。
余白には次の2種類があります。
マージン: 要素の「外側」に入る余白
パディング: 要素の「内側」に入る余白
たとえばセクションの上に45pxのマージンを入れると、セクションそのものが下に押し下げられます。一方、セクションの中（行との間）に45pxのパディングを入れると、セクションの枠はそのままで、中身だけが内側に寄ります。
この違いを理解しておくと、「なぜここに余白を入れたのに思った通りにならないんだろう」という迷いがなくなり、自由自在にレイアウトを調整できるようになります。
以前の記事で紹介したパディング調整の基本とあわせて読むと、余白調整の理解がより深まります。
キツキツに見えるセクションを調整する
窮屈な印象のセクションを見つけたら、上下のパディングを70pxほど広げてみましょう。数値はスライダーでも手入力でも調整できるので、目分量で「ちょうどいい」と感じる値を探ります。
ここで注意したいのが、セクションの中の「どの階層」に余白を入れるかです。マージンを入れるとセクションごと動いてしまうため、意図しない場所に余白が入ることがあります。そういった場合は、セクションではなく、行（ロウ）や要素の側にパディングを入れるようにすると、狙った箇所だけをきれいに調整できます。
ファネル全体のロードマップについてはこちらの記事でも解説しています。
まとめ
余白には「マージン」（要素の外側）と「パディング」（要素の内側）の2種類がある
マージンを入れると要素そのものが押し下げられ、パディングを入れると中身だけが内側に寄る
キツキツに見えるセクションは、上下のパディングを70px前後広げるとバランスが良くなる
意図しない場所が動いてしまう場合は、セクションではなく行や要素の側で調整する
この違いを理解しておくと、ページ全体の余白調整がぐっとやりやすくなります。
ファネルデザイナー® 下坂栄里子でした。
SNSをやめても、あなたの知識は売れ続けます。
眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。
▶︎ 無料動画を視聴する