文字の読みやすさを生み出す為の知識と方法【後編】

文字の読みやすさを生み出す為の知識と方法【後編】


先週(4/15)公開した「前編」に引き続いて、今回は「後編」です。今回のテーマは文字の見た目を「揃える・調整する」ことです。前回お話した「3つの要因」と合わせて、文字を扱う際に必ず行う技術的な部分についてのお話です。

読みやすさを作るために「揃える」事を意識する。

文字選びについては前回の記事を参考にしてもらえば良いのですが、それだけでは「読みやすさ」を生み出すのに十分な知識とは言えないです。文字を扱う上で私達が行う重要な作業として、文字の見た目を「揃えて、調整する」事があるのを忘れてはいけませんね。

今回はこの、文字の見た目を「揃えて、調整する」事を考えて行きましょう。

1.文字の「字間」を調整する。

字間(じかん)は文字と文字の間に生まれる「一定の空間」の事を指します。(詳しくは以前の記事を読んでくださいね。)文字を組んで行く際には、この字間を調整する事が必須となります。この字間を調整するとはどういう事か以下のサンプルを見てみましょう。

字間を調整して左右の空間を揃える

調整をしていない場合の字間は、漢字と漢字の間、平仮名と漢字の間など文字の形が変わるごとで字間はバラバラです。特に文字の形が縦長になる文字(ひらがなの「り」など)は、字間がより広く空いている事がわかります。

次に字間を調整したものを見てみましょう。ここでは2種類(詰め気味・空け気味)の調整を行なったものを挙げました。まずは「詰め気味」に調整したものを見ると、各文字の字間が詰まる事で見た目に「まとまった印象」が出て「テンポよく読み進める」事ができます。

「空け気味」に調整したものは詰め気味のものより、まとまった印象が下がりますが、「ゆったりした印象」が見られます。その為、詰め気味の場合よりも「ゆっくり文字を読ませる」事ができます。
字間の調整をすることの狙いは、見た目の美しさを作ることだけでなく、文字を読むリズムを一定に保って読みやすさをを生み出す事でもあるんですね。

2.文章の「行間・行送り・行長」を調整する。

行間は「前の行の下側から次の行の上側までの間隔」を、行送りは「ある基準点間の送り幅」を言います。行長は「一行の長さ(文字数)」を指します。詳しい解説は以下のサンプルを見てください。

行間と行送りについて

もう一つのサンプルでは、行間が詰まった状態のもの、空いた状態のもの、適度に調整を加えたものを並べました。(差をわかりやすくするために少し極端に設定しています。)

行間のサンプル

文章は目で追って読み進めるので、行と行の間隔が詰まり過ぎると次に読む行を見失う事が多くなり、文章のつながりが途切れたり、読み飛ばしが起きたりします。逆に空きすぎると間延びもしますし、視線を動かす距離が増えるので読み進めにくくなります。結果的に詰まりすぎても、空きすぎても読みにくさにつながります。

次に行長のサンプルでは、「全角15文字・30文字・50文字」でそれぞれ設定をしてみました。(文字サイズは50文字の場合に合わせています。)この行長の場合も、短いと視線の折り返しが頻繁になり疲れやすくなり、長すぎると視線の移動量が大きくなり、読みにくさを与えることになってしまいますね。

行長のサンプル

3.文字サイズを揃える。

日本語の文章は漢字だけでなく、ひらがなにカタカナ、数字、記号、アルファベットとたくさんの文字種を使って構成されます。この文字種が変わるごとに文字の大きさは異なります。(ここも以前の記事で書いています。)

和文と欧文が混じったサンプル

サンプルを見てもらうとわかりますが、文章中のアルファベットは漢字と同じ文字サイズで設定しているのに、サイズが少し小さく見えますね。和文と欧文を組み合わせた文章(和欧混植とも言います。)の場合、こういった文字種ごとの「見た目のサイズ」にも注意が必要です。

加えて、文字サイズを調整して「文字サイズのバラつき」を減らす事も大切です。

それぞれの調整時のポイントを知っておこう。

字間、行間、行送り、行長、文字サイズをそれぞれ「揃える」必要があることはわかったのですが、気になるところは「揃える時の基準」や「上手く揃えるコツ」だと思います。ここではそれぞれの「揃える時のポイント」を考えてみましょう。

