【見てわかるブログ記事作り】 レイアウト・装飾の作り方を徹底解説

ライティング

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

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

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

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

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

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

 


 
 

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

直感でわかる(右脳に訴える)ブログ作り
 

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

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

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

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

 

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

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

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

 

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

 
 

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

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

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

■PC表示 改行なしの文章
PC表示 改行なしの文章
■PC表示 改行ありの文章
PC表示 改行ありの文章

 

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

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

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

 

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

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

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

文章を見出しでグルーピングする
見出しを使って論理的な文章構造を作るようにしましょう。
 

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

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

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

 

見出しのない文章例

以下は見出しのない文章例です。
見出しのない文章。分かりにくい
一から順番に読んでいかないと内容が把握できず分かりにくい文章です。

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

以下は上記文章に見出しをつけた例です。
見出しのある文章。分かりやすい
見出しを読むだけで何が書いてあるか把握できるため読みやすくなります。

 

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

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

 

見出しの付け方のコツ

  • 見出しには結論を含める
  • 見出しにはキーワードをつける
  • 階層構造(大見出し・中見出し・小見出しなどのレベル)を意識する
  • 漏れなく重複なく(MECE)を意識する(※)

 

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

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

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

ブログ記事の基本構造 タイトル・リード文・各論・まとめ
 

ブログ記事の構成の作り方については「【おすすめのブログ文章構成と書き方 】ロジカルライティングで書くブログ」に詳しく説明していますので合わせてご参考ください。

 

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

見出しをつけて見やすく読みやすく構成しましょう。
 
 

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

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

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

 

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

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

■図で解説した例
右脳と左脳の違い

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

 

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

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

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

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

 

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

文字 dont give up人間は画像による説明を理解しやすいのですが、検索エンジンは少し苦手な傾向があります。
 
たとえば、先ほどのヒートマップの図は、人間にはわかりやすいですが、検索エンジンにはなんのことか理解しにくいでしょう。
 
そこで画像に加えて、文章として繰り返しとなる説明も加えます。

 

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

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

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

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

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

■箇条書きを使った例

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

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

 

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

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

 

箇条書きを利用することで「読んでわかる文章」から見てわかる文章になります
 

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

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

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

 

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

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

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

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

 
 

表を使って情報を整理しよう

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

以下は表を使わずに文章でそのまま書いた例です。情報を整理した構造がないため、理解するまでに時間がかかります。

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

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

 

以下は上記の文章の情報を表にまとめた例です。メリット・デメリットという区分で情報を整理しているため、内容を理解するまでの時間が早くなっているはずです。

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

 

箇条書きのみで表現することもできますが、2つ以上の情報を比較・整理する際は表を使う(必要に応じて表の中で箇条書きを使う)方が分かりやすくなります。
 
 

長いブログ記事は目次を作って整理する

長いブログ記事は目次を作って整理しましょう。
 

網羅性のあるブログ記事は長くなりがちです。長い文章・いくつもの見出しがある記事の場合、もくじを作っておくと読み手が全体像を理解しやすくなり、探している情報にアクセスしやすくなります。
 

下記は目次のクリックされた形跡を測定したものです。
SNS記事の目次 クリック数が集中していることがわかる
 

もくじって実際に利用されているのか疑問でしたがこうやってみると、とても見られている・クリックされているんですね!!

 

WordPressをご利用の場合は、「Table Of Contents Plus」というプラグインで簡単に目次を実装することができます。
 

WordPress 便利なプラグイン 記事の目次を作成 Table of Contents Plus
 

詳しくは、「【目次作成】WordPress目次プラグインTable of Contents Plusの使い方」をご参照ください。
 
 

吹き出しで会話して緩急を入れる

吹き出しで会話して緩急を入れるようにすると、読み手が疲れにくくなります。
 

わたしたちが会話しているこの吹き出しですね!
そうですね!漫画風に会話することで緩急をつけて読み手を飽きなくする効果があります。

 

ただし、長い説明を吹き出しで説明したり、吹き出しを乱用する逆に読みにくくなります。簡単なコメントを適度に入れるようにしましょう。
 
 

枠や色などの装飾をつける

枠(ボックス)や色をつけることで、単調さをなくして読み手に特に読んで欲しい部分を強調することができます。
 

WordPressの場合、ブログ用のテーマを利用すると簡単に装飾することができます。


(※)上記はAffinger5のサンプル動画

ただし、マーカーだらけ・色文字だらけになると逆に見づらくなります。重要なところだけ色をつけるようにしましょう。

 
 

まとめ 書き手側が情報を整理することで分かりやすいブログになる

まとめです。今回は、分かりやすいブログのレイアウト・装飾の作り方をご紹介しました。
 

書き手側が情報を整理することで分かりやすいブログになります。もちろん手間や負担がかかりますが、その分読み手に親切なブログ記事になりますので、本気でブログを書くならぜひここでご紹介した方法を使ってみてください。

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

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

 

このほかでも、そもそも読みやすい文章の作り方を学んだり、モノを売る場合であればセールスレター(コピーライティング)の技術などを覚える必要があります。下記の記事に関連記事をご紹介していますので合わせてご参照いただければ幸いです。
 

 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-ライティング
-, ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.