有名ブログを含む100のブログを検証!大見出しのデザイン、多かったのは?

f:id:ryo_009:20180509211013p:plain

 

 

ブログのカスタマイズをするときに、最初に変えたくなるのが見出しのデザイン。

オシャレなものや少し変わったものなどいろいろありますが、どんなものがいいのか悩みますよね。

 

今回は有名ブログを含む100のブログで、どんなデザインの「大見出し」が多く使われているのかまとめてみました。

(※2018年5月8日時点の集計結果です)

 

この記事はこんな人にオススメ
  • どんな見出しデザインにするか迷っている
  • 実際にたくさん使われている見出しデザインを知りたい
  • 有名ブログで使われている見出しデザインを知りたい

 

 

大見出しでは「背景色があるもの」が多く選ばれている

今回、有名ブログを含む100のブログで使われている大見出しのデザインを調べたところ、以下のような集計結果となりました。

 

f:id:ryo_009:20180508204343p:plain

 

1位から4位までの「背景色のみ(38%)」「吹き出し(21%)」「左側に縦線+背景色(8%)」「アイコン+背景色(7%)」、6位の「リボン(5%)」はすべて背景色が設定されています。

今回集計した100のブログの大見出しのデザインでは、なんと全体の73%で背景色が設定されていることがわかりました。

 

見出しデザインを調べていて感じたんですが、背景色が設定してあると文章量が多くても、見出し部分がとても見つけやすいです。

とくに、「○○の手法解説」「○○ランキング」など、情報量が多かったり一部の情報だけが欲しいような内容の場合は、飛ばし読みされる場合がありますが、そういった場合でも大見出しに背景色が設定されているだけで、読みたいところがとても見つけやすくなります。

読みたい場所がなかなか見つからないと、直帰離脱につながる可能性もあるので、情報量が多い記事を扱っている場合は大見出しに背景色を設定しておくといいかもしれません。

 

ここからは大見出しデザインの上位2つ(3位以下は僅差なので割愛)について、見出しのコードと、その見出しデザインを使用している有名ブログを勝手に紹介していきたいと思います。

 

1位:背景色のみ

大見出しのデザインでは、今回集計した100のブログのうち4割近いブログで「背景色のみ」となりました。

「背景色のみ」はどんなブログでも馴染みやすさが抜群ですね。

「背景色のみ」といっても、単色やグラデーション、点線をあしらったり、角を丸めたりと、いろいろアレンジもできるので、非常に使いやすい見出しデザインです。

h1 {
background: #eeeeee;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/
color: #454545;/*文字色*/
border-radius: 5px;/*角を丸く*/
}

※ サンプルのコードではh1タグにしていますが、適宜h2~h6などに変更してください。また、「文字色」や「角を丸く」する設定など、不要な場合は削除してご使用ください。

 

色の見本はこちらが便利です。

www.color-sample.com

 

 

2位:吹き出し

「背景色のみ」に続いて人気があったのが「吹き出し」です。

「吹き出し」の見出しデザインでは、単調な四角ではなく吹き出し部分があることで、解説など難しい内容が多い記事でも堅い印象になりすぎず、適度に親しみやすい印象が感じられます。

「背景色のみ」と同様、いろいろアレンジもできるので、こちらも非常に使いやすい見出しデザインです。

h1 {
  position: relative;
  padding: 0.6em;/*文字まわり(上下左右)の余白*/
  background: #eeeeee;/*背景色*/
  color: #454545;/*文字色*/
  border-radius: 5px;/*角を丸く*/
}

h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #eeeeee;/*吹き出し部分の色*/
width: 0;
height: 0;
}

※ サンプルのコードではh1タグにしていますが、適宜h2~h6などに変更してください。また、「文字色」や「角を丸く」する設定など、不要な場合は削除してご使用ください。

 

こんなブログが使ってる!

 

記事の文章量が多いなら、背景色があるものがオススメ!

見出しのデザインは記事の読みやすさや、記事全体の印象にも関わってきます。

一記事当たりの文章量が多い場合は、読み手が迷子にならないように、文章と区別のしやすい背景色が設定された見出しデザインがおすすめです。 

 

背景色のある大見出しのメリット
  • 飛ばし読みしても、読みたい場所を見つけやすい
  • 区切りになるので、どこを読んでるかわからなくならない
  • 「文字の強調」なのか「見出し」なのかがはっきりわかる

 

逆を言ってしまえば、文章量がそれほど多くなかったり、飛ばし読みされる可能性が低い記事を多く取り扱っている場合などは、それほど気にする必要はなさそうですね。

 

近いうちに、中見出しのデザインについても、まとめたいと思っています。

 

見出しデザインのコードについては、今回も「サルワカ」さんを参考にさせていただきました。

saruwakakun.com

 

この記事が何かの役に立てば幸いです。

それでは!