ブログ記事は見た目も大事!読みやすい文章が今日から書ける記事装飾7つのポイント

今回の記事は「記事の見た目を整えて、読みやすいブログを書くコツ」についてお伝えします。

あなたは「ブログ記事の見た目(デザイン)」にこだわっているでしょうか?

一般的な意見として、「デザインよりも『記事の質』が重要」という意見が多いと思います。

ただ、誤解を恐れずにいえば、ブログ初心者が意識すべきは「記事の質」よりも「記事のデザイン」です。

なぜなら、「記事の質」を高めるには時間がかかりますが「記事の見た目」を見やすくすることは初心者でも簡単にできるからです。

記事の質を高めることはもちろん大事です。

しかし、記事の第一印象(見た目)が悪ければ、どんなに記事の質が良くても意味がありません。

今回お伝えする、記事の見た目を整えるコツ(装飾)をおぼえれば、あなたの記事は一気に読みやすくなります。

今回お伝えする「ブログの見た目を整えるポイント」は7つだけなので、ぜひ実践してみてください。

文子のアイコン画像文子

中味よりも見た目が大事なんて意外です

中村のアイコン画像中村

恋愛と同じだよ。どんなに性格がよくても「見た目が好み」じゃなければ恋愛対象にならないでしょ?

文子のアイコン画像文子

た、たしかに。

目次

ブログ記事の質と同じくらい文章の「見やすさ」や「読みやすさ」は大事

疑問を投げかけているイラスト

ブログなどで文章を書く際は、「記事の質」と同じくらい「見た目(デザイン)」が大事です。

人は文章を読むときに無意識に「脳」に負荷を与えながら見ています。

なぜなら、漫画や写真集などと違い「文章は与えられた情報を自分の脳を使ってイメージする必要がある」からです。

脳に負担がかかってしまうと、脳はイメージをするどころか「考えることを止める(思考停止)」ことになります。

だからこそ、書き手は「読者の脳に負担をかけない工夫」をしてあげる必要があるわけですね。

言い換えれば、中身(記事の質)を見てもらうためには、「見た目の第一印象」を大切にすることが大事だということです。

男女の恋愛をイメージしてみるとわかりやすいかもしれません。

いくら自分の性格に自信があったとしても、「見た目が不潔」であれば、意中の女性に恋愛対象として見てもらうことはできないですよね。

「見た目で判断するなんて失礼なやつだ!」と心の中でいくら叫んだとしても「負け犬の遠吠え」にすぎません。

女性からすれば「自分を口説くんなら、見た目をちゃんとして出直してこい!」と言いたくなることでしょう。

文子のアイコン画像文子

わたしは「清潔感」がある人が好きです

上記の例のように、記事を書く上で「見た目」は重要です。

見た目がいい(読みやすいデザイン)だからこそ「読んで見ようかな?」と思ってもらえる(スタート地点に立てる)ことになります。

ブログの記事の「質」を高めるのには時間がかかりますが、「記事の見た目を整える」だけであればすぐに上達できます。

続いての章で、「文章の見た目を整えるコツ」をお伝えするので参考にしてみてください。

中村のアイコン画像中村

すぐに文章を読みやすく改善できますよ

ブログ記事が劇的に読みやすくなる記事デザイン(装飾)7つのポイント

【画像】ここがポイント

自分の書いた文章を劇的に読みやすくする「記事装飾のポイント」は7つあります。

ここがポイントです
記事を装飾する7つのポイント
  1. 改行のタイミングに注意する(スマホでも表示を確認する)
  2. 文章のカタマリは「パソコン画面で3行以内」におさめる
  3. 文字のサイズや色、強調ルールに気を付ける
  4. 写真やイラストなどの画像を適度に使う
  5. 目次を用意して文章構成を整理する
  6. 箇条書きタグを使って、要点を整理する
  7. ふきだしなどの「漫画的な演出」を意識する

