今回は、ブログ記事の本文の行間を調整していきたいと思います。
行間の基本は二分四分
行間とは、行と行の間の幅のことです。
この“行間”の幅が「二分四分」だと見やすくて、“美しい”と、私が通っていた専門学校で習った記憶があります。
ちなみに二分四分は、「にぶしぶ」と読みます。
煮干しみたいですね。
二分四分とは、ズバリ一文字の
75%
です。
簡単に説明すると、
一文字の二分（２分の１=50%）と
四分（４分の１=25%)で
二分四分、
つまり 75%。
ということらしいです。
どうして、二分四分で二分と四分を足して 75% なのか日本語的なことは私には正直わかりませんし、今回は深く掘り下げないでおきます。
とにかく“にぶしぶ”という煮干しみたいなワードってことでそのまま頭に残っています。
行間は、迷ったら二分四分、
そうしておけば、ほとんどの人が文句のつけようのない見た目にはできると思います。
ちなみに「Photoshop」や「Illustrator」の文字パネルで、
行間を「（自動）」にすると、デフォルトで二分四分で表示されるように設定されているようです。
それくらい“デザイン業界”ではとても一般的な“基準”といえそうですね。
また、「行間」と似たようなワードで「行送り」と言うワードもよく使われますが、これは行の頭から次の行の頭までの幅の事を指します。
文字一文字と行間を足した幅、
行間を二分四分で考えてパーセントて言うと、
175%
ですね。
Web デザインで
行間を指定する方法
Web デザインで行間を指定するには、CSSのline-heightプロパティで指定します。
値を二分四分相当で指定するには下記を記述します。
line-height: 1.75;単位は、em や px や % など使用可能ですが、
特に意図がない場合は“単位無し”で記述することで柔軟に対応できます。
というのも、
単位をつけると親要素の値が継承されるためです。
line-height は、厳密には「行送り」ではない
私たちが、Web デザインするとき、CSS で「line-height」を使うと思いますが、実は「行送り」とは別物みたいです。
というのも「line-height」は、読んで字のごとく“行の高さ”を指定しているプロパティなのです！
「line-height」と「行送り」と「行間」は厳密には違うものとして頭の片隅に入れておくとよいかもしれませんね。
とは言いつつも、
実際にコーディングしたときに困ることは、
行の一番上に若干隙間ができるということでしょうか……。
２行目から下は、想定した「行送り」にすることができますし、それほど神経質にならずとも、状況に応じて調整してあげると良いのかなぁと思います。
ただし、知っているのと知らないのでは、その調整に対する気持ちよさが変わってきますもんね。（←？）
頭の片隅に入れておきたいものですね！
行間で変わる印象
行間の基準の例として「二分四分」を上げましたが、制作物によっては『もっと広くしたい！』『もっと狭くしたい！』ということもあるかと思います。
直感的に、何となく、ということが多いとは思いますが、、“一応説明”できるようにまとめておきたいと思います。
ただし以下は私の思う印象なので、必ずしも正解ではありません。皆さんもぜひ「行間の広さで伝えられる印象はどんなものだろう」などと寝ながらでも考えてみてください！
広めの行間は、言葉に思いを込めたいとき
よく、行間を広めにとっている読み物として、パッと思いつくものとして「詩」がありますね。情景や感情を、読者にとにかく伝えたいものには、行間のを広く取るのが相性が良いような気がします。言うなれば、オシャレにしたけりゃ行間を広めにとればいいのかしら？
また、文中で特に伝えたいことをあえて行間を広くとって記載することもあるかと思います。
今、お寿司が無性に食べたい。
こんな感じで。（？）
狭い行間で与える印象は？
行間を狭くすると、圧迫感というか忙しさというか鬼気迫る感じがするような気がします。“読ませる”と言うよりは、全体の見た目重視でバランスをコントロールする時に詰めたりするイメージですかね。
また、「見出し」など行数が少ない文章の行間は、格好よく見えるように狭くしますね。
スペースがなくて致し方なく行間を詰めるということも往々にしてあるかと思います。逆もまた然り。その点ブログは、縦幅がほぼ無限といっても差し支えないのでより自由な行間で文章を表現できますね！
参考サイト
参考として、日本語を使用しているいくつかの有名なサイトの「line-height」を調べてみました。
Yahoo!ニュース
line-height: 1.8em;
Yahoo!ニュースは、単位を em で設定しているようでした。
NHKニュース
line-height: 1.875;
かなり刻んでいますね。フォントのサイズが 16px でしたので、これを 1.875 倍するとちょうど 30px になりますのでそういう意図なのかなと思います。
Gigazine
line-height: 1.6em;
写真が多い記事が多いので、あえて行間を詰めているのかもしれませんね。
CGWORLD.JP
line-height: 1.6em;
インタビュー形式の記事が多いサイトです。
行間は詰めてますが、セリフ前後に一行分スペースを空けて調整しているように見受けられます。
ほかにもいろいろなサイトを調べてみましたが、ほとんどのサイトの line-height は 1.6~2 で調整されていました。1.6 だと少し詰まって見えて、2 だとゆとりがある印象ですね。
そう見てみるとやはり間の「二分四分」にしておけば文句のつけようがないというのはあながち嘘ではなさそうですね……。
また、なんとなく読者層が若そうなサイトは行間を狭く、逆に年齢が高そうな読者層のサイトは行間を広くとっている印象でしょうか。また、エンタメ寄りのサイトもどちらかといえば行間が広い傾向に感じます。
本ブログの行間を見直す
さんざん「二分四分」と言いつつ、
本ブログ記事の行間は 100% に設定しました。
line-height: 2;理由は、
本ブログのジャンルは、ハウツー系ではありますが、「堅苦しさを少なくポップに」読んでもらいたいと思っておりますので、もっと若々しいサイトにしていきたく、思い切って 100％ で時間をとってみました！
まとめ
「line-height」は 1.6~2 くらいにすると良さそうですね。デザインするときにどう見せたいかによって調整していきましょう。
基本の基本としては二分四分（にぶしぶ）で、line-height: 1.75;です。そう設定しておけば間違いなしといっても過言ではない！はず……。
参考文献
プリント日和. 「【ゼロから始めるDTP講座・第4回】読みやすく美しいデザインの文字ってなんだろう」. https://www.brother.co.jp/product/printer/home/magazine/kiji66/index.aspx, 2024年1月16日閲覧。
Yahoo! JAPAN Tech Blog. 「文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦」. https://techblog.yahoo.co.jp/entry/2023052430423559/, 2024年1月16日閲覧。
