Webフォントの選び方｜日本語サイトの表示と速度

01はじめに｜この記事でわかること

要点：この記事は、制作会社からフォントの提案を受けて判断に迷う発注側の方に向けたものです。書体の美しさではなく、日本語サイトで実際に問題になる読み込みの重さと、決めるまでの手順を整理します。色の決め方はWebデザインの配色の決め方もあわせてご覧ください。

「この書体、素敵ですね」。デザイン案を見た瞬間はそう思います。問題が出るのは公開したあとです。

スマホで開くと、本文が数秒間まっ白のまま。ようやく文字が出たと思ったら、見出しの形が途中で入れ替わる。日本語サイトのWebフォントでは、これが定番の失敗です。原因は書体選びそのものではなく、日本語の文字数の多さにあります。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが、案件で実際に使っているWebフォントの選び方をまとめます。専門用語は最小限にして、発注側が判断できる形にしました。

本題に入る前に、Webフォントの基本的な仕組みを短時間でつかめる動画をご紹介します。

02Webフォントとは｜端末のフォントとの違い

要点：Webフォントは、サイトを開いたときに書体のデータを一緒に読み込む仕組みです。閲覧者の端末に入っていない書体でも同じ見た目で表示できます。そのかわり、読み込む分だけ表示が遅くなります。ホームページ制作では、この差を最初に説明します。

文字の出し方には、大きく2つのやり方があります。

• 端末標準フォント。閲覧者のスマホやパソコンに最初から入っている書体を使います。追加の読み込みがないので、いちばん速い方法です。ただし、iPhoneとWindowsで見た目が変わります。
• Webフォント。書体のデータをサーバーから配って表示します。誰が見ても同じ形になります。そのかわり、データが届くまで文字が出ません。

企業サイトでWebフォントを使う理由は、ほとんどが統一感です。ロゴや印刷物と同じ書体でそろえたい。この目的自体は正しいのですが、日本語では代償が大きくなります。次の章がその中身です。

03日本語のWebフォントが重くなる理由

要点：理由は文字の数です。欧文の書体が1書体あたり100〜1,000字ほどなのに対し、日本語や中国語の書体は1万字を超えます。同じ1書体でも、抱えているデータの量がまったく違います。速度そのものの考え方は表示が遅い原因と高速化の方法もあわせてご覧ください。

Googleの開発者向け資料でも、欧文フォントは1書体あたり100〜1,000字程度、日中韓の書体は1万字を超えると説明されています。ひらがな、カタカナ、漢字、記号。日本語は必要な字数がどうしても多くなります。

結果として、何も手を打たない日本語フォントは数十KBではなくメガバイト単位になるとされています。写真1枚より重い書体を、文字を出すためだけに読み込むわけです。

だからこそ、日本語サイトのフォント選びは「どれが好きか」より先に「どれなら軽くできるか」から入ります。

04書体別・読み込むデータ量の目安

要点：同じ1書体でも、扱い方でデータ量は10倍以上変わります。サブセット化をした日本語フォントは約300KB。何もしないと約2.5MB。太さを3種類読み込むと7MBを超えます。書体が組み込まれている場合もあるので、WordPressのテーマの選び方もあわせて確認してください。

注目していただきたいのは、いちばん下の行です。太さを増やすと、その本数だけデータ量が掛け算で増えます。細字・標準・太字を全部そろえた瞬間に、7MBを超えます。

Webフォントの選び方としては、これで十分です。サブセット化を前提にして、太さは本文用と見出し用の2種類にとどめる。この2つで大半の問題は起きません。

05提供元で選ぶ｜3つの選択肢

要点：Webフォントの入手先は、無料の配信サービス・有料の配信サービス・自社サーバーの3つです。無料は導入が速く、有料は書体の選択肢が広く、自社サーバーは細かく軽量化できます。企業サイトの多くは、無料の配信サービスで足ります。設定を置く場所はWordPress制作の設計にもかかわります。

無料の配信サービスでは、代表的なGoogle Fontsが日本語書体の分割配信に対応しています。指定するだけで、必要な範囲だけが届く仕組みです。手間の少なさでは、これがいちばん現実的です。

自社サーバーに置く方法は、いちばん軽くできます。ただしGoogleの資料でも、CDNとHTTP/2が前提でなければ速くならないと注意されています。自前で持てば速い、という単純な話ではありません。

