文字が小さくて読みづらくなっていませんか？ホームページの可読性を見直す7つのチェックリスト

近年、ますますUX/UIデザインの重要性に注目が集まっています。

コンバージョン率を上げるボタンの色や形、大きさから、大胆なヒーローヘッダーイメージ、そしてスムーズで使い心地のいいアニメーションであるマイクロインタラクションに至るまで、「とりあえずかっこいい」デザインというよりも*「明確に意図して設計された」デザイン*で勝負するホームページが増えてきました。

しかし、さまざまなホームページが日々UX/UIを改良しているにもかかわらず、結局後回しにされるものがあります。
それが*「本文テキスト」(Body Text)*です。

ヘッダーテキストやロゴテキストのタイポグラフィについてはあらゆる場所で議論されていますが、「本文テキスト」は画面の多くを占めている重要なパーツであるにもかかわらず、デザインの優先順位が落ちてしまいます。
なぜなら、「本文テキスト」に関していえば、特段『デザイン』しなくとも、ブラウザのデフォルト設定のままであっても違和感なく読めてしまうからです。

ところが、20年ほど前からずっと16pxで書き出されている、ブラウザのデフォルト設定のままでいいのでしょうか。
今回は、ホームページの本文テキストの可読性を見直すチェックリストをご用意しました。

本文テキストは、ブログサイトや情報配信サイトなど、版面率や図版率が高いホームページでは重要な役割を担います。
ご自身のホームページと照らし合わせて確認してみてください。

ホームページの可読性を見直す7つのチェックリスト

1. 最低限の文字の大きさを確保しよう

現在公開されているホームページのほとんどは、15〜18pxの文字サイズを採用しています。
2000年代前半のように、さらに小さな12px〜14pxの文字サイズが流行した時期もありましたが、さすがにこれくらいのサイズでは小さすぎて、ユーザビリティが低下してしまいます。

▲ 12pxはh5の標準サイズと同じサイズで、そのままではかなり小さなサイズであることが分かります

12pxを下回ると、さすがに視力検査の世界になってしまい、可読性が極端に落ちてしまいます。
小さすぎるサイズのものは、明確な意図がなければ避けたほうが無難です。

しかし、最近では、20pxやそれよりも大きさなサイズを指定するホームページも増え始めてきました。
スマートフォンや小さなデスクトップ画面でも、20px程度であれば大きすぎるとは感じないようです。
もちろん、小さなフォントは写真のキャプションやカード型UIなどには活躍しますが、本文テキストには十分に読みやすいサイズを選定するのがよいでしょう。

最近では、「rem」という単位を使うことが多くなってきました。
この場合であれば、rootのフォントサイズを「20px」にしておくことで、h1〜h6要素も自動で大きさが可変されるので便利です。

2. モバイルファーストでデザインしよう

*「モバイルファースト」*という言葉を耳にするようになって久しいですが、もはやスマートフォンやタブレットでのホームページの閲覧を考慮に入れずにデザインすることはないと言っても過言ではないでしょう。

「モバイルファースト」とは、単に「スマートフォン向けのサイトから先に作る」という作業手順の話ではありません。
ユーザー視点で、ユーザーの導線やシチュエーションごとにコンテンツを考える際に、あらゆるデバイスで最適化されたデザインをすることです。

モバイルでも一定の可読性を担保するためには、はやり15〜18pxの大きさで本文テキストを指定するのがよいでしょう。
しかし、レスポンシブデザインでデザインしたホームページの場合は、フォントサイズが小さなデバイスでどのように見えるかだけを確認しがちですが、ノートパソコンやデスクトップ、スマートTVなどの大きなデバイスでどのように見えるかをチェックするのを忘れないでください。

3. 思い切って大きなサイズを使ってみる

デザイナーによっては、大きすぎる本文テキストを採用するのは、多かれ少なかれ子どもっぽいと感じてしまうひともいるようです。
おそらく、子ども向けの絵本が非常に大きな活字を採用しているからでしょう。

ただ、実際には、文字を認識して印象を受け取る時に、文字サイズはひとつの要素に過ぎません。
フォントのデザインがセリフかサンセリフか、字間や行間が適切に取られているか、あるいはビジュアルヒエラルキーが守られているか、といったさまざまな要素が印象に影響するのです。

