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

f:id:ryo_009:20180512231026p:plain

中見出しでは「線」と「背景色がないもの」が多く選ばれている
1位：左側に縦線のみ
2位：下線（実線）
3位：左側に縦線＋下線
中見出しには、目立ちすぎないシンプルな物がオススメ！

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

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

クロネのブログ講座（クロネさん｜@kurone43）
アフィリノオト | 本当は教えたくないアフィリエイト戦略と思考（なかじさん｜@ds_nakajima）
manablog（バンナイマナブさん｜@manabubannai）
ハイパーメモメモ（沖ケイタさん｜@namakemono0309）
文ログ（団子さん｜@S_dango）

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などに変更してください。

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

アフィリエイトの始め方｜初心者が月5万稼ぐ方法をすべて公開！（ひつじ♂さん|@hituji_1234）
マサオカブログ（マサオカさん｜@iMassa07）
ゆころぐ（ゆうこりんさん｜@yucorin_jp）
tsugurism（つぐりさん｜@tsuguriguri）
しろまるカフェ（あきたしろまるさん｜@akitashiromaru）

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

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