誰でも簡単にできる、読みやすいブログサイトを作る方法！【オススメのフォント設定を実例付きで紹介】
あなたのWEBサイトは、読みにくいフォント設定になっていませんか？
６つのポイントを抑えて、今日から読みやすいサイトに生まれ変わらせてみましょう！！
目次
読みやすいサイトを作る為のポイントは６つ！
とっても簡単、ポイントは以下の６つ！
要点を押さえて、自分の「サイトレイアウト」に合うように、微調整を行ってみてください。
- フォントの種類
- 文字サイズ
- 行間
- 文字間
- 文字色
- １行の文字数
| CSS項目 | 設定値 |
|---|---|
| フォントの種類（font-family） | ゴシック系のフォントを選ぶ |
| 文字サイズ（font-size） | 16px以上にする |
| 行間（line-height） | 1.5～2.0にする |
| 文字間（letter-spacing） | 文字サイズの5%～10%にする |
| 文字色 （color） | 真っ黒を使わない |
| １行の文字数 | 35文字～50文字 |
実例CSS、基本を押さえたら、サイトレイアウトに合わせて微調整しよう！
未設定の場合
| 項目 | 設定 |
|---|---|
| フォントの種類（font-family） | 未指定 |
| 文字サイズ（font-size） | 未指定 |
| 行間（line-height） | 未指定 |
| 文字間（letter-spacing） | 未指定 |
| 文字色 （color） | 未指定 |
See the Pen フォントスタイルNone by 説也 (@setsunaru_com) on CodePen.
フォント設定パターンその１(微調整）
| 項目 | 設定 |
|---|---|
| フォントの種類（font-family） | Hiragino Kaku Gothic Pro |
| 文字サイズ（font-size） | 16px |
| 行間（line-height） | 1.5 |
| 文字間（letter-spacing） | 0.05 em (文字サイズの5%) |
| 文字色 （color） | #494949 |
See the Pen おすすめフォントスタイルセットその１ by 説也 (@setsunaru_com) on CodePen.
フォント設定パターンその２(幅広）※ オススメ
| 項目 | 設定 |
|---|---|
| フォントの種類（font-family） | Hiragino Kaku Gothic Pro |
| 文字サイズ（font-size） | 16px |
| 行間（line-height） | 2.0 |
| 文字間（letter-spacing） | 0.10 em (文字サイズの10%) |
| 文字色 （color） | #494949 |
See the Pen おすすめフォントスタイルセットその２ by 説也 (@setsunaru_com) on CodePen.
フォント設定パターンその３(大きめ）
| 項目 | 設定 |
|---|---|
| フォントの種類（font-family） | Hiragino Kaku Gothic Pro |
| 文字サイズ（font-size） | 18px |
| 行間（line-height） | 1.8 |
| 文字間（letter-spacing） | 0.10 em (文字サイズの10%) |
| 文字色 （color） | #494949 |
See the Pen おすすめフォントスタイルセットその３ by 説也 (@setsunaru_com) on CodePen.
まとめ
最近のWordpressなどのブログテーマでは、初めから読みやすい設定に調整されているものが殆どだと思いますが、既存テーマに頼らずに、WEBサイトやブログデザインを構築する場合には、抑えておきたい設定だと思います。
ちょっとした調整ですが、読者に対して「少しでも読みやすい設定」をすることで、最後まで読んでもらえる確率をあげたいものです。
ここまで読んでいただき、ありがとうございました。
ではまた！！😀