この7つのポイントを意識するだけで、「読みやすく、見やすい文章」を書けるようになるので参考にしてみてください。

ひとつずつ具体的に解説していきます。

ポイント1.改行のタイミングに注意する(スマホでも表示を確認する)

ひとつ目のポイントは、「スマホでも見やすい改行のタイミングを意識する」ことです。

あなたは記事を書く際に「改行のタイミング」をどれくらい気にしてるでしょうか?

多くの方がパソコン上の表示だけを見て何となく改行をしていますが、現在は「パソコンよりも、スマホ」で記事を閲覧する人の割合が圧倒的に多くなっています。

パソコンで記事を書いていると見落としがちですが、「パソコン、タブレット、スマホ」では、それぞれ画面に表示される文章の範囲が違います。

そのため、パソコン表示だけしか確認せずに記事を書いてしまうと、「読者にストレスを与える原因」になってしまう可能性があるんですね。

たとえば、パソコンの画面表示だけを見て記事の見た目を整えた下記の文章をスマホで見てみてみてください。

<パソコン画面の表示だけ見て改行した例>

今日は映画を見に行きました。

彼女の見たがっていた「〇〇」という映画を見に行ったのですが、(改行)

とても感動的で素晴らしい映画だったので彼女と一緒にみることができて、(改行)

本当によかったと思っています。

中村のアイコン画像中村

機種によって多少の違いはあるかもしれませんが、上記の例をスマホから見ると変な部分で改行されているはずです。

上記のような改行が続くと、スマホから記事を見ている読者さんはストレスを感じてしまいます。

そのため、どの媒体(パソコン、タブレット、スマホ)から見ても、同じように表示させるように改行させる必要があるわけですね。

そこでおすすめなのが、記事を書く際には一文を最後まで書ききって、句点「。」で改行することです。

句点「。」で改行すれば、どの媒体で見ても「同じタイミングで改行されている」ので、読者にストレスを与えずにすみます。

ポイント2.一文を3行以内におさめる

2つ目のポイントは、一文のカタマリを長くしすぎない」という点です。

先ほどのポイントで、1文は途中で改行をせずに、句点「。」で改行をするとお伝えしました。

スマホで見ていただいたら分かりますが、一文の最後(句点「。」)まで書ききってから改行をしても、ストレスなく文章を読むことができます。

しかし、一文が3行以上になると一気に読みにくい文章に変わってしまうので注意が必要です。

少し例を出して、解説していきますね。

<空白、改行なし>

むかし、むかし、あるところに、おじいさんとおばあさんがおりました。まいにち、おじいさんは山へ芝かりに、おばあさんは川へ洗濯に行きました。ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃ももが一つ、「ドンブラコッコ、ドンブラコッコ。」と流れて来きました。「おやおや、これはみごとな桃だこと。おじいさんへのおみやげに、どれどれ、うちへ持って帰りましょう。」おばあさんは、そう言いいながら、腰をかがめて桃を取ろうとしましたが、遠くって手がとどきません。おばあさんはそこで、「あっちの水は、かあらいぞ。こっちの水は、ああまいぞ。かあらい水は、よけて来い。ああまい水に、よって来い。と歌うたいながら、手をたたきました。すると桃はまた、「ドンブラコッコ、ドンブラコッコ」といいながら、おばあさんの前へ流れて来きました。

中村のアイコン画像中村

上記の文章をスマホで目にすると、ひと目で読む気を失うはずです。

<空白、改行あり>

むかし、むかし、あるところに、おじいさんとおばあさんがおりました。

まいにち、おじいさんは山へ芝かりに、おばあさんは川へ洗濯に行きました。

ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃ももが一つ。

「ドンブラコッコ、ドンブラコッコ。」と流れて来きました。

「おやおや、これはみごとな桃だこと、おじいさんへのおみやげに、どれどれ、うちへ持って帰りましょう。」

おばあさんは、そう言いいながら、腰をかがめて桃を取ろうとしましたが、遠くって手がとどきません。

