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

 

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

 

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

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

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

 

文字装飾が適当なブロガー

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

 

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

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

 

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

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

 

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

 

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

 

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

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

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

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

 

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

 

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

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

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

 

誰が書いても読みやすくなる! ブログの文字装飾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」です。見比べてみるとけっこう違います。

 

#000000
#222222
#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の文章の強みは、表現の自由度が高いことです。

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

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

 

おわりに

 

お疲れさまでした。

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

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

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

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

 

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

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

 

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

 

ABOUT US
HiraQ編集者/WEBライター/WEBデザイナー
都内の某広告代理店に勤務。Web広告の編集やライティング、デザインに従事。ブログでは主に、Webライターやブロガー、Webデザイナーに役立つ記事をゆるく発信してます。出身は山梨、いて座のO型、猫派。サッカー好きのPSGサポです。