有名ブログを含む100のブログを検証!中見出しのデザインについても調べてみた

f:id:ryo_009:20180512231026p:plain

 

 

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

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

 

今回は中見出しのデザインについてまとめてみました。

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

 

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

 

 

中見出しでは「線」と「背景色がないもの」が多く選ばれている

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

 

f:id:ryo_009:20180512120405p:plain

 

1位から3位までの「左側に縦線のみ(33%)」「下線(実線)(21%)」「左側に縦線+下線(11%)」、同率5位の「上下線(5%)」、同率8位の「アイコン+下線(3%)」はすべて「背景色のない実線を使ったデザイン」でした。

これらは今回集計した100のブログの中見出しのデザインの73%を占めています

 

こちらは前回まとめた大見出しの集計結果です。

 

f:id:ryo_009:20180508204343p:plain

 

大見出しのデザインでは、背景色があるものを使っている割合が全体の73%を占めており、中見出しとは反対の結果となっていました。

大見出しで背景色を設定している分、中見出しは大見出しと区別できるように控えめなデザインが選ばれていることがわかります。

 

また、中見出しは解説記事の「手順」やランキング記事の「順位」などに使用されることが多いことから、くどくならず文章とも区別しやすい「背景色のない線を使ったデザイン」が非常に使いやすい印象を受けました。

 

それから、中見出しについては使っていないブログもありました。(もしかしたら見つけられなかっただけかもしれませんが……。)

今回の集計ではどこか一か所でも中見出しを使っていたら、それを1票としてカウントしていますが、その中でもほとんどの記事で中見出しを使っていないブログなどもありました。

そういったブログは、記事のボリュームが良い意味で少なく、内容がコンパクトにわかりやすくまとまっていて、大見出しだけで構成されていても充分見やすい工夫がされていました。

 

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

 

1位:左側に縦線のみ

中見出しのデザインでは、今回集計した100のブログのうち30%以上のブログで「左側に縦線のみ」のデザインとなりました。

「左側に縦線のみ」のデザインは非常に使いやすい見出しデザインの一つです。

シンプルでどんなブログデザインでも馴染みやすいところが選ばれている理由かもしれませんね。

 

1つ目のコードが角が四角いデザイン、2つ目のコードが角が丸いデザインです。

h1 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #454545;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #dddddd;/*左線の色*/
}
h1:before {
    color: #454545;/*文字色*/
    background: #dddddd; /*左線の色*/
    border-radius: 5px; /*線幅の半分*/
    content: "";
    display: inline-block;
    height: 40px; /*線の長さ*/
    margin-right: 10px; /*線右の余白*/
    vertical-align: middle;
    width: 10px; /*線幅*/
}

※ サンプルのコードではh1タグにしていますが、適宜h2~h6などに変更してください。

 

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

www.color-sample.com

 

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

 

2位:下線(実線)

20%以上を占めていたのが「下線(実線)」です。

「下線(実線)」では、シンプルに黒で下線を引いているものや、2色使いのもの、グラデーションのものなどいろいろアレンジすることができます。シンプルでありながら、本文との区切りもわかりやすく、こちらも非常に使いやすい見出しデザインです。

今回集計した100のブログでは、クリエイターさんやイラストレーターさん、デザイナーさんが多く使っている印象でした。

 

1つ目のコードがシンプルな実線、2つ目のコードが2色使いのデザインです。

h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}
h1 {
border-bottom: solid 3px #eeeeee;
/*(線の後半)線の種類(実線) 太さ 色*/
position: relative;
}

h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #cccccc;
/*(線の前半)線の種類(実線) 太さ 色*/
bottom: -3px;
width: 20%;/*線の前半の幅*/
}

※ サンプルのコードではh1タグにしていますが、適宜h2~h6などに変更してください。

 

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

 

3位:左側に縦線+下線

3位は1位の「左側に縦線」と2位の「下線」を組み合わせた「左側に縦線+下線」です。

こちらもシンプルですが本文との区切りがわかりやすく、使いやすいデザインです。

h1 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #454545;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #dddddd;/*左線*/
border-bottom: solid 1px #dddddd;
/*下線の種類(実線) 太さ 色*/
}

※ サンプルのコードではh1タグにしていますが、適宜h2~h6などに変更してください。

 

線の種類についてはこちらが便利です。

www.htmq.com

 

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

  

中見出しには、目立ちすぎないシンプルな物がオススメ!

中見出しのデザインでは、大見出しと勘違いさせないデザインとして、背景色のないシンプルなデザイン、または背景色を抑えめの色にしたデザインが見やすい印象です。

とくに線を使ったデザインでは、背景色がなくても本文と区別がしやすく、どんなブログでも馴染みやすいので非常に使いやすくオススメです。 

 

背景色のない線を使った中見出しのメリット
  • 大見出しとの区別がしやすい
  • 本文との区別がしやすい
  • どんなブログでも馴染みやすい

 

どんな構成で、またどれくらいのボリュームの記事を書くかによって、最適な中見出しのデザインは変わります。

内容がコンパクトにまとまっていて、大見出しだけでも充分見やすいようであれば、中見出し自体それほど気にする必要はなさそうです。

  

見出しデザインのコードについては、以下のサイトを参考にさせていただきました。

saruwakakun.com

q-az.net

 

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

それでは!