おばあさんはそこで、「あっちの水は、かあらいぞ。こっちの水は、ああまいぞ。かあらい水は、よけて来い、ああまい水に、よって来い」と歌うたいながら、手をたたきました。

すると桃はまた、「ドンブラコッコ、ドンブラコッコ」といいながら、おばあさんの前へ流れて来きました。

文子のアイコン画像文子

2つの例文を比べてみると、最初の例文は文章が詰まりすぎて読みにくいですね

中村のアイコン画像中村

一文が長すぎて文章に「余白」がないと、ギュッと詰まった印象を受けるから、読む気がなくなっちゃうよね。

文章と文章の間の「余白」も1行、1行、1行と同じように開けるのではなく、1行、3行、2行という風にランダムにすることで、リズミカルに文章を読んでもらうことができます。

ポイント3.文字のサイズや色、強調ルールに気を付ける

3つ目のポイントは、記事の強調部分の色使いに気をつけるということです。

文章を読むということは、「文字を目で追う」ことになります。

ということは、文字自体の見やすさも配慮してあげる方が、読者の満足度は高くなります。

  • 文字のフォントは見やすいものを使っているか?
  • 文字のサイズは読みやすい大きさか?
  • 文字の強調パターンに統一性はあるか?
  • 背景の色が文字を邪魔していないか?
中村のアイコン画像中村

上記のように、文字の見た目を見やすくするために「自分ルール」を決めてくと便利です。

アメブロからWordPressに移行した女性のブログでたまにありますが、記事の背景を派手にしたり、文字を強調するのに多くの色を使うなど「華やかな(目がチカチカする)記事」を見ることがあります。

自身のブログですから「自分好みのデザイン」にすることは問題ありません。

ただし、「読者の満足度」を考えるのであれば、必要以上の色を使ってしまうことは、相手の脳にストレスを与えてしまう原因になるので注意が必要です。

全体の統一感を持たせるためにも、先ほどお伝えした「自サイトの装飾ルール」決めておくことことをおすすめします。

ちなみに、当サイトの「ルール」は下記のように統一しています。

当サイトのルールはこんな感じです
コピラボの文字強調ルール
  • 背景は「白」
  • 文字色は「黒系」
  • 強調は「黒太字」
  • やや強調は「黒太字+蛍光の黄色」
  • 最重要ポイントは「赤」

あくまで、自分の書いた記事は「読者に喜んでもらう」ことが目的です。

自分らしさ(オリジナリティ)を出すことも大事ですが、読者にストレスを与えるデザインは逆効果になってしまいますので注意しましょう。

実際に「悪い例」を書いてみますので、参考にしてください。

中村のアイコン画像中村

これ見えますか?(読めなかったらすみません……)

<悪い例 背景色:白 文字色:黄色>

知ってる?格安携帯なら今の携帯料金が大幅に安くなるよ!

え、デメリットがあるだろうって?

大丈夫。メルアドが使えなくなるくらいで全く支障はないよ!

どうでしょうか?

ひと目、見ただけで「目がチカチカしてストレスを感じる」はずです。

このように読者にストレスを与える文章は「NG」です。

自分サイトのルール決めに迷ったら、シンプルですが「背景色は「白」、文字色は「黒系」で統一する」だけでも、見やすいブログになりますよ。

ポイント4.写真やイラストなどの画像を適度に使う

4つ目のポイントは、画像を適切に使うということです。

ブログは文章メインのコンテンツなので、画像を適当に選びがちですが「見た目を整える」ために適度に画像を使うことは効果的ですが、画像の選び方は注意が必要です。

一例をあげると、Googleで「〇〇〇 無料画像」と検索して出てきたものを活用するのはNGです。

なぜなら、検索で「無料」と調べて出てきた画像だからといって、フリー素材だとは限らないからです。

