なぜメリハリが大事なの？
「見出しがあるのに目立たない」
「情報が多くて読む気にならない」
その原因は、見出しと本文の差がついていないからかもしれません。
メリハリがないと…
-
読み進める気がなくなる
-
どこに何が書いてあるか分かりにくい
-
伝えたいことが埋もれてしまう
メリハリをつける4つの基本テクニック
① フォントサイズを変える
-
見出し（H1）：28〜36px
-
サブ見出し（H2〜H3）：20〜28px
-
本文：14〜18px
※スマホの場合はやや小さめでもOK！
② フォントの太さを変える（ウェイト）
-
見出しは Bold（太字）
-
本文は Regular（通常） でOK
同じフォントでも太さを変えるだけで印象UP！
③ 余白で区切る
-
見出しと本文の間にしっかり余白を入れる
-
セクション間は本文より広めのスペースをとる
④ 色や線でアクセントをつける
-
見出しにテーマカラーを使う
-
下線や背景色で「ここから新しい話ですよ」と示す
NG例とOK例
|
NG例 |
OK例 |
|---|---|
|
見出しと本文のサイズがほぼ同じ |
見出しが一目でわかる大きさになっている |
|
すべて同じ太さのフォント |
見出しだけBoldで強調されている |
|
余白がバラバラ |
セクションごとに規則的な余白がとられている |
|
色の使いすぎで逆に読みにくい |
色数を絞って強調ポイントだけにカラーを使用 |
メリハリを出す簡単チェックリスト
-
見出しのサイズと本文に十分な差があるか？
-
見出しの太さや色で目立たせているか？
-
セクションごとに余白がとれているか？
-
情報のグループごとに整理されているか？
参考にしたいプロのデザインパターン
-
STUDIOのテンプレート：フォントサイズ・余白の設計が丁寧
-
Googleのマテリアルデザインガイド：https://m3.material.io/
-
Note・Pinterest・Canvaなど、読みやすい記事やバナーを観察してみよう
まとめ：見出しと本文の差で「読みやすさ」は激変する！
-
フォントサイズ・太さ・余白・色で差をつけよう
-
「目が自然に流れる」デザインが理想
-
迷ったら、まずは見出しを2段階大きく・太くしてみよう！
関連記事