06導入方法別・本文が読めるまでの時間

要点：体感の差が出るのは、本文が読めるまでの時間です。端末標準フォントなら約0.9秒。軽量化した日本語フォントなら約1.1〜1.2秒。何もしない3ウェイト構成では約2.8秒かかります。スマホ表示の重要性はスマホ対応していないホームページのリスクでも触れています。

軽量化をすれば、Webフォントを使っても標準フォントとの差は0.2〜0.3秒。使わない理由にはなりません。

この表からわかることは1つです。Webフォントが遅いのではなく、扱い方が雑だと遅い。1ウェイトで軽量化すれば、差はほとんど体感できません。

07ゴシックか明朝か｜業種での使い分け

要点：本文はゴシック体が基本です。画面上では線の太さが均一なほうが読みやすく、スマホの小さい文字でも形がつぶれません。明朝体は、格式や落ち着きを出したい見出しに限って使ってください。

紙の印刷物では明朝体が主流です。ところが画面では事情が変わります。明朝体は横線が細く、スマホの本文サイズだと線が消えかけて見えます。

• 本文はゴシック体。業種を問わず、これが基準です。小さい文字でも読めます。
• 明朝体は見出しだけ。士業・医療・伝統産業など、落ち着きを出したい場合に有効です。大きい文字なら細い線も成立します。
• 丸ゴシックは限定的に。保育・介護・教育では親しみが出ます。ただし、金額や規約の表示には向きません。

業種ごとの印象づくりは、書体より色の影響が大きい場面もあります。両方の観点は企業サイトの配色の基本とあわせて検討してください。

もう1つ、見落とされがちな点があります。画面の幅で読みやすさは変わります。同じ書体でもスマホとパソコンでは印象が違うので、切り替えの仕組みはレスポンシブデザインとはで確認しておくと判断が早くなります。

08文字が消える・後から入れ替わる問題

要点：書体が届くまでの数秒間、ブラウザは文字を隠すか、代わりの書体で先に出すかを選びます。この動きは制作側で指定できます。本文は先に出す、見出しは待つ。この使い分けが実務的です。

公開直後によく届く声が2つあります。「最初の一瞬、文字が真っ白です」「読んでいる途中で字の形が変わります」。どちらも不具合ではなく、設定の結果です。

Googleの資料によると、Chromeなどは書体が届くまで最大3秒間、文字の表示を止める初期動作になっています。Safariは届くまで待ち続けます。何も指定しないと、この動きがそのまま出ます。

指定できる方針は主に3つです。

1. 先に代わりの書体で出す。文字がすぐ読めます。かわりに、あとから形が入れ替わります。本文向きです。
2. 間に合わなければ諦める。入れ替わりが起きません。読み込みが遅い環境ではWebフォントが使われません。速度を最優先する場合に選びます。
3. 届くまで待つ。見た目は完全に統一されます。そのぶん、最初の表示が遅れます。見出しやロゴ周りに限って使います。

おすすめは1番と3番の組み合わせです。本文はすぐ読めるようにして、見出しだけ待たせる。読者の不満がいちばん少ない形になります。

09フォントの指定をやり直した理由

要点：公開後にフォントを指定し直した案件を整理すると、理由の約6割が速度と表示のちらつきでした。書体の好みが合わなかったという理由は、上位に入りません。公開後の確認項目はホームページ公開後にやることにもまとめています。

目を引くのは3番目です。ライセンスの不一致は、印刷物をつくる段階で発覚します。サイトでは使えた書体が、チラシや名刺では使えない。この順番で気づくと、印刷の日程に響きます。

10ライセンスの確認｜商用利用と改変

要点：無料の書体でも、Webでの配信や改変が禁止されている場合があります。特にサブセット化は「改変」に当たるため、許可の有無を必ず確かめてください。素材全般の考え方はフリー素材の商用利用と同じ発想です。

Googleの資料でも、サブセット化と自社サーバーへの設置が許可されているか、ライセンスを必ず確認するよう注意されています。ここは制作会社任せにせず、発注側でも把握しておきたい部分です。

確認しておく項目は4つです。

