その日の気分や記事の雰囲気でなんとなく、フォントの色やサイズを変えたり、ハイライトを引いたりしていませんか?
読みにくいブログにありがちなのが、文字装飾に明確なルールがないことです。
読みやすく、わかりやすい記事を書くためにも、あなたのブログ内における文字装飾のルールを設けるといいでしょう。

友達に「お前のブログ、読みにくい」って言われた…
文字装飾に「絶対的な正解」はないですが、読まれやすくなるコツ的なものはあります。
本記事では、某広告代理店の編集者のわたしが実践で得た知見から、「誰が書いても読みやすくなる文字装飾の使い方」を解説します。

わたしの経験則からいって、文字装飾のリライトだけでも精読率やアクセス数が改善するケースも多いです。
「劇的に改善する」とまではいいませんが、「地味に効いてくる」施策です。取り入れる価値はあると思いますよ。
もくじ
ブログ記事における文字装飾の目的とは?


そもそも、文字装飾の目的って何だと思いますか?
✔ 文章にメリハリやリズムをつけるため
✔ 見やすく、わかりやすくするため
✔ 記事に独自性をもたせるため
✔ 読み手を飽きさせないため

どれも正解といえますが、わたしが一つだけ挙げるなら、文章を全部しっかり読まなくても理解してもらうため です。
たまたま検索で引っかかった個人ブログの文章を、最初から最後までじっくりと読んでくれる人はあまりいません。
また読者の大半は、自分に関係があると思うところだけをさらって読む「流し読み」をするので、流し読みでも概要を掴んでもらいやすくするために、文字装飾は効果的です。
ルールに則った配色・装飾で文章に一貫性をもたせることで、読み手はたくさんの情報のなかから、重要な(自分に関係がありそうな)情報を効率的に見つけることができます。
誰が書いても読みやすくなる! ブログの文字装飾6パターン
① 色を使いすぎない

必要性がないのにたくさんの色を使うと、それだけで見づらく煩雑な印象を与えます。
かといって色をまったく使わないと、それはそれで手抜きっぽく、退屈な文章にも見えてきます。
仮に背景色が「白」で、文字の基本色は黒(あるいは濃いグレー)であるなら、強調色は2〜3色くらいで考えるのがいいかと。
ルールに則って戦略的に配色すれば、読み手を混乱させず、書き手も使える色が決まっているから書きやすいのです。たとえば以下な感じ。
◼黒太字:シンプルな強調
文字装飾は奥が深いのよ、マジで。
◼黒太字+黄色ハイライト:ポジティブ要素での強調
文字装飾はSEOの観点から見ても、離脱率や直帰率を下げるのに効果的なテクニックと考えられます。
◼赤太字:ネガティブ要素や注意喚起としての強調
調査した結果、文字の表記・装飾のルールを設けていない記事の場合、執筆に時間がかかり、誤字脱字・重複などのケアレスミスも増える傾向があるとわかった。
ちなみに赤信号は世界共通で「止まれ」なので、赤色の文字は目を引きやすいです。マイナス要素や注意喚起を促したいときなどに有効な色ですね。
◼青太字(+アンダーライン):リンク
文字装飾のルール化については、こちらのサイトが参考になリますよ。
一般的に、リンクカラーは「青色(+アンダーライン)」と解釈されます。
リンクの色=青はインターネット創世記からのデフォルトで、あえて青以外の色にする必要性もありません。この件はのちほどもう少し解説します。
◼フォントサイズ大:意図がある場合のみ使う
世の中には2種類のブログしかない。読みやすいブログか、それ以外か。
本記事の冒頭での見せ方ですね。記事の冒頭から読み手にインパクトを与えたい狙いから、フォントサイズを意図的に大きくしました。
強調表現として有効ですが、デバイスによっては視認性が悪かったり、意図せぬところで改行されたりする場合があります。使い所には注意ですね。
② 本文のフォントサイズは「16px」を推奨

Webの文章における本文のフォントサイズは、16pxを推奨します。なぜなら、Googleが本文のフォントサイズを16px、Appleが最低サイズを11pt(約14.6px)と推奨しているからです。
どの端末でも大きすぎず、小さすぎず見える大きさなので、一般的に「標準サイズ」として認知されています。
サイトのデザインや掲載媒体、ターゲット層(高齢者向け、子供向け)などによっても「見やすさの基準」は違ってきますが、基本的に本文のフォントサイズは16pxで問題ないでしょう。
③ リンクは青色一択

先述のとおり、リンク色は青色で問題ありません。というより青色以外で設定してるなら問題あり。読み手が誤認する可能性を高めるだけです。
ただしひと口に青色といっても、「色の濃淡」「アンダーラインの有無」「マウスオーバー」「ホバーカラー」などで見せ方も多岐にわたります。
個人的には、「Google か Yahoo!が採用している型に合わせる」のを推奨します。
サービス | リンク色のカラーコード | マウスオーバー効果 |
Google検索 | ♯1A0DAB | マウスオーバーでアンダーライン表示 |
Googleニュース | ♯202124 | マウスオーバーでアンダーライン表示 |
Yahoo! JAPAN検索 | ♯000D99 | 検索表示時点でアンダーラインあり。マウスーオーバーで文字色変化 |
Yahooニュース | ♯0033CC | マウスーオーバーでアンダーライン表示+文字色変化 |
(※上記は2019年調査時点です。)
そして、「自分のブログでは、どの青色パターンがクリックされやすいのか」の効果検証が大切ですね。
④ 本文テキストの色は黒よりも「濃いグレー」

