誰でも簡単にできる、読みやすいブログサイトを作る方法!【オススメのフォント設定を実例付きで紹介】

あなたのWEBサイトは、読みにくいフォント設定になっていませんか?

6つのポイントを抑えて、今日から読みやすいサイトに生まれ変わらせてみましょう!!

読みやすいサイトを作る為のポイントは6つ!

とっても簡単、ポイントは以下の6つ!
要点を押さえて、自分の「サイトレイアウト」に合うように、微調整を行ってみてください。

  • フォントの種類
  • 文字サイズ
  • 行間
  • 文字間
  • 文字色
  • 1行の文字数
CSS項目設定値
フォントの種類(font-family)ゴシック系のフォントを選ぶ
文字サイズ(font-size)16px以上にする
行間(line-height)1.5~2.0にする
文字間(letter-spacing)文字サイズの5%~10%にする
文字色 (color) 真っ黒を使わない
1行の文字数35文字~50文字

実例CSS、基本を押さえたら、サイトレイアウトに合わせて微調整しよう!

未設定の場合

項目設定
フォントの種類(font-family) 未指定
文字サイズ(font-size) 未指定
行間(line-height) 未指定
文字間(letter-spacing) 未指定
文字色 (color) 未指定

See the Pen フォントスタイルNone by 説也 (@setsunaru_com) on CodePen.

フォント設定パターンその1(微調整)

項目設定
フォントの種類(font-family)Hiragino Kaku Gothic Pro
文字サイズ(font-size)16px
行間(line-height) 1.5
文字間(letter-spacing) 0.05 em (文字サイズの5%)
文字色 (color)#494949

See the Pen おすすめフォントスタイルセットその1 by 説也 (@setsunaru_com) on CodePen.

フォント設定パターンその2(幅広)※ オススメ

項目設定
フォントの種類(font-family)Hiragino Kaku Gothic Pro
文字サイズ(font-size)16px
行間(line-height) 2.0
文字間(letter-spacing) 0.10 em (文字サイズの10%)
文字色 (color)#494949

See the Pen おすすめフォントスタイルセットその2 by 説也 (@setsunaru_com) on CodePen.

フォント設定パターンその3(大きめ)

項目設定
フォントの種類(font-family)Hiragino Kaku Gothic Pro
文字サイズ(font-size)18px
行間(line-height) 1.8
文字間(letter-spacing) 0.10 em (文字サイズの10%)
文字色 (color)#494949

See the Pen おすすめフォントスタイルセットその3 by 説也 (@setsunaru_com) on CodePen.

まとめ

最近のWordpressなどのブログテーマでは、初めから読みやすい設定に調整されているものが殆どだと思いますが、既存テーマに頼らずに、WEBサイトやブログデザインを構築する場合には、抑えておきたい設定だと思います。

ちょっとした調整ですが、読者に対して「少しでも読みやすい設定」をすることで、最後まで読んでもらえる確率をあげたいものです。

ここまで読んでいただき、ありがとうございました。
ではまた!!😀