【ブログの文字装飾６パターン】誰が書いても読みやすくなる使い方を解説

世の中には２種類のブログしかない。読みやすいブログか、それ以外か。

読みにくいブログにありがちなのが、文字装飾に明確なルールがない こと。

なんとなく気分や記事の内容で、フォントの色やサイズを変えたりハイライトを引いたりしてはいませんか？

友達に「お前のブログ、読みにくい」って言われた…

「この記事読みやすくていいな！」と思ってもらうには、あなたのブログ内における「文字装飾ルール」を定義して書くことが大切 です。

わたしの経験則からいっても、文字装飾のルールを決めたうえでリライトするだけでも、精読率やアクセス数に好影響を及ぼすことが多い です。

「劇的に改善します」とまでは言いませんが地味に効いてくるので、文字装飾は取り入れる価値のある施策です。

そこで今回は、某広告代理店の編集者兼ライターであるわたしが実践で得た知見から、「誰が書いても読みやすい記事になる文字装飾の使い方」について解説します。

ブログ記事における文字装飾の目的とは

そもそも、なんのたねぶ文字装飾が必要なのでしょうか？

・読みやすくするため

・文章にメリハリやリズムをつけて、読み手を飽きさせなくするため

・記事に独自性をもたせるため

どれも正解の一つですが、わたしが一つだけ挙げるならば、 文章を全部しっかり読まなくても理解してもらうため です。

検索でたまたま引っ掛かり、目にとまった個人のブログ記事を、最初から最後までじっくりと読んでくれる人は少ないです。

あと読み手はたいてい流し読みで、自分に関係あると思えるところにしか興味ありません。

そのため、想定読者の興味や関心の深そうな部分を太字にしたり、ハイライトを引いたりして強調することで、「ここがポイントだよ」と認識しやすくし、読み手の理解を助ける必要があるわけです。

文字装飾を適切に施すことで読みやすくもなり、読み手の負担の軽減にもつながります。

なお、伝えたいことがたくさんあるからといって、文字装飾を過度に使いすぎるのは考えもの。かえって見づらくなるし、わかりにくくもなります。

適切な文字装飾ルールを定義するコツは、できるだけシンプルにすることです。

強調表現のルールは本当に必要なぶんだけの最小限であるべき。ブログの文字装飾に限った話でもないですが、ルールは少なく、ややこしくないほうが理解しやすいので。

誰が書いても読みやすい記事になる！ ブログの文字装飾６パターン

① 使う色は最小限にする

単純に使う色が多くなると見づらいですし、ごちゃついた印象になります。

記事の背景色は「白」で文字色は「黒」であるものが大半ですが、強調に使う色は３〜4色程度に収めるのがいいと思います。

使う色が限定されていると、その日の気分や記事の内容のイメージでなんとなく色を変えたり、マーカーやアンダーラインを引いたりするブレがなくなります。

ルールがはっきりしていると見せ方で都度悩まなくていいので、記事を書き上げる時短にもなり、記事全体に一貫性が出ます。

ちなみにわたしは、以下のようにルール化しています。

◼黒太字：要点の強調

◼黒太字＋黄色ハイライト：ポジティブ要素での強調

◼赤太字：ネガティブ要素や注意喚起としての強調

赤信号は世界共通で「止まれ」の意味があり、人が反射的に反応・注視する色です。

マイナス要素や注意喚起などの強調で使うと目を引きやすいでしょう。

◼青太字（＋アンダーライン）：リンク

一般的な認識として、リンクカラーは「青色（＋アンダーライン）」です。

インターネット創世記からのデフォルトでもあり、リンク部分に青色以外をあえて使用する必要性は低いといえます。

ここは後ほど補足しますね。

◼フォントサイズの拡大：明確な意図がある場合のみ使う

上記は本記事の冒頭で使った見せ方です。記事の導入でインパクトを与えたい狙いがあり、一時期流行っていたフレーズを文字りつつ、フォントサイズを意図的に大きくしました。

フォントサイズの拡大は目を引かせるうえで有効ですが、文字数が長いとデバイスによっては意図せぬところで改行されたりして、視認性が悪くなったりするので注意が必要です。

明確な意図があるうえで、「ここぞ」の場面で使うくらいがベターです。

② 本文のフォントサイズは「16px」を推奨

WEBデザインにて推奨されるフォントサイズの基準は14px～16pxです。

これはグーグルやアップルも推奨している基準となるサイズで、どの端末でも大きすぎず、小さすぎない大きさといえます。

若い方（視力がよい人）がデザインする場合、主観でフォントサイズを小さめに設定しがちだったりしますが、年配の方（視力がよくない人）からすれば、小さい文字は単純に見づらくストレスをかけます。

もちろん、掲載媒体や読者層（高齢者向けか子供向けか）、サイトのデザインコンセプトなどによっても、“見やすさの基準”は変わるものですが、14〜16pxをベースとすれば問題ないでしょう。

③ リンクは青色一択

先述のとおり、リンクカラーは実質的に青色一択です。

とくに理由はないのになんとなくで青色以外を設定してるのなら、読み手が誤認する可能性を高めているだけです。

ただしひと口に青色といっても、色の濃淡やアンダーラインの有無、マウスオーバー、ホバーカラーがあるので見せ方は多岐にわたります。

