【研究】お知らせ・コラム・ブログ系コンテンツの一般的な「見出し」と「リスト」のスタイル

お知らせ・コラム・ブログなど、文章を主体とした記事コンテンツのデザインテンプレートを作成する際、適した文字サイズやスタイリングとはどのようなものでしょうか。

この記事ではnoteのようなユーザー投稿型サイトから4サイト、筆者が「記事を書いているな」という印象を持っているサイト及びme ki ki ki や S5 Style に掲載されている記事コンテンツがあるサイトの中で見出しスタイルが .post-content h2 のようにタグ名に対して当たっているサイトから適当に35サイトのスタイルを確認して傾向を研究しました。

とりあえず結果だけ見たい人は、「傾向をもとに考えたデザインの目安」「検討したデザインの目安をもとに作成したサンプルデザイン」を確認してください。

調査したサイト・調査方法

調査したサイト

今回研究の対象としたのは以下のサイトです（すべて2025年8月時点）

• ユーザー投稿型サイト
  • https://qiita.com/
  • https://zenn.dev/
  • https://note.com/
  • https://sizu.me/
• お知らせ・コラム・ブログなど
  • https://ics.media/
  • https://www.m-hand.co.jp/blog/
  • https://lucy.ne.jp/bazubu/
  • https://baigie.me/news/
  • https://baigie.me/engineerblog/
  • https://baigie.me/recruit-blog/
  • https://necco.inc/note/
  • https://coaching.kosgis.com/column/
  • https://www.uneidou.com/
  • https://www.jbnet.jp/news/column
  • https://web-rider.jp/magazine/
  • https://kanro.jp/blogs/news
  • https://ha-ru2017.co.jp/blog/
  • https://www.yamamotocoffee.co.jp/news/
  • https://yolu.jp/topics/
  • https://koushou-inc.com/news/
  • https://suu-haa.jp/article/
  • https://syoyo-al.co.jp/column/
  • https://aquall.jp/news/
  • https://jf-itsuki.com/news/
  • https://buttersand.com/news/
  • https://seki-sou.com/news/
  • https://ttglobal.com/ja/news/
  • https://www.crazy.co.jp/news
  • https://www.ntvart.co.jp/news/
  • https://www.felissimo.co.jp/gopeace/
  • https://buncomo.jp/magazine/
  • https://arutega.jp/knowledge/
  • https://um-english-lab.com/journal/
  • https://idid.team/articles/
  • https://www.toyo-e.co.jp/news/
  • https://www.el-koei.co.jp/news/
  • https://www.ritamarks.jp/news/
  • https://suninc.jp/contents/
  • https://pineal.co.jp/topics

なお、以下のようなサイトについては今回の調査の対象外としました。

• 見出しスタイルを持っているが、HTMLの構造やclass名に大きく依存しており、タグ名セレクタに対してはスタイルが当たっていないもの（一部class名称が分かりやすいものは調査対象としています）
• 見出しスタイルの存在が確認できない、または見出しの上下にclass名に依存しない形での適切な余白が存在しない

調査方法

スタイルの確認

Chromeの開発者ツールにてWebページの記事表示領域を確認し、HTMLを書き換えることで適用されているスタイルを確認しました。

<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<h2>見出し2</h2>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<ul>
<li>リスト
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト
<ol>
<li>リスト</li>
</ol>
</li>
<li>リスト</li>
<li>リスト</li>
</ol>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<h3>見出し3</h3>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<h4>見出し4</h4>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<h5>見出し5</h5>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<h6>見出し6</h6>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>

計測・記録

確認したスタイルはスクリーンショットを撮影し、その視覚的な情報および文字サイズ・上下余白のサイズの記録をとっていきます。

そして、記録をもとに傾向を分析するため、サイトごとに以下の情報をスプレッドシートにまとめました。

