COLUMN コラム

デザインの勉強をする時、配色やレイアウトなどビジュアル要素に注力してしまって、文字の勉強が疎かになりがちです。しかし、文字はあらゆるデザインで使われる、もっとも重要な要素です。文字の扱いを知ることは、デザインをする上での基本と言えます。

特にWebサイトにおける文字の割合は高く、使用する書体や文字組みによって印象が大きく変わります。書体が合っていなかったり、文字組みが整っていないと、本来伝えたかった情報もきちんと伝わりません。Webデザイナーは書体の役割や読みやすさを考慮して、デザインする必要があります。

今回はWebデザイナーが覚えておくべき文字の扱い方について紹介します。

1. フォントの選び方

どんなにわかりやすく丁寧な文章を心掛けたとしても、読みづらいフォントを選んでしまうと情報は正しく伝わりません。また、読みやすいフォントだけを使用しても、面白みのないデザインになってしまいます。

適切なフォントを選ぶポイントは「文字の役割」と「フォントの特性」を理解することです。

まず「文字の役割」は、次の2つに大別することができます。

1. 読ませる文字 … 文字情報として伝えたい文字のことです。
2. 魅せる文字 … ビジュアル要素としての文字です。

そして「フォントの特性」とは以下の3つを指します。

1. 可読性 … 単語や文章にした時に読みやすいか。
2. 判読性 … ほかの文字と判別しやすいか。誤読しないか。
3. 誘目性 … 目立ちやすいか。

「読ませる文字」には可読性、判読性の高いフォントを、「魅せる文字」には可読性や判読性よりも誘目性を重視したフォントを選びましょう。このように「文字の役割」に応じたフォントを選ぶことで、伝えたい情報はしっかり伝えつつ、面白みのあるデザインを作ることが可能になります。

しかし、フォントを選ぶポイントを押さえたとしても、世の中にはフォントが無数にあります。次は「文字の役割」に応じたフォントの探し方を紹介します。

1-1. 「読ませる文字」のフォント

「読ませる文字」のフォントを探す上で重視すべきは「判読性」です。情報伝達を目的とするなら、誤読されやすいフォントの使用は控えなければいけません。

判読性の高いフォントを探すコツは、似た組み合わせの文字をチェックすることです。
例えば「0（ゼロ）とO（オー）」や「l（エル）と1（イチ）」、「6と8」や「aとd」などです。

これらの判別がつきにくいとURLやメールアドレス、電話番号などを読み間違える原因となります。英数字には日本語とは別に専用のフォントを用意することが多いので、選ぶ際は事前にチェックしておきましょう。

1-2. 「魅せる文字」のフォント

「魅せる文字」のフォント選びで重要なのは「誘目性」です。情報伝達よりもデザイン性を重視したフォントを選ぶ必要があります。単純に見た目で選ぶこともできますが、個人の感覚だけで選ぶと他の人にはまた違った印象に見えているかもしれません。

意図した印象を読み手に与えるフォントを選ぶコツは、フォントの由来や制作意図を知ることです。フォントには誕生した由来やデザイナーの制作意図が込められており、長く使われてきた歴史があります。歴史を知ることで、どの場面にどのフォントが適しているかを判断できるようになります。

２. 文字組み

「文字組み」とは文字サイズや行間、字間などを調整して文章を読みやすく、美しく見せる作業のことです。どんなにわかりやすく丁寧に書いた文章も、行間や字間が詰まっていると、読み手は苦痛を感じてしまいます。

文字を読みやすくすることは、デザインの基本的なルールです。ここからは読み手が心地良く感じる文字組みのポイントについて紹介します。

2-1. 文字サイズ

Webサイトの文字サイズは、ターゲットの年齢を考慮して設定する必要がありますが、そのためには基準となる値を知っておくことが重要です。現在、一般的とされている文字サイズはGoogleが推奨している16pxです。また、最小サイズは10pxとされています。（Chromeでは可読性を維持するために、10px以下の文字サイズを指定しても、10pxで表示される仕様になっています）

ターゲットの年齢を考慮した文字サイズは、この基準を知ることで初めて検討することができます。

2-2. 行間

日本のWebサイトで多く採用されている行間は1.5倍〜2倍程度と言われています。文章の可読性を低下させる主な原因は詰まった行間であり、基本的には行間を広めに取ることが推奨されています。しかし、行間の設定はサイト全体の雰囲気にも大きく影響を与えます。新聞や雑誌のような、賑やかな雰囲気のサイトにしたい時は、あえて行間を狭くすることもあります。サイトの目的に合わせて、適切な値を設定できるようにしましょう。

2-3. 字間

文字には適切な余白を設けることで、読みやすさが大幅に向上します。余白の中でも、行間に気付ける人はデザイナー以外にも多くいますが、字間に気付ける人はそういません。デザイナーとしては字間の調整も忘れずに行いましょう。

Webサイトの本文は字間を一律で設定することが可能です。CSSのletter-spacingやfont-feature-settingsを活用しましょう。

おわりに

今回はWebデザイナーが覚えておくべき文字の扱い方について紹介しました。

文字組みのスキルを身につけると、写真やイラストのような素材がなくても優れたデザインを生み出すことが可能です。また、多くのデザイン書籍においても文字を扱えることが一流のデザイナーだと言われています。

デザインの勉強をする時はビジュアル要素だけでなく、文字の勉強にも注力して取り組みましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。