｢なんとなく記事の文章が読みづらい｣の解決策3つ

そのままだと読みづらいことも

ブログ記事などを書いたときに、なんとなく、他のサイトと比べて見にくい、読みにくいと思ったときの改善案です。

「文字間」「行間」「色」を調整すると、いくらか読みやすくなるかもしれません。

以下のような構成の文章があるとします。

<div>
  <p>読みにくいテキスト</p>
</div>

CSSの「letter-spacing」プロパティを使用します。
pタグに以下を適用すると、文字間が少し空きます。詰めすぎも空けすぎもよくないですが、よいところを見つけてみてください。

p {
letter-spacing: .1em;
}

CSSの「line-height」プロパティを使用して行間を調整します。
普通、何もしなければ、少し上下が詰まり気味なので、良い感じに空けてみてください。

p {
line-height: 2rem;
}

文字色と背景色の「コントラスト」が高い場合、少し見にくくなることがあります。
例えば、背景色に「#FFFFFF」、文字色に「#000000」を使うなど、完全な白と完全な黒になっているような場合です。

こういった指定になっている時は、読んでいると目が疲れてきます。
しかし、主にその記事を読むターゲット層が高齢者である場合、あえてコントラストを高くしておくのは構いません。

特に理由がなく、幅広い年齢のかたが読むのを想定している場合は、「やや白」「やや黒」の組み合わせにするのがよさそうです。例えば以下のようになります。

div {
  background: #fafafa;
}

p {
  color: #191919;
}

サイトによりますが、女性向けなどの、柔らかいイメージを出したいときは、文字色を少し薄すぎる(背景色に寄せる)くらいにすると、雰囲気が出ます。