• サイト
• 本文文字サイズ
• 文字サイズが通常（固定値）か、ブラウザサイズによって変動する（流体タイポグラフィかvw）か
  • ※clampを用いているものの一部は筆者の閲覧環境の都合でvwや通常で記録している場合があります
• h2～h6見出しの以下の情報
  • 文字サイズ
  • 見出し文字サイズ ÷ 本文文字サイズ
  • 上余白サイズ
  • 上余白サイズ ÷ 見出し文字サイズ
  • 下余白サイズ
  • 下余白サイズ ÷ 見出し文字サイズ
• 順序無しリストのスタイル有無
• 順序ありリストのスタイル有無

※記事の最初の見出しレベル＝h2としてカウントしています。サイトによっては実際のタグはh3の場合もあります。

Excelデータ：https://docs.google.com/spreadsheets/d/1AtvwaPpssS17YgugjN9GQCDkvENnvN1XPipYl5xp-RE/edit?usp=sharing

傾向分析（計算）

本文文字サイズ

16px～17pxが最も一般的です。

今回の調査では行間を調査していませんが、2023年にYahoo! JAPAN Tech Blogに投稿された「文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦」という記事にも出てくる「17px」に近い文字サイズが選ばれる傾向にあるようです。

見出し・リストのスタイルを用意しているかどうか

h5・h6は用意されていないサイトが多く、階層を深くして使うリストを考慮していないサイトも少なくありませんでした。

見出し

h2・h3については準備されることがほとんどですが、h4以下とくにh5とh6は用意されていない（本文段落と同じスタイルが当たっている、余白がおかしいなど）場合が多いようです。

見出しレベル	ユーザー投稿型	お知らせ・コラム・ブログなど
h2	100%	100%
h3	100%	100%
h4	50%	80%
h5	50%	31%
h6	50%	14%

リスト

入れ子（階層を深くして使うこと）を考慮していないリストも多くありました。マーカー・数値部分のデザイン性を追求すると入れ子を考慮することは難しくなるようです。

※「あり」はリストの階層を深くしても破綻しないリストが存在するもの、「入れ子考慮無し」はリストの階層を深くすると破綻するか、余白の取り方がおかしいものを指しています。

見出しの文字サイズ（見出し文字サイズ ÷ 本文文字サイズ）

見出し文字サイズは実文字サイズではなく、本文文字サイズとの比で分析しました。

総合して四分位範囲にある数値

• h2
  • 1.4～1.75くらい
• h3
  • 1.2～1.4くらい
• h4
  • 1～1.25くらい
• h5
  • 0.95～1.15くらい
• h6
  • 0.85～1.15くらい

見出しの上下余白サイズ（余白サイズ ÷ 見出し文字サイズ）

見出しの上下余白サイズは実文字サイズではなく、見出し文字サイズとの比で分析しました。

総合して四分位範囲にある数値

• h2
  • 上
    • 2～3.1くらい
  • 下
    • 0.8～1.5くらい
• h3
  • 上
    • 1.8～3くらい
  • 下
    • 0.9～1.4くらい
• h4
  • 上
    • 1.8～3くらい
  • 下
    • 1～1.8くらい
• h5
  • 上
    • 1.8～2.2くらい
  • 下
    • 0.6～1.7くらい
• h6
  • 上
    • 2～2.2くらい
  • 下
    • 0.4～1.9くらい

見出しのスタイリングの種類

「下線」は当ブログのh3のような文字の下に線があるタイプ、「文字のみ」は文字が太字になっているだけまたはサイト内の見出しが全体的に違うフォントのタイプを指しています。

h2

• 下線 12
• 文字のみ 10
• 混合 3
• アイコン 3
• 背景 2
• 文字色 2
• 左線 2
• 上線 2
• 上短線 2
• 上下線 1

h3

• 文字のみ 22
• 下線 7
• 左線 3
• 混合 2
• 背景 2
• アイコン 2
• 上短線 1

h4

• 文字のみ 22
• 左線 4
• 下線 2
• 背景 1
• 文字色 1

h5

