サイトの文字がなんだか読みにくい…読者が離脱しないフォントの条件

読みやすいサイトの条件は、数字でほぼ決まっています。

本文の文字サイズは16px前後、行間は文字サイズの1.5〜1.8倍、1行の文字数はスマホで20〜35文字。

書体は本文にゴシック系、使うフォントは2種類まで。

この基準を外れると、内容が良くても読みにくいサイトになります。

フォント選びの失敗は、デザインの失敗の中でも気づかれにくい失敗です。

「自分のサイト、なんだか読みにくい気がする」

「フォントのせい?それともレイアウト?」

「おしゃれなフォントにしたら逆に見づらくなった気がする…」

そう感じて、他社サイトと自社サイトを何度も見比べてしまう。

その違和感は気のせいではなく、たいてい原因を特定できます。

フォントの読みやすさは感覚ではなく条件の問題だからです。

この記事を読むと、読みにくさの原因を自分で特定でき、制作会社の提案を見極める判断基準まで手に入ります。

【この記事のポイント】

• 読みやすさは「サイズ16px前後・行間1.5〜1.8倍・書体2種まで」の数値条件でほぼ決まる
• スマホでは細い明朝体や装飾書体が読みにくさの原因になりやすい
• フォント提案を見極める判断基準は5つ。感覚ではなく条件で比較できる

この記事の結論

• 一言で言うと、読みやすいフォントとは「読者が意識しないフォント」のこと
• 最も重要なのは、本文の読みやすさを最優先し、個性は見出しで出すこと
• 失敗しないためには、必ずスマホの実機で本文を読んで確認すること
• 読みにくいと感じたら、書体を変える前にサイズと行間を疑うこと

フォントで読みにくくなる原因と、やりがちな注意点3つ

「読みにくい」と感じるサイトには、共通の原因があります。

まずは、制作の相談で実際によく見かける注意点を3つに絞って解説します。

注意点1:スマホで細い明朝体は読みにくい

明朝体は上品で高級感のある書体ですが、線の細い明朝体を本文に使うと、スマホでは可読性が落ちます。

画面が小さく、屋外では光の反射もあるためです。

総務省の通信利用動向調査ではスマートフォンでのインターネット利用が8割を超えており、「スマホで読めるか」が事実上の合格ラインになります。

正直なところ、パソコンの大画面で見ると明朝体の本文は美しく見えます。

だからこそ制作画面では気づきにくく、公開後に「なんか読みにくい」と言われて初めて発覚する。

よくある落とし穴です。

明朝体を使いたい場合は、見出しや短いキャッチコピーに限定し、本文はゴシック系にする構成が安全です。

どうしても本文に明朝体を使うなら、太めのウェイトを選び、サイズを一段大きくする。

その一手間で読みにくさはかなり和らぎます。

注意点2:文字サイズと行間の数値を外している

読みにくさの原因として実は最も多いのが、書体ではなくサイズと行間です。

本文は16px前後、行間は1.5〜1.8倍。

この数値を下回ると、文字が詰まって見え、読む前に「ぎっしりしていて疲れそう」という印象を与えます。

ケースによりますが、高齢のお客様が多い業種では18pxまで上げることもあります。

逆に14px以下の本文は、若い読者でも小さく感じる水準です。

また、1行が長すぎると視線の折り返しで迷子になります。

スマホで20〜35文字に収まっているかも合わせて確認してください。

注意点3:フォントの種類を増やしすぎている

1ページに3種類以上のフォントが混在すると、画面がちぐはぐに見えます。

見出し用と本文用の2種類まで。

太さ(ウェイト)の違いは同じフォント内で使い分けます。

よくあるのが、バナーやお知らせ画像を別々のツールで作るうちに、フォントがバラバラになっていくパターン。

1つずつは問題なくても、並ぶと統一感が崩れます。

使うフォントと太さをルールとして書き出しておくだけで、この劣化は防げます。

公開時にきれいでも、運用の中で少しずつ崩れていく。

フォントの注意点は、作るときだけでなく運用まで含めて考えるものだと捉えてください。

失敗しないための判断基準と、比較した人が確認していたポイント

原因が分かっても、「じゃあどのフォントにすれば正解なのか」は、まだ不安が残りますよね。

その不安は自然なものです。

フォントは選択肢が多すぎて、決め手を知らないまま選ぶと後悔しやすい領域だからです。

ここでは、提案を比較するための判断基準と、実際の現場のエピソードを紹介します。

フォント選びで失敗しないための判断基準5つ

制作会社の提案を受けるときも、自分で選ぶときも、次の5つを確認すれば大きな失敗は避けられます。

1つ目、本文がゴシック系など可読性の高い書体になっているか。

装飾的な書体が本文に使われていたら、その理由を確認します。

2つ目、文字サイズ16px前後・行間1.5〜1.8倍を満たしているか。

数値で答えられない提案は、感覚頼みの可能性があります。

3つ目、フォントは2種類以内に収まっているか。

4つ目、文字色と背景のコントラストが十分か。

薄いグレーの本文は、屋外のスマホでは読めないことがあります。

ウェブアクセシビリティの国際的な指針でも、文字と背景のコントラスト比は4.5対1以上が推奨されています。

5つ目、スマホの実機で確認したか。

制作画面のプレビューと実機では、見え方が意外なほど違います。

この5つは、どの制作会社の提案にも公平に使える基準です。

複数社を比較する場合は、各社の提案をこの基準で並べてみてください。

根拠を聞いたときに、数値で答えられる会社は信頼しやすいといえます。

実例1:岐阜県内の士業事務所、「高級感の明朝体」を見直した話

