[デザインの基本] ブログの文章部分を読みやすくするために私がやっている7つの技
スポンサーリンク
こんにちは! ヨス（@yossense）です。
今回はブログのデザインの話ですが、すっごいデザインのテクニックを書いているわけではありません。特にブログ初心者の方に読んでほしい超基本的な内容となっています。
スポンサーリンク
ブログの文章を読みやすくする基本のデザイン
ブログの文章というのは結局は内容勝負です。でも初めて訪れたブログって、デザインの良し悪しで読みたくなったり「うわぁ……読む気にならないわー」になったりしませんか? それって読まれる方とすればなんか悔しいですよね（笑）。
せっかく魂を込めて書いた文章ですからぜひとも読んでほしい。ということで、今回は記事の「文章」部分だけにスポットを当てて、私がやっている7つのことを紹介します。
「改行（BRタグ）」は使わない
私はブログではほとんど改行をしません。あ、改行と書いていますが具体的には<br />タグのことです。
なぜ<br />を使わないかというと、見る人のPCや端末の環境によってこちらで指定した改行場所どおりには見えないからです。
上の画像はスマホで見た文章です。このように、PCで見るとイイ感じに見える改行場所（<br />が入っている場所）と、スマホで見て実際に改行されている場所って全然違いますよね。
その結果、ガタガタになって見づらくなってしまいます。これを避けるために私は<br />を撤廃して、変わりに<p>タグを使っています。
詳しくは以前書いたこちらの記事で。スマホで見た時だけ<br />を消し去る荒技も紹介しています。
文章の行間を空ける
先ほど、<p>タグを使うと書きましたが、ただ単に<p>タグを使えばいいというものではありません。行間に注意しましょう。
例えばこの文章ですが、行間をあえてなくしました。行間というのは文字一列一列の間のスキマです。うーん。言葉で説明するのは難しいですね。ほら、ほかの文章と比べて文章と文章の間がキューっと詰まって、凄まじく読みにくくないですか? ちょっとした文章ならまだ我慢できますが、こんな文章が100行も続いたらどうでしょうか? 読みにくいとは別に、とっつきにくいという害もあります。こんなふうにキューっと詰まっていると、ムダに文章がいっぱいあるように見えるんですよね。文章がいっぱいあるように見えると「なんか難しそ!」になって、「このページ見るのやーめた!」となるわけです。ネットで無料で見られるブログ記事というのは簡単に離脱される存在なんですね……。ううっ。
これはCSSでは「line-height」で指定してやります。
p { line-height : 1.9 ; }
というわけで、行間のスペースを適応させてみたのがこちらの文章。
どうですか? 行間を少し増やすだけで、かなり見やすくなりますよね。今の時代、CSSがあって良かった……と心から感謝します。ハイ。大げさです。でもこういう文字がダーッと続くと読みにくいのは同じなので、適度に</p>で区切って、段落をガンガンつけてやりましょう。段落をつけたときの余白の取り方については次の項目で書いています。……ね? ほら、さすがにこのくらいの行数になってくると、行間があったとしても読みづらくなってきますよね?
こんなノリです。ちなみに私は、PC版では「1.9」に、スマホでは「1.7」にしています。完全に私の好みですが。
段落周りの余白を空ける
さて、今度は段落の周りにつける余白の話です。
<p>全然余白を持たせないとこんな感じになります。</p>
<p>ほら、せっかく段落を分けているのに、なんか意味ない感じですよね。Googleには「ここが一つの段落だよということが伝えられていますが、人間にとっては全く意味がないです。読みやすさが改善されてないということです。</p>
<p>つまり、段落をつけるだけでは意味がないです。じゃあどうすればいいかと言うと、余白をつけるんですね。CSSで指定をしてやりましょう。</p>
段落を付けても、そのままではあんまりデザイン的に変化がなく、読みにくいんですよねー。
そこでCSSを使って余白を持たせます。具体的にはこんな指定です。
p { margin-bottom : 3em ; }
解説すると、マージンボトム（下側の余白）を3em（文字3つ分）とっているという意味です。
<p>マージン（余白）をちょっと入れてやるだけで一気に読みやすくなる例です。</p>
<p>どうですか? 読みやすいでしょ。この余白は思い切って入れてやるといいですね。私の場合は文字の大きさの3倍の幅（3em）をとっています。 </p>
<p>ブログによっては違いますが、一般的には1em程度しかとられていないものが多いです。私の感覚では1emは少ないかなーと。5emぐらいとっても別にオッケーだと思います。</p>
あ、もちろん左右にも空白はとっています。ややこしいので省略しますが、親要素の<div>領域に「padding」として左右1em程度を入れています。
1行における文字数を考える
お次は1行における文字数です。あんまり多いと読みづらいので、これはCSSで横幅の長さを指定しています。
まず、70文字ぐらいヨコに並んだ例です。
うわぁ、読みづらい……。35文字程度がちょうど読みやすいと言われています。これはネットが普及する以前（つまり印刷媒体しかなかった頃）からずっと言われていることです。
ほら、35文字程度なら一気に見やすくなりましたよ。CSSでは文字の大きさや幅で指定してやってください。ついでにスマホだと20文字程度にしてます。
太文字のヨコに余白を空ける
ものすごく細かいですが、私は太文字（<b>、<em>、<strong>など）の両脇に余白を入れています。
まずは普通の例を見てください。
例えば私が近所の公園を散歩していたときに大好きなピザが空から降ってきたとします。
そして下記が、太字の両側に余白を入れたもの。
例えば私が近所の公園を散歩していたときに大好きなピザが空から降ってきたとします。
まぁ、ぶっちゃけですがほとんど違いはないです。やらなくてもいいレベルですが、一応CSSも書いておきますね。
strong:before, em:before, b:before { content:" "; }
strong:after, em:after, b:after { content:" "; }
別にマージンとかでもいいんですが、擬似要素の「before」「after」で半角スペースを挿入しています。
見出しには余白をしっかりと
そして見出しです。見出しというのは「見出しに続く文章をわかりやすく要約したもの」です。
では「見出しが見出しの役目をしていない例」を見てみます。
<p>前の段落の文章がここまで続いています。</p>
<h2>■見出しの余白がない例</h2>
<p>この文章の真上の「見出しの余白がない例」って書いてあるやつが見出しです。ほら、せっかく作った見出しが、この文章群によって埋没している感じじゃないですか? ここの文章がいっぱいになればなるほど、埋没します。</p>
今度は見出しの上下に余白（マージン）をとってみました。
<p>前の段落の文章がここまで続いています。</p>
<h2>■見出しの余白がある例</h2>
<p>見出しの上下に余白を持たせてみました。ほら、こうすることで文章がたくさんあっても「ここが見出しだよ!」というのがわかりますよね? 埋没していませんよね。本来、見出しは文章を読みやすくするために入れるので、目立たないと意味がないんです。</p>
こんな感じで見出しの上下に余白を作ることで「ここが見出し!」というのがわかりやすくなりますね。本当はもっと見出しの色を変えたり、装飾をしたりするのをオススメです。
あと、見出しの上下に余白を持たせるときのポイントですが、見出しの上側には多めに余白を空けてください。その方が、この見出しが「見出しの下側にある文章」に属するものということが視覚的にわかりやすいですので。
その辺は下記の記事が参考になります。
見出しに背景を付ける場合
ついでに見出しの背景に色を入れる場合の注意点を。
<h2>■見出しの余白がある例</h2>
<h2>■見出しの余白がある例</h2>
上の例で、下側の方が背景の範囲と文字の間に余白がありますよね? これがないと上側のようにキツキツな印象になります。
これはCSSの「padding」で指定してやります。
h2 { padding: 0.1em 0.5em ; }
この指定では上下に「0.1em」、左右に「0.5em」ずつ入れています。左右の方を多めにとるのがコツですよー。
画像の輪郭
今までは文章を見てきましたが、今度は画像です。
こういう画像って見たことありますよね?
ほら、スマホのスクリーンショットに多いのですが、真っ白い部分が多くて、どこからどこまでが画像がわからないんですよ。なので、枠を付けたり、影を入れたりすると一気にわかりやすくなります。
私の場合、CSSはこんな感じで指定しています。
img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
さっきの見出しと同じで、上下に余白をとるのもお忘れなく!
ちなみに私の場合は<figure>を使ってこんなふうに表現しています。
さて、勢いで書きましたが、途中にある「太字のヨコに空白を入れる」というやつだけやけにマニアックでしたね（笑）。まぁ、こだわっていることなのでいいか。
現在、私の運営するオンラインサロンでは、第四期のメンバーを募集しております! ブログのアクセスを増やしたい方、下記からどうぞ!
こちらは関連記事です。
メールやメルマガのようなテキスト（CSSで装飾できない文章）を読みやすくするコツはこちらです。
スポンサーリンク
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!