ブログをせっせと書きなぐり『よしできたぞ！』と読み返してみたら、なんだか読みづらいさにガッカリなんてことは日常茶飯事。（内容はさておき……。）そんな感じで読みやすさってなんだろうと考えてみたら、「行間」ということばがおぼろげながら頭に浮かんでくるわけで……。
そんな感じで、少しでも読みやすいブログを目指していざ「行間」についてまとめてみましたので、参考にしていただければありがたき幸せ。
- ブログ記事のオススメの行間
- 行間の基本「二分四分」について
- 「行間」と「行送り」と「line-height」の違いについて
先に言ってしまえば、ブログ記事の行間は line-height を 1.6 ~ 2 くらいにするのがオススメです！これには「二分四分」という謎の用語がキーになるので要チェック！
この記事は2023年1月16日公開で、2024年10月20日にリライトしたものでございます。
目次
行間の基本は
二分四分
行間とは、行と行の間の幅のことです。
この“行間”の幅を「二分四分」にすると読みやすくて“美しい”。と、私が通っていた専門学校で習った記憶があります。ちなみに二分四分は、「にぶしぶ」と読みます。
煮干しみたいですね。
二分四分のサイズは、
ズバリ、
一文字の
75%
です。
一文字の
二分（２分の１ = 50%）と
四分（４分の１ = 25%)で、
二分四分
つまり 75%。
ということらしいです。
どうして二分と四分で二分四分なのかは、組版とか、約物とか、日本の歴史とか、そのへんの何かの由来があるのだと思いますがここでは深く掘り下げないでおきます。とにかく“にぶしぶ”という、煮干しみたいな用語を頭の片隅にそっと保存しておきましょう。何かの時にこのワードを出せば、『お、できるねぇ』って思われるかもしれません。
行間で迷ったときは、
とりあえず「二分四分」にしておいて『一番美しく見えるといわれている行間』にしました……と説明すれば、説得力がありますね！そこから全体のデザインを見て調整するのもよいと思います。
ちなみに、
「Photoshop」や「Illustrator」の文字パネルで、行間を「（自動）」は二分四分の行間で設定されているようです。それくらい“デザイン業界”ではとても一般的な“基準”といえそうですね。
また、
「行間」と似たような用語で「行送り」もよく使われますが、これは行の頭から次の行の頭までの幅を指します。
一文字と行間を足した幅で、行間を二分四分に、
そしてパーセントで表すと
175%
ですね。
Web デザインでの
行間について
Web デザインで行間を指定するには、CSSの line-height プロパティを使います。二分四分“相当”で指定するには、例として下記のように記述します。
line-height: 1.75;値（1.75 のところ）の単位は、em や px や % など、いろいろと使用可能ですが、特に意図がない場合は“単位無し”で記述することで柔軟に対応できます。
line-height プロパティは、厳密には「行送り」ではない
私たちが Web デザインをするとき、CSS で line-height プロパティを使うと思いますが、実はこのプロパティは「行送り」とは別物です。line-height プロパティは、読んで字のごとく“行の高さ”を指定しているプロパティです。ちなみに、英語で行送りは「Leading（レディング）」です。
「line-height」と「行送り」と「行間」は厳密には違うものということは知識として覚えておきましょう。ふと、思い通りの Web デザインにならないときにこの知識が解決に導いてくれるかもしれません。
とは言いつつも、
実際にコーディングしたときに気になることは行の一番上に若干隙間ができるということでしょうか……。２行目から下は想定した「行送り」にすることができますし、それほど神経質にならずとも、状況に応じて調整してあげると良いのかなぁと思います。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;
インタビュー形式の記事が多いサイトです。
行間は詰めてますが、セリフ前後に一行分スペースを空けて調整しているように見受けられます。
読みやすさを重視するなら 1.6 ~ 2.0 くらい！
ほかにもいろいろなサイトを調べてみましたが、ほとんどのサイトの line-height は 1.6~2 で調整されていました。1.6 だと少し詰まって見えて、2 だとゆとりがある印象です。そう考えると、やはり「二分四分」にしておけば文句のつけようがないというのはあながち嘘ではなさそうですね……。
また、なんとなく読者層が若そうなサイトは行間を狭く、逆に年齢が高そうな読者層のサイトは行間を広くとっている印象です。また、エンタメ寄りのサイトもどちらかといえば行間が広い傾向に感じました。
まとめ
「二分四分」とは行間のことで、パーセントで表すと一文字の75%の幅です。「二分四分」は読みやすくて美しい行間と昔から日本で評価されており、説得力のあるデザインの手助けにもなります。行間の設定で困ったら、まずこの設定にしてから調整するのがオススメです。
Web デザインで行間を設定する場合は、CSS の line-height プロパティで、二分四分相当にするのであれば、line-height: 1.75;、バランスを見ながら 1.6 ~ 2 くらいで調整すると読みやすい行間にできると思います。
読者にどう伝えたいかを意識して調整していきましょう！
参考・出典
プリント日和. 「【ゼロから始める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日閲覧。
