デザインを基本から学び直す。#04文字――「読みやすい」はどうやってつくる？

デザインをしていると、必ず文字を使います。

Webサイト、チラシ、ポスター、プレゼン資料、名刺。

ほとんどのデザインには、何らかの文字が入っています。

でも、実際に文字を配置しようとすると、

「どのフォントを選べばいいんだろう？」

「本文は何pxにすればいい？」

「太字にした方が目立つ？」

「行間はどのくらい空ければいい？」

と、次々に疑問が出てきます。

文字を入力することはできても、どう見せればいいのか分からない。

今回は、そんな「文字」の基本を学びます。

文字もデザインの一部

例えば、次の3つの情報があるとします。

DESIGN BASIC

文字を学ぶ

文字の基本を知ると、情報がもっと伝わりやすくなります。

これを全部同じ大きさ、同じ太さで並べてみます。

もちろん、内容は読めます。

でも、

「どこから読めばいいのか？」

が少し分かりにくくなります。

そこで、

DESIGN BASIC → 小さく

文字を学ぶ → 大きく・太く

説明文 → 読みやすい大きさ

と、それぞれに役割を与えてみます。

すると自然に、

タイトル → 説明

という読む順番が生まれます。

つまり、文字をデザインするというのは、単に「格好いいフォントを選ぶ」ことではありません。

文字を使って、情報の優先順位を見せること。

まずは、ここから始めます。

1｜フォントって何？

フォントとは、簡単に言えば文字のデザインです。

日本語には非常に多くの書体がありますが、初心者のうちは、まず大きく2種類を知っておけば十分です。

ゴシック体と明朝体です。

ゴシック体

線の太さが比較的均一で、シンプルで力強い印象があります。

Webサイト、案内表示、プレゼン資料などでもよく使われます。

明朝体

横線が細く、縦線が太いなど、線に強弱があります。

上品、伝統的、落ち着いた印象を出しやすい書体です。

ただし、

「高級＝明朝体」

「現代的＝ゴシック体」

と機械的に決める必要はありません。

重要なのは、

「誰に、何を、どんな印象で伝えたいか？」

です。

そして初心者のうちは、たくさんのフォントを混ぜない方が安全です。

まずは1〜2種類程度から始めてみましょう。

2｜文字サイズで「読む順番」をつくる

文字サイズには重要な役割があります。

それは、

情報の重要度を伝えること。

例えば、

大見出し
小見出し
本文
補足

が全部同じ大きさだったら、どれが重要なのか分かりません。

そこで、

大見出し → 大きい

小見出し → 中くらい

本文 → 読みやすい大きさ

補足 → やや小さい

という階層を作ります。

ここで、

「では本文は何pxにすればいいの？」

と思うかもしれません。

Webサイトの本文では、16〜18px程度から検討することがよくあります。

特にスマートフォンでは、小さすぎる文字は読みにくくなるため、十分な大きさを確保することが大切です。

ただし、

「本文＝16px」と覚える必要はありません。

同じ16pxでも、フォントの種類、文字の太さ、画面サイズなどによって見え方は変わります。

大切なのは数字そのものではなく、

「この文字は、どんな役割で、誰が、どんな環境で読むのか？」

を考えることです。

3｜太字にすれば目立つ？

重要な言葉を見つけると、全部太字にしたくなることがあります。

でも、

全部が太いと、どれも目立ちません。

これは第2回で学んだ「コントラスト」と同じです。

例えば、

Regular

Medium

Bold

のように文字の太さには違いがあります。

強調したいところだけを太くすると、そこに視線が集まります。

つまり、

強調とは「全部を強くすること」ではなく、「差をつくること」です。

4｜行間で読みやすさが変わる

次は「行間」です。

行間とは、簡単に言えば、

文章の行と行の間にある空間

です。

同じ文章でも、行が詰まりすぎると窮屈に見え、目で追いにくくなります。

反対に離れすぎると、一つの文章なのに行同士のつながりが弱くなります。

では、どのくらい空ければいいのでしょうか。

本文では、まず**文字サイズの1.5〜1.8倍程度の行の高さ（line-height）**から試してみると調整しやすくなります。

例えば文字サイズが16pxなら、

16 × 1.5 ＝ 24px

16 × 1.8 ＝ 約29px

なので、行の高さ24〜29px程度から試してみる、という考え方です。

ただし、これも絶対的な正解ではありません。

フォント、文字サイズ、1行の長さなどによって、読みやすい状態は変わります。

ここでも大切なのは、

数字を正解として覚えるのではなく、数字を出発点にして実際の見え方を確認すること。

そして、ここで第3回の内容ともつながります。

