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

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

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

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

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

1.文字の大きさは14px以上

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

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

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

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

2.行間のline-heightは1.5以上

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

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

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

3.文字のフォントは見やすいメイリオ

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

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

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

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

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

メイリオ
本日は晴れの日で、とても穏やかな天気です。
ゴシック
本日は晴れの日で、とても穏やかな天気です。

4.通常の文字色はグレーに近い黒

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

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

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

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

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

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

5.特殊文字・数字・アルファベットは全角にする

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

半角
1.Aの場合:s>5とd<4の条件
全角
1.Aの場合:s>5とd<4の条件

6.連続した数字やアルファベットは半角にする

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

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

半角
「私の祖母は100歳です。」を英語にすると、「My grandmother is 100 years old.」になります。
全角
「私の祖母は100歳です。」を英語にすると、「My grandmother is 100 years old.」になります。

7.カタカナは全角

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

キリギリスみたいに半角にすると見にくいです。

8.スペースはなるべく半角と全角を使い分ける

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

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

9.文字間がきつい場合は半角スペースで余白をつくる

ひらがなと半角英単語などを連続させると、文字間がきつい印象になります。

その場合は、英単語を全角にすると見にくくなるので、文字間が狭い部分を半角スペースで余白をつくると良いでしょう。

スペースなし
日本で主流の検索エンジンはGoogleとYahooです。
スペースあり
日本で主流の検索エンジンは Google と Yahoo です。

10.タイトルや見出しはデザインで目立たせる

タイトルや見出しは文章の概要を表すもので重要で、視覚的に文章のまとまりの区切りを表すこともできます。

なので、文中の文字よりも大きく太くし、背景色やボーダーなどの何らかの装飾尾を付け加えることで、記事全体の構成がわかりやすくなります。

11.記事が長くなるなら目次をつける

記事の内容が多すぎて、長くなってしまう場合は目次を付けるようにしましょう。

目次をつけることで、記事の内容が多い場合でも、読者に何が書いてあるかを伝えることができ、内容を理解しやすくなります。

12.アイキャッチ画像を入れる

アイキャッチ画像とは、その記事を表すサムネイル画像です。本の表紙のような役割をします。

このブログでいうと、記事一覧のそれぞれに表示されている画像や、記事ページのタイトルの直下に表示されている画像のことです。

画像を使うと、人は直感的に内容を把握しやすくなるので、ブログのテーマに関連した画像をアイキャッチ画像として設定することで、読まれる確率が高くなります。

本でも、表紙があるものとないものでは、表紙有のほうが好まれますよね。

13.頻繁に段落を分けて、文章間に余白をつける

普通の論文などではずらーっと文字が書き連ねてありますが、ブログはそうする必要はありません。

そのようにすると、逆に見づらくなってしまうので、頻繁に段落を分けて、文章と文章の間に余白を持たせましょう。

目安としては2~3行ごとに、段落分けするのがおすすめだと思われます。この記事も見てもらえばわかるように、そのくらいで段落分けしています。

注意点としては、余白がない段落分けは意味がないので、きちんと余白を設定して、文章の間を空けると見やすくなります。

好例としてはこの記事を参考にしてください、ダメな例は以下の通りです。このセクションを段落・余白なしで書いてみます。

ダメな例
普通の論文などではずらーっと文字が書き連ねてありますが、ブログはそうする必要はありません。そのようにすると、逆に見づらくなってしまうので、頻繁に段落を分けて、文章と文章の間に余白を持たせましょう。目安としては2~3行ごとに、段落分けするのがおすすめだと思われます。この記事も見てもらえばわかるように、そのくらいで段落分けしています。注意点としては、余白がない段落分けは意味がないので、きちんと余白を設定して、文章の間を空けると見やすくなります。

14.重要な箇所や強調したい部分は文字の色や太さを変える

重要な箇所や強調したい部分は、CSSで文字の色や太さを変えることで、より読者にわかりやすく印象付けることができます。

上述した記事タイトルと合わせて、図表のタイトル、dlの中のdt、tableの各指標などの強調したい文字をデザインすることで見やすくなります。

ダメな例
注意してほしいことは成功確率が60%ということです。100%ではないので注意しましょう。
良い例
注意してほしいことは成功確率が60%ということです。100%ではないので注意しましょう。

15.リスト形式を用いる

ulやolなどのリスト形式を用いると見やすくなります。

たくさんの項目を列強するものや、順序だてるものはリスト形式を用いて見やすくしましょう。

それぞれの項目に説明を付けるならば、dlを使用するといいでしょう。

ダメな例
今回の調査結果は、Aはとてもいい人で、Bは普通の人、Cも普通の人で、Dは性格が悪く、Eは無関心な人だということがわかりました。
良い例

