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

自分のブログ（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.125rem, 1rem + 0.8vw, 1.25rem);
}

• 320px幅で約18px、広めのモバイルで最大20px程度に収まる例です
• 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行に折り返して見づらくなります。

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

一度は本文を15px未満まで下げてみましたが、実機で見ると少し小さく感じました。 最終的には、本文は16pxを下回らないようにしつつ、h1を18〜20px程度に抑える形にしました。 本文の可読性と、長い日本語タイトルが大きくなりすぎないことの両方を狙っています。 固定値ではなく clamp() にしているので、細い画面では控えめに、広めのスマホでは少し余裕を持たせる形です。

@media (max-width: 768px) {
  .single .post-content {
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.75;
  }

  .single article h1,
  .single .f1 {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    line-height: 1.3;
  }

  .single article h2 {
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.15rem);
    line-height: 1.35;
  }

  .single article h3 {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    line-height: 1.45;
  }
}

まとめ

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

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

• CSS
• Webデザイン