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

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

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

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

読みやすく、わかりやすい記事を書くためにも、あなたのブログ内における文字装飾のルールを設けるといいでしょう。

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

文字装飾に「絶対的な正解」はないですが、読まれやすくなるコツ的なものはあります。

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

わたしの経験則からいって、文字装飾のリライトだけでも精読率やアクセス数が改善するケースも多いです。

「劇的に改善する」とまではいいませんが、「地味に効いてくる」施策です。取り入れる価値はあると思いますよ。

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

そもそも、文字装飾の目的って何だと思いますか？

✔　文章にメリハリやリズムをつけるため

✔　見やすく、わかりやすくするため

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

✔　読み手を飽きさせないため

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

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

また読者の大半は、自分に関係があると思うところだけをさらって読む「流し読み」をするので、流し読みでも概要を掴んでもらいやすくするために、文字装飾は効果的です。

ルールに則った配色・装飾で文章に一貫性をもたせることで、読み手はたくさんの情報のなかから、重要な（自分に関係がありそうな）情報を効率的に見つけることができます。

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

① 色を使いすぎない

必要性がないのにたくさんの色を使うと、それだけで見づらく煩雑な印象を与えます。

かといって色をまったく使わないと、それはそれで手抜きっぽく、退屈な文章にも見えてきます。

仮に背景色が「白」で、文字の基本色は黒（あるいは濃いグレー）であるなら、強調色は２〜３色くらいで考えるのがいいかと。

ルールに則って戦略的に配色すれば、読み手を混乱させず、書き手も使える色が決まっているから書きやすいのです。たとえば以下な感じ。

◼黒太字：シンプルな強調

文字装飾は奥が深いのよ、マジで。

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

文字装飾はSEOの観点から見ても、離脱率や直帰率を下げるのに効果的なテクニックと考えられます。

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

調査した結果、文字の表記・装飾のルールを設けていない記事の場合、執筆に時間がかかり、誤字脱字・重複などのケアレスミスも増える傾向があるとわかった。

ちなみに赤信号は世界共通で「止まれ」なので、赤色の文字は目を引きやすいです。マイナス要素や注意喚起を促したいときなどに有効な色ですね。

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

文字装飾のルール化については、こちらのサイトが参考になリますよ。

一般的に、リンクカラーは「青色（＋アンダーライン）」と解釈されます。

リンクの色＝青はインターネット創世記からのデフォルトで、あえて青以外の色にする必要性もありません。この件はのちほどもう少し解説します。

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

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

本記事の冒頭での見せ方ですね。記事の冒頭から読み手にインパクトを与えたい狙いから、フォントサイズを意図的に大きくしました。

強調表現として有効ですが、デバイスによっては視認性が悪かったり、意図せぬところで改行されたりする場合があります。使い所には注意ですね。

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

Webの文章における本文のフォントサイズは、16pxを推奨します。なぜなら、Googleが本文のフォントサイズを16px、Appleが最低サイズを11pt（約14.6px）と推奨しているからです。

どの端末でも大きすぎず、小さすぎず見える大きさなので、一般的に「標準サイズ」として認知されています。

サイトのデザインや掲載媒体、ターゲット層（高齢者向け、子供向け）などによっても「見やすさの基準」は違ってきますが、基本的に本文のフォントサイズは16pxで問題ないでしょう。

③ リンクは青色一択

先述のとおり、リンク色は青色で問題ありません。というより青色以外で設定してるなら問題あり。読み手が誤認する可能性を高めるだけです。

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

個人的には、「Google か Yahoo!が採用している型に合わせる」のを推奨します。

（※上記は2019年調査時点です。）

そして、「自分のブログでは、どの青色パターンがクリックされやすいのか」の効果検証が大切ですね。

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

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

例えば、Googleは「#222222」。 Yahoo!は「#333333」です。見比べてみるとけっこう違います。

背景色は、デフォルトの白（#ffffff）設定のままであることが多いですが、本文テキスト色がまっ黒（#000000）だとコントラストが強く、目も疲れやすくなります。「濃いグレー」にするだけで、目への負担を軽減できるのです。

⑤ 全角と半角の使い分け

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

