文字組みのテクニック ― 読みやすさを設計する

「読みやすさ」は設計できる

フォントを選んだら、次は「文字組み」です。同じフォントでも、行間や字間、文字の配置を変えるだけで読みやすさは大きく変わります。

読みやすい文章は「内容が良い」のではなく「文字組みが良い」場合がほとんどです。読み手が「読みやすい」と感じるのは、無意識のうちに文字組みの恩恵を受けています。

行間（line-height）の設計

行間は文字組みで最も重要な要素です。

適切な行間の目安

日本語は漢字が多く、1文字あたりの情報量が多いため、欧文よりも広めの行間が必要です。

狭すぎる

デザインの約80%は文字でできています。文字の扱い方を変えるだけで印象が変わります。

line-height: 1.1

ちょうどいい

デザインの約80%は文字でできています。文字の扱い方を変えるだけで印象が変わります。

line-height: 1.7

広すぎる

デザインの約80%は文字でできています。文字の扱い方を変えるだけで印象が変わります。

line-height: 3.0

行間の調整ポイント

• 文字サイズが大きいほど行間の比率は小さくてOK（見出しはタイトに）
• 文字サイズが小さいほど行間の比率は大きめに（読みやすさを確保）
• 一行が長いほど行間を広めにする（次の行の先頭を見つけやすくする）

字間（letter-spacing）の設計

字間は行間ほど大きな影響はありませんが、デザインの「仕上がり」を左右します。

字間の使い分け

一行の文字数を制御する

一行が長すぎると、読み手は次の行の先頭を見失います。逆に短すぎると、頻繁に改行が入って読みにくくなります。

• Webの本文：一行25〜40文字が理想
• プレゼン資料：一行20〜30文字
• SNS投稿：一行15〜25文字

CSSではmax-widthで本文エリアの幅を制限することで、一行の文字数をコントロールできます。

長すぎる（60文字以上）

デザインの約80%は文字でできています。つまり文字の扱い方を変えるだけでデザインの印象は大きく変わります。フォント選び文字サイズ行間字間すべてが重要です。次の行の先頭を見失いやすくなります。

ちょうどいい（25-40文字）

デザインの約80%は文字でできています。文字の扱い方を変えるだけで印象は大きく変わります。

短すぎる（15文字未満）

デザインの約80%は文字でできています。

文字揃えの使い分け

第2章の「整列」で学んだ内容を、文字組みに具体的に当てはめます。

左揃え（推奨）

日本語・欧文ともに、長い文章は左揃えが最も読みやすいです。右端が不揃いになりますが、これは正常。読みやすさが最優先です。

中央揃え（限定的に）

短い見出し、招待状、ポスターのキャッチコピーなど、2〜3行以内のテキストに向いています。4行以上を中央揃えにすると、読みにくくなるので避けましょう。

両端揃え（注意が必要）

左右両端を揃える方法です。新聞やフォーマルな印刷物で使われますが、Webでは単語間に不自然なスペースが入ることがあるため、基本的に避けたほうが無難です。

実践チェックリスト

まとめ

文字組みは「目に見えにくい技術」ですが、読みやすさに直結するデザインの根幹です。行間・字間・一行の文字数。この3つを意識するだけで、デザインの読みやすさは大きく変わります。

これで文字とタイポグラフィの章は完了です。レイアウトの4原則、色と配色、そして文字。デザインの3大要素をひと通り学びました。次の章では「写真・画像」の扱い方を学んでいきましょう。