文字とタイポグラフィ：書体・サイズ・行間で「読まれる文字」にする｜デザイン・クリエイティブの基本 第4回

書体の選び方：ゴシック体と明朝体

日本語の書体は、大きく ゴシック体 と 明朝体 に分けられます（図1）。

• ゴシック体 は、線の太さがほぼ均一で、端に飾りのない書体です。画面上の文字、小さな文字、遠くから見る看板などでも形がつぶれにくく、読みやすいのが特長です。印象としては、力強い・親しみやすい・現代的と受け取られることが多い書体です。
• 明朝体 は、横の線が細く縦の線が太い、筆で書いた文字の形を受け継いだ書体です。線の終わりに「うろこ」と呼ばれる小さな三角形の飾りがあります。紙に印刷された長い文章で読みやすく、上品・伝統的・信頼感・高級感といった印象を与えます。

どちらが優れているということではなく、目的と場面で選ぶ ものです。スマホで読まれる広告やWebページの本文、資料のスライドではゴシック体が基本になります。明朝体は、細い横線が小さな画面でかすれやすいので、使うなら見出しなど大きな文字に限るのが安全です。一方で、高級感や伝統を伝えたいブランドの見出しには、明朝体が効果的なこともあります。

読み間違えにくい書体という選択肢

最近は、誰にとっても読みやすく、読み間違えにくいことを重視した UD（ユニバーサルデザイン）書体 も広く使われています。たとえば、書体メーカーのモリサワは、ビジネス文書向けのUD書体「BIZ UDゴシック」「BIZ UD明朝」を、2022年4月からGoogle Fontsで無料公開しています。報道によれば、ライセンスはSIL Open Font License 1.1で、商用のデザインやWebサイトにも使えるとされています。資料や社内文書の書体に迷ったら、こうした書体を候補に入れるのもよい方法です（利用条件は、使う前に必ず配布元で確認してください）。

大きさと太さで、メリハリをつける

第2回で学んだ「コントラスト」の原則は、文字でもっとも強く働きます。

ジャンプ率：見出しと本文の大きさの比

見出しの文字の大きさが、本文の何倍あるかを ジャンプ率 と呼びます。ジャンプ率が高い（見出しが本文よりずっと大きい）と、元気で目を引く印象になり、要点がひと目で伝わります。ジャンプ率が低いと、落ち着いた、知的な印象になる代わりに、要点が伝わりにくくなります。

図2の左は、見出しが本文より少し大きいだけなので、見出しと本文が同じ重さで目に入り、パッと見て何の話か分かりにくくなっています。右は、見出しを大きく、本文を小さく控えめにしたことで、「経理の残業を減らす商品だ」ということが一瞬で伝わります。本文は、興味を持った人が読めば十分です。

広告やLPのファーストビューのように 一瞬で伝える場面ではジャンプ率を高く、長い記事や報告書のように じっくり読ませる場面では控えめに すると覚えておくとよいでしょう。

書体と太さの数を絞る

文字でメリハリをつけようとして、つい書体の種類を増やしてしまうのは、よくある失敗です。

図3の左は、見出しは明朝体の赤、割引は斜体の青、会員特典は緑の等幅の書体、と行ごとに書体と色が変わっています。一つひとつは目立っていますが、全体としては統一感がなく、安売りのチラシのような印象になってしまいます。右は、すべて同じゴシック体を使い、大きさと太さだけ で差をつけています。それでも、見出し・割引・説明の役割の違いは十分に伝わります。

目安としては、1つのデザインで使う書体は 1〜2種類（たとえば、ゴシック体1つ、または見出しに明朝体・本文にゴシック体）、太さは 2〜3段階（太字・標準など）に絞ると、まとまりやすくなります。書体を増やす代わりに、同じ書体の中で大きさと太さを使い分けるのが、プロのやり方です。

よくある誤解：「斜体にすれば強調できる」

英語の文章では、強調に斜体（イタリック）を使うことがあります。しかし、日本語の書体のほとんどには、もともと斜体の形がありません。ツールで斜体にすると、文字を機械的に傾けただけの形になり、読みにくく、安っぽい印象になりがちです。日本語で強調したいときは、斜体ではなく、太さ・大きさ・色で差をつけましょう。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

文字の組み方：行間・行の長さ・大きさ

書体と大きさが決まったら、次は文字を並べる「組み方」です。ここでは、Webのアクセシビリティの国際的なガイドラインであるWCAG 2.2が示す目安を手がかりにします。

行間は、文字の大きさの1.5倍以上

行と行の間隔（行間）が狭いと、1行読み終えて次の行に目を移すとき、どの行の頭に戻ればよいか見失いやすくなります。

WCAG 2.2の達成基準1.4.8「視覚的提示」（レベルAAA）は、段落の中の行間を、少なくとも1行分の半分の余白をとった「1.5倍」以上にすることを挙げています。これは最も厳しいレベルの基準ですが、読みやすさの目安としてとても役に立ちます。図4の左は行間が文字の大きさの1.2倍、右は1.8倍です。右のほうが、行の区切りがはっきりして読みやすいはずです。日本語の本文では、文字の大きさの1.5〜2倍くらいの行間がよく使われます。

1行の長さは、日本語で40字以内

