セクション間の余白とは?話題の区切りを伝える距離の取り方を初心者向けに解説

セクション間の余白の基本

まずは、セクションとは何か、そしてセクション間の余白がどんな役割を持っているのかを押さえましょう。

セクション間の余白とは

セクション間の余白とは、ページを構成する大きなまとまり(セクション)同士の間に取る余白のことです。

セクションとは、「サービス紹介」「料金」「よくある質問」のように、1つの話題ごとに区切られたページの中のかたまりを指します。

1つのセクションの中には、見出し・本文・画像・ボタンなど複数の要素が入っています。

セクション間の余白は、その要素同士の間の余白(要素間の余白)よりも一回り大きい単位で、「ここで話題が変わります」という境目を伝える役割を持っています。

なぜ要素間の余白より広く取るのか

セクション間の余白は、セクションの中の要素間の余白より、はっきり広く取るのが基本です。

人には、近くにあるものは同じグループ、離れているものは別のグループと感じる性質(近接の法則)があるからです(詳しくは近接の原則とはで解説しています)。

Nielsen Norman Groupも、グループ同士の間隔を広げると、それぞれが別のまとまりとしてはっきり見えると説明しています(Nielsen Norman Group「Visual Hierarchy in UX」・英語)。

次の見本は、同じ3つの話題を、セクション間の余白だけを変えて並べたものです。

どの見本も、見出しと本文、本文同士の間(要素間)は8pxにそろえています。

見本Aでは、「料金」の見出しが前の話題の続きのようにも見え、どこで話題が変わるのかを読んで確かめる必要があります。

見本Bでは、何も読まなくても「3つの話題が並んでいる」と分かります。

一方、見本Cでは、区切りは分かるものの、話題同士がばらばらに浮いて見え、同じページの中の情報というつながりが弱くなっています。

このように、セクション間の余白は「要素間より広く、でも広すぎない」ことが大切です。

余白の大きさには順番がある

ページの余白は、まとまりが大きくなるほど広くなる、という順番で考えると整理しやすくなります。

この順番が守られていると、見る人は余白の広さだけで「今どの単位の区切りを越えたのか」を感じ取れます。

余白の種類	どこの余白か	広さの順番
要素の内側の余白	ボタンやカードの、枠と中身の間	狭い
要素間の余白	見出しと本文、写真と説明文など、セクションの中の要素同士の間	中くらい
セクション間の余白	「サービス紹介」と「料金」など、話題が変わる境目	広い

要素の内側の余白は、ボタンやカードなど、部品の中身が枠に窮屈にくっつかないように取る余白です。

この3つの広さが逆転していないかを確かめるだけでも、ページの構成はぐっと伝わりやすくなります。

数値のイメージが欲しいときは、たとえば要素の内側の余白を8px、要素間の余白を16px、セクション間の余白を64pxのように、8の倍数の中から、まとまりが大きいほど大きな値を割り当ててみてください。

この記事の見本は小さく縮めているのでセクション間を32pxにしていますが、実際のWebページは画面も文字も大きいため、それより広い値が合うこともあります。

セクション間の余白の取り方

ここからは、実際にセクション間の余白を決めるときのコツを紹介します。

「差のつけ方」「そろえ方」「余白以外の区切り方」の3つを押さえておきましょう。

要素間の余白とはっきり差をつける

セクション間の余白は、要素間の余白と並べたときに、ひと目で「明らかに広い」と分かる差をつけましょう。

差が少しだけだと、見る人には同じ広さに見えてしまい、区切りとして伝わらないからです。

先ほどの見本Bでは、要素間8pxに対してセクション間を32px(4倍)にしています。

倍率に決まった正解はなく、ページの大きさや文字の大きさによって適した値は変わります。

迷ったときは、まず要素間の余白を決めてから、それより明らかに広い値をセクション間に選び、実際に画面で見て「話題の切り替わり」が感じられるかを確かめてください。

サイト全体で同じ値にそろえる

セクション間の余白は、ページごと・セクションごとに変えず、サイト全体で同じ値にそろえるのが基本です。

同じ「話題の区切り」なのに場所によって余白の広さが違うと、見る人は「ここは区切りが大きいから、もっと大きな切り替わりなのかな」と、意図しない意味を読み取ってしまうからです。

たとえば、トップページはセクション間を広く、下層ページは狭く、のようにバラバラにすると、サイトとしてのまとまりも弱くなります。

