ホームページの文字を読みやすくするには？フォント・文字サイズ・行間の決め方

先に、読む本文と短い案内の役割を分ける

最初に、自社のページで読んでもらいたい文章を一段落選びます。本文で分かってほしい内容と、その後に進む案内を別にすると、どこを目立たせ、どこを落ち着いて読ませるかを決められます。

例の本文は、相談前に用意する情報と、地域・費用を案内する条件を伝えています。「点検について相談する」は、その説明を読んだ人が次の場所を見つけるための短い案内です。同じ大きさ・太さにするかは、この役割から考えます。

比べるときは、文章を短くした案と書体だけを替えた案を、同じ変更として扱わないでください。内容まで変えると、読みやすく感じた理由を分けにくくなります。長い製品名、数字、括弧など、実際のページで使う文字も見本へ含めます。

本文を読む場所と、次の案内を探す場所はどこでしょうか。図では同じページの二つの役割を対応させます。

原寸画像を開く

本文では条件を追え、短い案内では次の行き先が見つかるかを読みます。文字の形や設定値の比較は、次の実文字の見本で行います。

見出しは、太く大きいだけの段落にせず、章の関係が分かるHTMLの見出しにします。全体の読む順を整理したい場合は、Webデザインの4原則と修正の伝え方も確認できます。

書体は、端末にあるもの・配信するもの・代替を一組で選ぶ

端末の書体を使う案では、表示する環境による違いを受け止めて選びます。Webフォントを配信する案では、使うファイルの利用条件、読み込みと代替表示までを制作担当と決めます。

端末にある書体を使う

利用者の端末で使える書体を候補順に指定します。全端末に同じ候補があるとは限らず、同じ指定でも字形や改行は変わり得ます。

Webフォントを配信する

指定する書体のデータを読み込みます。必要な日本語文字と太さ、配信量、利用できるサイトや配信方法を確かめ、未読込・読込失敗時にも本文を読めるようにします。

代替書体を決める

希望する書体や一部の文字が使えない場合の候補も指定します。英数字だけで判断せず、日本語・長い名称を含む同じ原稿で改行と重なりを確認します。

使いたい書体がまだ読めないとき、本文は何で表示されるでしょうか。図は、端末の書体・配信する書体・代替の関係を説明します。

原寸画像を開く

書体名だけで承認せず、どこから提供するか、使えないとき何で読むかまで一組にします。図は一般的な構成の説明で、この架空会社の設定記録ではありません。

CSSのfont-familyは候補の優先順を指定します。最後にはsans-serifなどの一般的な分類も置きます。候補にない文字だけ別の書体になることもあるため、指定した名称だけで全ての字形が同じと決めないでください。

.service-copy {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 400;
}

これは指定の形を示す例です。どの候補が実際に使われたかは、対象の端末とブラウザーで確認します。制作担当は開発者ツールの描画されたフォントの情報も見て、選んだ太さや必要文字が意図どおりかを確かめます。

Webフォントには、読み込むまでの見せ方を決めるfont-displayの指定があります。例えばswapでは代替表示から後で書体が切り替わることがあり、改行や案内の位置も変わり得ます。通信が遅い状態と読み込まれない状態でも、同じ原稿を読んで確認します。

利用条件は、実際に選ぶ配布物の提供元で確認します。例えばGoogle FontsのNoto Sans JPの配布元にはOFLの条件が示されていますが、別の書体や配信サービスまで同条件とは限りません。制作担当へ、配布元のURL、利用する書体・太さ、Web配信の可否と条件、必要な著作権・ライセンス表示の保存先を確認してもらいます。

同じ日本語の原稿で、変える条件を一つずつ比べる

書体・太さ・文字サイズを確認したら、同じ文章・同じ幅で行高を比べます。一度に全てを変えず、何が読みづらさに関係したかを、原稿のどこで感じるかと一緒に残します。

文字サイズは文字の大きさ、行高は一行に割り当てる高さです。同じサイズでも、字形や太さが違えば見え方は変わります。本文を一文字ずつ読めることに加えて、次の行へ目を戻しやすいかも確かめます。

次は、本文を18pxにそろえ、行高だけを変えた編集上の比較案です。この二つの数値は万能の正解でも、会社の現在値でもありません。書体の指定と文章は同じで、画面幅が変われば両方とも折り返します。

どちらが読みやすいかは、原稿と読む人、表示条件を含めて判断します。広ければよいと決めず、行が別々に離れ過ぎないかも見ます。次にサイズを比べるなら、行高と幅をいったんそろえ、18pxと20pxなどの案を同じ場所へ置いて比較します。

