ブログの見出しデザインその2

一度は満足したはずのブログ見出しデザインを変更してみました。

気をつけたことはこんな感じ。

• 斜め読みされても見分けやすいフォントカラー
• 管理が楽になるシンプルなCSSタグ

なんとなくモヤモヤしていた読みにくさがだいぶ解消されました。

斜め読みでも見やすい見出しデザイン

以前はごちゃごちゃ記号を付けたり背景色で囲ったりしていたんですがCSSは長くなるし劇的に見やすくなるわけでもなかったのでごっそり変更してみました。

やったことはフォントサイズを微妙に大きくするのとフォントカラーを明確に分けてh2・h3・h4と階層が変わった時に変化がわかりやすくしたことくらい。

この画像じゃ良さがわかりにくいんですけどマウスのスクロールやスマホのスクロールで思いっきり斜め読みしても見出しの存在を見分けやすくなりました。

h4見出しはめったに使わないのでカラーは黒にして記号を付けて差別化。

h4見出しまで階層が下がるとチェックリスト的な使い方が多くなるのでちょっとした記号を付ける程度でも問題ありませんでした。

見出しのCSSタグ

実際に設定したCSSタグはこちら。

このブログではWordPressの無料テーマ Simplicity を利用していて元々のCSSを打ち消すためのタグもあるので表示がうまくいかない場合は適宜編集してください。

h4見出しだけはFont Awesomeを使っているのでブログによっては上記のCSSタグを設定しても表示されないかもしれません。

その場合はFont Awesomeの設定が必要になるので「Font Awesome 使い方」とかでググってみてください。

カラフルな見出しが向いてるブログ

色で見出しの差別化をしているため文字の装飾がカラフルなブログだと見にくくなってしまいます。シンプルなブログのほうが見やすくなるでしょう。

また、写真や図解の近くに見出しがあると見分けがつきにくくなります。見出しの前後はテキストがベストですね。

その他ブログの立ち位置にもよって変わってきそうです。

アンサー記事中心のブログ

「～する方法」などのアンサー記事が多いブログだったら検索ユーザーの斜め読みがしやすくなるので相性が良さそうです。

答え（ゴール地点）が決まっている記事なので読者にとっては面白さよりも「答えが書いてあるか」が重要ってことですね。

読み物は向いてない

小説や考察などの最初から最後まで読み進めるコンテンツだと見出しを目立たせてもメリットが少なくなります。文章の流れを味わいたいのにカラフルな見出しが邪魔になることもあるかもしれません。

参考にしたブログ

ちなみに参考にしたのはごりゅごさんのブログで、

参考：ごりゅご.com

• 見出しはほぼh2で緑色
• 装飾のためのフォントカラーはほぼ無し
• テキスト中心で時々写真

見出しの緑色が非常にわかりやすくなってます。

見出しデザインのチェックは思いっきりスクロールしてみて

ということで自分のブログの見出しをカスタマイズする時はじっくり見るだけじゃなくてマウスのスクロールで思いっきり斜め読みしてみることをおすすめします。

ひとつひとつの見出しが素晴らしくても実際には情報を探しているネットサーフィンユーザーから見ると斜め読みしやすいブログのほうが読みやすいと思うんですよね。

フォントカラー意外にも方法はいろいろ考えられると思います。色じゃなくて枠線・背景色・シャドー・吹き出しなどなど自分のブログの特徴によっていろいろ考えられそう。

＜関連＞
⇒ブログ見出しデザインその1

⇒ブログ見出しデザインその3