ホームページの文字、読みやすいですか？

文字が読みにくいと、内容の前に閉じられる

訪問した人は、文章を読み始める前に「読みやすそうか、読みにくそうか」を見た目で判断しています。文字が小さい、行がぎゅうぎゅう、色が薄い——そう感じた瞬間、内容がどれだけ良くても読まずに戻ってしまいます。

逆にいえば、文字を整えるだけで「ちゃんとしていそう」という印象まで手に入ります。第一印象の話はホームページの「ファーストビュー」とは？最初の画面で伝えるべき3つのことでも書きましたが、文字はその印象を支える土台です。

①フォントは2種類までに絞る

フォント（書体）は、サイト全体で2種類までが基本です。たとえば「見出し用に1つ、本文用に1つ」。ページごとに書体が変わると、それだけで素人っぽく、落ち着かない印象になります。

選び方の目安はシンプルです。画面で読む本文は、線の太さが均一な「ゴシック体」が読みやすい。上品さや和の雰囲気を出したい「明朝体」は、見出しなど短い文字で使うと効果的です。手書き風・デザイン風の個性的な書体は、ロゴやワンポイントだけに。

②文字の大きさはスマホで16pxが目安

本文の文字サイズは、スマホで16px（ピクセル）前後が目安です。それより小さいと、多くの人が「拡大しないと読めない」と感じます。パソコンの画面では十分でも、スマホで見ると小さすぎる——というのがいちばん多い失敗です。

いまやホームページの閲覧はスマホからが主流。確認は必ずご自身のスマホで。スマホ表示の基本はホームページのスマホ対応、なぜ必要？今すぐできる確認方法と5つのチェックポイントにまとめています。

③行間と行の長さで、目の疲れが変わる

同じ文章でも、行と行のあいだ（行間）がぎゅっと詰まっていると、とたんに読みにくくなります。目安は文字サイズの1.5〜1.8倍。ゆったりした行間は、それだけで「丁寧なサイト」に見えます。

もうひとつ見落とされがちなのが1行の長さです。パソコンの大きい画面で端から端まで文字が続くと、目が行の頭に戻れず疲れます。本文の幅はほどよく制限し、1行がだらだら長くならないようにするのがコツです。

④薄いグレーの文字は、おしゃれに見えて読めない

デザインを上品にしたくて、文字を薄いグレーにする——これはいちばんよくある「読めないおしゃれ」です。制作している本人は内容を知っているので薄くても読めますが、初めて来た人には苦痛です。

本文の文字は、背景としっかり差のある濃い色に。白背景なら、黒に近い濃いグレーや紺が安心です。明るい屋外でスマホを見ると、薄い文字はさらに読めなくなります。色づかい全体の考え方はホームページの色、どう決める？印象を左右する配色の考え方と5つのコツをどうぞ。

⑤詰め込まない。余白と見出しで区切る

文字そのものが整っていても、画面いっぱいに文章がびっしりだと読む気が起きません。段落を短く切る、見出しで区切る、箇条書きを使う、まわりに余白を残す。この4つで、同じ内容がぐっと読みやすくなります。

「そもそも何を書けばいいか」という中身の話は、ホームページの文章、何を書けばいい？伝わる言葉の5つのコツで詳しくご説明しています。文字の見た目と文章の中身、両方そろって「伝わるページ」になります。