デザインにおいて、コミュニケーションは非常に重要です。Webサイトにおいては、ユーザーとの間にしっかりとつながりを作ること、ユーザーが目指すゴールを達成しやすくすることが不可欠です。
Webデザインでは、コミュニケーションは通常「文字」を使って行います。そのため、タイポグラフィはコミュニケーションにおいて重要な役割を果たします。
Web上の95％以上の情報は文字で表されています
タイポグラフィが優れているとユーザーの読む負担が減る一方で、タイポグラフィが適していないとユーザーは読む気をなくします。Oliver Reichenstein氏は記事の中で「Webデザインの95％はタイポグラフィである」と述べています。
タイポグラフィを最適化することは、読みやすさ、アクセシビリティ、ユーザビリティ、全体的なグラフィックバランスを最適化することにつながります
言い換えると、タイポグラフィを最適化することは、UIを最適化することでもあるのです。この記事では、テキストコンテンツの読みやすさを改善するために役立ついくつかのルールをご紹介します。
１. フォントの種類は最低限にとどめる
３つ以上異なるフォントを使うと、Webサイトが体系化されていない、専門的でない印象になってしまいます。また、一度にサイズやスタイルを変えすぎても、レイアウトを壊してしまうことを覚えておいてください。
このような状態を避けるために、フォントの数は最低限に留めましょう。
一般的には、フォントの数は最低限に抑え、全体を通して同じフォントを使用しましょう。フォントは、大抵の場合１つで十分であり、２つでも多い方です。もし２つ以上のフォントを使う場合は、文字の太さを基に、お互いを引き立たせるものにしましょう。以下は、フォントの組み合わせの例です。左の GeorgiaとVerdanaの組み合わせは、文字の太さが似ており、調和が取れています。 一方で、右のBaskervilleとImpactの組み合わせは、Impactの太さでもう片方のセリフ体が見劣りしてしまっています。
フォントが、文字幅を基に、お互いを引き立たせるものにしましょう。
２. 標準的なフォントを使うよう試みる
Google Web FontsやTypekitなどのフォント埋め込みサービスは、多くの良いフォントを提供しており、デザインに新しさや新鮮さ、意外性を加えることができます。また、これらのフォントはとても簡単に使用できます。Googleでの例を見てみましょう。
- Open Sansのようなフォントを選択する
- コードを生成し、HTMLドキュメントに張り付ける
この２ステップなら、間違える余地もありません。
しかし、このアプローチには２つの問題があります。
- 全員が同じフォントを使用できるわけではありません。つまり、あなたが選んだ美しいフォントがユーザーにとっては何かほかのフォントとして見える可能性があります
- ユーザーは標準的なフォントに親しんでおり、そちらのほうが早く読むことができます
ブランディングや世界観のために、Webサイトでカスタムフォントを使わざるを得ない場合を除いて、システムフォントを使うほうが良いでしょう。安全なのはArial、Calibri、Trebuchetなどのシステムフォントを使用することです。優れたタイポグラフィは、読み手を文字自体ではなく、コンテンツに引き込むものだということを覚えておいてください。
３. 行の長さを制限する
行を適切な長さにすることは、テキストの読みやすさにとって重要です。行の長さはデザインではなく、読みやすさに基づいて決めるべきです。Baymard Instituteは、読みやすさと行の長さに関して次のようにアドバイスしています。
もし読みやすい文章を作りたいなら、行の長さを１行につき60文字程度にするべきです。適切な文字量を保つことは、テキストの読みやすさにとって重要です
もし行が短すぎると、すぐに目線を行頭に戻さないといけないため、読者のリズムを壊してしまいます。もし行が長すぎると、読者はテキストに集中しづらくなります。画像著作権：Material Design
モバイルデバイスの場合は、１行につき30～40文字にするべきです。以下の画像は、モバイルデバイスで見た２つのサイトの例です。左はデスクトップや印刷に適した、１行につき50～70文字のレイアウトであり、右はモバイルで最適な30～40文字のレイアウトです。
画像著作権: Usertesting
Webデザインでは、emやpixelを用いてテキストブロックの幅を制限することで、行ごとの最適な文字数に制御できます。
４.どんなサイズでも使える書体を選ぶ
ユーザーはさまざまな画面サイズと解像度のデバイスからあなたのサイトにアクセスします。また、多くのUIで、ボタンコピー、フィールドラベル、セクションヘッダーなどのさまざまなサイズのテキスト要素が必要です。すべてのサイズで読みやすさとユーザビリティを維持するため、どんなサイズや太さでも読みやすいフォントを選ばなければいけません。
GoogleによるRobotoタイプフェース
選んだ書体が小さい画面でも読みやすいことを確かめてください。以下のVivaldiのような筆記体のフォントは避けるようにしましょう。美しいフォントですが、読みにくくなってしまいます。
Vivaldiは、小さい画面では読みにくいです。
５.文字が区別しやすいフォントを使う
多くの書体は、「i」と「L」のような似た形の文字を混同しやすくなっています。また、スペースが少ないために、「r」と「n」が合わさって「m」に見える場合もあります。フォントを選ぶときは、ユーザーに対して問題が起きないように、複数の状況でフォントをチェックしましょう。
６. すべてを大文字にしない
頭文字やロゴなど、「読む」作業が関係しない場合では、すべて大文字のテキストでも問題はありません。しかし、読んでほしいメッセージの場合は、ユーザーにすべて大文字のテキストを読ませるのはやめましょう。Miles Tinker氏の傑作『Legibility of Print』にあるように、すべて大文字のテキストは小文字のと比べると目を通したり読んだりするスピードが格段に遅くなります。
７. 行間を狭くしない
タイポグラフィにおいて、行と行の間のスペースを表す特別な言葉があります。レディング（または行送り）です。行送りを増やすと、行の間に空白を増やすことになり、一般的に画面サイズの問題と引き換えに読みやすくなります。原則として、行送りが文字の高さの30％以上あると読みやすくなります。
優れた行間設定をすると、読みやすくなります。画像著作権：Microsoft
Dmitry Fadeyev氏が指摘したほうに、パラグラフの間の空白を適切に設定すると２０％理解度が向上します。空白を広く取ると、ユーザーが呑み込みやすい量のコンテンツを提供することになり、結果的に余計な詳細情報を取り除くことができます。
左側：重なりそうなテキスト。右側：行送りが広く、読みやすい。画像著作権：Apple
８. 十分な色のコントラスト
テキストと背景に同じ、または似た色を使わないようにしましょう。テキストは見やすければ見やすいほど、ユーザーが読む時間は早くなります。W3Cはボディテキストとイメージテキストのコントラスト比を以下のように推奨しています。
- 小さいテキストの場合、少なくとも背景に対して4.5：１のコントラストが必要である
- 大きいテキストの場合（太字で14pt以上、通常の太さで18pt以上）は、少なくとも背景に対して３：１のコントラストが必要である
このテキストは推奨されているコントラスト比に達しておらず、背景色と同化して読みにくくなってしまいます。
こちらのテキストは推奨されているコントラスト比を満たしており、背景色に対して読みやすくなっています。
一度色を選択したら、できる限り多くのデバイスでユーザーにテストしてもらう必要があります。もし文章を読む際に問題があるという結果が１つでもあった場合、ほかのユーザーも同じ問題を持っていると考えるべきでしょう。
９. 赤と緑のテキストを避ける
色覚異常は、特に男性にとって（男性の８％）良くあることです。重要な情報を強調するときには、色のほかに何か行うことをおすすめします。また、情報を伝えるために赤と緑だけを使うのは避けましょう。赤と緑の色覚異常がもっとも一般的と言われているからです。
10. 点滅するテキストを使わない
光ったり点滅したりするコンテンツは、敏感な人に発作を引き起こしかねません。それだけでなく、多くのユーザーをいらつかせたり、邪魔をしてしまう可能性が高くなります。
まとめ
タイポグラフィは非常に重要です。適切なタイポグラフィを選択することで、新鮮で艶のあるWebサイトにすることができます。一方で、不適切なタイポグラフィを選択すると、ユーザーにとって邪魔だったり、タイポグラフィ自体に注目を集めたりしてしまいます。タイポグラフィを理解しやすく、読みやすいものにすることは不可欠です。
タイポグラフィは、コンテンツのために存在しています
タイポグラフィは、ユーザーの認知的負荷を増やさない方法でコンテンツを表すものであるべきです。
