見出しと本文の間隔とは?見出しの上は広く下は狭くする余白の基本を解説

見出しと本文の間隔の基本

まずは、見出しと本文の間隔がなぜ大切なのかを、余白の基本的な原則から押さえましょう。

見出しと本文の間隔とは

見出しと本文の間隔とは、見出しの上下に取る余白のことです。

具体的には、「前の本文と見出しの間(見出しの上)」と「見出しとその後に続く本文の間(見出しの下)」の2か所を指します。

この2か所の余白のバランスで、見出しがどの本文とセットなのかが決まって見えます。

その土台になっているのが、「近接の原則」です。

近接の原則とは、近くにあるもの同士は同じグループに見え、離れているものは別のグループに見える、という人の見え方の性質のことです(詳しくは近接の原則とはで解説しています)。

UIデザインの調査で知られるNielsen Norman Groupも、よくデザインされた見出しは、前のセクションの文章よりも、後に続く自分のセクションの文章の近くに置かれている、と説明しています(Proximity Principle in Visual Design(Nielsen Norman Group・英語))。

上下の間隔が同じだと何が起きるか

見出しの上と下の間隔が同じだと、見出しが前後どちらの文章に属しているのか分かりにくくなります。

見出しが前後の文章からちょうど同じ距離にあると、近接の原則がどちらにも働かず、見出しが宙に浮いたように見えるからです。

次の見本は、同じ文章の見出しの上下の余白だけを変えて並べたものです。

上下が同じ20pxのNGの見本では、「当日の流れ」が前後どちらの文章の見出しなのか、一瞬迷ってしまいます。

上8px・下32pxのNGの見本はさらに悪く、見出しが前の文章の締めくくりのように見えてしまいます。

OKの見本は、見出しの上を広く空けたことで話の区切りがはっきりし、見出しの下を狭くしたことで「ここからこの話が始まる」と一目で分かります。

見出しの上を広く、下を狭くする理由

見出しの上を広く、下を狭くするのは、見出しが「後に続く本文のラベル」だからです。

ラベルは、それが説明する中身のすぐそばにあってこそ役に立ちます。

見出しの上の広い余白は「ここで話が変わります」という区切りの合図になり、見出しの下の狭い余白は「この見出しとこの本文はセットです」というつながりの合図になります。

つまり、見出しの上下の余白は、区切りとつながりという2つの役割を分担しているのです。

見出しと本文の間隔の決め方

ここからは、見出しまわりの余白を実際にどう決めればよいかを、手順に沿って見ていきます。

段落の間隔を基準に大小を決める

見出しまわりの余白は、本文の段落と段落の間隔を基準にして、「見出しの下はそれ以下、見出しの上はそれよりはっきり広く」と決めると迷いにくくなります。

段落の間隔は本文の中で最もよく出てくる余白なので、ほかの余白の大小を比べる物差しにしやすいからです。

本文が16pxで、段落の間を24px空けている場合の一例は次のとおりです。

場所	余白の一例	考え方
段落と段落の間	24px	基準になる余白
小見出し(H3)の下	16px	段落の間より狭くし、後の本文とつなげる
小見出し(H3)の上	48px	段落の間の2倍ほど空けて、話の区切りを見せる
大見出し(H2)の下	24px	段落の間と同じくらいまでに抑える
大見出し(H2)の上	80px	小見出しの上よりさらに広げ、大きな区切りを見せる

この数値は絶対の正解ではなく、文字サイズや書体、ページの雰囲気に合わせて調整するための出発点です。

大切なのは、「見出しの下 ≦ 段落の間 < 見出しの上」という大小の関係を崩さないことです。

段落の間隔の決め方は、読みやすい本文とはで解説しています。

見出しのレベルごとに段階をつける

大見出しと小見出しがあるページでは、見出しのレベルが上がるほど上の余白を広げると、話の構造が余白だけで伝わるようになります。

大見出しの上の余白は「大きな話題の切り替わり」、小見出しの上の余白は「話題の中の小さな切り替わり」を表すからです。

次の見本は、大見出し・小見出し・本文を、余白の段階をつけて並べたものです。

NGの見本では、すべての行が同じ間隔で並んでいるため、「アクセス」から別の大きな話題が始まることが読み取りにくくなっています。

OKの見本では、小見出しと本文がセットになり、さらに大見出しの前が大きく空いているので、ページの構造がひと目で分かります(余白で情報の階層を見せる考え方は視覚的な階層とはで解説しています)。

見出しのレベルを文字の大きさで見せる方法は、情報の階層をタイポグラフィで表す記事やジャンプ率の記事で解説しています。

数値は間隔のルールから選ぶ

見出しまわりの余白の数値は、ページ全体で使う余白の段階(間隔のルール)の中から選ぶと、統一感が保てます。

