必須条件！ブログの記事を見やすくするための記事デザイン手法23選

ブログを書く際は内容がどれだけ役に立つのか、おもしろいのかが重要ですが、それは読みやすいことが前提です。

読みにくければ、いくら質の高い記事内容でも読者読んでくれません。

そこで、今回は記事を読みやすくするためのデザインの方法を紹介します。

ブログの記事を見やすくするための記事デザイン手法23選

文字の大きさは重要です。昔は小さい文字が流行っていて12pxが主流でしたが、それでは小さすぎて読みにくいです。スマホなどではもっとちいさくなってしまいます。

人が読みやすい文字の大きさは14px以上と言われています。それ以上の大きさで設定しましょう。大きすぎるのもだめなので、14～16pxの間がちょうどよいです。

おすすめは15pxです。このブログも15pxでやっており、14pxだと少し小さく感じ、16pxだと少し大きく感じてしまうので15pxにしています。

14px以上なら、自分の好みやサイトのデザインに合わせるといいでしょう。

行間はCSSのline-heightで設定できますが、1.5以上が見やすいと言われています。

広すぎてもだめなので、1.5~1.8の間で設定すると見やすくなるでしょう。

このブログは1.7で設定してあります。

文字のフォントによっても見やすさが変わります。現在、webページで多く使われているフォントはゴシックとメイリオです。

スマホは気にしなくて大丈夫ですが、PCでのfont-familyの設定はメイリオが見やすいのでお勧めです。

また、Macは「ヒラギノ角ゴ」がきれいで見やすいです。なので、font-familyは以下のように設定するといいでしょう。

font-family:"ヒラギノ角ゴ Pro W3","Hiragino kaku gothic Pro W3","メイリオ","meiryo","Verdana","ＭＳＰゴシック","MS PGothic","Osaka","arial","sans-serif";

ちなみに、メイリオとゴシックの違いは以下の通りです。メイリオの方が見やすいと思います。

ブログの文字で赤や緑など、見にくい文字を使うのは控えましょう。多くの文字色を使うのも厳禁です。基本的には黒文字にするようにします。

しかし、黒文字と言っても、完全に真っ黒な文字は刺激が強すぎて見にくくなります。

読みやすい文字色は黒ですが、目に対する刺激を強くしすぎないため少しグレーを混ぜた黒にする必要があります。

おすすめは#333などの少しグレーに近くなる黒にするとよいでしょう。

このブログの文字も#333になっています。以下と比べてみるとよいでしょう。

この文章はは完全な黒の#000の色で表示されています。このような文字色で長文を書くと、刺激が強すぎて目にやさくないです。

「:;><./」などの特殊文字、数字、アルファベットは全角にして使いましょう。半角だと隣の文字との隙間がほとんどなく見にくいです。全角の方が余白が空いて見やすくなります。

上記で数字やアルファベットは全角にすると良いと説明しましたが、それは1文字で使う場合だけです。

2文字以上使って、連続したものとして表すときは半角を使うことをおすすめします。

カタカナは全角にしましょう。

ｷﾘｷﾞﾘｽみたいに半角にすると見にくいです。

スペースは半角と全角を使い分けましょう。

特に決まりというものはありませんが、半角スペースで狭いようであれば全角に、全角スペースで広いようであれば半角にして、見やすくするようにしましょう。