悪気なくネット上で見つけた画像を使って、著作権侵害になってはいけないので、必ず商用利用OKのフリー素材サイトなどを使うようにしましょう。

フリー素材を使う際、画像のサイズ選びも大切です。

特にグラフや表など、読者さんに見てもらいたいデータなどが記載されている画像は、あなたの使っているWordPressテーマの「横幅いっぱいサイズ」で統一すると使いやすいです。

中村のアイコン画像中村

たとえば、下記の画像のように「小さいサイズの画像」をダウンロードすると「見づらい」のと「活用しづらい」ので、横幅いっぱいの大きさで使うことををおすすめします。

文子のアイコン画像文子

スマホだと気にならないけど、「サイズの小さい画像」はパソコンで見ると貧相な見た目になっちゃいますね。

<画像幅が小さい(横幅:300)もの>

<画像幅が適切(横幅:800)なもの>

中村のアイコン画像中村

パソコンで上記2つの画像を見比べると、どちらが見栄えのするデザインかわかるはずです。

見た目の悪さだけでなく、適切ではない画像幅のものを活用するデメリットは他にもあります。

たとえば、「横幅:800」のサイズのテーマを使っているのに、「横幅:1200サイズ」の画像を使ったりすると「画面に表示される大きさは同じなのに容量だけが重い」という状況になります。

逆に、元々の画像サイズが小さいものを拡大する(横幅300サイズ⇒横幅800サイズに拡大)と、画像が荒くなってしまう(見た目が悪い)ので気を付けてください。

ポイント5.目次を用意して文章構成を整理する

5つ目のポイントは、記事の概要が分かるように目次を活用するという点です。

記事が長くなればなるほど、どこに何が書いてあるかわかりづらくなります。

そこで、効果的なのが「目次」の活用です。

目次プラグインなどを使えば、目次をページ内リンクにすることができます。

中村のアイコン画像中村

ページ内リンクをつ使えば、目次をタップして「記事の該当箇所」まで一気に飛ぶことができます

文子のアイコン画像文子

自分が気になる部分から見れるんですね

自分の書いた記事に「熱意」を込めている人ほど、「最初から、最後までしっくり読んでほしい」という思いを持っています。

しかし、あなたのブログに「たまたま訪れた一見さん」が、あなたの記事を「隅から隅まで読んでくれること」はほぼありません。

流し読みをしてみて「自分の参考になりそう」だと思ったら、そこで初めて最初から記事を読んでくれるわけです。

▼目次を置くことで得られる利点

  • 記事の流れを理解して記事を読むための心の準備ができる
  • 自分の興味がある部分から読める

上記のように、目次を活用することで一見さんの「流し読み」を、手助けすることができます。

いきなり全文読んでもらうのではなく、「読みたいところから読んでくださいねー」と伝えておくことで読者の記事を読むハードルを下げることができます。

ポイント6.箇条書きタグを使って、要点を整理する

6つ目のポイントは、箇条書きタグを使うことです。

複数のモノや事柄を並べる時は、箇条書きタグを使うことで一気に読みやすい文章に変わります。

<箇条書きタグなし>

ももたろうは、きびだんごをもって鬼ヶ島に出発します。

道中、イヌにキビ団子をあげたり、サルにキビ団子をあげたり、キジにキビ団子をあげたりして仲間にしてから鬼ヶ島へ向かいました。

<箇条書きタグ使用>

ももたろうは、きびだんごをもって鬼ヶ島に出発します。

鬼が島に向かう道中では、キビ団子がきっかけになり仲間も増えました。

  • イヌ
  • サル
  • キジ

この心強い3匹の仲間と共に決戦の地、鬼ヶ島へ向かいます

中村のアイコン画像中村

箇条書きにすることで、「自分が伝えたい項目」がいくつあるのかが一瞬で分かります

箇条書きを上手く使えば、一文の長さも自然と短くなるので「読みやすい文章」を簡単に書けるようになります。

ちなみに箇条書きは、大きくわけて2種類あります。