では「どんな青色がいいのか」ですが、わたし的におすすめなのは「Google か Yahoo!が採用する型に合わせる」です。

理由は多くの人が見慣れている “リンクの型” としての認識だから。

※上記は2019年調査時点

Google か Yahoo!に合わせつつ、自分のブログでは「どの青色パターン」がクリックされやすいか傾向を定期的に検証することが大切です。

④ 本文テキストの色は黒よりも「濃いグレー」

本文テキストの色は、デフォルトの黒（カラーコード：#000000）のままであるのが大半だと思いますが、有名サイトの多くは「濃いグレー」を採用しています。

たとえばGoogleは「#222222」。Yahoo!は「#333333」です。

同じ黒でもけっこう違いますよね。

背景色がデフォルトの白（#ffffff）で本文テキスト色（#000）の場合、コントラストが強くて目に負担がかかりやすくなります。

本文テキストの色を「濃いグレー」に設定することで、目の負担を和らげる効果が期待できます。

⑤ 全角と半角の使い分け

⑤-1. 全角で入力してるもの

■カタカナ

見たままですが、半角カナは読みにくいです。

ちなみに半角カナを使うのは昔のコンピュータの名残りで、データ転送での容量を軽くする目的で使われていました。

現代において文字のデータ量を気にする必要ってほぼありませんので、見やすさ優先でカタカナは全角打ちです。

■カッコ

「」や（）、【】などのカッコは全角推奨です。

たとえば、全角／半角の丸かっこで見比べてみましょう。

上記の半角の丸かっこの場合、文字が詰まった見た目から窮屈な印象を受けますが、下記の全角はスッキリしていて、安定した印象ですよね。

なのでカッコは全角入力を推奨します。

■数学記号

数学記号は全角推奨です。

たとえば「＋（プラス）」の全角／半角で見比べてみましょう。

半角の場合、少しいびつな印象を受けるかと思います。

というわけで数学記号の入力は全角推奨です。

■感嘆符・疑問符

いわゆる「！」や「？」などの指す記号のことで、全角入力を推奨します。

理由は主に２つで、ひとつめは全角のほうが字面のバランスが良いからです。

ふたつめは、小説媒体で感嘆符・疑問符は全角表記がルールとされているので、視覚的に見慣れているからです。

ブログも文章ベースなので、全角のほうが安定感のある見た目になります。

ただし、「！」や「？」は、見た目のインパクトを重視するといった「演出的な意味合い」もあるため、書き手のこだわりが出る部分です。

もちろん掲載媒体などのルールに準ずる必要はありますが、ブログは「表現の自由度の高さ」が強みの媒体なので、ケースバイケースで見せ方を変えるのはアリですね。

ちなみに、感嘆符・疑問符の後には「半角スペースを入れる」のがオススメです。

ある／なしでの違いを見比べてみてください。

後者のほうが読みやすく感じませんか？

これは半角スペースが入ることにより、前後の文節のどちらに区切り約物が関連しているのかがわかりやすくなるからですね。

ちなみ全角スペースだと間延びした印象になり、どことなく「たるむ」感じがするので半角スペースを推奨します。

⑤-2. 半角で入力してるもの

【英数字】

英数字は半角推奨ですが、数字は全角で打つこともあります。

たとえば「第3章」と書く場合、「第３章」と全角にしたほうがバランスよく見えると思います。

一方、「試験を突破したのは１７名だった」と書く場合、「試験を突破したのは17名だった」と半角にしたほうがバランスよく見えるんですよね。

わたしは数字１つなら全角、２つ続く際は半角にするようにしています。

ちなみに数字入力で気をつけてほしいのが「表記ゆれ」です。

たとえば下記の文章のように、英数字の全角／半角入力が入り混じると、可読性が損なわれます。

わたしの場合、以下のように整えます。

表記ゆれがなくなると、読みやすさもだいぶ違いますよね。

⑥ 三点リーダーの扱い方について

さいごに、「三点リーダー」の扱い方を解説して筆をおきます。

三点リーダーは口語的な文章や地の文の文末につけて、余韻や沈黙の表現などに使われる約物ですが、「…」と「…」を２つ繋げて「……」とするのが標準ルール とされています。

なので「…」「・・・」「・・」「‥」「、、、」「。。。」などの使い方は適切ではないとされています。

わたしは基本的に「……」とルールどおりに使っているのですが、「。。。」だとソフトでくだけた印象になり、「・・・・・・」だと意味深な感じを演出できたりするので状況で使い分けています。

もちろん掲載媒体などによってはルールに準じるべきですが、ブログの強みは表現の自由度が高いことです。

三点リーダーに限らずですが、より読みやすく、よりわかくやすく伝えるためにも、ケースバイケースで使い分ける柔軟さをもっておきたいものですね。

ブログの文字装飾に「絶対的な正解」はありません。

読者視点はもとより書き手のオリジナル性も＋αして、適切な文字装飾ルールをつくってみてくださいね。

本記事が「このブログ、見やすくてわかりやすい」と言われたいあなたの一助になればうれしいです。

ご精読ありがとうございました！

▼ こちらの記事も何気によく読まれています！