必須条件！ブログの記事を見やすくするための記事デザイン手法23選（2/3ページ）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ダメな例

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

良い例

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

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

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

ダメな例

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

良い例

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

	数学	国語	英語
A	80点	75点	90点
B	60点	89点	95点