読みやすいブログのためのフォントサイズ・行間・文字色のおすすめ設定

byNatchan - 2023/12/04

0

読みやすいブログにするためのWebフォント周りのおすすめ設定や文字デザインの見直し方を解説します。Webサイトのタイポグラフィーを改善したい人、初めてのブログ運営で文字サイズ・行間などをどう調整したらいいかわからない人におすすめの内容です。

{tocify} $title={Table of Contents}

無料配布中！当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料でDLできちゃいます( ^o^)⊃―☆{codeBox}

ブログ向けおすすめ文字サイズ

結論を先に言うと、読みやすいブログにするためのおすすめ文字設定は以下の通りです。まずは本文から。ちなみに、文字や文章を読みやすくするために整えることを"タイポグラフィー"と言います。

本文サイズ：22～25px
行間：1.6em
font-weight：400 ※太字は700
1行あたりの文字数：35～37字
文字色：#333333
ダークモード：#f6f7f8

続いて、本文を軸にした各見出しの文字サイズのおすすめ設定は以下の通りです。当サイトもこれらに沿って文字サイズを設定しています。

H3サイズ：本文＋2～5px
H2サイズ：本文＋5～7px
H1サイズ：本文＋8～10px

上記の設定は筆者が大手メディアや人気ブログをチェックして、独自にまとめた法則です。このルールに従ってブログのタイポグラフィーを調整すると可読性が上がります。

よく本文サイズは17か18pxが最適だと言われますが、4つのブログを運営している身からすると、17pxってかなり小さいんです。文章が長くなりがちなら別に問題ないですが、そうでないなら本文は22pxが最もおすすめ。当サイトも22pxに設定しています。

17px VS 22px

上の画像は左が本文サイズ17pxに設定した姉妹サイト、右が22pxに設定した当サイトのスクショです。画像を見てもわかる通り、右側の方が文字サイズが大きいのでより速く読めるんです。

行間は1.6emがベストです。1.5emじゃ狭くて読みづらいです。ウェイトは400がベストです。300じゃ線が細すぎるので。1行あたりの文字数については、ブログのコンテンツ幅によって変わってきますが、当サイトは35字になるよう設定しています。40字だとちょっと多いかなという印象。

文字色は真っ黒（#000000）ではなくダークグレーよりの黒が目に優しいので読みやすいです。文字色は特に決めてないので、当サイトが設定しているカラーコードをそのまま記載しました。

具体例を挙げるなら、多くの人に利用される個人ブログiPentecさんを参考にしてください。まあブログというよりかはデータベース的なサイトですが、ダークモードでもライトモードでもとても読みやすいです。

Webサイトのフォント・文字サイズ・文字色を一括で調べるならWhatFontという拡張機能が便利です。また、複数のサイトを比較するときはブラウザのズームを100%に統一してください。{alertSuccess}

読みやすいおすすめWebフォント

読みやすいブログにするためのおすすめWebフォントは以下のゴシック体がおすすめです。実際、多くのメディアでも利用されるWebフォントです。

Webフォントの選び方をざっくり言うなら、多くの漢字に対応していることとウェイトが豊富なことですかね。本文と太字の2種類は最低限必要です。※ウェイトとはフォントの太さを意味します

ちなみに、当サイトはどのWebフォントを使うのか決めかねているので何も設定していませんが、Noto Sans JPが最も多く利用されているイメージなので多分これを選びます。

姉妹サイトの方ではM Plus 1pを使っています。このフォントは丸字っぽいのでビジネス系や真面目な雰囲気のブログには向きません。同じゴシック体でもフォントによって雰囲気全然違うので比較してみてください。

Adobeの日本語Webフォントをサイトを遅くせずに導入する方法

Adobeの日本語Webフォントはとても読みやすいですが、導入するとサイトの読み込みが遅くなります。今回は、表示速度を落とさずに日本語Webフォントを使う方法を教えます。AdobeのWebフォントを導入したらサイトが重くなってしまった、日本語Webフォントを使いたいけどサイト...

www.live-to-design.com

最後に

以上、読みやすいブログのためのフォントサイズ・行間・文字色のおすすめ設定について解説しました。

私がそもそもブログのタイポグラフィーを見直そうと思ったきっかけとなったのは『2つのサイトを月間100万PV以上にした運営手法と考え方 (ONWAブックス)』という本のおかげです。

この本はノマド的節約術という月100万PV超の個人ブログを運営する松本さんによる著作。この本で月100万PVを達成するために実践したことがいくつか書かれているのですが、その1つにサイトの文字を改善することが含まれていました。

他にもすごくタメになるアドバイスが書かれていたので、サイト運営する人にとてもおすすめです。

Kindle Unlimitedでは、毎月多くのフォントに関わるデザイン本が読み放題になっています。