岐阜県内の士業事務所のお客様から、「サイトを作ったのに問い合わせが少ない」というご相談を受けたことがあります。

拝見すると、本文まで細い明朝体で、文字サイズも小さめ。

スマホで開くと、正直、読み進めるのがつらい状態でした。

ただ、お客様には「明朝体の格調を捨てたくない」という思いがありました。

最初は「ゴシックだと安っぽくなりませんか?」と半信半疑のご様子。

そこで、見出しは明朝体のまま残し、本文だけをゴシック系に変え、サイズを16px、行間を1.7倍に調整した案をお見せしました。

並べて比較すると、ご自身のスマホで読んで「あ、こっちは最後まで読めますね」と一言。

格調と読みやすさは、役割分担すれば両立できます。

公開後、ページの滞在時間が伸びたことを確認できました。

「読みやすくしたら安っぽくなる」という不安は、実際には両立の工夫で解消できることが多いのです。

実例2:愛知県のカフェが最終的に納得できた判断基準

愛知県のカフェのお客様との打ち合わせでは、こんなやり取りがありました。

「手書き風のかわいいフォント、全部に使いたいんです」

「お店の雰囲気には合いますね。ただ、メニューや営業時間まで手書き風だと、読み間違いが起きやすいんです」

「うーん、でも普通のフォントだと味気なくて…」

「では、ロゴと見出しは手書き風、料金や時間など”間違えたら困る情報”は読みやすい書体、と分けませんか」

このお客様は他社にも相談していて、2週間ほど迷われていました。

最終的にご依頼いただいた決め手を後から伺うと、「かわいさを否定せず、使いどころを整理してくれたから」とのことでした。

比較していた方が確認していたのは、要望を通す会社かどうかではなく、要望とリスクの両方を説明してくれる会社かどうか。

フォント選びで迷ったら、この視点で相談先を見てみてください。

よくある質問

Q1．本文のフォントサイズは何pxが適切ですか?

A1．16px前後が基準です。

高齢の読者が多いサイトは18pxまで上げる選択肢もあります。

14px以下は多くの読者が小さいと感じる水準です。

Q2．明朝体とゴシック体はどう使い分ければいいですか?

A2．本文はゴシック系、明朝体は見出しや短いコピーに限定するのが安全です。

高級感を出したい場合も、この役割分担で両立できます。

Q3．1つのサイトで使っていいフォントは何種類までですか?

A3．2種類までが目安です。

強弱は種類を増やすのではなく、同じフォントの太さの違いで付けると統一感が保てます。

Q4．行間はどれくらいに設定すべきですか?

A4．文字サイズの1.5〜1.8倍が目安です。

1.5倍を下回ると詰まって見え、2倍を超えると行のつながりが途切れて読みにくくなります。

Q5．無料フォントを使っても大丈夫ですか?

A5．問題ありません。

Googleが提供するNoto Sansなどは無料で品質も高く、商用サイトで広く使われています。

ただし利用規約(ライセンス)の確認だけは必須です。

Q6．読みにくいと感じたら、まず何から直すべきですか?

A6．書体の変更より先に、サイズ・行間・文字色のコントラストの3つを確認してください。

この3つの調整だけで解決するケースが多数派です。

Q7．フォントの変更だけを制作会社に頼むと料金はどれくらいですか?

A7．一般的な相場では、サイト全体のフォント調整は数万円程度からとされています。

サイトの規模や仕組みによって幅があるため、見積もり時に作業範囲を確認してください。

まとめ

この記事のまとめ:要点3つ

• 読みやすさは「16px前後・行間1.5〜1.8倍・書体2種まで」の条件で決まる
• 個性は見出しで、本文は可読性優先。役割分担すれば両立できる
• 提案の見極めは判断基準5つ。数値で説明できる相手なら安心材料になる

フォントの読みにくさは、原因さえ分かれば必ず改善できます。

まずは自分のスマホでサイトを開き、本文を最後まで読めるかを試してみてください。

途中で目が滑るなら、サイズか行間か書体のどれかにサインが出ています。

原因の見立てに自信が持てなかったら、ともえデザインの無料相談で読みやすさのチェックだけ受けてみるのも一つの手です。

ホームページ制作の基本を知りたい方へ

ホームページ制作の基本や、成果につながるデザイン・構造について詳しく知りたい方は、以下の記事をご覧ください。

▶ ホームページ制作とは何か｜デザイン性が成果を左右する理由と構造の完全ガイド

 

ホームページデザインをさらに深く知りたい方へ

ホームページで成果を出すには、見た目だけでなく、デザインの役割やブランディングとのつながり、実際の制作事例を理解することが大切です。

気になるテーマから、ぜひご覧ください。

▶ ホームページにおけるデザインの位置づけ
ホームページ制作において、デザインがどのような役割を持つのかを解説します。

▶ ホームページとブランディングの関係
企業や店舗のイメージを伝え、信頼を高めるホームページの考え方を紹介します。

▶ ホームページ制作の事例から学ぶ
実際の制作事例をもとに、成果につながるデザインや構成のポイントを解説します。

 

ホームページのお悩み、無料で相談しませんか？

ホームページ制作やリニューアル、デザイン、集客についてお困りの方は、岐阜県大垣市のTOMOEデザインへご相談ください。

事業の魅力が伝わり、成果につながるデザインをご提案します。

無料相談受付中

電話：070-4209-4760
お問い合わせ：https://tomoe.design/contact/

TOMOEデザイン
〒503-0807 岐阜県大垣市今宿6丁目52-16 ドリームコア406