【ブログ】見やすい記事にするための「装飾」のコツ【5つ紹介】

2020年11月11日

アイキャッチ画像

この記事を書いた人

こんにちは、まどべです。

見やすい記事・読みやすい記事ってどんなものだろう...

ブログを始めて間もないころの僕は、 
上記のことについて、よく考えていました。

というのも、 
ブログに読者さんが訪れても、 
「すぐに離脱されてしまう」 
ことが多かったり、

それに加え、 
読みやすい文章を意識しても、 
なかなか思うように書けないなど、 
「文章への苦手意識」などもありました。

そんな中で、

仕事でwebデザインをしてたころの知識を何か活かせないかな...

と考えるようになりました。

つまり、文章以外の部分の 
「見た目」を少し工夫することで 
見やすい記事は作れるんじゃないか
 
というものでした。

たとえば、

  • 記事に「統一感」をなるべく出す
  • 大事な部分は「強調」してわかりやすくする
  • 行間などで「余白」を多めにつくる

こういった工夫をしたことで、 
少しずつですが、ブログも 
読んでもらえるようになりました。

この記事ではそんな、 
文章以外の「装飾」の部分で 
見やすい記事にするためのコツ
を 
紹介していきます。

(5分くらいで読める内容です)

【ブログ】見やすい記事・読みやすい記事とは?

装飾画像

まずそもそも、 
「見やすい記事」「読みやすい記事」 
とは、どんなものなのでしょうか。

人それぞれ感じ方も違いますし、 
少し曖昧だったりもしますよね。

そこで、 
これまで色々なサイトを参考にしたり、 
過去にwebデザインをしていた観点から、
 
いくつかまずは定義づけをしてみました

見やすい記事・読みやすい記事とは?

  • 全体的に「統一感」が感じられる
  • 「大事な部分」がどこかがわかる
  • 「文章以外の工夫」もされている
  • 行間など「余白のバランス」がいい

一つずつ簡単に見ていきます。

ポイント①全体的に「統一感」が感じられる

ブログだけに限らないですが、 
全体的に「統一感」のあるものは、 
スッキリとした印象を与えられます。

(たとえば、
ファッションやインテリアなども 
そうだったりしますよね)

ブログ記事の場合だと、 
そのポイントになるのが特に「色」です。

記事の装飾をするにしても、 
使う色を「3色まで」におさえる 
などすることで、統一感が出やすいです。

逆に、使う色が多すぎると、 
(カラフルすぎる感じになってしまうと) 
まとまりが失くなってしまうこともあります。

ポイント②「大事な部分」がどこかがわかる

ブログ記事の場合、 
3000文字以上などの 
長文になることも多いですよね。

そのため、記事の中で 
特に大事な部分や伝えたいことは、 
他の部分よりも「強調」させる

といった工夫をすることで、 
「大事な部分がひと目でわかる」など、 
読者さんにも親切な記事になります。

ポイント③「文章以外の工夫」もされている

ブログ記事を書く上で、

なるべく「読みやすい文章を意識する」、 
「読者目線で書く」などは大事ではありますが、

とは言っても、 
どれだけ良い内容を書いた記事でも 
読まれないということがあります。

そこで、ポイントになるのが、 
読者さんの「読み疲れ」を 
なるべく減らしてあげる工夫
です。

具体的には次の項目で話しますが、 
画像や吹き出しなどを適切に使うことで 
記事全体が、単調になるのも防げます。

ポイント④行間など「余白」のバランスがいい

ユーザーにとって見やすい 
ブログやサイトというのは、

適度な「余白のバランス」が 
考えて設けられていたりします。

僕もwebデザインをしていた頃は 
余白の大事さについてはよく言われました。

ブログ記事の場合だと、 
行間を広めに設定するなどで、 
余白をうまく作り出すことができ、

なおかつ、 
文字の羅列でぎっしりとしてしまう、 
見た目の「窮屈感」なども防ぎやすいです。

ーーーーーーーーーーーーーーーーーーーー

ここまでの4つが、 
見やすい記事・読みやすい記事 
をつくる上で大事なポイントになります。

それでは、次の項目からは、 
具体的にどこをどうすればいいの?という、

具体的な「装飾方法」について、 
くわしく紹介していきます。

【ブログ】見やすい記事にするための「装飾」のコツ【5つ紹介】

装飾画像