「・」やチェックリスト形式の箇条書き
  • テキスト
  • テキスト
  • テキスト
頭に数字を付ける箇条書き
  1. テキスト
  2. テキスト
  3. テキスト
中村のアイコン画像中村

上記2種類の使い分けとしては、情報の総数が決まっている場合は「数字」を使う。

総数が決まっていない場合は、「・」のタイプを使うと、読者の心理的負担を軽減することができます

ポイント7.ふきだしなどの「マンガ的な要素」を意識する

7つ目のポイントは、ふきだしなど「マンガ的な要素」を活用するという点です。

「活字の本を苦手だ」という人はいても、「マンガが苦手」だという人はあまりいないのではないでしょうか。

たとえば、自己啓発本として有名な「7つの習慣」を例に挙げてみましょう。

created by Rinker
¥1,650 (2020/09/26 15:28:55時点 Amazon調べ-詳細)
created by Rinker
¥1,100 (2020/09/26 15:28:56時点 Amazon調べ-詳細)

上記のように「活字版」と「マンガ版」の2種類が発売されています。

これは「活字版の7つの習慣」に抵抗がある人に選んでもらえるように、「マンガ版」も発売しているわけです。

つまり、マンガを活用すると「難しい内容」でも、ストレスなく読むことができるようになるわけですね。

文子のアイコン画像文子

今、例にあげたことはブログでも同じです。

中村のアイコン画像中村

活字だけの文章は読む気を失くしますが、このように、吹き出しやイラストが活用してあるだけで「読者のストレス」を軽減させることができますよ

まとめ.記事の装飾を使いこなして「読みやすい文章」を書こう

【画像】ブログのまとめ

今回の記事では、ブログで読みやすい文章を書くための「記事装飾(デザイン)」のコツについてお伝えしました。

今回お伝えしたポイントをまとめます
記事を装飾する7つのポイント
  1. 改行のタイミングに注意する(スマホでも表示を確認する)
  2. 文章のカタマリは「パソコン画面で3行以内」におさめる
  3. 文字のサイズや色、強調ルールに気を付ける
  4. 写真やイラストなどの画像を適度に使う
  5. 目次を用意して文章構成を整理する
  6. 箇条書きタグを使って、要点を整理する
  7. ふきだしなどの「漫画的な演出」を意識する

今回お伝えした「記事を装飾する7つのポイント」を意識すれば、あなたの書いたブログの文章は劇的に読みやすくなるはずです。

記事の装飾には「プログラミングなどの専門知識が必要」だと感じるかもしれません。

しかし、僕のサイトで愛用している「SWELL」のように「記事装飾が標準装備されているWordPressテーマ」を使えば、専門知識がなくても自由自在に文章を装飾することができるようになります。

中村のアイコン画像中村

最近のWordPressテーマであれば、「記事装飾は標準装備しているものが多い」ので、自分好みのテーマを選べば大丈夫です

冒頭にもお伝えしましたが、「記事の質」を高めることはもちろん大事です。

ただ、文章が上達するまでは時間がかかってしまいます。

記事の質に比べて、今回お伝えした「記事の見た目」は意識すれば”今日から”でも改善可能です。

ほんの少しの気遣いで「読者の満足度」は高めることができるので、ぜひチャレンジしてみてくださいね。

では、最後まで読んでいただきありがとうございました。

この記事が気に入ったら
いいね または フォローしてね!

この記事を書いた人

1981年広島生まれ。
呉服販売、美容商材の営業を経験した後、化粧品や健康食品を扱う企業で、「代理店営業」「店舗運営」に約12年間携わる。
一貫してWebに苦手意識を持つシニア層(50代以上)の女性経営者様の支援をしてきたため、相手の悩みに寄り添うサポートを得意をしている。
信念:商品の価値を”正しく”引出し必要としている方に届けること
趣味:読書・キャンプ

コメント

コメントする

five × two =

目次
閉じる