【デザインの基礎知識】行間調整のコツと目安

デザイン歴23年、ガチデザイナーの「Tetsuya」です。

こちらの記事ではデザインの基礎中の基礎、
これができていないとプロのデザインとは肩を並べることができない

デザインする上で絶対に欠せない部分と練習方法についてお伝えしてます。

デザインは本当に奥深いもので、
様々な要素が絡み合ってデザイン全体の印象が決まります。

ということで、今回はデザインの基礎「第二弾」ともいうべく、
「行間」について解説していこうと思います。

【デザインの基礎知識】行間によって印象が変わる

さて、今回は行間にについてお伝えしますが、
デザインする時、どれほど行間を意識していますか？

行間というのは基本的に、文章の読みやすさに最も大きく影響するものですが、
実はデザインの印象にもかなり大きく影響します。

実際に見比べて見るとよく分かりますが、
以下、どちらの行間なら読んでみようと思いますか？

おそらく右側の方に目がいくのではないでしょうか？

つまり文字情報を入れる場合は、フォントサイズに対して適切な行間というのがあって、
狭いスペースに無理やり情報を詰め込もうとしてしまうと、

せっかく届けようとした情報を相手が見る気をなくしてしまい、
自分の伝えたいことが相手に届かなくなる可能性が高くなります。

なので作るものにもよるのですが、デザインする際には
情報量に対して「適切な行間を設定する」ことが、実はものすごく重要です。

ちなみによくある「規約や約款」と言われるものは、
トラブル時の「逃げ」のために用意されているものに等しく、

必ず目を通せと言われるものの、あえて目を通しにくいフォントサイズや行間、
読みにくい文章で作られたりしています。

ある意味、そうしたものも読む気がしないよう
「意図的に」デザインされているわけです。

デザインに最適な行間の目安とは？

ということで、フォントサイズに対して、
どの程度の行間にすればもっとも良いのか？というと、

ベストな設定はズバリ「文字サイズの1.5〜2倍」ぐらいが最適です。

なので、例えば、文字サイズが16ptの場合、
最適な行間は「16pt × 1.5」、もしくは「16pt × 2」で24pt〜32ptということになり、
その間を取るなら、「28pt」が最もしっくりきやすい行間になります。

その証拠に、adobeのillustrator（イラストレーター）の場合は、
文字サイズに対して「×1.5 〜 ×2.0」の中間値である175%が

デフォルトの行間値として、設定されています。

だからもしも、行間の設定に悩んだ時は、

上記の計算式で、割り出すようにしてみてください。

デザインにおける行間と行送りの違い

ちなみにデザインの世界では行間以外に「行送り」という言葉があって、
ここまでお伝えした「行間」というのは、厳密には「行送り」ということになります。

行間と行送りでは何が違うのかと言うと、
行間は以下の部分（下図左）、文字のベースラインから次の行の天面までの距離、
行送りは、文字の天面から天面までの距離になります。

なので、厳密に改めてお伝えすると、最適な行間と行送りは以下の通りです。

最適な行送り（上図右側）は「文字サイズの1.5〜2倍」
最適な行間（上図左側）は「文字サイズの50〜100%」（文字半個分、もしくは1文字分）
※年齢を問わず最も読みやすい行間設定は文字サイズの70%分の空き（0.7行分の空き）

また実際に、adobeのillustrator（イラストレーター）やCanva（キャンバ）をよく見ると、このように

イラストレーターの場合、行間設定の部分は行送りという表記が出ますし、
Canvaの場合もツールの表記こそ「行間隔」となってますが、テキストボックスの固定位置を見ると、
明らかに行送りの基準で行間の位置が動く設定になっています。

なので、厳密には両方とも行間ではなく「行送り」の設定です。

デザインにおける行長と行送りの関係

さて、ついでにもう1つ。

文字サイズと行間、文字サイズと行送りの最適な設定はお分かりいただけたかと思います。

ですが、デザインの難しいところは、
それ以外のバランスによっても印象が変わってしまうということです。

そしてそれ以外のバランスなる要素が「行長」ということになるのですが、
行長というのは何かと言うと、一行に入る文字数のこと。

この文字数が、一行にどれぐらい入っているかで、
デザインの印象や読みやすさも変わりますので、

一行に入る文字数に合わせて「行送り」を調整しましょう。

具体的にサンプルを作りましたが、パッと見て違いが分かるでしょうか？

上記3つはそれぞれの行長に対して行送りを以下のように設定してます。

ちなみに行送りの設定基準は、行長が短いと文章がリズム良く読めるため、
読者がリズム良く文章を読めるように、行送りは少し狭めの「文字サイズ × 1.5倍」、

逆に、行長50文字と文字数が多い場合は、
読者がどこまで読んだか迷子になってしまう可能性があるため、

読んでいる行に集中できるよう、行送りは広め、
それで文字サイズに対して2倍の行送りを設定してます。

こうしてデザインを作る際には、文字サイズや一行の文字数に対して、

適切な行送りや行間を設定することで「読者の読む気が失せない」ように
調整することがとても重要になってきます。

【デザインの基礎】行長に最適な目安

最後に行長の最適な目安についてもお伝えしておきます。

デザインで難しいのは、文章が長すぎても短すぎても、
とにかく見た目のバランスが悪いと、読者に読まれなくなるということです。

なので、行長の最適な目安もぜひ参考にしてください。

行長（読みやすい1行の長さ）
印刷物	最短の文字数	13 〜 15文字
	最長の文字数	40 〜 50文字
	横書きに最適な一行の文字数	15 〜 35文字
	縦書きに最適な一行の文字数	20 〜 45文字
Web	Webページに最適な文字数	25 〜 40文字

上記はあくまでも目安ですので、行送りと行長の関係に悩んだ時の参考にしてください。
※文字数は同じでも文字の大きさによっても印象は変わります。

仮にそれ以上に文字数が増える場合は、無理に一行で流すのではなく、
文字ブロックを2つ、3つに分けるなどして、

文章が読みやすくなる工夫をするようにしてくださいね。

【デザインの基礎】行間調整のコツと目安まとめ

今回はデザインをする際に、文字数や行間によっても印象が変わるということで、
最適な「行送り」と「行長」、そして「行送りと行長」との関係についてもお伝えしました。

もちろん、これらの設定というのは、あくまでもグリッドラインに沿うような
整理されたデザインの時ほど効力を発揮しますが、

ランダムで自由度の高いデザインを作る際にもレイアウトの目安にできます。

いずれにしても大事なのは、デザインの考え方だったり、
行間や行送り、行長をどういう設定にすれば、どんな印象に見えるのか？
冷静に分析しながら、自分ではなく

「見る人のことを考え」丁寧にデザインを作るということです。

というのも、デザインというのは基本的に、
相手に自分の情報や印象を伝えるためにするものだからです。

なので、相手に伝わらないデザインというのはある意味「デザイン」とは言えませんし、
時間をかけてデザインする以上は、どうすれば自分の思いや考えが相手に伝わるのか、

デザインが与える印象を考えながら「設計」しないともったいないです。

だからこそこのブログは、デザインのことがよく分からず
「モヤモヤ」している人に対して、

少しでも早くそのモヤモヤを解決してもらうために立ち上げたものになりますので、
僕の記事がモヤモヤ解消のヒントになれば嬉しいです。

こちらも参考にどうぞ！