ホームページのフォントの選び方｜Webフォントと端末のフォント

ホームページの書体は、会社の印象を決める要素の一つです。同じ文章でも、ゴシック体か明朝体か、太いか細いかで、受ける印象が変わります。一方で、ホームページの書体には印刷物と違う事情があります。見る人の端末に入っている書体でしか表示できないこと、書体のデータを読み込むとページの表示に時間がかかることです。

この記事では、端末に入っているフォントと Web フォントの違い、Google Fonts の日本語フォントの使い方と注意、本文を読みやすくする文字の大きさ・行間・色の目安、ロゴや印刷物の書体とのそろえ方をまとめます。書体のライセンスの細かな確かめ方はフォントのライセンスで注意することで扱っています。仕様の説明は、2026年10月時点で web.dev と W3C が公開している資料によります。

端末のフォントと Web フォントの違い

ホームページの文字は、見る人の端末（パソコンやスマートフォン）の中にある書体で表示されます。サイトで書体を指定する方法は、大きく2つです。

	端末に入っているフォントを使う	Web フォントを使う
仕組み	端末にもともと入っている書体を指定する	書体のデータを、ページを開いたときにインターネットから読み込む
見え方	端末ごとに少しずつ違う書体になる	どの端末でも同じ書体になる
表示の速さ	読み込みが無いので速い	書体のデータを読み込む時間がかかる
費用	かからない	無料の書体と有料の書体がある
向いている場面	本文、たくさんの文章	見出し、印象を大事にしたい部分

端末に入っている日本語の書体の例として、Windows には游ゴシック・メイリオ、Mac や iPhone にはヒラギノ角ゴシックなどが入っています。端末のフォントを指定する場合は、「Mac ならこれ、Windows ならこれ」と候補を並べて指定するのが一般的です。

Web フォントは、端末に入っていない書体でも、ページを開いたときにデータを読み込んで表示する仕組みです。どの端末で見ても同じ書体にできるので、ロゴや印刷物と同じ書体でサイトをそろえたいときに使います。

日本語の Web フォントは重くなりやすい

英語の書体は数百字あれば足りますが、日本語の書体は、ひらがな・カタカナ・漢字を合わせて数千〜2万字以上を収めています。そのため、日本語の Web フォントはデータが大きくなりやすく、読み込みに時間がかかると、文字がしばらく表示されない、あとから書体が切り替わってレイアウトがずれる、といったことが起きます。

web.dev の解説（フォントの最適化のベストプラクティス）では、次のような工夫が紹介されています。

• WOFF2 の形式を使う：圧縮率の高いフォントの形式
• サブセット化する：使う文字だけにデータを絞る。日本語・中国語・韓国語の書体では特に効果が大きいとされている
• font-display を指定する：書体の読み込みを待つ間に、端末のフォントで先に文字を出すか（swap）、などを決める
• 書体の数を減らす：書体と太さの数が増えるほど、読み込むデータが増える

実務では、使う Web フォントは1〜2書体、太さは2〜3種類までに絞ると、表示の速さと見た目のバランスを取りやすくなります。本文は端末のフォント、見出しだけ Web フォント、という組み合わせもよく使われます。

Google Fonts の日本語フォント

Google Fonts は、Google が提供する無料の Web フォントのサービスです。日本語の書体も、Noto Sans JP（ゴシック体）・Noto Serif JP（明朝体）・BIZ UDPゴシック・M PLUS 1p・Zen Kaku Gothic New など、いくつも公開されています。日本語の書体は、使う文字ごとに細かく分けて配信される仕組みになっていて、ページに出てくる文字の分だけを読み込みます。

使うときに確かめることは次のとおりです。

確かめること	内容
ライセンス	多くは SIL Open Font License（OFL）。OFL の公式サイトでは、本・ポスター・ロゴ・ウェブサイトで使えると説明されている。書体ごとに示されているライセンスを確かめる
太さの数	書体によって用意されている太さが違う。使う太さだけを読み込む
読み込み方	Google のサーバーから読み込む方法と、データを自分のサーバーに置く方法がある。どちらにするかは制作会社と決める
ロゴや印刷物との関係	同じ書体を名刺やチラシでも使うなら、印刷の用途でもライセンスを確かめる

OFL の書体は、改変や再配布も条件付きで認められていますが、書体のデータそのものを単体で売ることは認められていません。サイトや印刷物で使う分には、通常は問題になりません。

本文を読みやすくする目安

書体を選ぶより先に、文字の大きさ・行間・色を整えるほうが、読みやすさへの効き目は大きいことが多いです。

項目	目安	考え方
本文の文字の大きさ	16px 前後	スマートフォンでも拡大せずに読める大きさ。高齢の人が多く見るサイトは少し大きめに
行間	文字の大きさの1.7〜2倍程度	日本語は英語より詰まって見えるので、行間を広めに取る
1行の長さ	35〜45字前後	長すぎると次の行を探しにくくなる
文字と背景の明るさの差	4.5:1 以上	WCAG 2.2 の達成基準 1.4.3（レベル AA）で、通常の文字に求められるコントラスト比
拡大したとき	200% まで拡大して読める	WCAG 2.2 の達成基準 1.4.4（レベル AA）
書体	本文はゴシック体が無難	明朝体は品のある印象だが、細い太さを小さく使うと画面では読みにくい

薄い灰色の文字は、上品に見えても読みにくく、コントラストの基準を満たさないことがあります。本文の文字は、黒に近い濃い色にしておくのが安全です。

ロゴや印刷物の書体とそろえる

会社の見た目をそろえるには、ロゴ・名刺・チラシ・ホームページで、使う書体の役割を決めておきます。

1. 見出しの書体：会社の印象を表す書体。ロゴに近い雰囲気のものを選ぶ
2. 本文の書体：読みやすさを優先した書体。ホームページでは端末のフォントでもよい
3. 数字や英字の書体：電話番号・価格・英語の表記に使う書体

印刷物で使っている書体が Web フォントとして使えない場合は、雰囲気の近い Web フォントか端末のフォントを「ホームページ用の代わりの書体」として決めておきます。書体と色の決め方をまとめた資料の作り方はブランドガイドラインとは、見た目のそろえ方は名刺・チラシ・サイトの見た目を揃える方法を参照してください。

書体を決めるときのチェックリスト

• 見出し・本文・数字の書体の役割を決めた
• Web フォントは1〜2書体、太さは2〜3種類までに絞った
• 使う書体のライセンスで、ウェブでの使用が認められている
• 本文の文字は16px 前後、行間は1.7〜2倍程度
• 文字と背景のコントラストが十分にある（薄い灰色の本文にしていない）
• スマートフォンで実際に開き、文字が遅れて出たりずれたりしないか見た
• 印刷物の書体がウェブで使えない場合の代わりの書体を決めた

まとめ

ホームページの書体は、端末に入っているフォントと Web フォントを組み合わせて決めます。日本語の Web フォントは重くなりやすいので、書体と太さの数を絞り、本文は端末のフォント、見出しだけ Web フォントという使い分けも有効です。読みやすさは、書体より文字の大きさ・行間・コントラストで大きく変わります。

Lapisデザインラボのブランドの制作では、色・書体・写真の使い方をまとめたブランドガイドをお作りしています。内容は料金プランをご覧ください。