読みやすいブログが採用する「文字装飾のルール」とは？

こんにちは！

ブログ起業コンサルタントのずーみー（⇒プロフィール）です^^

あなたは、ブログ内の文字装飾のやり方で、悩んだ経験はありませんか？

たとえば、色の使い分けや、強調表現、文字サイズをどうするかで、ブロガーなら、誰でも一度は悩んだことがあると思います。

文字装飾の方法に、正解はありません。

けれども、「こうした方が読みやすいブログになるよ～」という基準はあります。

今回は、あるブロガーさんからいただいたご質問をもとに、ずーみーが採用している、おすすめの文字装飾のルールを解説します。

ご質問：ブログの文字装飾で工夫している点を教えてください

こんにちは、ずーみーさん。

僕は現在、文字の装飾について、ちょっと悩んでいます。

ブログで情報発信している人の中には、カラフルに文字を装飾して見やすくしている人もいれば、メールのように白黒で文章を書いている人もいます。

僕は当初、できるだけ装飾を使わず、文章の力だけでブログを書こうと思っていたのですが、白黒の文章だと、SEOからくる初見の読者さんの直帰率を上げてしまうのではないかと、不安を感じました。

そこで最近、ブログを書くときに、文字の装飾に力を入れるようにしました。

大事な箇所に、色文字や背景色をつけたりなどの工夫をしています。

ずーみーさんのブログも、文字装飾がされていますが、何か法則性のようなものは決まっているのでしょうか？

また、白黒の文章は、やめた方がいいと思われますか？

もちろん、ブロガーひとりひとり表現の仕方は違うと思うので、正解はありませんが、ずーみーさんの工夫している点などあれば知りたいです。

おすすめの文字装飾のルールとは？

僕がブログ内で採用する文字装飾のルールは、かなりシンプルです。

なぜシンプルかというと、表現手法を限定し、それを「反復」することによって、読者さんの文章への理解度がアップするからです。

具体的には、主に次の４つのルールを使っています。

色をたくさん使わない

あなたが、ブログ内の文字装飾に色をたくさん使うと、読者さんが混乱したり、文章への理解度が落ちたりする原因になります。

そのため、ブログ内の文字装飾では、色をむやみにたくさん使うのではなく、４色程度に限定して使用するようにしましょう。

当ブログの場合は、黒、赤、黄、青の４色を、主に使用しています。

なお、青を文字色として使用する際は、リンクの色と混同されないように注意してください。

また、白黒だけの文章は、見た目が単調になり、読者さんがすぐに飽きてしまうので、あまりおすすめしません。

太文字＋黄色背景：プラスイメージの強調

ブログを書いていると、強調表現に、プラスイメージやマイナスイメージをつけたくなるときがあります。

そんなときに、僕がプラスの強調表現として使うのが、「太文字＋黄色背景」です。

僕は、「太文字＋黄色背景」のところさえ読んでもらえば、記事の要点が伝わるように、工夫しています。

なお、同様の表現手法として、「細いアンダーライン」を採用するブロガーさんもいますが、僕は使っていません。

なぜなら、細いアンダーラインは、強調表現としては弱いからです。

また、専門学校でデザインを教えている、デザイン講師ブロガーのセッジさんによると、「文字は線の集合体なので、アンダーラインがつくと読みづらくなる」という特性もあるそうです。

以下は、「太文字＋黄色背景」と「細いアンダーライン」の比較画像です。

どちらが強調表現として適しているか、あなたも考えてみてください。

引用元：営業マンお悩み解決ブログ

赤太文字：マイナスイメージの強調

僕がマイナスの強調表現として使うのが、「赤太文字」です。

色にはそれぞれ意味があり、赤は危険を知らせる色（＝危険色）なので、僕は、マイナスの強調表現として、赤を使用しています。

なお、色が持つ意味については、セッジさんの作った次の表が、非常に参考になります。

色の持つイメージ　出典：Sedge Design

くわしくは、セッジさんのブログの、次の記事をお読みください。

フォントサイズは16pxで統一する

「色をたくさん使わない」と同じで、文字サイズをころころ変えると、読者さんが混乱したり、文章への理解度が落ちたりする原因になるので、僕は16pxで統一しています。

なお、ここぞという場面で文字サイズを大きくするのは、僕はアリだと思っています。

自分はめったにやりませんけど。

１文字だけ飛び出し現象をなくす

最後に、もうひとつ、僕がブログ内で採用しているルールをご紹介します。

そのルールとは、「１文字だけ飛び出し現象をなくす」というものです。

１文字だけ飛び出し現象とは、次のようなものです。

「１文字だけ飛び出し現象」の例

このように、改行したときに文章が１文字だけ飛び出していると、僕はとても気持ち悪く感じるので、文章の長さを適度に調節しています。

以下は、改善例です。

「１文字だけ飛び出し現象」の改善例

ちなみに、こんなことをしているのは自分だけかと思っていたら、デザイン講師ブロガーのセッジさんも、僕と同じことをしているそうです。

僕はズボラなので、PC画面の見た目しか気にしませんが、セッジさんは、PCとスマホの両方で、１文字だけ飛び出し現象を防いでいるそうです。

さすが、デザインのプロは違いますね(^^;

以上、ご参考になればさいわいです。

▼セッジさんのブログはこちら▼