フォントサイズは何px？ホームページの文字が小さいときの直し方

文字が小さすぎないとは？

文字が小さすぎないとは、ホームページの本文やボタン、注意書きの文字が、スマホでも拡大せずに読める大きさになっている状態のことです。本文だけでなく、料金の条件や注意書き、フッターの会社情報のように、つい小さくしがちな文字も含めて確かめます。

Webサイトの文字の大きさは、多くの場合「px（ピクセル）」という単位で、見た目の設定（CSS）に書かれています。同じ 14px でも、パソコンの大きな画面とスマホの小さな画面では読みやすさが変わるため、スマホで読む人の目で確かめることが大切です。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-12 文字が小さすぎない」にあたり、77's Check!! の「No.42 文字が小さすぎない」と同じ項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

Webサイトのフォントサイズと行の高さの目安

文字の大きさに法律のような決まりはありませんが、国や国際的な団体が、読みやすさの目安を公開しています。中小企業のホームページでも、次の目安から確かめるとよいでしょう。

大きさだけでなく、行の高さと色の濃さも読みやすさを左右します。文字が十分な大きさでも、行が詰まっていたり、背景との差が小さい薄い灰色だったりすると、スマホでは読みにくくなります。

文字が小さいと、何が起きるか

文字が小さいと、スマホで開いた人は、読む前に指で拡大する手間を求められ、内容を確かめる前にページを閉じてしまうことがあります。拡大すると今度は横にはみ出し、左右に動かしながら読むことになるため、長い説明ほど読まれにくくなります。

とくに気をつけたいのは、料金の条件や注意書き、申し込みの決まりなど、小さく書かれやすい部分です。大事な条件が読み飛ばされると、問い合わせのあとで「聞いていなかった」という行き違いが起きやすくなります。手元のスマホでホームページを見る経営者や決裁をする人にも、小さい文字を読みづらいと感じる人はいます。

なお、文字の大きさは、検索の順位のためというより、読む人のための項目です。Google の Chrome チームは、Lighthouse 13 で文字の大きさの監査を外した理由を、小さい文字は読みやすさの問題だが、今は検索の面での懸念だと示すものがないため、と説明しています。

この項目は、作った人や更新する人ほど気づきにくいのが特徴です。パソコンの大きな画面で作業していると、スマホでの小ささが分かりません。初めて読む人と同じように、自分のスマホで拡大せずに読んでみることが、確かめるときの出発点になります。

自社のホームページで確かめる方法

文字の大きさは、自分のスマホで主なページを拡大せずに読むことで、まず確かめられます。そのうえで、パソコンの Chrome を使うと、実際の文字の大きさを数字で確かめられます。

1. 自分のスマホで、主なページを拡大せずに読む
   トップ、サービス、料金、会社概要、問い合わせのページを開き、指で拡大せずに本文を読めるかを確かめます。料金の条件や注意書き、フッターの会社情報など、小さく書かれた部分も読んでみてください。
2. 社内の何人かにも、同じように読んでもらう
   年代や目の見え方の違う何人かに同じページを読んでもらい、読みにくいと感じた場所を集めます。作った人や更新している人ではない人に頼むのがこつです。
3. スマホの文字の大きさの設定を大きくしてみる
   スマホの設定で文字の大きさを大きくしてから、同じページを開きます。文字が重なったり、はみ出したり、ボタンの文字が切れたりしないかを確かめてください。WCAG 2.2 の達成基準 1.4.4 では、文字を200％まで拡大しても内容や機能が損なわれないことが求められています。
4. パソコンの Chrome で、本文の文字の大きさを数字で見る
   パソコンの Chrome で本文の上を右クリックし、「検証」から開く開発者ツールの「計算済み」（Computed）の欄で、font-size と line-height を見ます。本文が 16px より小さくないか、注意書きが 14px より小さくないかを確かめます。
5. 色の濃さも、あわせて確かめる
   同じ開発者ツールで文字の色を選ぶと、背景とのコントラスト比が表示されます。本文が薄い灰色になっていないか、4.5:1 以上あるかを見ておくと、読みやすさの見直しが一度で済みます。

以前は、Google の PageSpeed Insights（Lighthouse）でも文字の大きさを確かめられましたが、Lighthouse 13 でこの監査は外されています。今は、自分の目とパソコンの Chrome で確かめるのが確実です。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。文字の大きさのほかに、リンクの見分けやすさやスマホ対応など、ホームページの基本となる項目をあわせて確かめられます。

ホームページの文字が小さくなる、よくある原因

ホームページの文字が小さくなる原因は、大きく分けて4つあります。多くは、パソコンの画面で作ることや、すっきり見せたいという意図から生まれたもので、作り方の良し悪しというより、スマホで読む人の目で確かめる手順がなかったことから起きます。

パソコン向けの小さな文字のまま、スマホでも表示している

パソコンの画面を前提に、本文を 12px や 13px で作っていると、スマホではさらに小さく感じます。スマホに画面の幅を伝える指定（viewport のメタタグ）がないページでは、ブラウザがページをパソコンの幅（約980px）で組み立てて縮めるため、文字がいっそう小さくなります。

注意書き・料金の条件・フッターだけを小さくしている

本文はちょうどよい大きさでも、注意書きや料金の条件、フッターの会社情報だけを小さくしている例はよくあります。目立たせたくない、という意図で小さくしがちな部分ですが、デジタル庁のデザインシステムでは、付随的な情報でも 14 CSS px 未満は原則として使わないとしています。

文字を画像にしている

