この文字間や行間、どっちが正解？文字の余白のセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
ウェブデザイナーのすぴかあやかです。
今回、わたしは「文字間・行間」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「文字間・行間」がよいと感じますか？
1問目「ていねいな雰囲気が伝わるのはどっち？」（難易度★）
2問目「ショートストーリーの世界観に合うのはどっち？」（難易度★★）
3問目「高級感を表現できているのはどっち？」（難易度★★★）
いかがでしたか？
わたしが考える答えは……
1問目の答え：B
2問目の答え：A
3問目の答え：B
以上がわたしなりの解答です。
どの作例もフォントやテキストの内容は同じですが、見せ方によって印象が変わることを感じてもらえたでしょうか。
ではここからは、各クイズの問題について解説していきます。
それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．トラッキングを用いて、文字が伝えたい雰囲気を表現する
1問目の作例の違いは、文字の間隔の広さです。
今回「トラッキング」という機能を使って文字の間隔を調整しているのですが、Aではトラッキングを「-40」と少し狭めに、Bでは「150」と広めに設定しています。
文字の間隔は、人が話すスピードのようなものです。
間隔が広ければゆっくり話す人、狭ければ早口の人のような印象に見えます。
今回は「ゆったりした時間を楽しむ 手間暇かけた、丁寧な暮らし」という内容ですので、せかせか早口で話すより、ゆっくり話すほうが雰囲気に合っているため、わたしは「B」の作例をよしとしました。
また、文字の表記にも少し違いがあります。
Aでは「手間暇」「丁寧」ということばが漢字に、Bでは「手間ひま」「ていねい」とひらがなになっています。
漢字をひらがな表記に変更することを、ライティングや文字校正の用語で「文字をひらく」と言います。
今回「文字をひらいた」のは、「暇」「寧」の文字が少し複雑に見えるため、やさしい印象にしたいためでした。
文字の間隔を整えるだけでなく、文字をひらくことでも、文章の印象を変えられます。
カーニングとトラッキングの違い
先ほど、文字の間隔を調整するのに「トラッキング」という機能を使ったと言いました。
第一回のクイズチャレンジで「カーニング」ということばが出てきましたが、このトラッキングは、カーニングとセットで使われやすいことばです。
参考：この文字詰め、どっちが正解？文字間調整（カーニング）のセンスを磨いておこう
「カーニング」「トラッキング」、どちらも文字の間隔を調整することを指しますが、以下のように違いがあります。
- カーニング・・・文字と文字の間の余白を個別に調整する
- トラッキング・・・文章や段落の「全体の文字の間隔」を調整する
IllustratorやPhotoshopの「文字」パネルでは、この二つを変更できるようになっています。
このようにIllustratorやPhotoshopは、文字の間隔を細かく調整できるのが強み。
妥協のない仕上がりを追求する、プロの仕事を支えてくれる重要な機能です。
2．余白に気を配り、情報のグルーピングを丁寧にする
2問目の作例の違いを考える際、本文の行間の違いが目についたのではないでしょうか。
IllustratorやPhotoshopをお使いの場合、行間ではなく「行送り」ということばのほうがしっくりくると思いますが、この問題のミソは行間や行送りにはありません。
たしかに、Aは行間や行送りが広めで、Bは少し狭めになっています。
しかし、Bの行送りは本文サイズの150％と「狭すぎる」とまでは言えません。
つまり、本文の行間や行送りについて、Bはダメ！とは言い切れません。
ではAの作例をよしとする理由は何でしょうか？
答えは、「見出しから本文までの余白」の違いです。
Bは見出しと本文の間の余白が、本文中の余白より狭くなっていました。
それにより、情報のグルーピングがチグハグになってしまっていたのです。
デザインは情報のグルーピングが重要です。
グルーピングとは、情報を役割別に分けたり、関連があるもの同士でまとめたりすることです。
レイアウトにおいて、グループを視覚的に区別しやすくする鍵となるのが「余白」です。
Bの作例だと、そのグルーピングが上手く行われていませんでした。
一方、Aの作例は、見出しと本文がキレイに分かれています。
今回の作例では、ショートストーリーの世界に読者を引き込む必要があります。
そのためにも、読者に違和感をもたせないグルーピングが大切でした。
行間と行送りって何が違うの？
先ほど、行の間の余白について、行間と行送り、二つのことばを使いました。
実はこの二つのことばには、以下のような明確な違いがあります。
- 行間・・・行と行の間のこと
- 行送り・・・一行目の上端から二行目の上端までのこと
IllustratorやPhotoshopで設定できるのは「行送り」で、文字パネルから変更します。
また、IllustratorやPhotoshopでは、行送りを変更するときに数値入力だけでなく四則演算も使えるので便利です。
例えば、文字サイズの150％の行送りにしたい場合、「文字サイズ」「*（アスタリスク）」「1.5」と入力して、Macは「return」、WIndowsは「Enter」を押せば計算された結果が入力されます。
（「*」は掛け算、「+」は足し算、「-」は引き算、「/」は割り算になります）
こういったかゆいところに手が届く仕様になっているのが、IllustratorやPhotoshopが選ばれる理由ともいえます。
ちなみに、読みやすい行送りには目安があり、文字サイズの150%〜200％といわれています。
しかしこの目安は、フォントの種類や大きさ、テキストの内容や量によって変わってきますので、あくまで目安として覚えておくとよいでしょう。
行送りだけでなく行長にも注目しよう
読みやすい文章をデザインするうえでは「行長（ぎょうちょう）」の調整も重要です。
行長とは「一行の長さ」で、段落テキストの横幅や文字数のことを指します。
例えばとても長い文章を、A4サイズの紙に左から右までびっしり入れてしまうと以下のような問題が起きてしまいます。
- 一行の情報量が多すぎて理解が大変
- 目線の動きが大きく次の行を見失いやすい
このような問題を「行長が長すぎる」と言います。
行長は行送りと異なり、「読みやすい行長は何文字程度」と決めることは難しいですが、「一行の文章量は適切か？」「次の行への視線誘導はスムーズか？」という視点でデザインを確認するとよいでしょう。
3．トラッキングを広げる前にカーニングを調整し、洗練さを高める
3問目の作例は高級感のあるフランス料理のメニューです。
パッと見ただけでは、AとB、どこが違うのか気がつかないかもしれません。
注目してほしいのは、「蜂蜜」と「コンフィ」の部分です。
拡大して並べてみると、Aの作例は、漢字とカタカナの文字間がバラバラになっているのがわかります。
実はAとBの違いは、「トラッキングを広げる前にカーニングを調整しているかどうか」です。
トラッキングとカーニングの違いをあらためて解説しておきましょう。
- トラッキング・・・文章や段落の「全体の文字の間隔」を調整する
- カーニング・・・文字の前後の余白を調整する
1問目はトラッキングが解答の軸でしたが、3問目はカーニングが軸となります。
和文フォント（日本語フォント）の特徴
以下の解説画像のように、和文フォント（日本語フォント）はすべて正方形に入るようにデザインされています。
しかし和文の文字の中には、字画が多く複雑な形の漢字もあれば、シンプルな形のひらがなやカタカナ、「っ」や「、」のような小さな文字や記号（約物）もあります。
そのため、和文フォントをそのまま使うと、隣の文字との文字間がチグハグになってしまうことがあります。
また、文字間がチグハグなままトラッキングを行うと、チグハグさが増してしまいます。
そこで重要となるのが、まずカーニングをしっかり整えることです。
カーニングを調整する方法は「メトリクス」と「オプティカル」の二つがある
カーニングの調整は、IllustratorやPhotoshopを使うのがオススメです。
IllustratorやPhotoshopのカーニング機能には、「メトリクス」「オプティカル」という二つの設定があります。
まず、この二つの設定の違いを知っておきましょう。
- メトリクス・・・フォントに元から含まれているカーニング情報を使用する機能
- オプティカル・・・IllustratorやPhotoshopなどツール独自の機能
どちらの設定を使うかは、実際に適用してみた際、イメージに合っているかどうかで決めます。
メトリクスはフォントに元から含まれているカーニング情報を使用する機能ですが、フォントによってはカーニング情報が入っていない場合があります。
メトリクスを選んでも変化が見られない場合は、そのフォントにカーニング情報が含まれていないため、メトリクス設定は機能しません。
メトリクスが使えない場合は、オプティカルを使用するか、手動で調整しましょう。
ただし、オプティカルは縦書きのフォントでは使用できないため注意が必要です。
ちなみに以下の記事では、カーニングの基本とPhotoshopでの調整方法を詳しく解説しています。
豆知識：構図を指定してイラストを生成できるIllustratorのAI機能
文字の余白の話からは逸れますが、今回の作例では線画のイラストを使用していました。
実はあの線画のイラストは、IllustratorのAI機能「生成塗りつぶし（シェイプ）」を使って生成したものです。
この「生成塗りつぶし（シェイプ）」は、ベクター形式で作成された「シェイプ」と呼ばれる図形オブジェクトを使うことで大まかな構図を指定し、イラストを生成できる便利な機能です。
ぜひ覚えておいてください。
まとめ：文字間・行間のセンスを磨くポイント
今回は文字間や行間に関するクイズと、デザインテクニックを取り上げました。
文字や文章の余白を整えることで、デザインの印象は大きく変わります。
カーニングやトラッキングをはじめ、余白を整えるノウハウを効果的に使いながら、デザインを洗練させましょう。
最後に今回のノウハウのまとめです。
1．情報のグルーピングを意識して余白を設定しよう
- 丁寧なグルーピングが、情報の伝達力を高める
- 文章や段落の「全体の文字の間隔」を調整する
2．カーニングとトラッキングを使い分けよう
- 文字の前後の余白を調整するのはカーニング
- 文章や段落の「全体の文字の間隔」を調整するのはトラッキング
- IllustratorやPhotoshopを使ったカーニングの設定には、メトリクスとオプティカルがある
お相手はウェブデザイナーのすぴかあやかでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
執筆：すぴかあやか
株式会社キテレツ デザイナー・イラストレーター
1981年大阪生まれ。ウェブデザイナーとして制作会社でのアルバイトや社員を経て、2006年からフリーランスとして活動、2017年から株式会社キテレツに加入。イラストを取り入れたデザイン・ロゴやLPデザインなどを得意としている。
noteやXなどで、デザインの考えや日々の気づきを発信している。