ブログの装飾のコツ｜箇条書き・表・太字の使い方と「強調は1画面2個まで」のルール

強調は、1画面に2個までにしろ。

書いたことを、ちゃんとわかってほしい。思ったとおりに伝わってほしい。その気持ちが強いほど、大事なところを太字にして、マーカーを引いて、色を変えたくなります。私もずっとそうでした。

でも、1画面に強調が何か所もあると、読者はどこを見ればいいのかわかりません。しかも、強調していない文はそのぶん弱く見えてしまいます。気持ちをこめて塗り分けた文章ほど、読み終わったあとに何も残らない文章になっていました。

装飾を足すほど、なぜか読みにくくなっていませんか？この記事では、強調・箇条書き・表・ボックスの使い分けを、直す前と直した後の例と、そのまま使えるルール表で紹介します。

装飾は「ここだけは読んで」の目印

ブログの装飾には、大きく分けて4つの役割があります。

役割	使う装飾	こんなときに
強調する	太字・マーカー・文字色	絶対に読んでほしい1文がある
並べる	箇条書き	同じ種類のことが3つ以上ある
比べる	表	2つ以上のものを、同じ観点でくらべる
区切る	ボックス・吹き出し	例文や注意を、本文と分けて見せたい

ブログの読者は、記事を頭から1文字ずつ読んではくれません。スマホで指を動かしながら、目に止まったところだけを拾って読みます。装飾は、その指を止めて「ここだけは読んで」と知らせる目印です。

目印なので、多すぎると意味がなくなります。駅の案内板が全部赤い文字だったら、どれが出口の案内なのかわかりませんよね。ブログの装飾も同じで、少ないから目に止まります。

強調を増やすほど、記事は記憶に残らない

書いているときは、どの文も大事に見えます。自分で調べて、考えて書いた文なので、どれも読者にちゃんと受け取ってほしい。だから私は、思ったとおりに伝わってほしい一心で、大事そうなところを太字とマーカーで塗り分けていました。

ところが、スマホで1画面に強調が何か所もあると、読者の目はあちこちに飛びます。どれが一番大事なのかがわからないまま、次の画面に進んでしまいます。

もう1つ困るのが、強調していない文が弱くなることです。強調した文を「大事」と知らせるのは、裏を返せば、それ以外の文を「読まなくてもいい」と知らせることでもあります。説明の流れを作っている文まで読み飛ばされて、結局、記事の中身が頭に残らなくなっていました。

教科書にマーカーを引きすぎて、見返したときに何が大事かわからなくなったことはありませんか。ブログも教科書も、塗りすぎると目印にならないのは同じです。

太字・マーカー・文字色の使い分け

強調に使う装飾は、太字・マーカー・文字色の3つです。それぞれ向いている場面がちがいます。

装飾	使う場面	使いすぎると
太字	結論の1文	全部の文が同じ重さに見える
マーカー	読み終えたあとも覚えていてほしい1文	教科書のように塗りつぶされる
赤い文字	まちがえると読者が損をする注意	怒られているように見える

強調は、太字・マーカー・文字色を合わせて、1画面に2個までにします。

ここでいう1画面は、スマホでスクロールせずに見える範囲です。記事を書き終えたら、スマホで上から1画面ずつ見ていき、強調が3個以上ある画面があったら、大事なほうの2個だけを残してください。

この記事でも、色をつけた強調は冒頭の赤い1行と、すぐ上の太字の1文だけにしています（例文の中はのぞきます）。少なく感じるかもしれませんが、まわりに強調がないから、スクロールしていても目に止まります。

もう1つのルールは、1つの文に装飾を重ねないことです。「赤い文字で、太字で、マーカーも引く」と重ねても、目立ち方はほとんど変わりません。画面がにぎやかになるだけです。

強調する場所の選び方

どこを強調するかで迷ったら、次の2つから選んでください。

1. 記事の結論の1文（PREP法でいうP）
2. 読者がまちがえると困ること・損をすること

それでも迷うときは、「読者が記事を閉じたあと、1つだけ覚えていてほしい文はどれか」を考えます。その1文を、太字にしてください。迷ったら、強調は太字だけで十分ですよ。このブログも、太字にそろえています。

箇条書きを使う場面と書き方

箇条書きは、同じ種類のことが3つ以上並ぶときに使います。文章の中に「Aと、Bと、Cと、Dと……」と続くと、読者は途中でいくつ目なのかわからなくなるからです。

2つだけなら、「AとBです」と文章で書いたほうが読みやすくなります。箇条書きを使うときは、次の4つを守ってください。

1項目は1行におさめる

箇条書きは、ぱっと見て全体をつかむためのものです。1項目がスマホで3行も4行もあると、ふつうの文章と変わりません。長くなる項目は、箇条書きのあとに文章で補います。

項目は3〜7個までにする

