文字サイズの選び方と階層設計の基本

タイポグラフィー
background of random vintage letterpress metal type printing blocks

はじめに:「読ませるデザイン」って?

デザインで大切なことのひとつに、「文字の読みやすさ」があります。

ただ読みやすいだけじゃなく、

「どこが重要なのかがひと目で伝わる」 「読者が迷わず内容に没頭できる」

そんな設計ができてこそ、“伝わるデザイン”と言えます。

この記事では、文字サイズと階層設計に焦点を当てて、タイトル・見出し・本文をどう設計すれば良いかを解説します。


1. なぜ文字サイズ設計が重要なのか?

「読みやすさ」と「伝わりやすさ」は別物です。

どんなに見やすいフォントでも、サイズや階層が整理されていなければ、

  • 読むのがしんどい
  • どこから読めばいいか分からない
  • スクロールしたくなくなる

そんな状況に……。

だからこそ、情報の“優先順位”を可視化する階層設計がカギになります。


2. 基本の階層パターンは「3〜4階層」

WebやLP、資料などにおいて、文字サイズの階層は大きく分けて以下のように設計されます。

階層用途推奨サイズ例(px)
H1タイトル28〜36px
H2セクション見出し20〜24px
H3小見出し16〜18px
body本文14〜16px
caption補足・注釈12px〜

※これはあくまでPC環境前提の目安。スマホや用途に応じて調整が必要です。


3. 「サイズ×余白」で視線をデザインする

サイズだけを変えても、余白(マージン)や配置のバランスが悪いと視線誘導はうまくいきません。

■ サイズは“比率”が大事

単純に大きくするよりも、本文との相対比で設計すると洗練されます。

例:

  • 本文14pxなら、見出しは1.4〜1.8倍程度
  • タイトルはさらに倍の28〜32pxほど

■ 余白は階層感を支える

  • セクション前後には十分な余白を
  • 見出しと本文が近すぎると階層が崩れる

→ 文字だけでなく、空間で意味を伝える設計が必要!


4. フォントの“ウェイト”と合わせて使おう

文字サイズだけでなく、**太さ(ウェイト)**も階層設計の一部です。

  • タイトル → Bold(700〜900)
  • セクション見出し → Medium〜SemiBold
  • 本文 → Regular or Light

ウェイトとサイズを組み合わせて、視覚的に「どこが主役か」を伝えましょう。


5. NG例:「全部大きい」「全部同じ」

初心者によくあるパターンが:

  • とにかく文字が大きい
  • 全て同じ大きさ
  • 階層がぐちゃぐちゃ

これは、情報の“山”がない状態。

結果、読者は「なにが重要か分からん!」と迷子になります。


6. 実際にどう設計する?

■ 例:ブログ記事の場合

  • H1:記事タイトル(32px)
  • H2:大見出し(24px)
  • H3:中見出し(18px)
  • 本文:16px
  • 補足:13px

■ 例:サービスLPの場合

  • キャッチコピー(36px + Bold)
  • メリット見出し(24px)
  • 各詳細説明(16px)
  • CTA(20px + Bold)

→ 用途・目的・ターゲットによって設計を最適化!


おわりに:読みやすさは「見た目の美しさ」にも通じる

階層設計は、読みやすさだけでなく、ビジュアルの安定感やプロっぽさにも直結します。

  • 見た瞬間に分かる情報の整理
  • ストレスなく読めるリズム
  • 強調と抑制のバランス

この積み重ねが、「伝わるデザイン」につながるんです。


💬 ご相談はこちら

「文字設計を見てほしい」「自分のデザイン、読みづらくない?」など、 お気軽にこちらからご相談ください👇

👉 デザイン相談フォームはこちら

コメント