バナーや料金表、図の中の文字を画像にしていると、スマホの画面に合わせて画像ごと縮み、文字も小さくなります。拡大するとぼやけ、スマホの文字の大きさの設定も効きません。WCAG 2.2 の達成基準 1.4.4 でも、文字の画像は文字を大きくする対象から外れており、画像の中の文字は読む人の側で大きくできません。

行が詰まっている、文字の色が薄い

文字の大きさは十分でも、行の高さが文字の大きさと変わらないくらい詰まっていたり、背景に近い薄い灰色で書かれていたりすると、読みにくさは同じように残ります。デザインを整えるために、本文の色を薄くしている例も少なくありません。

文字の大きさの直し方（対策は3つ）

文字の大きさは、文字の決まりをつくり、サイト全体の見た目の設定（CSS）に反映し、ページを足すたびに小さい文字が増えていないかを確かめることで改善できます。文章そのものを書き換えなくても、見た目の設定を直すだけで全体に反映できる場合が少なくありません。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：文字の決まりを、表にまとめる

最初にすることは、文字の大きさの決まりを決めることです。表の形は「種類／大きさ／行の高さ／色」がおすすめです。たとえば、「本文＝16px 以上・行の高さ1.5倍以上・濃い色」「注意書き・フッター＝14px 以上」「見出し＝本文より大きく」のように決めます。

あわせて、確かめ方の手順1〜4で見つけた読みにくい場所と、文字を画像にしている場所を一覧にしておくと、制作会社に一度で伝わります。読みにくい場所は、スマホの画面を写して残しておくと分かりやすくなります。

目安として、決まりづくりと一覧づくりは、担当者1人で1〜2時間ほどです。自社で行えば費用はかかりません。

対策2：見た目の設定（CSS）で、サイト全体に反映してもらう

見た目の設定を直すのは、制作会社に頼みます。対策1の表と一覧を渡せば、どこをどう直したいかが一度で伝わります。

頼むことは主に4つあります。1つ目は、本文の文字の大きさを 16px 以上にし、注意書きやフッターも 14px より小さくしないことです。2つ目に、本文の行の高さを文字の大きさの1.5倍以上にし、文字の色を背景との差が十分な濃さにしてもらいます。3つ目は、全ページに viewport のメタタグが入っているかを確かめ、なければ入れてもらうことです。4つ目に、文字を画像にしている料金表やバナーを、できるところから文字に置き換えてもらいます。

費用と手間は、ホームページの作りによって変わります。文字の大きさがサイト全体の共通の設定で決まっていれば、設定を直すだけで全ページに反映できることが少なくありません。ページごとに文字の大きさを指定している場合や、画像の文字を置き換える場合は、主なページから順に直すかどうかを含めて、作業の範囲と費用を相談するのが確実です。

対策3：ページを足すときに、小さい文字を増やさない

一度直しても、記事やキャンペーンのページ、バナーを足すたびに、小さい文字や画像の文字が増えることがあります。小さい文字を増やさないポイントは3つです。

1つ目は、ページを公開する前に、自分のスマホで拡大せずに読めるかを確かめることを、社内の手順に入れることです。2つ目に、バナーや表を作るときは、文字を画像に入れず、ページの文字として書く決まりを、更新する人やデザインを頼む先に共有します。3つ目は、半年に1回など決まった時期に、社内の何人かにスマホで読んでもらい、読みにくい場所を集め直すことです。

制作会社に頼むときの伝え方

制作会社に頼むときは、対策1の文字の決まりと、読みにくい場所の一覧、スマホの画面の写しを添えて、「どのページの、どの文字が、スマホでどう見えているか」を伝えると、確認が一度で済みます。文字の小ささは、パソコンの画面で作ることから起きやすいだけなので、頼めば直せる部分です。誰が悪いかではなく、これから文字の決まりを一緒に守ることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• 本文・注意書き・フッターの文字の大きさと行の高さが、共通の設定で決まっているか
• 全ページに viewport のメタタグが入っているか
• 文字を画像にしている料金表・バナー・図の一覧
• 本文の文字の色と背景のコントラスト比
• 直した後に、スマホで拡大せずに読めることを確かめた結果

文字の大きさとあわせて確かめたい項目

文字が小さすぎないかは、見ている人を問い合わせまで迷わず案内するための項目（サイト顧客誘導力）の1つです。読みやすさや使いやすさに関わる、次の項目もあわせて確かめておくと、改善の効果を確かめやすくなります。

• スマホ対応：スマホで開いたときに、画面の幅に合わせて表示され、横にはみ出さないか。
• リンク視認性：本文の中のリンクやボタンが、押せると見て分かる形になっているか。
• スマホで押せない・重なる要素：スマホでボタンが押せない、要素が重なって隠れている、といったことがないか。
• 画像の最適化：画像が大きすぎてページを重くしていないか、文字を画像にしすぎていないか。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• 文字が小さすぎないとは、本文や注意書きの文字がスマホでも拡大せずに読める状態のことです。
• デジタル庁のデザインシステムでは、本文は 16 CSS px 以上、14 CSS px 未満は原則使わない、行の高さは1.5倍以上を示しています。
• 自分のスマホで拡大せずに読み、社内の何人かにも読んでもらい、開発者ツールで数字を確かめます。
• パソコン向けの小さい文字、注意書きだけ小さい、文字の画像、詰まった行や薄い色が、よくある原因です。
• 文字の決まりは自社でつくり、見た目の設定は制作会社に直してもらい、公開前にスマホで確かめます。

文字の大きさは、パソコンで作業していると気づきにくい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、文字の大きさを含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。