読みやすいブログの 「行間」と「字間」 を比較してみる

多くのブロガーさんのブログを見ていた後に自分のブログを見返し、

「なんかあまり読みやすくないな」
そのように思われたことないでしょうか。

かくいう私なみぞうもブログの可読性が気になり、その設定を色々模索しております。

いくつか理由がある中で今回は「行間」と「文字間」に注目して見ました。
その中でブログが読みやすくなる設定値を考えていきたいと思います。

「行間」と「文字間」は文章のどこの部分?

まず、この行間と文字間はどこを指しているかというところから。
下の画像をご覧ください。

「行間」と「文字間」は文章のどこの部分?
イメージがつきましたでしょうか。

ようするに通常の改行を行った時、次の行とどれくらいスペースを空けるかというのが「行間」です。
文字と文字の間をどれくらいスペースを空けるかというのが「文字間」です。
そして今回は、段落と段落の間のスペース(ここでは段落間と呼ばせていただきます)の大きさも同時に考えていこうと思います。

ここの3つの指定値を変更するだけでブログの見え方はガラリと変わるのです。
そして、この二つの指定はHTMLとCSSのある値をいじります。

1つは「line-height」と呼ばれる値。
2つ目は「letter-spacing」と呼ばれる値。
もう一つは実はここが少し厄介なのですが、ワードプレスの多くの場合「p」タグの値が関連していることが多いです。

それでは実際多くのブログの設定はどうなっているのか見てみました。

見やすい「line-height」と「letter-spacing」と考える

結局は、

【ブログの見易さには、フォントスタイルやカラーも影響する】

のですが、ここのお話はまた今度行うとしてあくまで今回の題材である「行間」と「文字間」、そして「段落間」のみを見比べて見ました。

有名ブロガーさんのブログの設定を見比べて見た。

ということで個人ブロガーさんだけでなくキュレーションサイト、コーポレートブログと見比べて見た結果、それぞれ個性が出ておりました。
当然【px】指定や【em】指定、【%】指定などなどそれぞれのブログサイトさんで設定の仕方は異なります。

バズ部

バズ部
URL:https://bazubu.com/

letter-spacing: 指定なし;

manablog

manablog
URL:https://manablog.org/

letter-spacing: 指定なし;

ひつじアフィリエイト

ひつじアフィリエイト
URL:https://hituji-affiliate.com/

株式会社LIG

株式会社LIG
URL:https://liginc.co.jp/

グノシー

グノシー
URL:https://gunosy.com/

letter-spacing: 指定なし;

実際に読みやすくなるように設定をいじってみた。

上記はあくまで一例ではございますが、実際にこの数値でどれだけ読みやすさが変わるのか。
まずはいくつか極端なパターンで見てみようと思います。

一般的ブログパターン

こんにちは、なみぞうです。
まずは今回見比べた中で、最も多かった主流なパターンです。

「line-height」の値は【1.8】に設定しております。多くのブログサイトが【1.7〜2.0】に設定していましたね。
「letter-spacing」の値は【normal】に設定しております。つまり、設定を変えずです。

段落間は【1.5】です。

ちなみに段落間の指定は、ブログサイトによって【margin-top】の場合もあれば、【padding-bottom】の場合もありますので、ここはご自身のブログの設定に合わせて変更しましょう。

一般的ブログパターンの段落間だけ調整

こんにちは、なみぞうです。
こちらは一般的なブログパターンで段落間のみ広めに取って見ました、

だいぶ見やすくありませんか?
ブログを書く場合、段落がどの程度に分かれるかは書き手の書き方に寄ることが多いと思います。
特にワードプレスの場合、初期設定で<p>タグも入りますので気をぬくと段落だらけになってしまいますよね。もちろんそれが悪いわけではないですが、あまりに段落で分けすぎてしまっている場合、段落広めに取っていると間延びしている印象になってしまいますのでご注意を。

個人的には好きですが。

縦横幅広めのパターン

こんにちは、なみぞうです。
こちらは行間も文字間も段落も広めに取ったパターンです。
ジャンルとしては「お金」に関わるブログジャンルに多かった印象です。
またブログのユーザーとして高齢層を狙っているようなブログが多く、文字自体大きめに設定しているブログが多かったです。

「line-height」の値は【2.5】に設定しております。
「letter-spacing」の値は【.1】に設定しております。【0.1】と同義ですね。

段落間は【3】です。

縦横幅狭めのパターン

こんにちは、なみぞうです。
こちらは行間も文字間も段落も狭めに取ったパターンです。
女性向けブログなどによく見られ、また文字自体も小さいブログに多く使われている印象です。

「line-height」の値は【1.2】に設定しております。
「letter-spacing」の値は【-.05】に設定しております。【-0.05】と同義ですね。

段落間は【1.5】です。通常パターンと一緒です。

読みやすい行間と文字間を考えるには段落間も考える

さて、本日はいかに読みやすいブログを作るかと言うことを考える中で「行間」と「文字間」に注目して見ました。

もちろんブログの読みやすさですからフォントスタイル(ゴシックとか明朝とか)や文字の大きさ、さらには見出しのデザインなどページ全体として考える必要はありますが、この「行間」と「文字間」だけで大いに与えるイメージが異なるのもお分かりいただけたのではないでしょうか。

また同時に読みやすいブログを目的としてこの適切な設定を考えるには

「誰が見るブログなのか」

ということを今一度考え、その人が見やすいような設定を心がけることが重要ですね。

最近の個人的マイブーム紹介

どうもなみぞうです。
最近はもっぱらswitchで【どうぶつの森】と【リングフィットアドベンチャー】を交互に楽しんでおります。

「そんな暇あるならブログ書け?」

いや、全くその通りでございます。
けれど癒しと運動がなくては人間は発狂してしまうので許してくださいませ。

おすすめの記事