【レイアウト・装飾で差をつける】見やすいブログ記事の作り方・書き方

「あの人の書いたブログは見やすいけど、自分の書いたブログはなんか理解しづらいなあ」と感じたことはありませんか？

ブログは、文章だけなく見出しや図、表などレイアウトを工夫することで、圧倒的に分かりやすくすることができます。

今回は、主に装飾やレイアウトを使った分かりやすいブログの書き方を8つご紹介していきます。

ブログがうまく書けません。他の人が書いたブログ記事と比べると、自分のブログはなんだか見にくいんです。

単純に文章を並べているだけだと読み手は理解するのに苦労します。ここでは、レイアウトや装飾を使って読み手に親切なブログの作り方をご紹介していきますね。

■【レイアウト・装飾で差をつける】見やすいブログ記事の作り方(動画解説版)

【はじめに】見やすい分かりやすいブログとは

分かりやすいブログを作るためには、文章だけでなくレイアウトや装飾を工夫して、直感的にわかる(右脳に訴えかける)構成にすることが大切です。

読み手に情報を整理してもらうのではなく、書き手側が、情報・レイアウトを整理して読み手の考える負担を減らすことで、読み手に親切な作りのブログになります。

たとえば、「左脳は論理的な思考をつかさどり、右脳は直感的な思考を司り、、（略）」というよりも、下記の図の方が瞬時に意味を理解できるのではないでしょうか？？

確かに、文章だと読んでから頭の中で理解して、ってなりますけど、図だと見た瞬間にイメージが伝わりますもんね。

みてわかるブログを作るためには、具体的には下記のような項目を実施すると良いでしょう。

見てわかるブログ記事作りの例

2,3行ごとに改行を入れて間を空ける
見出しを使って論理的な文章構造を作る
図を使ってイメージで理解してもらう
箇条書きを使って項目数を理解してもらう
表を使って情報を整理して見せる
長いブログ記事は目次を作って整理する
吹き出しで会話して緩急を入れる
枠や色などの装飾をつける

ここからは、上記のみてわかるブログ記事作りについて具体的に説明していきます。

【1】2,3行ごとに改行を入れて間を空ける

基本中の基本「改行」です。改行されていない文章は、PC表示で2、3行ごとに改行しましょう。

改行されていない文章は読みずらくなります。

■PC表示　改行なしの文章

■PC表示改行ありの文章

とくに、スマートフォン表示の場合、さらに文章が詰め込まれたレイアウトになります。

以下は、上記の文章をスマートフォンで表示した際の文章のレイアウトです。

■改行なしの文章

■スマホ表示　改行ありの文章

PC表示で1行になっていても、スマートフォンでは2,3行と長くなります。

スマートフォン重視でいくなら、できるだけPC表示で2行以内に収めるように心がけましょう。

【2】見出しを活用して論理的な文章構造を作る

２つ目は、見出しを活用して論理的な文章構造を作るです。

見出しは本や雑誌の各章のタイトルに相当します。見出しは読み手だけではなく、検索エンジン対策(SEO)にも有効です。

Googleでも見出しのない文章はよくない例として挙げています。

避けるべき方法:
パラグラフ、小見出し、レイアウトの分離を取り入れずに、1 つのページにさまざまなトピックに関する大量のテキストを載せる。
検索エンジン最適化（SEO）スターターガイド - Search Console ヘルプより引用

見出しのない文章例

以下は見出しのない文章例です。

一から順番に読んでいかないと内容が把握できず分かりにくい文章です。

見出しを適切につけた文章例

以下は見出しをつけた例です。

見出しを読むだけで何が書いてあるか把握できるため読みやすくなります。

全然違いますね。見出しのある文章は、見出しだけ見て概要をつかめるので理解しやすいですね。

見出しのない文章は分かりにくいので読んでもらえません。読んで考えて理解できる見せ方ではなく、眺めて分かるように意識して構成しましょう。

見出しの付け方のコツ

見出しには結論を含める
見出しにはキーワードを含める
階層構造(大見出し・中見出し・小見出しなどのレベル)を意識する

(※)合わせて読みたい記事

ブログ記事全体の基本的な構成としては「タイトル・冒頭文(リード文)・各論・まとめ」です。

まず冒頭の「総論(結論)」で訪問者に何を伝えたいかを述べます。次に「各論」で、訪問者に伝えたいことを具体的に細かく説明します。最後に「まとめ」を述べます。

ブログ記事の構成の作り方については「ブログ記事のおすすめ文章構成・テンプレートパターン」に詳しく説明していますので合わせてご参考ください。

見出しを使って論理的な構造をつくることで、読み手(人間)だけでなく、検索エンジンにもコンテンツ構成を正しく伝えることができます。

見出しをつけて見やすく論理的な文章構成を作成しましょう。

【3】図で解説してイメージで理解してもらう

3つ目は、「図で解説してイメージで理解してもらう」です。