• 文字のみ 11
• 背景 1
• 文字色 1

h6

• 文字のみ 6

傾向をもとに考えたデザインの目安

分析結果から見られる傾向をもとに、デザイン作成時のサイズや装飾の目安をまとめました。

本文および見出しサイズ

本文テキストフォントサイズ16px～17px。

見出しのフォントサイズを小さめにする場合は、h2とh3など隣り合う見出しは同じフォントサイズにし、装飾の強さで強弱をつける方法もある。
h4以下は本文フォントサイズと同じでも可。h5以下は本文フォントサイズより文字が小さくても可。

見出しのスタイリング

一般的なお知らせコンテンツなど、階層構造の深くならないシンプルなコンテンツを想定する場合は、h2のみ下線などのシンプルな装飾をつけ、h3以下は装飾を付けないパターンが人気。

h2ごとに話題を大きく切り替えるような、長文の解説記事コンテンツを想定する場合は、h2に背景色など強めの装飾を付けてメリハリを強めにし、h4くらいまでは何らかの装飾を付けるパターンが人気。

h5・h6については基本的には文字を太字にするだけで、装飾を付けないパターンが一般的。

リストのスタイリング

順序あり・無しともに、ol・ulタグの標準的なリストスタイルをそのまま利用するのが基本。

色・フォントの調整は、CSSの ::marker スタイル調整の範囲で対応できるものを利用したパターンが人気。

それ以上のスタイリングは、とくに順序ありリストで入れ子（階層を深くして利用すること）や2桁以上の数値を考慮できない場合があるため、記事系コンテンツでは注意が必要。

検討したデザインの目安をもとに作成したサンプルデザイン

検討したデザインの目安をもとに、サンプルデザインデータとコーディングデータをそれぞれ作成しました。

それぞれ以下ような内容が含まれています。

• 見出しスタイルセット
• シンプルスタイルセットが向いている記事
• 装飾強めスタイルセットが向いてる記事
• 色々な見出しスタイル
• 色々なリストスタイル

色々な見出しとリストのスタイルサンプルまとめ（Figma）

色々な見出しとリストのスタイルサンプルまとめ（Codepen）

終わりに

見出しスタイルについて

今回の調査で見出しスタイルは、想定されるコンテンツによって適切なスタイルが異なることが分かりました。

どのようなコンテンツが入るか不明瞭な場合には、見出しのメリハリや上下余白の広さは控えめにして、h2のみシンプルな装飾を付ける形ですませる方法もあるようです。

また、多くのサイトではh5、h6にあたる見出しレベルの利用を想定していないことも分かりました。太字にする程度の控えめな対応で充分な場合が多そうです。

リストスタイルについて

リストのスタイルに関しては、装飾的な要素を強くした結果、階層のあるリストが利用不能な実装になってしまう場合があることが分かりました。

また、驚くべきことに順序ありリストについてはスタイルが適用されておらず、利用不能となっていることもあるようです。

全体を通して

今回の集計には含みませんが、サイト全体でみるとデザイン性が非常に高いサイトでも、「見出しスタイルの存在が確認できない、または見出しの上下に適切な余白が存在しない」サイトが存在するのが印象的でした。

そういったサイトの場合は、たとえば以下のようになっていました。

• 200～400文字程度の記事しか書かないので見出しが必要ない
• メール文章のようにプレーンテキストに記号で見出しらしき雰囲気を出して終わり
• 投稿者が改行と太字で記事をスタイリングしている

一方で、長文の記事型コンテンツをあらかじめ想定したサイトでは、コンテンツに合わせた丁寧なスタイリングがされている様子が見て取れました。

サイトの目的や方向性に沿って、どの程度のコンテンツを想定しどんなスタイリングするべきか、方針を立てることが重要です。
記事型コンテンツの重要度が低い場合でも、CMSなどで機能として見出し等の要素が利用可能な場合は、最低限のスタイルは当てておくとよいでしょう。