もちろん、ヘッダーテキストと本文テキストのサイズのバランスも重要です。
しかし、思い切って大きな文字を採用してみると、インパクトもあり読みやすい本文テキストになることもあります。

4. 「レジビリティ」と「リーダビリティ」の両方を追求する

*「レジビリティ」(legibility)も「リーダビリティ」(readability)も、どちらも日本語では「可読性」*と訳されます。
Webデザイナーの中にはこの2つを同じように解釈しているかたもいらっしゃるかもしれませんが、厳密にはこの2つは異なります。
つまり、テキストが「レジブル」であるときに、それは必ずしも「リーダブル」であるとは限らないのです。

*「レジビリティ」*とは、Oxford Living Dictionariesによれば、次のように定義されています。

「十分に読めるほどの明瞭さの程度」
(The quality of being clear enough to read)

もともとは筆跡などの読みやすさについて言う言葉ですが、行間や字間などについて言うことが多いのが、レジビリティです。

一方、同じ辞書で「リーダビリティ」は次のように定義されています

「簡単に楽しく読めるほどの読みやすさの程度」
(The quality of being easy or enjoyable to read)

したがって、リーダビリティはもう一歩踏み込んで、さらに感情的な側面にまで踏み込んでデザインすることを言います。

どちらかといえば「レジビリティ」はUI的な、そして「リーダビリティ」に関してはUX的な側面をはらんでいます。
しかしながら、小さすぎるサイズのフォントは結果的に楽しく読むどころかイライラしてしまうので、「レジビリティ」と「リーダビリティ」は両方を追求していきたいものです。

5. ズームはあくまでもオプション

Webブラウザの画期的な機能のひとつに「ズーム機能」があります。
スマートフォンのような小さな画面のデバイスももちろんついていて、デスクトップブラウザにもほとんどがズーム機能を搭載しています。

しかし、アクセシビリティを考えた時に、ズーム機能に頼ってしまうのは間違いです。
すべてのユーザーがズーム機能を使いこなしているわけではなかったり、そもそもズーム機能の存在自体を知らないユーザーもいるかもしれません。
また、デスクトップ版のブラウザでのズーム機能では、単に拡大するのではなくフォントサイズなどを直接拡大することもあるため、意図しないレイアウト崩れになる原因にもなりえます。

文字が小さすぎたりすれば、ズームを使いたくなってしまいます。
そのままでも読めるようなタイポグラフィにするのを怠らないようにしましょう。

6. 色の使い方も大切

レジビリティに関して言えば、字間や行間などがチェックポイントになりますが、配色も考慮にいれるべきところです。
背景色とのコントラスト比が低ければ低いほど、文字は背景に同化してしまい、全体的に読みにくくなってしまいます。
また、コントラスト比がうまく出ているとは言っても、例えば紫背景に黄色の文字を使うなど、アンバランスな組み合わせは、特別に意図しているのではない限りは、避けた方が無難です。

ただし、極端にコントラストをつけるのではなく、すこし緩やかにすることで優しい印象を与えることもできます。
図の上の段では、白背景に黒テキストという典型的な形を取っていますが、下の段ではグレースケールの白に近いグレーを背景に、黒に近いグレーをテキストカラーに選定して、優しいイメージを与えることに成功しています。

7. フレームワークの利用に注意

BootstrapやFoundationなどのCSSフレームワークは、ゼロからCSSを作る時間を大幅に節約してくれるだけでなく、統一したUIをベースにデザインすることができるため、非常に便利です。
しかし、とりわけフォントサイズに関して言えば、注意が必要です。

例えば、Bootstrapはレスポンシブデザインのホームページを作成するのにも便利な最もよく利用されているフレームワークの一つですが、バージョン3では標準のフォントサイズが14pxに設定されています(バージョン4で16pxに上がりました)。
徐々にモバイルファースト・モバイルフレンドリーなフレームワークに近づいていますが、古いバージョンを使っている場合は、大きな画面でもモバイルサイズと同じ文字の大きさになってしまうので、少し見づらく感じてしまうようです。