まず最初に、今回紹介する 
5つのコツをまとめました

  • 「太字・マーカー」を使う
  • 「箇条書き」で見やすく伝える
  • 「画像」を時々はさむ
  • 「吹き出し(会話形式)」を使う
  • 「行間を広め」に設定する(60pxくらい)

順番に一つずつ書いていきます。

見やすいブログ記事を作る装飾のコツ①「太字・マーカー」を使う

記事がある程度長文になると、 
「どこが大事なの?」というのが 
わかりにくくなりますよね。

そこでポイントになるのが、 
「太字・マーカー」を使うことです。

少し例文を使って、 
ビフォーアフターで紹介しますね。

ビフォー

読みやすい文章を書くためには、

ひらがなや数字を多めに使ったり、 
改行をひんぱんに使ったり、 
文章の型などを使うことで、

ある程度は改善することができます。

アフター

読みやすい文章を書くためには、

ひらがなや数字を多めに使ったり、 
改行をひんぱんに使ったり、 
文章の型などを使うことで、

ある程度は改善することができます。

こういった感じで、 
「特に大事な部分」や「伝えたいこと」は 
太字・マーカーを使って強調する
ことで、 
読者さんにもわかりやすく伝えられます。

この太字・マーカーを使う時の 
ちょっとしたポイントとしては、

  • あまり多用しないこと 
    ➩多用しすぎると、大事な部分がわかりにくくなるため
  • マーカーはなるべく1色がいい 
    ➩カラフルすぎると、逆に読みづらくなりやすいため
  • マーカーは特に大事なこと・太字は大事なこと 
    ➩僕の場合は、マーカー>太字という感じで、マーカーのほうがより大事なことを伝えたい時に使っています

これは、 
僕が意識していることですが、 
どちらにしても「バランス」が 
大事なポイントだと思っています。

この3つを意識するだけでも 
太字・マーカーは適切に使えるはずなので、 
ぜひ参考にしてみてください。

見やすいブログ記事を作る装飾のコツ②「箇条書き」で見やすく伝える

文章の中で、 
「複数伝えたいことがある時」は、 
箇条書きを使う
と見やすくなります。

こちらも、 
ビフォーアフターで紹介します。

ビフォー

読みやすい文章を書くためには、

ひらがなや数字を多めに使ったり、 
改行をひんぱんに使ったり、 
文章の型などを使うことで、

ある程度は改善することができます。

アフター

読みやすい文章を書くためには、

・「ひらがな・数字」を多めに使う 
・「改行」をひんぱんに使う 
・「文章の型」を使う

このあたりを意識すると、 
ある程度は改善されます。

少し見やすくなったかと思います。

箇条書きを使うポイントとしては、 
文章の中で「伝えたいことが2つ以上並んだ時」です。

それから、ブログの場合だと、

  • テキスト
  • テキスト
  • テキスト

こういった感じで、 
リストを使った装飾ができるので、 
箇条書きも、より見やすくできます。

見やすいブログ記事を作る装飾のコツ③「画像」を時々はさむ

最初の項目で書きましたが、 
見やすい記事を作るためには、 
読者さんが「読み疲れ」しない工夫 
をすることが大事です。

そこでポイントになるのが、 
「画像を時々はさむ」です。

記事内に装飾画像があることで、 
文章だけで退屈させてしまうのを防いだり、 
読者さんが、多少息継ぎできる場所にもなります。

その画像をいれる場所ですが、 
基本的には「h2見出しの下」 
にいれるのがおすすめです。

たとえば記事が、

見出し1(h2) 
見出し2(h2) 
まとめ(h2)

という構成だった場合は、 
2枚用意する感じです。

(まとめの部分はなくても 
大丈夫かなと思っています)

このブログでも、 
アイキャッチ画像のほかに、 
見出し下に置くための画像分は 
なるべく事前に作っています。

もし、フリー画像を使うという場合は、 
O-DAN」などは、おしゃれな画像が 
多いのでおすすめです。

見やすいブログ記事を作る装飾のコツ④吹き出し(会話形式)を使う

こちらも、 
読者さんが「読み疲れ」しない工夫 
という部分で、一つのコツになります。

簡単に例をあげると、 
たとえばこんな感じで使います。

吹き出しを使った例

読みやすい文章が書けない...何かいい方法はないかな?
僕は「ひらがな・数字」を多めに使ったり、「改行」をひんぱんに使ったり、「文章の型」を使うようにしたことで、少しずつだけど、読みやすい文章が書けるようになったよ。
そうなんだ。少しその3つを意識して、これから書いてみるよ。ありがとう。