行間も「余白」の一つです。

広ければいいのではなく、文章としてまとまりながら、視線が追いやすい距離を探します。

5｜文字と文字の間もデザインされている

文字と文字の間の距離を「文字間」といいます。

普段はあまり意識しないかもしれません。

でも、

文字間が変わるだけでも、文字の印象は変わります。

詰まりすぎると窮屈に見える。

適切なら自然に読める。

広すぎると、一つの言葉として認識しづらくなる。

さらに、大きな見出しやロゴなどを見ていると、

「この2文字だけ離れて見える」

「ここだけ詰まって見える」

と感じることがあります。

これは、文字の形によって、同じ間隔でも見え方が違うためです。

初心者のうちは、本文の文字間を無理に細かく調整する必要はありません。

まずは、

「文字と文字の間にも余白があり、その余白もデザインの一部である」

と気づくことから始めましょう。

6｜中央揃えは、いつ使う？

文字を配置するときには、

左揃え
中央揃え
右揃え

などがあります。

初心者のうちは、中央揃えを使いたくなることがあります。

確かに、タイトルや短いメッセージなら、中央揃えは効果的です。

しかし長い文章では、基本的に左揃えの方が読みやすくなります。

なぜでしょう。

左揃えなら、各行のスタート位置が同じです。

ところが中央揃えでは、文章の長さによって行頭の位置が変わります。

そのため、目が次の行の開始位置を探さなくてはいけません。

これは第2回で学んだ、

「整列」

そのものです。

文字を揃えることには、見た目を整えるだけでなく、

読む人を迷わせない

という役割があります。

7｜文字は単独で考えない

ここまで、

フォント
サイズ
太さ
行間
文字間
揃え方

を見てきました。

でも実際のデザインでは、それぞれを別々に考えるわけではありません。

例えば大見出しなら、

大きくする。

太くする。

周囲に余白を取る。

というように、複数の方法を組み合わせます。

ここで、第2回と第3回で学んだことが全部つながります。

近接 → 関係する文字をまとめる

整列 → 読み始める位置を揃える

反復 → 同じ役割の文字を同じルールにする

コントラスト → 見出しと本文に差をつける

余白 → 情報のまとまりと主役をつくる

つまり、

文字を学ぶことは、これまで学んだデザインの基本を実際に使うことでもあります。

今日からできる、小さな練習

身近なWebサイトを一つ開いてみます。

今日は写真や色ではなく、

「文字だけ」

を観察します。

次の5つを見てみましょう。

① 一番大きな文字は何？

② 本文と見出しでは、どのくらい大きさが違う？

③ 太字はどこに使われている？

④ 行間は狭い？ 広い？

⑤ 左揃え？ 中央揃え？

正確なpxやフォント名が分からなくても大丈夫です。

まずは、

「ここが一番大きい」

「ここだけ太い」

「本文は左に揃っている」

「この見出しの周囲は広く空いている」

と気づくことから始めます。

そして、

「なぜ、こうしているんだろう？」

と考えてみます。

その繰り返しで、少しずつ文字を見る目が変わってきます。

数字は「答え」ではなく「出発点」

今回、

16〜18px。

1.5〜1.8倍。

といった具体的な数字も紹介しました。

数字があると、初心者にとって判断しやすくなります。

でも、

数字を守ることがデザインではありません。

第3回でも、「余白は必ず8px単位にすればいい」という話ではありませんでした。

今回も同じです。

まず目安を知る。

実際に見る。

比較する。

そして、自分で判断する。

目安を知る → 見る → 比較する → 判断する

この流れを繰り返すことが、デザインを学ぶうえで大切です。

「読みやすい」は偶然ではない

読みやすい文章を見ると、

「きれいなフォントだから」

と思うかもしれません。

でも実際には、

文字サイズ。

太さ。

行間。

文字間。

揃え方。

余白。

さまざまな要素が組み合わさっています。

だから、

「読みやすい」は偶然ではなく、設計できます。

そして、その設計の出発点は、

「この情報を、どの順番で読んでもらいたいか？」

を考えることです。

文字を装飾する前に、

情報の役割を決める。

これだけでも、文字の扱い方はかなり変わります。

次回は「色」

文字が整理できたら、次に考えたいのが色です。

なぜ、この色を使うのか。

色を増やしすぎると、なぜまとまらなくなるのか。

ベースカラー、メインカラー、アクセントカラーとは何なのか。

そして、

「好きな色」と「伝えるための色」は何が違うのか。

次回は、

DESIGN BASIC #05｜色――「好き」ではなく「伝える」ために選ぶ

をテーマにします。

デザインを、基本から。

一つずつ学び直していきます。