見出しごとに少しずつ違う数値を使うと、同じレベルの見出しなのに場所によって余白が違って見え、読み手が構造を読み違えるもとになるからです。

たとえば「8・16・24・48・80」のように使う段階を先に決め、H2の上は80、H3の上は48、というように見出しのレベルと対応させておくと、どのページでも同じリズムで読めるようになります(余白の段階の作り方は余白の間隔のルールとはで解説しています)。

デジタル庁のデザインシステムでも、余白の段階はスタイルガイドで3〜5種類ほどに絞って定義するのが一般的だと紹介されています(余白(デジタル庁デザインシステム))。

CSSで見出しの上下の余白をつける例

ここからは、コーディングする人向けの補足です。

デザインツールやWordPressのブロックエディタを使う人は、見出しの「上の余白」と「下の余白」を別々に設定できる欄を探し、上を広く下を狭く入れれば同じ効果が得られます。

CSSでは、見出しのmargin(外側の余白)で上下を別々に指定します。

.article p {
  margin: 0 0 24px;      /* 段落の間(基準) */
}

.article h2 {
  margin: 80px 0 24px;   /* 上を広く、下を狭く */
}

.article h3 {
  margin: 48px 0 16px;
}

marginに値を3つ書くと、「上・左右・下」の順に指定されます(MDN「margin」)。

H2なら、上の80px(margin-top)が前の本文との距離で、話の区切りを見せる余白です。下の24px(margin-bottom)が後の本文との距離で、本文とのつながりを見せる余白になります。

ここで1つ注意したいのが、縦に並んだ要素の上下のmarginは足し算にならず、大きいほうの値だけが使われる「マージンの相殺」という仕組みです(MDN「マージンの相殺」)。

このコードでは、段落の下の24pxとH3の上の48pxが重なりますが、間は72pxではなく48pxになります。

「24px＋48pxで72pxになるはず」と足し算で考えてしまうのは、CSSを学び始めたときにつまずきやすいポイントです。縦に並んだ要素どうしの間は「大きいほうが残る」と考え、見出しの上の値がそのまま前の段落からの距離になる、と覚えておきましょう。

「見出しの上を広げたはずなのに思ったより狭い」「広げたつもりの値が効いていない」と感じたら、前の要素のmarginと相殺されていないかを確認しましょう(marginとマージンの相殺はCSSのmarginとpaddingの違いとはでも解説しています)。

実践のポイント

見出しと本文の間隔で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見出しの下の余白を詰めすぎて、見出しと本文がくっつき窮屈に見えることがあります。
  見出しの下は「段落の間以下」が目安ですが、0に近づけすぎず、見出しの文字が本文と重なって見えない程度の空きは残しましょう。
• 見出しの上を広げすぎて、ページが間延びして見えることがあります。
  見出しが多い記事ほど区切りの余白が積み重なるので、スマホで通して読み、空きすぎていないか確かめましょう。
• 見出しの上下の余白をページごと・見出しごとにその場で調整し、同じレベルの見出しなのに余白がばらばらになることがあります。
  見出しのレベルごとに余白の値を決め、すべての見出しで使い回しましょう。

よくある質問

• Q. 見出しの上と下は、どのくらいの比率にすればいい?
  A. 決まった正解の比率はありませんが、見出しの上を下の2倍以上にすると、区切りとつながりの差がはっきり見えやすくなります。
  まずは2倍から試し、物足りなければ3倍程度まで広げて、実際の画面で比べてみましょう。
• Q. 見出しに背景色や下線をつけている場合も同じ考え方でいい?
  A. 同じ考え方で大丈夫です。
  見出しの帯や下線から次の本文までは近く、前の本文から見出しの帯までは広く空けると、帯と本文がひとまとまりに見えます。
• Q. スマホでも同じ余白でいい?
  A. 大小の関係は同じままで、数値は少し小さくすることが多いです。
  スマホは一度に見える範囲が狭いため、PCと同じ広い余白だと見出しの前に空白ばかりが続いて見えることがあります。
  すべてを同じ割合で小さくするのではなく、大きな余白ほど大きく縮め、小さな余白はあまり変えないのがコツです。
  たとえばこの記事の例なら、H2の上は80px→48px、H3の上は48px→32px前後から試し、見出しの下や段落の間はほぼそのままにして、実際のスマホで見ながら調整します。
  画面サイズによる文字の大きさの変え方はPC・スマホの文字サイズの記事で解説しています。

まとめ

見出しと本文の間隔とは、見出しの上下に取る余白のことで、近接の原則によって「どの本文がどの見出しの話か」を伝える役割を持っています。

見出しの上は広くして話の区切りを、見出しの下は狭くして本文とのつながりを見せ、見出しのレベルが上がるほど上の余白を広げると、ページの構造が余白だけで伝わります。

まずは自分が書いた記事や資料を開き、見出しの上の余白が下の余白より広くなっているかを確かめてみてください。