日本語サイトのモバイル見出しサイズを調べた — 自分のブログを最適化するために

自分のブログ（Hugo + Anankeテーマ）をスマホで見たとき、記事タイトルがなんだか大きすぎる気がしました。そこで、日本語の主要サイトがモバイルでどんな見出しサイズを使っているのか調べてみました。

日本語ニュースサイトのモバイルh1

2026年5月時点の筆者調べです。Chrome DevToolsで375px幅に設定し、各サイトの記事タイトル要素のcomputed font-sizeを確認しました。

今回筆者が確認したニュース系サイトでは、モバイルの記事タイトルが 16〜18px 程度に収まる例が多く見られました。情報密度を優先し、タイトルを大きく見せるよりもスクロール量を抑える設計に見えます。一方で、過去の国内メディア調査ではスマホh1は 18〜28px、特に24pxが最多 という結果もあり、サイトや記事テンプレートによって差があります（アソボウブログ）。

ブログ・技術プラットフォームのモバイルh1

記事をじっくり読んでもらうタイプのサイトは、もう少し大きめのタイトルを使います。

ブログ系は、おおむね 19–28px の範囲でした。記事タイトルを目立たせて、読者の注意を引く設計です。

デザインガイドラインの推奨値

Material Design 3（Android）

iOS Human Interface Guidelines

なお、Material Designの sp とiOSの pt はCSSの px と直接は換算できません（画面密度やDynamic Typeの文脈があります）。ここではおおよその目安として参照しています。

Material Design 3やiOSのタイポグラフィを見ると、ページタイトル相当のサイズはおおむね 22〜34 程度まで幅があります。ブログ記事タイトルとしては、Title 2相当の 22px 前後から、Title 1 / Headline Medium相当の 28px 前後までが参考になりそうです。

タイポグラフィの基本原則

• 本文16pxに対してh1を24px前後、つまり約 1.5倍 にする考え方は、ひとつのわかりやすい目安になります
• モバイルではデスクトップより 小さなタイプスケール比（1.2）を使う
• 固定値ではなく画面幅に応じて少し変えたい場合は、clamp()を使う方法もあります： h1 { font-size: clamp(1.25rem, 3.2vw + 0.5rem, 1.5rem); }
  • 375px幅で約20px、広めのモバイルで最大24px程度に収まる例です
  • vwだけに依存せずremを混ぜると、ブラウザの文字サイズ設定を反映しやすくなります。ただし、WCAGの200%拡大要件に対応するには、文字サイズだけでなくレイアウトが崩れないかも確認が必要です（WCAG 2.2、WAIC日本語訳）
• 英字中心の大きなh1なら行間は 1.1–1.15 でもよいですが、日本語で2行以上になりやすい場合は 1.25–1.35 くらいの方が読みやすくなります。本文は 1.6–1.8 が目安です

自分のブログにどう反映したか

調べる前は次の設定でした：

1.8rem（29px）はブログ系の中でも大きめでした。日本語のタイトルは文字数が多くなりがちで、モバイルでは2〜3行に折り返して見づらくなります。

ニュース系の控えめなサイズとブログ系の中間を狙って、次のように変更しました：

h1と本文（16px）の比が 1.25倍 と控えめですが、太字との組み合わせで十分区別できます。長い日本語タイトルでも2行に収まりやすくなりました。h3は本文と同サイズだと埋もれる可能性があるため、少し余裕を持たせています。

@media (max-width: 768px) {
  .single article h1,
  .single .f1 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .single article h2 {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .single article h3 {
    font-size: 1.05rem;
    line-height: 1.4;
  }
}

まとめ

• 筆者が確認した日本語ニュースサイトのモバイルh1は 16〜18px 程度と小さめ（過去調査では18〜28px、24pxが最多）
• ブログ・技術系は 19〜28px でタイトルを目立たせる
• 自分のブログは 20px に落ち着きました。ニュース系とブログ系の中間です
• 日本語タイトルは文字数が多くなりやすいので、海外発のデザインガイドラインをそのまま当てはめるより、一段小さめに調整してもよさそうです

自分のコンテンツの性質（情報密度重視か、タイトル重視か）で適切なサイズは変わります。参考になれば幸いです。

参考

• Webサイトのフォントサイズは何pxが適切？ — 日本語サイト20サイトのフォントサイズ調査。スマホh1は18〜28px、24pxが最多
• Zennのフォントサイズを測定 — ZennのMarkdownフォントサイズ詳細
• Material Design 3 Typography — Androidのタイポグラフィガイドライン
• Apple Typography — iOSのタイポグラフィガイドライン
• WCAG 2.2 — テキストの200%拡大要件
• 達成基準1.4.4 日本語訳 — WAICによるWCAG 2.2解説書

• CSS
• Webデザイン