図で解説した方が分かりやすくなる場合は、積極的に図を作成して解説しましょう。図を活用することで、読み手は、直感的に瞬時に意味を理解できるようになります。

「右脳と左脳の違い」に関する説明を文章と図で下記にそれぞれ示しました。どちらが理解しやすいでしょうか。

■文章で解説した例
左脳は論理的な思考をつかさどり、右脳は直感的な思考を司ります。

たとえば、数字の計算・文章を読み理解するのは主に左脳が行い、絵や写真・図形などを把握するのは主に右脳が行います。

■図で解説した例

こうやって比較すると、文章よりも図の方が全体像がイメージとして見た瞬間に伝わりますね。

わかりやすい図や画像には視線が集まります。

下記はヒートマップというアクセス解析ツールの画像の一部です。図の部分が赤くなっていて、読み手が集中して見ていることがわかります。

図に視線が集中していますね。

わかりやすい図や写真に人は注目します。画像は直感的にたくさんの情報を伝えることができます。

説明は画像だけではなく、文字も利用しましょう。

人間は画像による説明を理解しやすいのですが、検索エンジンは少し苦手な傾向があります。

たとえば、先ほどのヒートマップの図は、人間にはわかりやすいですが、検索エンジンにはなんのことか理解しにくいでしょう。

そこで画像に加えて、文章として繰り返しとなる説明も加えます。

図はパワーポイントや「Canva」といった無料のデザインツールで作ることができます。少々手間でも図を作って読み手に親切なブログ記事を作りましょう。

【4】箇条書きを使って項目数を理解してもらう

4つ目は、「箇条書きを使って項目数を理解してもらう」です。

何かの項目を列挙する際には、箇条書きを使いましょう。箇条書きを利用することで「読んでわかる文章」から見てわかる文章になります。

下記の例を見てみましょう。

■箇条書きを使わない例
ここでお話しする項目は「2,3行ごとに改行を入れる」「図・写真を入れて解説する」「箇条書きを使う」「表を使って情報を整理する」「枠(ボックス)を使って装飾する」「目次を作って整理する」の6点です。

■箇条書きを使った例

ここでお話しする項目は下記の6点です。

2,3行ごとに改行を入れる
図・写真を入れて解説する
箇条書きを使う
表を使って情報を整理する
枠や色を使って装飾する
目次を作って整理する

箇条書きの方は、6点という情報が見てぱっと分かりますね。

箇条書きにすることで、項目数が視覚的にわかるため、文章を読まなくても理解することができます。

なお、順序関係のある箇条書きは番号付きのリストにすると、読み手は順序関係を把握しやすくなります。

当Webスクールには、下記の手順でご入会いただけます。

お問い合わせフォームからお問い合わせください。
メールで日程調整後、当スクールの事前説明をいたします。
ご入会をご希望の場合は申し込み用紙に記入後ご入金ください。
スクールにてレッスンスタートです。あなたの状況に合わせて丁寧に指導致します。

人が一度に記憶できる短期記憶の限界（マジカルナンバー）を参考に

ジョージ・ミラー（アメリカの認知心理学者）が発表した理論に、マジカルナンバー7というものがあります。人間が短期記憶として覚えていられる数は「7+-2」、つまり5～9個というものです。

つまり、一般的に、人は少なくとも5個までは同時に覚える能力があるということです(人によっては9個まで覚えられる人もいる)。したがって、箇条書きの各項目を5〜7個くらいまでにしておくと、大半の読み手に親切な構成となります。

短期記憶とは: 短期記憶とは、脳が一時的に記憶する(すぐ忘れる)記憶のことです。Webサイトの文章読む場合には、短期記憶が使われます。
長期記憶とは: 長期記憶は、短期記憶より長く保存される記憶のことです。短期記憶で、色々なことを処理する場合、長期記憶が使われます。繰り返し復習することです。また、印象的な出来事が起こったとき、記憶が長期記憶として保管されることもあります。

【5】表を使って情報を整理する

5つ目は、「表を使って情報を整理する」です。

情報を比較する時やメリット・デメリットを見せる時などに表を使って情報を整理すると分かりやすくなります。

■文章でそのまま書いた例

WordPressのメリットは「自由度が高い」「商用利用可」「規約変更・アカウント停止がない」という点がある一方、「費用がかかる」「難易度が普通〜やや難しい」「保守管理を自分する必要がある」というデメリットがあります。

無料ブログでは、「操作が簡単」「無料」「保守管理を自分する必要がない」というメリットがある一方、「自由度が低い」「商用不可も多い」「規約変更・アカウント停止のリスクがある」というデメリットがあります。

→情報が構造で(視覚的に)整理されていない、理解するまでに時間がかかります。

■表でまとめた例

項目	メリット	デメリット
WordPress	自由度が高い商用利用可規約変更・アカウント停止がない	費用がかかる難易度が普通〜やや難しい保守管理を自分する必要がある
無料ブログ	操作が簡単無料保守管理を自分する必要がない	自由度が低い商用不可も多い規約変更・アカウント停止のリスクがある