本文テキストの色は、デフォルトの黒(カラーコード:#000000)のままという人も多いと思いますが、有名サイトの多くは「濃いグレー」を採用しています。
例えば、Googleは「#222222」。 Yahoo!は「#333333」です。見比べてみるとけっこう違います。



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

⑤-1. 全角で入力してるもの
【カタカナ】
理由は単純。半角だと読みにくいからです。
そもそも半角カナの存在は昔のコンピュータの名残りでして、データ転送での容量を軽くする目的で使われていました。
現代で文字のデータ量を気にする必要ってほぼないので、見やすさ優先で全角を推奨します。
【カッコ】
カッコは全角推奨です。半角だと窮屈な印象になるので。
たとえば丸かっこの場合、以下な感じ。
【全角】 私は広告代理店(WEB媒体専門)で働いている編集者です。
【半角】私は広告代理店(WEB媒体専門)で働いている編集者です。
【半角】は詰まった感じになり視認性が下がるので、カッコ入力は全角を推奨します。
【数学記号】
数学記号は全角推奨です。
たとえば「+(プラス)」の場合、以下な感じ。
【半角】 施策の結果、CTRが5.2%(+3.5%)にアップしました。
【全角】 施策の結果、CTRが5.2%(+3.5%)にアップしました。
若干ですが、半角だといびつな印象になりますよね。数学記号の入力は全角推奨です。
【感嘆符・疑問符】

いわゆる「!」や「?」などの指す記号のことで、全角推奨です。
理由は主に2つ。一つは字面のバランスの良さです。
もう一つは、小説媒体で感嘆符・疑問符は全角表記がルールとされていることから、視覚的に見慣れているためです。ブログもベースは文章なので全角の方が安定感が出ます。
ただ、!や?の使い方には書き手のこだわりや見栄えといった「演出の意味合い」が大きかったりもします。
ブログの強みは表現の自由度が高いことなので、ケースバイケースで半角や全角にするなど見せ方を変えるのもアリでしょう。
ちなみに、感嘆符・疑問符の後には「半角スペースを入れる」のがオススメです。
違いを見比べてみてください。
【半スペなし】
文字装飾って何ですか?アクセス伸びるならやりますよ!でも難しいんですか?
【半スペあり】
文字装飾って何ですか? アクセス伸びるならやりますよ! でも難しいんですか?
【半スペあり】の方が読みやすく感じたのではないでしょうか。
スペースが入ることで、前後の文節のどちらに区切り約物が関連しているのか、わかりやすくなるのです。
ちなみ全角のスペースだと間延びした印象になるので、半角推奨です。
⑤-2. 半角で入力してるもの

【英数字】
基本的には半角推奨です。
が、それ以上に気をつけたいのが「表記ゆれ」でして、たとえば下記の文章のように、英数字の全角・半角入力が入り混じると可読性を大いに損ないます。
私は西暦1980年生まれです。和暦だと昭和55年ですね。WEBディレクション事業部は若い人が多く、平均年齢は26歳です。
Chief Directorでも30歳で、最年少はなんと20歳!最年長なのに気を使いまくってますよ(笑)
下記みたく半角で整えると、バランスがとれてスッキリした印象になります。
私は西暦1980年生まれです。和暦だと昭和55年ですね。WEBディレクション事業部は若い人が多く、平均年齢は26歳です。
Chief Directorでも30歳で、最年少はなんと20歳! 最年長なのに気を使いまくってますよ(笑)
⑥ 三点リーダー「…」は2つ繋げて使うのが「標準」ルールだけど無視で
口語的な文章や地の文の文末につけて、余韻や沈黙の表現などに使う「三点リーダー」は、2つ繋げて使うのが標準ルールとされています。
なので、「…」「・・・」「・・」「‥」「、、、」「。。。」のような使い方は、適切ではないということになります。
ただ、私はけっこう無視してます。三点リーダーは使い方によってニュアンスを変えるのに便利なので。
掲載媒体によってはルールに則らないとダメですが、個人ブログなどWebの文章の強みは、表現の自由度が高いことです。
「こう見せたらもっと伝わる」と思うなら、柔軟に新しい表現を取り入れることも大切だなと思います。
もちろん、独りよがりなルールだとよくないですが、「自分だけのオリジナル」も効果的な文字装飾ルールの一つなんですよね。
おわりに
お疲れさまでした。
これまで文字の表記・装飾をあまり意識せず書いていたのなら、独りよがりな文字装飾は今日で終わりにしましょう。
そして、あなたのブログ内における表記・装飾ルールをはっきりと決めて、文章に“一貫性”をもたせる意識を常に持って書いてみてください。
文字装飾のルールが決まっていれば、「たまには緑色を使うか」とか「ハイライトよりアンダーラインな気分だな」みたいにブレなくなります。
見せ方でいちいち悩まなくなるので執筆時間が短縮でき、ブラッシュアップの時間が増えます。すると文章の質を引き上げられて、「見やすく、わかりやすいブログ」に一歩前進です。

ご精読ありがとうございました。
「このブログ、見やすくてわかりやすい」と言われたいあなたの、一助になればうれしいです。
▼ こちらの記事もよく読まれています
世の中には2種類のブログしかない。読みやすいブログか、それ以外か。