1行が長すぎることも、読みにくさの原因になります。行末から次の行の頭まで目を大きく動かす必要があり、途中で行を見失いやすくなるからです。

同じ達成基準1.4.8は、1行の幅を80字以内、日本語・中国語・韓国語（CJK）では40字以内にすることを挙げています。パソコンの画面いっぱいに文章を広げると、1行が60字、70字と長くなりがちです。図5のように、文章の幅を狭めて1行を短くするだけで、ぐっと読みやすくなります。Webページの本文の幅を広げすぎないのは、このためです。

文字の大きさ：小さすぎる文字を多用しない

文字の大きさに、全員に当てはまる正解の数値はありません。読む人の年齢、読む距離、媒体の大きさで適切な大きさは変わります。ただし、小さすぎる文字が読まれないことは確かです。

Googleが提供するWebページの品質チェックツール「Lighthouse」には、以前、文字の大きさを確かめる監査がありました。その解説では、ページの文字の40%以上が12ピクセル未満だと問題として指摘し、文字の60%以上を12ピクセル以上にすることを勧めていました（この監査は、Lighthouseのバージョン13で取り除かれています）。12ピクセルは最低限の目安と考え、本文はそれより十分に大きくするのが安全です。

また、WCAG 2.2の達成基準1.4.12「テキストの間隔」（レベルAA）は、利用者が行間を文字の大きさの1.5倍、段落の後の間隔を2倍、文字の間隔を0.12倍、単語の間隔を0.16倍まで広げても、内容が欠けたり重なったりしないことを求めています。Webページを作るときは、文字の箱の高さを固定しすぎない、という点にも気をつけましょう。

図6は、この回で扱ったWebの文字の設定の目安をまとめたものです。数値は最低限の目安なので、媒体や読む人に合わせて調整してください。たとえば、高齢の方が多く読むサービスなら、本文の文字をさらに大きく、行間も広めにとるとよいでしょう。

細かいけれど効く：数字・英字・記号のそろえ方

文字の組み方では、細部の不ぞろいも「素人っぽさ」の原因になります。特に気をつけたいのが、数字・英字・記号の書き方です。同じ資料の中で「３日」と「3日」、「ＰＤＦ」と「PDF」のように全角と半角が混ざっていると、文字の幅や形が微妙に変わり、整って見えません。数字と英字は半角にそろえる、括弧やコロンは全角か半角のどちらかに決める、といったルールを決めて、第2回の「反復」と同じように資料全体で守りましょう。価格や日付など、数字が主役になる箇所では、数字だけを少し大きく太くすると、要点が目に入りやすくなります。

実務ではこう使う

文字のデザインを見直すときは、次の順番でチェックします。

1. 書体は目的と場面に合っているか：画面で読むならゴシック体が基本。明朝体は大きな見出しに。
2. 書体は1〜2種類、太さは2〜3段階に収まっているか：増えていたら、同じ書体の大きさと太さで置き換えます。
3. ジャンプ率は場面に合っているか：一瞬で伝える広告やファーストビューは高く、じっくり読ませる記事は控えめに。
4. 本文の行間・1行の長さ・大きさは十分か：行間は1.5倍以上、1行は40字以内を目安に。
5. 小さな文字が多すぎないか：注意書きなど、小さくせざるを得ない文字でも、読めない大きさにはしない。

最後の点は、広告ではとくに注意が必要です。条件や注意書きを小さな文字で目立たなく書くと、景品表示法上の問題になるおそれもあります。広告の表示の注意点は、次の第5回で扱います。

この回のまとめ

• デザインの印象と読みやすさの多くは、文字の選び方と組み方で決まります。
• 画面で読む文字はゴシック体が基本です。明朝体は上品な印象を与えますが、小さな画面では大きな見出しに限るのが安全です。
• 見出しと本文の大きさの比（ジャンプ率）で、メリハリと印象をコントロールします。
• 書体は1〜2種類、太さは2〜3段階に絞り、日本語では斜体で強調しないようにします。
• 行間は文字の大きさの1.5倍以上、1行は日本語で40字以内が目安です（WCAG 2.2の達成基準1.4.8）。

確認テスト

次回予告

第5回からは実践編です。最初は、バナー・広告クリエイティブの作り方を学びます。何を訴えるかという「訴求軸」の決め方、バナーの構成要素、媒体ごとのサイズの規定、そして注意書き（打消し表示）の扱いなど、広告ならではの注意点まで扱います。

参考資料

• W3C「Understanding SC 1.4.8: Visual Presentation」（WCAG 2.2）：https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation （2026年11月12日確認）
• W3C「Understanding SC 1.4.12: Text Spacing」（WCAG 2.2）：https://www.w3.org/WAI/WCAG22/Understanding/text-spacing （2026年11月12日確認）
• Chrome for Developers「Document doesn’t use legible font sizes」（Lighthouse）：https://developer.chrome.com/docs/lighthouse/seo/font-size （2026年11月12日確認）
• 窓の杜（インプレス）のニュース記事：BIZ UDゴシック・BIZ UD明朝のGoogle Fontsでの公開について（2022年3月30日）：https://forest.watch.impress.co.jp/docs/news/1399117.html （2026年11月12日確認）