• 商用利用の可否。法人サイトは商用です。個人利用に限る書体は使えません。
• Web配信の可否。印刷では使えても、Webフォントとしての配信は別許諾という書体があります。
• 改変・サブセット化の可否。軽量化ができるかどうかを左右します。禁止なら配信サービス経由に切り替えます。
• 表示回数の上限。有料サービスでは月間の表示回数に制限が付く場合があります。

使う書体が決まったら、条件をPDFで保存しておいてください。担当者が代わったときに、同じ確認をやり直さずに済みます。

11フォントが決まるまでの週別スケジュール

要点：フォントの決定にかかる期間は、10ページ規模なら4週間が目安です。最初の週は標準フォントのまま進め、実機での確認を経て、最終週に本番設定を入れます。全体の進み方はホームページ制作の流れをご覧ください。

順番に意味があります。第1週で書体を決めないことが肝心です。画面の構成が固まる前に書体を決めると、あとから文字量が変わったときに合わなくなります。構成の固め方はワイヤーフレームとはで解説しています。

12Webフォントの決め方｜5つの手順

要点：決め方は5段階です。用途を分ける、候補を2つに絞る、ライセンスを確認する、実機で計測する、太さと表示方針を確定する。この順に進めれば、公開後のやり直しはほぼ起きません。

発注側が主導できる範囲だけをまとめました。

1. 本文と見出しを分けて考える。本文は読みやすさ、見出しは印象。同じ基準で選ぼうとすると決まりません。
2. 候補を2書体まで絞る。3つ以上並べると社内で意見が割れます。制作会社に2案までと伝えてください。
3. ライセンスを書面で確認する。商用利用・Web配信・改変・表示回数の4点です。ここで1書体に絞れることもあります。
4. 実機で読み込み時間を測る。会社のパソコンではなく、社外のスマホで確認します。数値は制作を任せている会社に出してもらってください。
5. 太さと表示方針を決める。太さは2種類まで。本文は先に出し、見出しは待つ。この2つを議事録に残します。

4番目を飛ばす案件が多いのですが、ここが分かれ目です。数値を見てから決めた案件では、公開後のやり直しがほとんど発生しません。

13まとめ｜「きれいな書体」より「届く書体」

要点：Webフォントの選び方で大事なのは、書体名ではありません。1書体・2ウェイトまでに絞り、サブセット化をして、実機で計測する。この3つを守れば、日本語サイトでも安心して使えます。詳しくはホームページ制作のページもご覧ください。

要点を振り返ります。

• 日本語の書体は1万字を超えます。欧文と同じ感覚では扱えません。
• 重さを決めるのはサブセット化の有無と太さの本数です。書体名ではありません。
• 軽量化した1ウェイト構成なら、標準フォントとの差は0.3秒以内に収まります。
• やり直しの約6割は速度とちらつきが原因です。実機で確認すれば防げます。
• ライセンスは商用・Web配信・改変・表示回数の4点を書面で確認してください。

迷ったときの基準は1つです。その書体は、社外のスマホに何秒で届くか。1秒台なら大丈夫です。それだけです。

14よくある質問

要点：Webフォントの選び方について、よくいただく質問をまとめました。書体を置く場所の設計はサイト構成図の作り方で先に整理しておくと、判断の回数そのものを減らせます。

1. Webフォントは使わないほうが速いですか？

速さだけを見れば、端末標準フォントが有利です。ただし差は0.3秒ほどに収まります。軽量化と太さの制限をしたうえでなら、統一感のメリットが上回る場面が多いです。

2. 日本語のWebフォントは何書体まで使えますか？

1書体が基本です。見出しに別の書体を使いたい場合でも、2書体までにしてください。3書体を超えると、読み込み量が一気に増え、デザインの統一感も崩れます。

3. サブセット化は必ず必要ですか？

自社サーバーに書体を置く場合は必要です。配信サービスを使う場合は、必要な範囲だけを届ける仕組みが備わっていることが多く、自前の作業は不要になります。

4. 無料のWebフォントでも企業サイトで使えますか？

使えます。ただし、商用利用とWeb配信が許可されているかを確認してください。無料でも用途が限定されている書体があります。条件は書面で保存しておくと安全です。

5. 公開後に書体を変更できますか？

できます。指定を変えるだけなら短時間で済みます。ただし文字の幅が変わるため、見出しの改行位置やボタンの大きさを調整し直す作業が発生します。