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

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

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

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

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

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

経験則からいっても、文字装飾をルール化してリライトするだけでも、精読率やアクセス数に好影響を及ぼすケースは多い です。

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

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

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

そもそも、文字装飾の目的ってなんでしょうか？

・読みやすくするため？

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

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

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

検索でたまたま目にとまった個人ブログの文章を、最初から最後までじっくり読む人はあまりいません。

大半の読み手は流し読みなので、「ポイントや自分に関係あることだけを効率よく知りたい」と考えています。

そこで要点を太字にしたり、ハイライトを引いて強調したりすることでわかりやすくし、読み手の理解を助ける必要があります。

適切な文字装飾を行うことで「読みやすい文章」になり、読む負担の低減につながるのです。

ただし、伝えたいことがたくさんあるからといって、装飾ルールを増やしすぎるのはよくないです。

かえって見づらくなったり、わかりにくさが増す場合もあります。

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

強調表現は少なく限定されているほうが読む側も理解しやすく、文章にもメリハリが出ます。

読みやすくて飽きられにくい文章を書くためにも、文字装飾のルールはシンプルかつ最小限にしましょう。

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

① 使う色は最小限にする

使う色が多すぎると見づらくなり、猥雑な印象を与えます。

大半の記事の背景色は「白」で文字の基本色は「黒」ですが、強調色は３〜4色程度で考えるのがいいでしょう。

使える色が限定されていれば、気分でなんとなく緑色を使ったり、アンダーラインを引いたりといったブレがなくなります。

文章に一貫性をもたせることで執筆時間の時短にもつながり、記事全体の統一感も出ます。

わたしの場合、以下のようにルール化しています。

◼黒太字：要点の強調

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

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

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

マイナス要素や注意喚起を促したいときなどに使うと効果的ですね。

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

一般的にリンクカラーは「青色（＋アンダーライン）」の認識です。

これはインターネット創世記からのデフォルトであり、青以外の色を設定する必要性も薄いです。

この件はあとでもう少し解説しますね。

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

本記事の冒頭で使った見せ方ですね。導入でインパクトを与えたい狙いで、フォントサイズを意図的に大きくさせました。

フォントサイズの拡大は目を引きますが、デバイスによっては視認性が低くなったり、文字数上、意図せぬところで改行されたりします。

扱い方を誤ると逆効果になりかねないので、使い所に注意が必要です。

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

WEBデザインにて推奨されるフォントサイズの基準は14px～16px。グーグルやアップルも推奨する基準サイズであり、どの端末でも大きすぎず、小さすぎない大きさです。

若い方（≒視力がよい人）がデザインする場合、自分視点でフォントサイズを小さく設定しがちですが、年配の方（≒視力がよくない人）からすれば、小さい文字は見づらくてストレスがかかります。

サイトデザインや掲載媒体、読者層（高齢者向けか子供向けか）などによっても「見やすさの基準」は変わりますが、推奨サイズをベースに調整するといいでしょう。

③ リンクは青色一択

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

というより青色以外で設定してる場合、読み手が誤認する可能性を高めているだけです。

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

おすすめはGoogle か Yahoo!が採用している型に合わせることです。

なぜなら多くの人が見慣れている “リンクの型” だからですね。

※上記は2019年調査時点

それから「自分のブログでは、どの青色パターンがクリックされやすいか？」を定期的に検証して傾向をつかむことが大切です。

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

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

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

見比べてみるとけっこう違いますよね。

背景色もデフォルトの白（#ffffff）だと本文テキスト色（#000）とのコントラストが強く、目に負担がかかりやすい。

そこで本文テキストの色を「濃いグレー」に変えることで、多少なりとも目の負担を和らげる効果が期待できます。

⑤ 全角と半角の使い分け

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

【カタカナ】

説明するまでもなく、半角カナは読みにくいからです。

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

現代で文字のデータ量を気にする必要ってほぼないです。カタカナは見やすさ優先で全角打ちしましょう。

【カッコ】

カッコは全角推奨です。

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

【半角】だと詰まった感じになり、窮屈な印象になりますよね。

というわけでカッコ入力は全角入力を推奨します。

【数学記号】

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

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

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

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

【感嘆符・疑問符】

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

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

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

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

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

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

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

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

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

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

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

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

【英数字】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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