10個も並ぶと、上のほうに何があったかを忘れてしまいます。7個をこえるときは、h3の見出しで2つに分けてください。

文末をそろえる

「〜する」で終わる項目と、「〜すること」「〜の確認」で終わる項目がまざると、読むたびに引っかかります。

順番があるなら、番号付きにする

手順のように「この順でやってほしい」ものは、1・2・3と番号を付けます。順番がないものに番号を付けると、読者は「1番が一番大事なのかな」と迷います。

表を使う場面と書き方

表は、2つ以上のものを、同じ観点でくらべるときに使います。たとえば「ブログサービスをどれにするか」のように、読者が見くらべて選びたいときです。

文章だと、読者は頭の中で表を作りながら読むことになります。表にしておけば、その作業はいりません。

表を作るときに気をつけたいのは、次の3つです。

• くらべる観点（費用・始めやすさなど）を、左の列にそろえる
• スマホで読むなら、列は3つまでにする
• 1マスに入れる言葉は短くする（長い説明は表の下に書く）

列が4つ以上になると、スマホでは文字が小さくなったり、横にスクロールしないと読めなくなったりします。くらべるものが多いときは、表を2つに分けたほうが読みやすくなります。

ボックス・吹き出しは、1つの見出しに1つまで

WordPressのテーマ（このブログで使っているSWELLなど）には、ボックスや吹き出しを、ボタン1つで入れられる機能があります。便利なぶん、つい使いすぎてしまう装飾です。

ボックスは、本文と分けて見せたいものに使います。このシリーズでは、例文と「この記事でわかること」をボックスに入れています。注意やまとめに使ってもかまいませんが、1つの見出しの中に1つまでにしてください。ボックスが続くと、どれが本文なのかわからなくなります。

吹き出しは、読者の「でも、それって〜じゃないの？」という気持ちを代わりに言わせるときに使うと生きてきます。会話にする意味がないところまで吹き出しにすると、文章を読むより吹き出しを目で追うほうに疲れてしまいます。

ちなみに、noteのように、背景色やボックスがほとんど使えないサービスもあります。それでも、箇条書きと段落の区切りだけで、読みやすい記事は作れます。段落の区切り方は、読みやすい文章のコツの記事で紹介しています。

ビフォー・アフター：装飾だらけの1画面を直す

「記事を書き終えたら、すぐに公開しない」という段落を、この記事のルールで直してみます。

直す前	直した後
強調が7か所あって、どれが大事かわからない	強調は結論の1か所（太字）だけにした
太字と赤い文字とマーカーがまざっている	強調の種類を1つにしぼった
確かめることが文の中に3つ続いている	箇条書きにして、文末をそろえた

直す前の段落は、強調したところだけ読むと「すぐに公開しない」「誤字や脱字」「なかなか気づけません」……とバラバラの言葉が目に入ります。直した後は、太字の1文を読むだけで、この段落で何をすればいいかがわかります。

そのまま使える装飾ルール表とチェックリスト

記事を書くときは、下のルール表を手元に置いておいてください。

装飾	ルール
太字・マーカー・文字色	合わせて1画面に2個まで。1つの文に重ねない
赤い文字	まちがえると損をする注意だけに使う
箇条書き	3〜7個。1項目1行。文末をそろえる
番号付きリスト	順番があるときだけ使う
表	くらべるときに使う。スマホでは3列まで
ボックス・吹き出し	1つの見出しに1つまで

書き終えたら、次の8つを確かめます。

• 強調（太字・マーカー・文字色）は、1画面に2個までになっているか
• 強調しているのは、結論か注意のどちらかか
• 1つの文に装飾を重ねていないか
• 箇条書きは3〜7個で、1項目が1行におさまっているか
• 箇条書きの文末がそろっているか
• 表は、スマホで横にスクロールせずに読めるか
• ボックスや吹き出しが、1つの見出しに2つ以上ないか
• スマホで1画面ずつ見て、色だらけになっていないか

まとめ：まずは1画面の強調を2個にしぼるところから

今日から使えるのは、この3つです。

• 強調は、太字・マーカー・文字色を合わせて1画面に2個まで
• 3つ以上並ぶことは箇条書き、くらべることは表にする
• ボックスと吹き出しは、1つの見出しに1つまで

強調を減らすのは、最初は少し勇気がいります。私も「ここも大事なのに」と何度も迷いました。でも、1画面の強調を2個にしぼってからのほうが、読者に伝えたいことがまっすぐ届くようになったと感じています。

まずは、いま書いている記事をスマホで開いて、1画面ずつ太字とマーカーの数を数えてみてください。3個以上ある画面から外していくと、本当に伝えたかった1文が見えてきます。

次の記事では、文字だけでは伝わりにくい内容を、図解や画像でひと目でわかる形にする方法を紹介します。【図解・画像の入れ方の記事へのリンク】