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

大見出しでは「背景色があるもの」が多く選ばれている
1位：背景色のみ
2位：吹き出し
記事の文章量が多いなら、背景色があるものがオススメ！

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

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

今回は有名ブログを含む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

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

クロネコ屋の月100万稼ぐアフィリエイト講座（クロネコ屋さん|@NINJAkusokuso）
アフィリエイトの始め方｜初心者が月5万稼ぐ方法をすべて公開！（ひつじ♂さん|@hituji_1234）
今日はヒトデ祭りだぞ（☆←ヒトデさん|@hitodeblog）
はたのブログ（はたさん|@hata_blog）
ルカルカダイエット（亀山ルカさん|@RUKAv2）

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;
}

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