フォントの選定は、感覚で決められがちな領域です。しかし実務では、判断基準は3つに整理できます。伝えたい印象に合っているか、読めるか、表示速度を犠牲にしていないか。この順で確認すれば、好みの議論に陥りません。
特に見落とされやすいのが3番目です。日本語のWebフォントは文字数が多いため、欧文フォントと比べてファイルサイズが大きくなります。読み込みが遅れると、文字が表示されない時間が生まれ、離脱の原因になります。
この記事では、書体が与える印象の違い、業種別の選定基準、可読性の確認方法、そして表示速度への配慮までを解説します。
この記事でわかること
・明朝体・ゴシック体が与える印象の違いと使い分け
・業種・目的別のフォント選定の考え方
・見出しと本文でフォントを変える場合の組み合わせ方
・日本語Webフォントの表示速度への影響と対策
・選定を社内で合意するための判断基準
結論：印象・可読性・速度の順で判断する
| 判断軸 | 確認すること | 判断できないときの対処 |
|---|---|---|
| 1. 印象 | ブランドコンセプトで言語化した印象と合っているか | コンセプトが未定なら、先にそちらを決める |
| 2. 可読性 | 本文サイズで読み続けられるか。実機で確認したか | 迷ったら可読性を優先する |
| 3. 表示速度 | ファイルサイズと読み込み方式は許容範囲か | 使用ウェイトを絞る、本文はシステムフォントにする |
この順序が重要です。印象で選んだ結果、本文が読みにくくなるのは本末転倒です。特に細いウェイトの明朝体は、スマートフォンの小さい文字では読みづらくなります。
フォントは好みではなく、印象・可読性・速度の3軸で決めてください。
本文の可読性を犠牲にする選定は、どんなに印象が良くても失敗です。
書体が与える印象
| 書体 | 印象 | 向いている用途 | 注意点 |
|---|---|---|---|
| ゴシック体（サンセリフ） | 明快、現代的、機能的 | 本文、UI、Webサイト全般 | 太さで印象が大きく変わる |
| 明朝体（セリフ） | 品格、伝統、落ち着き | 見出し、和の業態、高価格帯 | 細いウェイトは小サイズで読みにくい |
| 丸ゴシック | 親しみ、やわらかさ、安心 | 子ども・医療・ペット関連 | 高級感や専門性は出しにくい |
| 筆書体・デザイン書体 | 個性、特別感 | ロゴ、キャッチコピーのみ | 本文には使わない |
太さ（ウェイト）で印象は変わる
同じゴシック体でも、細いウェイトは繊細・上品に、太いウェイトは力強く・親しみやすく見えます。書体を増やすより、同じ書体のウェイトを使い分けるほうが、統一感を保ちながら表現の幅を確保できます。
実務では、本文用（Regular）、強調用（Medium／Bold）、見出し用（Bold／Black）の3段階あれば足ります。
業種・目的別の選定基準
「この業種はこの書体」という固定の正解はありません。伝えたい印象から逆算してください。
| 伝えたい印象 | 書体の方向性 | 例 |
|---|---|---|
| 信頼・堅実 | 標準的なゴシック体、標準〜太めのウェイト | 士業、金融、BtoBサービス |
| 品格・こだわり | 明朝体を見出しに、本文はゴシック体 | 和食、旅館、高価格帯サービス |
| 親しみ・安心 | 丸ゴシックまたはやわらかいゴシック体 | 小児科、ペットサロン、教室 |
| 先進・専門性 | 幾何学的なゴシック体、細めのウェイト | IT、コンサルティング |
| 活気・勢い | 太いゴシック体、大きめのジャンプ率 | 飲食店、小売、キャンペーン |
選定時に確認すべきなのが、同商圏の競合が使っている書体です。同業が同じ方向性で揃っていると、記憶に残りません。印象の言語化についてはブランディングとは？価格競争から抜け出す進め方と効果の測り方で解説しています。
見出しと本文の組み合わせ
2書体まで、が実務的な上限です。3書体以上を使うと統一感が失われます。
| 組み合わせ | 効果 | 注意点 |
|---|---|---|
| 見出し・本文とも同じゴシック体（ウェイト違い） | 統一感が高く、最も扱いやすい | 単調に見える場合は、ジャンプ率で差をつける |
| 見出しは明朝体、本文はゴシック体 | 品格と読みやすさを両立 | 明朝の見出しは太めのウェイトを選ぶ |
| 見出しはデザイン書体、本文はゴシック体 | 個性が出る | デザイン書体はロゴ周辺のみに限定する |
和文と欧文の混在
日本語のフォントには欧文の字形も含まれていますが、専用の欧文フォントと比べると完成度が劣ることがあります。英数字が多いサイトでは、欧文部分だけ別フォントを指定する方法があります。ただし、ベースラインや文字の太さが揃わないと、かえって不揃いに見えます。実際の文章で確認してから採用してください。
可読性の確認
選定時は大きなサイズのサンプルで見るため、印象が良く見えます。必ず本文サイズ、実機、実際の文章で確認してください。
- スマートフォンの実機で、本文サイズ（16px前後）の文章を表示する
- 漢字・ひらがな・カタカナ・英数字が混在した実際の文章を使う
- 明るい屋外を想定し、画面輝度を下げても読めるか確認する
- 細いウェイトを本文に使う場合、特に慎重に確認する
- 背景色との組み合わせでコントラスト比を満たすか確認する
最後の項目は数値で確認できます。配色との関係についてはWebサイトの配色の決め方｜ブランドカラーから展開する方法で解説しています。あわせて行間や1行の文字数も可読性に影響します（参考：Webデザインにおける余白の効果）。
表示速度への配慮
日本語Webフォントは重い
欧文フォントが数十〜百数十文字で構成されるのに対し、日本語は漢字を含めて数千文字規模になります。そのためファイルサイズが大きく、読み込みに時間がかかります。
読み込みが遅れると、文字が表示されない、または別のフォントで一瞬表示されてから切り替わる、といった状態が発生します。広告流入では、この待ち時間がそのまま離脱につながります。
対策
| 対策 | 効果 | 注意点 |
|---|---|---|
| 使用ウェイトを絞る | ウェイトごとにファイルが必要。3種類までに抑える | デザインの幅は狭まる |
| 本文はシステムフォントにする | 読み込みゼロ。最も効果が大きい | 端末によって見え方が変わる |
| 見出しだけWebフォントを使う | 使用文字数が限られ、軽くなる | 見出しと本文の書体が変わる |
| サブセット化する | 使用する文字だけに絞る | 動的なテキストには使えない |
| 読み込み方式を指定する | 表示されない時間を減らす | 実装時に指定が必要 |
実務で効果が大きいのは、2番目と3番目の組み合わせです。見出しにブランドらしさを持たせ、本文はシステムフォントで軽く読みやすく。この構成なら、印象と速度を両立できます。
速度の確認方法
フォントを変更したら、変更前後で表示速度を計測してください。無料の計測ツールで確認でき、特にモバイル環境での数値を見ます。体感で判断せず、数値で比較することが重要です。
社内で合意するための進め方
フォント選定は好みの議論になりやすいため、判断の順序を先に共有してください。
- ブランドコンセプトから、伝えたい印象を1〜2語で言語化する（例：堅実、親しみやすい）
- 候補を2〜3案に絞る：多すぎると決まらない
- 実際の文章・実機で比較する：サンプル文字ではなく、自社のサイトの文章を使う
- 本文の可読性を最優先で判断する：印象が良くても読みにくければ却下
- 表示速度を計測して確認する
- 決定後、使用ウェイトと用途をルール化する
6番目まで行ってください。ルール化しないと、ページが増えるたびに新しいフォントやウェイトが混ざります。デザインルールとして1枚にまとめ、外注時にも共有します。
よくある失敗
失敗1：大きいサイズだけで判断する
選定画面では大きく表示されるため、細いウェイトの明朝体も美しく見えます。本文サイズで確認すると、印象が変わります。
失敗2：書体を増やす
3書体以上を使うと統一感が失われます。増やしたい場合は、書体ではなくウェイトで変化をつけてください。
失敗3：表示速度を確認しない
日本語Webフォントは重く、複数ウェイトを読み込むと影響が大きくなります。変更前後で必ず計測してください。
失敗4：ライセンスを確認しない
Webフォントには、利用範囲や月間表示回数に条件が設定されているものがあります。商用利用の可否、対象ドメイン、料金体系を導入前に確認してください。
失敗5：決めた後にルール化しない
更新担当者が変わると、別のフォントが混ざります。使用ウェイトと用途を明記して共有してください。
よくある質問
Q. 無料のWebフォントで問題ありませんか？
問題ありません。無料でも品質の高い日本語フォントがあります。ただしライセンス条件（商用利用の可否、再配布の制限）は必ず確認してください。有料フォントを選ぶ理由は、品質より「他社と被りにくい」ことにある場合が多くなります。
Q. システムフォントだけでも大丈夫ですか？
十分に成立します。表示速度が最も速く、端末に最適化されているため可読性も高くなります。ブランドらしさを出したい場合は、見出しだけWebフォントにする構成を検討してください。
Q. 本文に明朝体を使ってもよいですか？
使えますが、スマートフォンでの可読性を必ず確認してください。細いウェイトは小さいサイズで読みづらくなります。使う場合は、やや太めのウェイトを選び、行間を広めに取ってください。
Q. フォントサイズは何pxが適切ですか？
本文で16px前後が目安です。これより小さいと、スマートフォンで読みづらくなります。年齢層の高い顧客が中心なら、17〜18pxを検討してください。書体によって同じサイズでも見え方が変わるため、実機で確認してください。
Q. フォントを変えるとSEOに影響しますか？
書体そのものが順位に影響することはありません。ただし、表示速度の低下はユーザー体験に影響します。重いフォントを複数読み込む構成は避けてください。
まとめ
Webフォントの選定は、印象・可読性・表示速度の順で判断してください。印象で選んだ結果、本文が読みにくくなる、あるいは表示が遅くなるのは避けるべき失敗です。
書体は2種類までに抑え、変化はウェイトでつけます。伝えたい印象をブランドコンセプトから1〜2語で言語化し、候補を2〜3案に絞ってから、実際の文章と実機で比較してください。
日本語Webフォントは文字数が多くファイルサイズが大きいため、使用ウェイトを絞る、本文はシステムフォントにする、見出しだけWebフォントを使うといった対策が有効です。変更前後で速度を計測してください。
「フォントの議論が好みの話になって決まらない」「サイトの表示が遅い」「ページごとに書体がばらついている」といった状態にある場合は、選定基準の共有とルール化から着手してください。
当社ではデザイン制作からWeb制作、表示速度の改善までを横断して支援しています。資料ではデザインルールの整え方をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。