短い案内は、本文より太くして見つけやすくする案もあります。ただし、細い字形が背景に埋もれないか、太くした日本語がつぶれないかを、実際に使う太さで確認してください。文字を大きくしただけで、案内の意味やリンク先が分かるようになるわけではありません。

行の長さ・段落・背景の差も、読む場所と一緒に整える

本文は画面いっぱいに広げず、段落を追える長さに抑えます。狭い画面では自然に折り返し、段落間の余白と見出しが、内容のまとまりを示すようにします。

PCの横幅が広いからといって、一行を伸ばし続ける必要はありません。上の見本は本文の幅にも上限を設けています。実際の記事では見出しと本文の位置、写真や注記との関係を含めて、次の行の始まりを探しやすいかを確認します。

行が長くて、次の行を探し直す

本文の幅を狭めた案を、同じサイズ・行高で比べます。PCだけを直して、スマホの左右の余白まで狭くしないようにします。

段落の切れ目が分かりにくい

別の内容へ移る位置で段落を分け、段落間に余白を設けます。読み上げや画面幅の変更にも対応できるよう、行末ごとの手動改行で形を固定しません。

文字が背景に埋もれる

文字と背景の明暗差を確認します。小さい注記や薄い文字も対象です。装飾の色だけで重要度を表さず、見出しや文言で関係を伝えます。

背景に写真がある案では、写真の明るい部分と暗い部分の両方で文字を確かめます。場所によって読みにくさが変わるなら、文字を置く面を分ける案も検討します。本文を画像に焼き込むと、文章の更新や利用者による文字の変更が難しくなるため、説明は実文字で組むことを基本にします。

数値を決めた後も、長い名称・電話番号・括弧を含む自社原稿へ戻って確認します。一つの短文だけ整っても、公開する本文全体で切れや重なりが起きないかは別に確かめる必要があります。

狭い画面、文字の拡大、利用者の間隔変更で欠けないか確かめる

通常のPCとスマホ表示に加え、文字を大きくした状態と、利用者が行高・字間などを変えた状態で、本文と短い案内が残るかを確認します。見た目の調整と、利用者が設定を変えたときの適応は分けて点検します。

1. 同じ原稿を、狭い幅と広い幅で読む。本文の行を追え、次の案内を見つけられるか、長い名称が左右へはみ出さないかを確認します。
2. 文字を拡大して、内容と行き先を読む。固定高さの箱で文章が切れたり、案内と本文が重なったりしないかを見ます。ブラウザー全体の拡大と文字だけの拡大は条件を分けて残します。
3. 行高や間隔を上書きして、欠けを確認する。制作担当が適用範囲を決めて試し、元の文字指定へ戻した場合とも比べます。単語の区切り方が異なる日本語では、英語と同じ見え方を前提にしません。
4. 書体が使えない条件も確かめる。代替書体で文字が残るか、切替後の改行で短い案内が押し隠されないかを見ます。確認した端末・ブラウザー・幅と条件を一緒に記録します。

WCAGの文字間隔に関する説明では、利用者が行高1.5倍、段落後の間隔2倍、字間0.12倍、単語間隔0.16倍などへ変更しても、内容や機能を失わない条件を扱っています。全ての本文の初期値をその数値にするという意味ではなく、言語や文字体系に適用される範囲の違いもあります。

欠けた箇所があれば、「スマホで読みにくい」だけで終えず、「幅390px、文字を拡大したとき、相談案内の後半が箱の下へ切れた」のように、場所と操作条件を伝えます。この一例の点検を、サイト全体の適合や全端末での読みやすさの証明とは扱いません。広い点検範囲は企業サイトのアクセシビリティ確認で整理できます。

まとめ：一段落と読む条件を、制作担当とそろえる

フォントの名前から選び始めず、読む本文と短い案内を決め、同じ原稿で文字組みを比べてください。書体の配信・代替、サイズ・太さ・行高・行の長さをそろえた後、狭い画面と利用者が変更した表示でも確認します。

1. 原稿を決める。よく読まれる一段落と、その後の短い案内を選ぶ。
2. 変える条件を分ける。書体と代替、サイズ、行高、幅のうち、どこをどう変えたかを残す。
3. 同じ条件で読み直す。狭い・広い画面、拡大と間隔変更、未読込時の代替を確認し、直す対象を戻す。

今日の最初の一歩：自社のサービス本文を一段落選び、「どの文字や行で読みづらいか」「どの画面で見たか」を制作担当へ伝えてください。現在の原稿を使った二案と、確認した条件を一緒に戻してもらうと、見た目だけで選ばずに修正を決められます。

複数ページで同じ見出しや案内を使う場合は、決めた役割と文字指定の管理先もそろえます。その整理は見出し・ボタン・カードのルールの作り方へつなげて確認できます。