HP / Webサイトの適正なフォントサイズ徹底解説

「Webサイトのフォントサイズ、どれくらいが適切なんだろう？」「自分のWebサイト、最適なフォントサイズになってるか自信がない…」そんな悩みを抱えていませんか？

Webサイトのフォントサイズは、ユーザーの読みやすさ、そしてWebサイト全体の印象を大きく左右する、非常に重要な要素です。

好みもありますが・・適切なフォントサイズを設定することで、ユーザーはストレスなくコンテンツを読むことができ、Webサイトの離脱率低下、コンバージョン率向上に繋がります。

この記事では、Webサイトのフォントサイズの基本から、デバイス別の推奨サイズ読みやすさを向上させるためのテクニックをお伝えします。Webサイトを制作する際の参考になれば幸いです。

Contents

はじめに　フォントサイズの重要性
- フォントサイズの基本：単位の種類と特徴
デバイス別推奨フォントサイズ
読みやすさを向上させるフォントサイズ以外の要素
Webデザイナーなら導入必須！フォント情報を確認できるChrome拡張機能「WhatFont」
まとめ

はじめに　フォントサイズの重要性

Webサイトにおけるフォントサイズは、非常に重要な要素です。

適切なフォントサイズを設定することで、レイアウトが組みやすく、見え方が良くなるだけではなく、

以下のようなメリットがあります。

ユーザビリティの向上: 適切なフォントサイズは、ユーザーがストレスなくコンテンツを読めるようにするために不可欠です。文字が小さすぎると読みにくく、大きすぎると間延びした印象を与えてしまいます。
離脱率の低下: 読みにくいWebサイトは、ユーザーの離脱を招きます。適切なフォントサイズを設定することで、ユーザーの離脱率を低下させ、Webサイトの滞在時間を延ばすことができます。
コンバージョン率の向上: ユーザーがコンテンツを読みやすくなれば、Webサイトの内容を理解しやすくなり、結果として商品購入や問い合わせなどのコンバージョンに繋がりやすくなります。
SEOへの間接的な影響: Googleは、ユーザーエクスペリエンスを重視しており、読みやすいWebサイトを高く評価する傾向があります。適切なフォントサイズは、ユーザーエクスペリエンスを向上させ、間接的にSEO効果を高める可能性があります。
アクセシビリティの向上: 高齢者や視覚障害者など、様々なユーザーがWebサイトを利用することを考慮すると、適切なフォントサイズを設定し、アクセシビリティを向上させることは非常に重要です。

フォントサイズの基本：単位の種類と特徴

フォントサイズを指定する際には、いくつかの単位があります。それぞれの単位の特徴を理解し、適切に使い分けることが重要です。

px（ピクセル）

画面上の1ドットを1とする、絶対的な単位です。環境 (ブラウザやデバイス) に依存せず、常に同じサイズで表示されます。指定したサイズで固定されるため、ユーザーがブラウザで文字サイズを変更しても、反映されません。

em（エム）

親要素のフォントサイズを基準とする相対的な単位です。親要素のフォントサイズが16pxの場合、1em = 16px、2em = 32pxとなります。親要素のフォントサイズを変更すると、子要素のフォントサイズも自動的に変更されるため、レスポンシブデザインに適しています。

親要素のフォントサイズを指定していない場合、デフォルトの16pxになります。

rem（レム）

ルート要素（通常は<html>要素）のフォントサイズを基準とする相対的な単位です。ルート要素のフォントサイズが16pxの場合、1rem = 16px、2rem = 32pxとなります。

emとは異なり、親要素のフォントサイズに影響されないため、より予測可能なサイズ指定が可能です。

vw / vh (ビューポート単位)

vw はビューポート（ブラウザの表示領域）の幅に対する割合、vh は高さに対する割合を示す単位です。
* 1vw はビューポート幅の1%、1vh はビューポート高さの1%に相当します。

画面サイズに応じてフォントサイズが自動的に調整されるため、レスポンシブデザインに適しています。全てのデバイスで同じ比率で見せたい場合にcalc関数で調整して使いますが、私はややこしくなるのであまりお勧めしません。