「セクション間はこの値」と1つ決めて、どのページでも同じ値を使いましょう。

余白だけで足りないときは背景色や線を使う

余白を広げても区切りが弱く感じるときは、背景色を変える、区切り線を入れるといった方法を組み合わせます。

セクションごとに内容の量が違うと、余白だけでは境目が伝わりにくい場合があるからです。

Appleのデザインガイドラインでも、余白のほか、背景の形や色、区切り線などを使って、情報を別々の領域に分けることが挙げられています(Apple Human Interface Guidelines「Layout」・英語)。

見本Dと見本Eは、セクションの間の余白は同じです。

見本Eは、2つめのセクションだけ背景に薄い黄色を敷いたことで、余白を増やさなくても3つの話題の境目がはっきりしています。

背景色を使うときは、色を何色も使わず、白とごく薄い色の2色を交互にする程度にとどめると、すっきりまとまります。

コーディングするときの補足

ここはコーディングする人向けの補足なので、デザインツールだけを使う人は読み飛ばしてもかまいません。

CSSでセクション間の余白を作るときは、セクションの内側の上下にpadding(要素の内側の余白)を付ける方法がよく使われます。

次のコードは、すべてのセクションの上下に、同じ64pxの内側の余白を付ける例です。

.section {
  padding-top: 64px;
  padding-bottom: 64px;
}

paddingの部分にはセクションの背景色が塗られるので、見本Eのように背景色で区切るデザインと相性がよい方法です。

このとき、隣り合うセクションの間は「前のセクションの下64px+次のセクションの上64px」で、合わせて128pxの余白になる点に注意しましょう。

一方、外側の余白であるmarginで上下の間隔を作ると、上下に並んだ要素同士では大きい方の値だけが使われる「マージンの相殺」が起きます(MDN「マージンの相殺の習得」)。

たとえば、前のセクションの下に64px、次のセクションの上に64pxのmarginを付けても、間は合計の128pxではなく64pxになります。

どちらを使う場合も、デザインで決めた余白の値と、実際に画面に出る余白が一致しているかを確かめましょう。

実践のポイント

セクション間の余白を決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• セクション間の余白を、セクション内の要素間の余白と同じ広さにしてしまうことがあります。
  どこまでが1つの話題か分からなくなるので、要素間より明らかに広く取りましょう。
• 「余白は広いほど上品」と考えて、セクション間を広げすぎてしまうことがあります。
  ページ全体が間延びし、スクロールしても何も出てこない時間が増えるため、読む人が「ページが終わった」と勘違いすることもあります。
• セクションごとに余白の値をその場で決めてしまい、ページの中で区切りの広さがバラバラになることがあります。
  セクション間の余白は1つの値に決めて、どこでも同じ値を使いましょう。

よくある質問

• Q. セクション間の余白は何pxにすればいい?
  A. 決まった正解の数値はありません。
  文字の大きさや要素間の余白によって適した値が変わるため、まず要素間の余白を決め、それより明らかに広い値を選ぶのが確実です。
  8の倍数など、あらかじめ決めた数値の段階から選ぶと、ほかの余白とのバランスも取りやすくなります。
• Q. スマートフォンでもPCと同じ余白でいい?
  A. スマートフォンでは、PCより少し狭めにすることがよくあります。
  画面が小さいため、PCと同じ広さの余白だと1画面に入る情報が減り、間延びして見えやすいからです。
  たとえばPCでセクション間を64pxにしたなら、スマートフォンでは40px前後から試し、実際の画面で見て調整します。
  ただし、要素間の余白より広いという関係は、画面サイズが変わっても保ちましょう。
• Q. 区切り線は入れたほうがいい?
  A. 余白だけで区切りが伝わるなら、なくてもかまいません。
  線を増やすと画面がにぎやかになるので、余白で区切ってみて、それでも境目が分かりにくいときに、背景色や線を足すのがおすすめです。

まとめ

セクション間の余白とは、ページの中の話題の境目に取る余白で、セクションの中の要素間の余白よりはっきり広く取ることで「ここで話題が変わる」と伝えます。

広げすぎて間延びしないようにし、サイト全体で同じ値にそろえ、余白だけで足りないときは背景色や線を組み合わせましょう。

まずは手元のページで、セクション間の余白と、セクションの中の要素間の余白を測り、セクション間のほうが明らかに広くなっているかを確かめてみてください。

余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています。