Webデザインにおすすめのフォント｜迷わない選び方と定番書体

バナーを作ってみたけれど、なんだか素人っぽく見える…
フォントの一覧を開いたまま、どれを選べばいいか決められない…

Webデザインを学び始めた方からの相談で、配色と並んで多いのがフォント選びです。おしゃれな書体をたくさん知っている人だけが上手に選べる、と思われていることも少なくありません。

実際に決め手になるのは、知っている書体の数より選ぶ順番です。

1. 何のための媒体かを決める
2. どこで使うかを把握する
3. 本文か見出しかを決める

この順番で考えると、候補は自然に2〜3個まで絞られます。Webデザインで使うフォントの選び方、迷ったときの定番書体、媒体別の基準、決める前に確認することを順に説明します。

Webデザインのフォント選びは「ゴシックか明朝か」から始めない

フォント選びで手が止まる方は、たいてい書体の名前から探し始めています。「おすすめ20選」を開いて名前をメモして、それでも自分のバナーにどれを当てるかは決まらない。

決める順番がないまま候補を集めると、候補が増えるほど迷います。おすすめは、次の順番です。

1. 誰に何を伝える媒体なのか（目的）を言葉にする
2. どの媒体か（バナー／LP／コーポレートサイト／SNS画像）を確認する
3. 本文に使うのか、見出しに使うのかを分ける
4. 必要な太さ（ウェイト）がその書体にそろっているか調べる
5. ライセンスと、Webでどう表示させるかを確認する

ゴシックか明朝かという二択は、3番目で出てくる話です。これをスタート地点に置くと、目的と媒体を飛ばしたまま好みで決めることになります。同じ明朝体でも、落ち着いた企業サイトの見出しでは効いて、小さいバナーの注釈では読めなくなります。

もうひとつ。フォント単体で良し悪しは決まりません。同じ書体でも、

• サイズの差
• 文字の間隔
• 配色の組み合わせ

で読みやすさは大きく変わります。「この書体は素人っぽい」と感じたとき、原因が書体以外にある場面は多いです。見分け方は記事の後半で扱います。

迷ったときに選ぶ定番フォント｜本文向け・見出し向け・欧文

見出しに向く日本語の定番

見出しは、太いウェイトが用意されている書体から選びます。ヒラギノ角ゴならW6以上、游ゴシックならBold。細いウェイトしか持たない書体を見出しに当てると、文字を大きくしても弱く見えて、本文との差がつきません。

明朝体を見出しに使うのは、落ち着いた印象や品を出したい媒体に向きます。ただし細いウェイトのまま小さく置くと、画面上では線が飛んで読みにくくなります。明朝を選ぶなら、見出しで使いましょう。

本文に向く日本語の定番

前提として、端末に入っているフォントで足りる場面があります。新しい書体を探す前に、WindowsとmacOSに何が収録されているかを確認してみてください。

欧文（英数字）の定番

英数字は日本語書体に付いている欧文で済むこともありますが、キャッチコピーや数字を強く見せたいときは欧文書体を指定したほうが整います。

Windows 11の収録一覧には Arial・Verdana・Georgia・Trebuchet MS などが入っています。長めの英文ならVerdana、うろこ（セリフ）のある落ち着いた印象ならGeorgia、見出しならArialのBoldあたりが扱いやすいところです。

同じ文章で見比べてみる

下の見本は、本文向けと見出し向けの指定を同じ文章で並べたものです。

※この見本は、読んでいる端末に入っているフォントで表示されます。環境によっては代替のフォントで表示されます（Webフォントは読み込んでいません）。

無料で使えるおすすめフォント｜Google Fontsで選ぶ定番8つ

端末に入っていない書体を使いたいときは、Google Fonts（Googleが運営するフォント配布サービス）から探すのが近道です。Webサイトに読み込むWebフォントとしても、ダウンロードしてPhotoshopで使う書体としても使えます。ここでは、Webデザインで使い回しやすい書体を日本語5つ・欧文3つに絞りました。

フォント名	種類	向いている場所	太さの段階
Noto Sans JP	ゴシック	本文・見出し・ボタン。最初の1つに	100〜900
Noto Serif JP	明朝	落ち着いた印象を出したい見出し	200〜900
BIZ UDPゴシック	ゴシック（UD）	注釈・フォームなどの小さい文字	400・700
Zen Kaku Gothic New	ゴシック	Noto Sans JPとは違う表情がほしい本文・見出し	300〜900（5段階）
M PLUS Rounded 1c	丸ゴシック	親しみを出したいバナー・見出し	100〜900（7段階）
Inter	欧文サンセリフ	数字・ボタン・長めの英文	100〜900
Montserrat	欧文サンセリフ	英字の見出し・キャッチコピー	100〜900
Playfair Display	欧文セリフ	上品に見せたい英字の見出し	400〜900

※太さは数字が大きいほど太くなります（400が標準、700が太字）。

最初の1つに迷ったらNoto Sans JPです。太さが100から900までそろっているので、本文から見出しまでこれ1つでまかなえます。

小さい文字が多いバナーや注釈にはBIZ UDPゴシックが向きます。上で触れたUDフォントの書体で、Google Fontsから入れればMacでも使えます。太さは2段階だけなので、見出しまで通すより小さい文字の担当にしてください。

欧文書体は日本語書体と組み合わせて使います。CSSの font-family に欧文フォントを日本語フォントより先に書くと（例："Inter", "Noto Sans JP", sans-serif）、英数字だけが欧文フォントで表示されます。

上の8書体は、Google公式リポジトリの登録情報ではどれも SIL Open Font License（OFL）です。ただし、Google Fontsの書体がすべて同じライセンスとは限りません。Apache 2 ライセンスなどの書体も含まれます。ダウンロードの前に、書体ごとの配布ページでライセンス表記を確認してください。OFLで何ができるかは、後半の「ライセンス」の項目で説明します。

サイトにWebフォントとして読み込む場合は、使う太さを2つ程度に絞ってください。日本語の書体は文字数が多く、太さを増やすほど読み込むファイルが増えて表示が重くなるためです。

参考サイトで見かけた書体の名前が分からないときは、画像から調べる方法があります。手順は以下の記事にまとめています。

媒体別の選び方｜バナー・LP・コーポレートサイトで基準が変わる

同じWebの仕事でも、媒体が変わればフォントの基準も変わります。表示されるサイズと、読者がその画面に向き合う時間が違うからです。

バナー・SNS画像｜小さく表示される前提で選ぶ

一覧やタイムラインの中に小さく並ぶ前提で選びます。太いウェイトがあって、字形が判別しやすい書体が向きます。1枚に使う書体は1〜2種類までに抑えます。種類を増やすほど、情報の優先順位が伝わりにくくなります。

LP｜読ませる本文と、押させる見出しで役割を分ける

LPは、読ませる長文と、行動してもらうための見出し・ボタンが同じページに同居します。本文は可読性を優先し、見出しは印象を優先する。この2つを1つの書体でまとめようとすると、どちらかが弱くなります。LPは売上のための媒体なので、見出しとボタンの文字は迷わず太いウェイトを当ててください。

コーポレートサイト｜長期運用で破綻しない書体を選ぶ

公式サイトは信頼のための媒体です。クセの強い書体で個性を出すより、ウェイトがそろっていて端末差で崩れにくい書体を選びます。運用が数年単位になるため、担当者が変わっても同じ指定を再現できるかどうかも、判断材料のひとつです。

比べるポイント	バナー・SNS画像	LP	コーポレートサイト
表示サイズ	小さい（一覧の中）	大小が混在	標準的な本文サイズ中心
優先するもの	一瞬での判別	可読性と訴求の両立	信頼感と読みやすさ
書体の種類数	1〜2種類	2種類まで	1〜2種類で統一
ウェイト	太め中心	本文は標準・見出しは太め	標準＋太めの2段階

媒体の印象は、書体と色の組み合わせで決まります。色の決め方は以下の記事で整理しています。

フォントを決める前に確認する3つ（ライセンス・ウェイト・表示のさせ方）

1、ライセンス（仕事で使えるか）

SIL Open Font License（OFL）とは
公式サイトでは、Webサイトを含む幅広い用途で使えて、改変と再配布も自由にできると案内されています。謝辞（acknowledgement）も不要です。ただし Reserved Font Name が宣言されている書体は、改変時に名称の変更が必要になる場合があります。

