塾長 尾上こんにちは！ぬるま湯デザイン塾の尾上です。
メモりすこんにちは！Webデザイナーのメモりすです。
作ったバナーを見て「文字が読みにくい」と言われた…
どの書体なら読みやすくなるのか、自分では決められない…
「読みにくい」と指摘されたとき、自分のセンスを疑ってしまう方がとても多いです。塾の添削でも「私には向いていないのかもしれません」という言葉をよく聞きます。
でも、読みにくさはセンスの問題ではなく条件で説明できます。条件が分かれば、おしゃれな書体名を覚えていなくても自分で選べるようになりますね。
この記事では、読みやすいフォントの条件を5つに分け、Webと資料で使える書体名を8つ挙げ、書体を替えても読みにくいときに見直す場所まで順に説明します。
- 読みやすいフォントの5つの条件（ゴシック体・太さの段階・字形・癖・英数字）
- Web・資料・小さい文字で分けた、読みやすいフォント8書体の名前と入手方法
- 游ゴシックとメイリオの選び分けと、書体を替えても読みにくいときに見直す4か所
読みやすいフォントとは？まず押さえる5つの条件
メモりす読みにくいって言われたけど、どの書体が正解なのかな…？
塾長 尾上正解の書体を覚えるより、読みやすい条件を5つ覚えるのが先だよ！
読みやすいフォントとは
画面ではゴシック体を基準に、小さく表示しても字の形が判別できて、太さの段階が選べて、癖が少なく、英数字まで整っている書体のことです。下の5つの条件で判断できます。
条件を満たしていれば書体の名前は入れ替えられるので、名前を集めるより先に条件を押さえたほうが早いんですね。
1、ゴシック体を基準にする
画面に出す文字は、思っているより小さく表示されます。明朝体の細い横線は小さいサイズだとつぶれてしまうので、Webの本文はゴシック体で組む場面がほとんどです。
印象の違いで言えば、ゴシック体は力強く元気な方向、明朝体は上品で高級感のある方向。明朝体を主役にしたデザインでも、注釈やボタンのような小さい文字はゴシック体と組み合わせると読みやすくなります。
なお紙は印刷の解像度が高いので、細い線もきれいに再現されます。画面と紙で判断が変わる、という点だけ覚えておいてください。
2、ウェイト（太さ）が複数ある
太さが1種類しかない書体を選ぶと、強弱をつけづらくなります。太さが選択できる書体を最初に選ぶのがおすすめです。
太さの段階が2つ以上あれば、本文と見出しを同じ書体でそろえたまま強弱をつけられます。書体を選ぶときは、ウェイトの一覧を開いて何段階あるか確認してください。
3、字形が見分けやすい（UDフォントの考え方）
UDフォントとは
モリサワによると「文字のかたちがわかりやすいこと」「文章が読みやすいこと」「読み間違えにくいこと」の3点をコンセプトに設計された書体です。小さいサイズですべての文字が問題なく判別できることを基準に、ベースの書体の字形を見直したと説明されています。
カタカナの「ロ」と漢字の「口」、数字の「3」と「8」のように、似た形を見分けやすいかどうかで読み違いの起きやすさが変わります。注釈・入力フォーム・価格表のように小さく細かい文字が続く場所では、ここが効いてきますね。
4、癖が弱い（装飾・手書き風を避ける）
Webページは、かなりの速さでスクロールされます。読者は1文字ずつ追っていません。ポップ体・手書き風・装飾の強い書体は、視線が引っかかる場所をつくってしまうので「読ませる」用途には向きません。
使うとしても、見出し1行で雰囲気を出すところまでに留めてください。
5、和文と英数字のバランスが揃う
和文書体に入っている英数字は、和文と並べたときに高さや太さが合わないことがあります。ただし本文の数字を1つずつ差し替える必要はありません。
英数字の見え方を気にするのは、バナーやファーストビューのように1枚で見せる場所だけで足ります。
| 比べるポイント | 読みやすい書体の条件 | 読みにくくなる例 |
|---|---|---|
| 書体の種類 | ゴシック体が基準 | 小さい文字に明朝体を使う |
| 太さの段階 | 2段階以上ある | 1種類しかない |
| 字形 | 似た文字を見分けやすい | 画数の多い字がつぶれる |
| 装飾 | 装飾が少ない | 手書き風・ポップ体 |
| 英数字 | 和文と並べても浮かない | 和文と高さ・太さが合わない |
用途別に見る、読みやすいフォント8書体
メモりす条件は分かったから、具体的な名前を教えて！
「一番読みやすいフォントは何ですか」と聞かれたら、用途を3つに分けて答えています。
Noto Sans JP
Webサイトの本文と見出しにおすすめ
游ゴシック
端末に入っている書体で済ませるときにおすすめ
BIZ UDPゴシック
注釈や入力フォームのように小さい文字が多いときにおすすめ
この3つを含めた8書体を、入手方法と読みやすい理由で並べました。
| フォント名 | 入手方法 | 読みやすい理由 | 向いている場所 |
|---|---|---|---|
| Noto Sans JP（源ノ角ゴシック） | Google Fonts・無料（登録情報はOFL） | 太さが100〜900まで登録されていて強弱をつけやすい | Webの本文・見出し。最初の1つに |
| 游ゴシック | Windows 11に同梱／macOSにも掲載 | Light〜Boldの4段階で本文と見出しをそろえられる | Windows中心の資料・Webの本文 |
| メイリオ | Windowsの日本語追加フォント | 字面が大きく、小さいサイズでも読み取りやすい | Windows内で配る資料・社内文書 |
| ヒラギノ角ゴ（Hiragino Sans） | macOSで使える書体として掲載 | W0〜W9まで太さの段階が多い | Mac中心の制作・見出し |
| BIZ UDPゴシック | Google Fonts・無料／Windowsの日本語追加フォント | UDの考え方で設計され、似た字を見分けやすい | 注釈・入力フォーム・小さい文字 |
| UDデジタル教科書体 | Windowsの日本語追加フォント | 手の動きを重視した字形で読み間違えにくい | 配って読ませる資料・説明用スライド |
| Zen Kaku Gothic New | Google Fonts・無料（登録情報はOFL） | 太さが5段階あり、Notoと違う表情が出せる | 本文と見出しに変化をつけたいとき |
| Noto Serif JP（源ノ明朝） | Google Fonts・無料（登録情報はOFL） | 明朝体の中では線の太さが安定している | 大きく見せる見出し・引用 |
※搭載状況は、Microsoft LearnのWindows 11フォント一覧とAppleのサポートページの掲載区分（2026年10月14日時点）です。OSのバージョンや追加機能のインストール状況で変わります。
無料で読みやすいフォントは？
- Noto Sans JP
- Noto Serif JP
- BIZ UDPゴシック
- Zen Kaku Gothic New
の4つです。Google Fontsによると、4書体とも SIL Open Font License（OFL）です（2026年10月14日時点）。
ダウンロードする前に、書体ごとの配布ページでライセンス表記を確認してください。登録情報は更新されることがあるので、仕事で使う書体は毎回自分の目で見るのが安全ですね。
Webサイトで使うとき
Webフォントとして読み込む太さは2つくらいに絞ってください。太さの数だけファイルが増えて、表示が重くなります。本文に標準、見出しに太字。これで大半のページは組めます。
欧文書体の組み合わせ方、媒体ごとの選び方、ライセンスの確認手順は、別の記事で整理しています。読みやすさの条件まで押さえたら、次はこちらへ進んでください。
資料・スライドで使うとき
提案用のスライドや自己紹介資料は、画面共有で一緒に見ることもあれば、ファイルを渡して個別に読まれることもあります。配って読ませる文書なら、UD系の書体が有利です。
モリサワの書体見本によると、UDデジタル教科書体は「筆書きの楷書ではなく硬筆やサインペンを意識し、手の動きを重視」した設計で、「太さの強弱を抑えたデザインで、ロービジョン（弱視）、ディスレクシア（読み書き障害）に配慮」していると説明されています。文字をなぞる動きが残っているので、読み慣れていない人にも形が伝わりやすいんですね。
游ゴシックとメイリオ、どちらが読みやすい？
塾長 尾上この2つは、「どっちが上」じゃなくて「誰に渡すか」で決まるよ。
游ゴシックとメイリオは、読みやすさを比べるより配布先で決めます。Windowsの中で完結する資料ならメイリオで困りません。Macを使う人にも渡すなら、太さの段階がそろう游ゴシックか、端末に左右されない Noto Sans JP が安全です。
| 比べるポイント | 游ゴシック | メイリオ |
|---|---|---|
| Windowsでの扱い | Windows 11の同梱一覧に掲載 | 日本語の追加フォントとして掲載 |
| macOSでの扱い | YuGothicのBold・Mediumが掲載 | 掲載なし |
| 太さの段階 | Light・Regular・Medium・Bold | Regular・Bold |
| 向いている場面 | Webの本文・Macも含む配布 | Windows内で完結する資料 |
Microsoft LearnのWindows 11フォント一覧では、游ゴシックは同梱フォントとして掲載され、メイリオは「Japanese Supplemental Fonts」（必要に応じて追加する日本語フォント）の節に載っています。Appleのサポートページでは、macOSで使える書体として YuGothic の Bold と Medium が掲載されています（いずれも2026年10月14日時点）。
※掲載がない＝使えない、という意味ではありません。端末によっては、ほかのソフトを入れたときに追加されている場合もあります。
2つで迷うなら、第3の選択肢としてUD系も見てみてください。BIZ UDPゴシックは Google Fonts から入手できるので、WindowsでもMacでも同じ見え方にそろえられます。Windowsの追加フォントなら UDデジタル教科書体。有料で選ぶならモリサワのUD新ゴで、公式の書体見本では「個々の文字のわかりやすさを重視した字形をとりいれたユニバーサルデザイン書体」と説明されています。
フォントを埋め込まずにファイルを渡すと、相手の端末にその書体が無ければ別の書体に置き換わります。
文字の幅が変わってレイアウトまで崩れることがあるので、配布はPDFにするのが確実です。
ぬるま湯デザイン塾で推奨している書体
メモりす塾ではどの書体を使うことになってるの？
私が塾生に伝えている基準は1つです。「ウェイトが豊富で、無料でもデザインしやすいか」。この条件を満たす書体を1組決めてしまえば、案件ごとに探し直す時間が消えます。
無料で選ぶなら源ノ角ゴシックと源ノ明朝
ゴシック体は源ノ角ゴシック（Source Han Sans）、明朝体は源ノ明朝（Source Han Serif）を勧めています。理由は太さの段階の多さです。
Adobeの公式リポジトリの登録内容では、源ノ角ゴシックの日本語版は ExtraLight／Light／Normal／Regular／Medium／Bold／Heavy の7段階、源ノ明朝は ExtraLight／Light／Regular／Medium／SemiBold／Bold／Heavy の7段階になっていました。どちらもリポジトリのLICENSE.txtには SIL Open Font License と記載されています（2026年10月14日時点）。
Webページの本文で使うなら、Google Fonts のNoto Sans JP／Noto Serif JPが同じデザインです。Google Fonts側の登録情報でも著作権表記はAdobeで、配布元は Noto CJK のリポジトリとなっています（2026年10月14日時点）。名前が違うだけなので、デザインカンプは源ノ角ゴシック、実装は Noto Sans JP という組み合わせでも見た目がそろいますね。
有料ならモリサワの新ゴとリュウミン
有料書体を買う段階になったら、モリサワの新ゴとリュウミンを挙げています。モリサワの書体見本では、新ゴは「システマチックな雰囲気をもつ現代的なゴシック体」「装飾のない均質で明るいデザイン」、リュウミンは「森川龍文堂明朝体をベースに開発した、スタンダードな明朝体」「本文組みから見出しまでDTPの基本書体として幅広く使用されています」と説明されています。
ただ、学び始めの段階で急いで買う必要はありません。有料書体への投資は、案件を受けられるようになって、書体の違いが自分で分かってからで遅くないです。無料の源ノ角ゴシックで作れないデザインは、ほとんどないですから。
欧文も同じ考え方で進めます。Helvetica のような有料書体を買わなくても、Arial などで役割は足ります。
書体を変えても読みにくいときに見直す4か所
メモりす読みやすいフォントに変えたのに、まだ読みにくいって言われた…。
書体を替えても読みにくいときは、原因が書体の外にあります。次の4か所を上から順に見てください。
- 行間が狭い
- 本文の文字サイズと見出しとの差が足りない
- 1行の文字数が多すぎる・字間を詰めすぎている
- 文字色と背景のコントラストが弱い
①行間
行と行の間隔が狭いと、読み終えた目が次の行へ移れません。W3CのWCAG 2.2の達成基準1.4.12（Text Spacing・レベルAA）では、行の高さを文字サイズの1.5倍以上、段落の後の間隔を文字サイズの2倍以上、字間を0.12倍以上、語間を0.16倍以上に変えても内容や機能が失われないことが求められると説明されています。
※1.5倍はアクセシビリティの基準値で、デザイン上の最適値とは別の話です。読者が設定を変えても崩れない作りにしておく、という意味で押さえてください。
②文字サイズと見出しとの差
本文が小さすぎる、見出しと本文のサイズ差が小さい。この2つは「読みにくい」と言われる原因の定番です。見出しをひと目で見つけられないと、読者はどこから読むかを決められません。
サイズ差のつけ方と、印象がどう変わるかは別の記事にまとめています。ジャンプ率とは？文字サイズの差でデザインの印象を変える方法
③1行の文字数と字間
1行が長すぎると、行末から次の行頭へ目が戻るときに迷子になります。逆に字間を詰めすぎても、文字の切れ目が分からなくなって読みにくくなるんですね。
字間をどこまで詰めるかの判断基準と、Photoshopでの調整手順はこちらです。カーニングとは？文字詰めの判断基準とPhotoshopでの調整方法
④文字色と背景のコントラスト
薄いグレーの文字、写真の上に乗せた白文字。ここが原因のときは、書体を替えても読みやすくなりません。文字と背景の明るさの差が足りているかを先に確認してください。
配色の決め方は、ぬるま湯式のパターンとしてまとめています。色の組み合わせの基本｜Webデザインで失敗しない「ぬるま湯式」配色パターン
まとめ
読みやすいフォントは、①ゴシック体が基準 ②太さの段階がある ③字形が見分けやすい ④癖が弱い ⑤英数字が和文と合う、の5条件で選べます。
用途別の答えは、Webの本文なら Noto Sans JP、端末の標準で済ませるなら游ゴシック、小さい文字が多いなら BIZ UDPゴシックです。
書体を替えても読みにくいときは、行間・見出しとのサイズ差・1行の文字数と字間・コントラストの4か所を見直してください。読みにくさは条件で直せます。自分のセンスを疑う必要はありません。
いま作りかけのデータを開いて、使っている書体の太さが何段階あるか数えてみてください。1種類しかなければ、そこが最初の直しどころです。
Webデザインの学び方に関する情報を受け取りたい方は、ぬるま湯デザイン塾のLINEにご登録ください。5日間チャレンジ（無料体験）も実施中です。
5日間チャレンジの内容や案内時期などの詳細については、LINEでご案内します。
＼ LINEのお友達登録はこちらから ／
参考にした情報源
- Adobe「Source Han Sans」公式リポジトリ（LICENSE.txt・FontMenuNameDB.SUBSET）https://github.com/adobe-fonts/source-han-sans
- Adobe「Source Han Serif」公式リポジトリhttps://github.com/adobe-fonts/source-han-serif
- Google Fonts 公式リポジトリ（各書体のMETADATA.pb）https://github.com/google/fonts
- Noto CJK 公式リポジトリhttps://github.com/notofonts/noto-cjk
- Microsoft Learn「Font List Windows 11」https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list
- Apple サポート「Fonts included with macOS」https://support.apple.com/en-us/103203
- W3C「Understanding SC 1.4.12: Text Spacing」https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html
- モリサワ「UDフォント」https://www.morisawa.co.jp/fonts/udfont/／書体見本「UDデジタル教科書体 M」https://www.morisawa.co.jp/fonts/specimen/3763／「UD新ゴ R」https://www.morisawa.co.jp/fonts/specimen/1091／「新ゴ」https://www.morisawa.co.jp/fonts/specimen/1479／「リュウミン M-KL」https://www.morisawa.co.jp/fonts/specimen/1317
※2026年10月14日時点の各ページの記載にもとづきます。ライセンスの登録情報とOSの搭載状況は変わることがあるので、使う前に配布ページで確認してください。
塾長 尾上次のブログでもまたお会いしましょう！
メモりすバイバイ！またね！