今回の調査結果は以下のようになりました。

  • Aはとてもいい人
  • Bは普通の人
  • Cは普通の人
  • Dは性格が悪い
  • Eは無関心な人

16.図表を用いる

人は、並んだ文字列を読むより、うまくまとめられている図表などで直感的に内容を把握することができます。

文字でうまく説明できないものや、冗長になってしまうものはtableなどを使って見やすく表現することで、読みやすくなります。

ダメな例
今回のテストの結果は、Aは数学が80点、国語が75点、英語が90点で、Bは数学が60点、国語が89点、英語が95点でした。
良い例

今回の調査結果は以下のようになりました。

 数学国語英語
A80点75点90点
B60点89点95点

17.画像を用いる

でも述べたように、人は視覚的に情報を把握した方が直感的に理解できます。

文字で表現できなかったり、複雑な手順などは一緒に画像を用いて説明することで、より理解が増します。

わかりにくい部分は、画像で分かりやすく表現して、読みやすい記事にしましょう。

18.枠でくくる

文章を引用したり、例文を記載するときは、それ以外の部分と区別するためにborderなどを設定して枠でくくりましょう。

枠でくくると、一目見てどこが本文で、どこが引用箇所なのかを判別することができ、読みやすくなります。

重要な箇所なども枠でくくると目立たせることができます。

ダメな例

今回はお会いした人は次のように述べていました。ここではその人が言ったことをそのまま記述します。

時代の流れの変化は激しくなってきている。間もないサービスが昔では到底考えられないような勢いで急速に成長して発展を遂げたと思えば、わずか数年で衰退してしまうというよなことが頻繁に生じるようになった。盛者必衰と言ってしまえばそれまでだが、何らかの対策をするべきだと思う。

このようなことを述べており、私としてはとても興味深い話だった。

良い例

今回はお会いした人は次のように述べていました。ここではその人が言ったことをそのまま記述します。

時代の流れの変化は激しくなってきている。間もないサービスが昔では到底考えられないような勢いで急速に成長して発展を遂げたと思えば、わずか数年で衰退してしまうというよなことが頻繁に生じるようになった。盛者必衰と言ってしまえばそれまでだが、何らかの対策をするべきだと思う。

このようなことを述べており、私としてはとても興味深い話だった。

19.リンクの色は他の文字と区別する

リンクの色を区別しないと、どの箇所がリンクかわかりにくくなってしまいます。

文字色を多用しすぎず、リンクと同じ文字色を使わないようにして、リンクを他の文字と区別させるようにしましょう。

20.リンクはtarget="_blank"を設定する

リンクのaタグには、別窓でページを表示するtarget="_blank"を必ず設定しましょう。

いちいちページが切り替わって、「戻る」をして元の記事に戻ることは面倒くさく、ユーザービリティを損ないます。

別窓で表示させるようにすれば、リンク先を参照しながら読み進めることができるので、必ず設定しましょう。

21.SNSボタンは記事の上と下に設置

ユーザーがSNSボタンを押すのは、記事を読み終えたときか、SNSで宣伝するために再訪問するときです。

前者の場合は記事の下、後者の場合は記事の上に設置することで、SNSボタンを利用しやすくなります。上下の両方に設置することをおすすめします。

記事の途中などは絶対にやめましょう。読みづらくなります。

22.広告は記事の最後に設置

広告をタイトル直下や、記事中に設置してあるブログがありますがやめましょう。

読者に見てほしいのは記事であって、広告ではありません。

記事の部分は、記事の画像や文字だけにしましょう。それに、設置場所は記事の最後が最も効果的とも言われています。

読みやすい記事にすることで、自然とPVも上がり、広告収入も増えてきます。記事の途中なんかに設置したら嫌気がさして離脱するユーザーもいます。

しっかりとユーザビリティを考慮して、記事の最後に設置しましょう。

23.余白を重視

最後になりますが、何度も説明したように余白を重視しましょう。

記事の見やすさは余白で決まるといっても過言ではありません。

段落や画像、タイトル、リスト、図表などのそれぞれのまとまりごとで、前後に適度な余白を設けることで見やすい記事になります。

この記事を見てもわかるように、リストやタイトルの前後は余白があります。

しっかり余白をつけることを意識しましょう。

まとめ

以上のことを意識して書くことで、ブログの記事がとても見やすいものとなります。

webサイトはまずデザインからと言われます。役立つ内容が書いてあっても、見にくければ意味がありません。

見やすいデザインで、かつ役に立つ内容であれば、もはや鬼に金棒でしょう。

よって、ブログの記事を書くときは、内容だけではなく、デザインも見やすくするように意識して作成することをおすすめします。