【カタカナ】

理由は単純。半角だと読みにくいからです。

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

現代で文字のデータ量を気にする必要ってほぼないので、見やすさ優先で全角を推奨します。

【カッコ】

カッコは全角推奨です。半角だと窮屈な印象になるので。

たとえば丸かっこの場合、以下な感じ。

【全角】 私は広告代理店（WEB媒体専門）で働いている編集者です。

【半角】私は広告代理店(WEB媒体専門)で働いている編集者です。

【半角】は詰まった感じになり視認性が下がるので、カッコ入力は全角を推奨します。

【数学記号】

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

たとえば「＋（プラス）」の場合、以下な感じ。

【半角】 施策の結果、CTRが５.２％（+３.５％）にアップしました。

【全角】 施策の結果、CTRが５.２％（＋３.５％）にアップしました。

若干ですが、半角だといびつな印象になりますよね。数学記号の入力は全角推奨です。

【感嘆符・疑問符】

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

理由は主に２つ。一つは字面のバランスの良さです。

もう一つは、小説媒体で感嘆符・疑問符は全角表記がルールとされていることから、視覚的に見慣れているためです。ブログもベースは文章なので全角の方が安定感が出ます。

ただ、！や？の使い方には書き手のこだわりや見栄えといった「演出の意味合い」が大きかったりもします。

ブログの強みは表現の自由度が高いことなので、ケースバイケースで半角や全角にするなど見せ方を変えるのもアリでしょう。

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

違いを見比べてみてください。

【半スペなし】

文字装飾って何ですか？アクセス伸びるならやりますよ！でも難しいんですか？

【半スペあり】

文字装飾って何ですか？ アクセス伸びるならやりますよ！ でも難しいんですか？

【半スペあり】の方が読みやすく感じたのではないでしょうか。

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

ちなみ全角のスペースだと間延びした印象になるので、半角推奨です。

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

【英数字】

基本的には半角推奨です。

が、それ以上に気をつけたいのが「表記ゆれ」でして、たとえば下記の文章のように、英数字の全角・半角入力が入り混じると可読性を大いに損ないます。

私は西暦１９８０年生まれです。和暦だと昭和55年ですね。ＷＥＢディレクション事業部は若い人が多く、平均年齢は２６歳です。

Chief Directorでも３０歳で、最年少はなんと20歳!最年長なのに気を使いまくってますよ(笑)

下記みたく半角で整えると、バランスがとれてスッキリした印象になります。

私は西暦1980年生まれです。和暦だと昭和55年ですね。WEBディレクション事業部は若い人が多く、平均年齢は26歳です。

Chief Directorでも30歳で、最年少はなんと20歳！ 最年長なのに気を使いまくってますよ（笑）

⑥ 三点リーダー「…」は2つ繋げて使うのが「標準」ルールだけど無視で

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

なので、「…」「・・・」「・・」「‥」「、、、」「。。。」のような使い方は、適切ではないということになります。

ただ、私はけっこう無視してます。三点リーダーは使い方によってニュアンスを変えるのに便利なので。

掲載媒体によってはルールに則らないとダメですが、個人ブログなどWebの文章の強みは、表現の自由度が高いことです。

「こう見せたらもっと伝わる」と思うなら、柔軟に新しい表現を取り入れることも大切だなと思います。

もちろん、独りよがりなルールだとよくないですが、「自分だけのオリジナル」も効果的な文字装飾ルールの一つなんですよね。

おわりに

お疲れさまでした。

これまで文字の表記・装飾をあまり意識せず書いていたのなら、独りよがりな文字装飾は今日で終わりにしましょう。

そして、あなたのブログ内における表記・装飾ルールをはっきりと決めて、文章に“一貫性”をもたせる意識を常に持って書いてみてください。

文字装飾のルールが決まっていれば、「たまには緑色を使うか」とか「ハイライトよりアンダーラインな気分だな」みたいにブレなくなります。

見せ方でいちいち悩まなくなるので執筆時間が短縮でき、ブラッシュアップの時間が増えます。すると文章の質を引き上げられて、「見やすく、わかりやすいブログ」に一歩前進です。

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

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

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