デバイス別推奨フォントサイズ

結論、本文はPC・スマホともに16pxがGoogleが推奨するフォントサイズ

ですが、一般的には14px～16pxの間で作成されています。しかし、こどもや高齢のユーザーが閲覧するサイトでは17〜18pxの大きさが推奨されるので、ターゲットの年齢層や性質によってフォントサイズを使い分けていきましょう。

私のブログはデザインの解説もあるので15pxとやや小さめにしています。仕事ではほとんど16pxです。ここに関しては好みの問題かもしれません。

	本文	見出し	注意点
PC	14px～18px	本文の1.5倍～2倍程度 (24px～36px)	モニターサイズや解像度によって見え方が異なるため、実際に様々な環境で確認することが重要また高齢者・子供向けのサイトは17～18pxにサイズをあげることもある
スマホ	14px～16px	本文の1.2倍～1.5倍程度 (17px～24px)	画面サイズが小さいため、PCよりも小さめのフォントサイズが推奨されるが、小さすぎると読みにくくなるため、注意が必要
タブレット	15px～18px	本文の1.3倍～1.7倍程度 (20px～31px)	PCとスマートフォンの中間的なサイズであるため、どちらのデバイスでも見やすいフォントサイズを設定する必要がある

デバイス別推奨フォントサイズ早見表

読みやすさを向上させるフォントサイズ以外の要素

フォントサイズだけでなく、以下の要素もWebサイトの読みやすさに大きく影響します。

フォントの種類 (書体)

ゴシック体: 力強く、視認性が高い。見出しや強調したい箇所に適しています。
明朝体: 美しく、上品な印象を与える。長文の本文に適しています。

行間

行間も重要です。狭すぎると、文字が詰まって見え、読みにくくなりますし、広すぎると広すぎると間延びして見えてしまう可能性があります。

一般的には、フォントサイズの1.5倍～2倍程度の行間が推奨されます。CSS の line-height プロパティで調整できます。

文字間

文字間が狭すぎると、文字同士がくっついて見え、読みにくくなりますし、文字間を広げすぎると散漫になり、グループとして認識しづらくなったり間伸びしてしまい、内容が頭に入ってこない可能性があります。よって文字サイズの5%程度が推奨とされています。

CSS の letter-spacing プロパティで調整できます。日本語の場合は、詰めすぎると読みにくくなるため、少し余裕を持たせるのが一般的です。

行長 (1行あたりの文字数)

1行あたりの文字数が多すぎると、視線の移動が大きくなり、読みにくくなります。

日本語の場合は、1行あたり30文字～40文字程度が目安です。

背景色と文字色のコントラスト

背景色と文字色のコントラストが低いと、文字が読みにくくなります。十分なコントラストを確保し、文字をはっきりと認識できるようにしましょう。

WCAG (Web Content Accessibility Guidelines) では、コントラスト比の基準が定められています。

改行と段落

適切な改行と段落分けは、文章の可読性を高めます。

長文の場合は、適度に段落を分け、視覚的な区切りを作ることで、読者の負担を軽減できます。

Webデザイナーなら導入必須！フォント情報を確認できるChrome拡張機能「WhatFont」

次に、気になるサイトのフォント情報を簡単に知ることができる拡張機能をご紹介します！

Google Chrome拡張機能の「WhatFont」は、気になるwebサイトのフォントを簡単に調べることが可能です。

google拡張機能から無料でアクティベートできます。導入したら、右上にカメラのアイコンがつくので、そのアイコンをクリックしてから文字に当てて使います。

右上のカメラアイコン　

【ツールバーに固定】をオンにすれば現れます。

【確認できるフォント情報】
・種類（font-family）
・スタイル（Style）
・サイズ（size）
・太さ（font-weight）
・行間（line-height）
・色（color）

ワンクリックでフォント情報を確認できる便利機能ですので、導入必須です。

気になるサイトのフォント情報が知れるのは大きいですね。

まとめ