1.字間は「詰める」と「空ける」で調整する。

字間は書体や文字種(漢字・ひらがな・カタカナ・アルファベットなど)によって、それぞれ間隔が異なります。文章はそれらを組み合わせて構成していくので、「適切な字間を数値化する」ことが難しく、一律に決まった数値(調整値)を決めることができません。

文字の組み合わせで異なってくる字間

その為、字間の調整は「見た目」で行う必要が出てきます。また、どの文字の字間を詰めるか、空けるかを決める時は下のサンプルを参考にして考えるとポイントが掴めるのでは無いかと思います。

「詰める所」と「空ける所」を見極める

まずは「字間の空いている箇所」を探して見ましょう。ここでは特にひらがなの部分や、カギ括弧などの記号の前後に空きが目立つので、その部分を詰める必要があります。

上記の場合とは逆に、文字の組み合わせによっては「字間が詰まった」箇所も出てきます。こういった字間が詰まった箇所は「空ける」事で調整をして全体の字間を均一にします。サンプルにもあるように、カギ括弧などの記号は「約物(やくもの)」とも言われ、使った箇所の前後の字間が空くので、この箇所も必ず調整をしましょう。(カギ括弧以外にも約物はあります。)

約物(やくもの)について

字間調整をする上で大切な事は「文字と文字の間隔を見た目の面積(空間)で統一する」という事です。

字間調整の感覚を養うには、いろんな組み合わせの文字を何度も調整する事だと思います。地味でもこういった反復作業が上達の近道なのかも知れませんね。(僕も未熟なのでがんばります。)
Photoshopで字間を調整する時のコツや操作方法については、こちらの記事に詳しく、丁寧に紹介されています。

ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」についてのまとめ| クリエイティブメモメモ

2.行間・行送り・行長を調整する時の目安

行間・行送り・行長も文字サイズや書体の種類、デザインの条件によって変わるので字間同様に「明確な数値」で基準値を決める事は難しいです。ですが、調整をする際の目安として考えられている数値は以下になります。

行間・行長の調整をする時の目安

上の数値はあくまでも「目安」です。ここでのポイントはあくまでも「調整をする時の基準を知る」事です。扱う文字サイズや文章の長さによって、行間と行長の調整は都度行う必要がある事を忘れないでください。

3.文字サイズを揃える時のポイント

文字種の中でもっともサイズが大きいのは「漢字」です。その次に「ひらがな・カタカナ」そして「アルファベット・数字」とサイズが小さくなっていきます。文字サイズを揃える時のポイントは、「一番大きい文字種に合わせる」事です。

文字サイズを合わせる時の基準

サイズを揃える事と合わせて注意したい事として、サイズを大きくした文字は他の文字よりも大きくなった分、文字の線も太くなってしまう事があるので、その点にも注意をして、「文字の太さも揃える」ように心がけておきましょう。

今回のまとめ

  • 読みやすさを作るには「見た目を揃える」事も大切。
  • 字間は「詰める」と「空ける」で調整する。
  • 適切な字間を数値化する事は難しいので、調整は「見た目」で。
  • 調整する時の「目安」を知って、調整時の基準を持つ。
  • 文字種ごとのサイズと線の太さも調整する。

前編と後編の2回に分けて、「読みやすさ」をテーマとして書いて来ましたが、一言で読みやすさと言っても、知識に加えて「見た目を調整する技術」も必要であることがわかりました。特に調整の作業については数値的な考え方だけでなく「調整をする感覚を養う」必要がある事を知ることができましたね。

技術的な事はただ知っているだけでは、デザイン表現に置き換えていくのに難しい部分が多いです。自分自身の技術を高める為には、文中でも書きましたが、反復して「調整する」作業を行う事が上達の鍵になるんだと思います。

結果として1回増えてしまいましたが、次が文字についての最後の回になります。次回のテーマは「文字のレイアウト」についてです。文字の基礎知識、読みやすさを活かして、効率よく文字を読んでもらうためのレイアウトや、レイアウトによる表現などを書いていければと思います。

タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック- (デザインラボ)

タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック- (デザインラボ)

今回の記事を書くにあたっては、こちらの書籍を参考にさせていただいています。とても有名な書籍なので、お持ちの方もいらっしゃるかと思いますが、文字に関する基礎知識がわかりやすく記載されていて読みやすいです。