こんな感じで、 
吹き出しを使って会話形式にすることで、

読者さんの「読む」というハードルを 
多少は下げることができます。

(たとえば、小説よりも 
キャラクターなどの絵がある 
マンガのほうが読みやすい 
という人が多いようにですね)

Word Pressテーマによっては、 
最初から吹き出し機能が使えるもの 
もあるのですが、

たとえば、僕が使っている 
AFFINGERというテーマには 
吹き出し機能がついています

もし、テーマに吹き出し機能が 
ない場合は、吹き出し専用のプラグイン 
を利用すると使える
ようになります。

僕が過去に利用していたプラグインですが、 
Word Balloon」はとても使いやすかったです。 
(無料版でも十分に使えていました)

「使用してるテーマに吹き出し機能がついてない」 
「一度吹き出しを使ってみたかった」

という方などは、 
ぜひ活用してみてください。

見やすいブログ記事を作る装飾のコツ⑤行間は広めに設定する(60pxくらい)

見やすい記事を作る上で 
特に大事だと思っているのが 
適度な「余白」を作ることです。

その余白は、 
行間を広めに設定するなどで
うまく作ることができます。
(次の一文までの、この下の部分ですね

それから、装飾ではないですが、 
「改行をひんぱんに使う」 
というのも大事なポイントです。

ビフォー

読みやすい文章を書くためには、ひらがなや数字を多めに使ったり、改行をひんぱんに使ったり、文章の型などを使うことで、ある程度は改善することができます。

アフター

読みやすい文章を書くためには、

ひらがなや数字を多めに使ったり、 
改行をひんぱんに使ったり、 
文章の型などを使うことで、

ある程度は改善することができます。

ちなみに、 
行間の設定については、

WordPressで 
「外観→カスタマイズ→追加CSS」 
と進むなどして、CSSをいじる必要があります。

このブログでは、下記のように、 
60pxに行間を設定しています。

p { 
margin-bottom: 60px; 
}

過去に色々と試してみたのですが、 
40px以下だと狭いなと感じて、 
60px以上だとちょっと広すぎるな 
という感じがしました。

50〜60pxあたりに設定すると、 
ちょうどいい行間になるかと思います。

【ブログ】見やすい記事にするための「装飾」のコツ【5つ紹介】まとめ

最後にもう一度、 
この記事のポイントをまとめます。

見やすい記事・読みやすい記事とは?

全体的に「統一感」が感じられる

  • ブログの場合、特に「色」がポイント
  • 使う色を「3色まで」とおさえるなどで、統一感も出やすい

「大事な部分」がどこかがわかる

  • 記事の中で「大事な部分」や「伝えたいこと」は強調
  • 「大事な部分がひと目でわかる」と読者さんにも親切

「文章以外の工夫」もされている

  • 読者さんの「読み疲れ」を減らす工夫が大切
  • 具体的には、画像・吹き出しを適度に使うなど

行間など「余白のバランス」がいい

  • 文章がぎっしりとした「窮屈感」は、読み疲れを感じやすい
  • 行間を広めに設定するなどで、適度な余白をつくる

見やすい記事にするための「装飾」のコツ5つ

「太字・マーカー」を使う

  • 「大事な部分」や「伝えたいこと」を強調したい時に使う
  • ポイントは、あまり多用しないこと・マーカーはなるべく一色だけ使うなど

「箇条書き」で見やすく伝える

  • 文章の中で、複数伝えたいことがある時に使う

「画像」を時々はさむ

  • 読者さんが、多少息継ぎできる場所になる
  • 基本的には「h2見出しの下」に1枚いれるのがおすすめ

「吹き出し」(会話形式)を使う

  • 読者さんの「読むハードル」を多少下げられる
  • もしテーマに吹き出し機能がない場合は、「Word Balloon」などのプラグインを使うと、吹き出しが使えます

「行間」は広めに設定する(60pxくらい)

  • 適度な余白をつくり、文章の見た目を良くする
  • このブログでは、行間を60pxに設定してます

この記事では、 
ブログで見やすい記事を作るための 
「装飾」のコツを5つ紹介しました。

ぜひ、この記事で紹介した内容を、 
今後ご活用いただけたらと思います。

今回は以上になります。

最後まで読んでいただき、  
ありがとうございましたm(__)m

-ブログ
-,

© 2022 MOJISOI