ライセンスの名前が同じでも、配布元が独自の条件を添えていることがあります。使う前に配布元の表記を自分で読むところまでを作業に入れてください。クライアントワークでは、どの書体をどの条件で使ったかを記録しておくと、あとから説明できます。

2、必要なウェイトがそろっているか

太字が用意されていない書体に、ソフト側の機能で無理に太さを足すと、字形がつぶれて輪郭がぼやけます。見出しで使う書体は、太いウェイトが最初から用意されているかを先に確認してください。ヒラギノ角ゴのようにW0からW9まで段階がある書体は、本文から見出しまで1つでまわせます。

3、Webでどう表示させるか

CSSでは、フォントを1つだけ指定する書き方は避けます。MDNでは、指定したフォントが利用可能である保証はないため、font-family のリストには総称ファミリーを少なくとも1つ常に追加しておくべきだと説明されています。

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               sans-serif;
}

優先したい順に並べ、最後に sans-serif などの総称ファミリーを置く。これで、候補が1つも入っていない端末でも近い雰囲気の書体で表示されます。

Webフォントを読み込めば端末差はなくなりますが、読み込むファイルが増えるぶん表示は重くなります。端末ごとの見た目と表示速度のどちらを取るかを媒体ごとに決めてください。

コーポレートサイトの見出しだけWebフォントにして、本文は端末のフォントに任せるという折衷もよく使います。

初心者がやりがちなフォント選びの失敗3つと直し方

失敗1｜書体の種類を増やしすぎる

見出し・本文・注釈でそれぞれ違う書体を使い、1枚のバナーに4種類入っているような状態です。種類が増えると、どこが主役か伝わらなくなります。

直し方は、1媒体あたり2種類までと先に決めて、残りの差はサイズと太さでつけることです。

失敗2｜フォントを変える前に、サイズ差と文字間を整えていない

「読みにくいからフォントを変えよう」と考えたとき、原因が書体ではなく文字の大小の差や間隔にある場面はかなり多いです。

見出しと本文の差のつけ方はジャンプ率とは？文字サイズの差でデザインの印象を変える方法、文字の間隔の調整はカーニングとは？文字詰めの判断基準とPhotoshopでの調整方法で判断基準を説明しています。この2つを整えてから、それでも気になるときに書体を変えてください。

失敗3｜「好きなフォント」で選んでしまう

自分の好みで選んだ書体が、読者層に合っていないケースです。40代以上の方に向けた商品のLPで、細くて小さい明朝体を本文に使えば、内容は読まれません。

選ぶ基準に置くのは誰に何を伝える媒体かで、自分の好みは後回しです。候補が2つで迷ったら、想定読者に近い方に見てもらうのがいちばん早い確認方法です。

まとめ

Webデザインのフォント選びは、書体の名前を覚える作業ではありません。目的を決め、媒体を決め、本文か見出しかを分け、ウェイトを確かめ、ライセンスと表示方法を確認する。この順番を守っていれば、候補が多い場面でも手は止まらなくなります。

1、フォントは「目的→媒体→本文か見出しか→ウェイト→ライセンスと表示方法」の順で決める。
2、PCに入っている書体（游ゴシック・ヒラギノ角ゴなど）で足りるかを確認する。
3、読みにくいと感じたら、書体を変える前にサイズ差と文字間を見直す。

参考にした情報源

• Microsoft Learn「Font List Windows 11」https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list
• Apple サポート「Fonts included with macOS Monterey」https://support.apple.com/en-us/103203
• SIL Open Font License 公式サイトhttps://openfontlicense.org/
• Google Fonts 公式リポジトリ（ライセンス表記）https://github.com/google/fonts
• MDN「font-family」https://developer.mozilla.org/ja/docs/Web/CSS/font-family
• モリサワ「UDフォント」https://www.morisawa.co.jp/fonts/udfont/

※2026年10月時点の各ページの記載にもとづきます。WindowsとmacOSの収録フォントは、OSのバージョンや追加機能のインストール状況によって変わります（Appleの一覧はmacOS Montereyのものです）。