モバイル版を整えたら、PC版の記事タイトルが大きすぎることに気づいた

Tue, 05 May 2026 14:00:00 +0900

先に、スマホ版の記事タイトルサイズについても調べています。

スマホ版の記事タイトルサイズを調べて、自分のブログを調整した話

モバイル版の記事タイトルサイズを調整して、スマホでの見え方はだいぶ落ち着きました。その後、PCで自分のブログを開き直してみると——今度はPC版のタイトルがずいぶん大きく感じました。

本文も少し大きめ。画面いっぱいに文字が主張しているというか、記事を読む画面としては少しゆったりすぎる印象です。

今回は、PC版の記事タイトルと本文サイズをどう調整したかを記録します。まずは「大きい気がする」という違和感を、実際のpx値に置き換えて見直してみました。

現状：Anankeテーマの初期値

自分のブログはHugo + Anankeテーマを使っています。AnankeはTachyonsというCSSユーティリティフレームワークを読み込んでいて、記事ページでは次のようなクラスが当たっています。

記事タイトル（h1）: f1 → 3rem = 48px
本文コンテナ: f4 → 1.25rem = 20px

48pxのタイトルと20pxの本文。倍率にすると約2.4倍です。

PCの大画面で見ると、タイトル48pxはかなり主張が強いです。英語の短いタイトルなら映えそうですが、日本語の長いタイトルだと2〜3行に折り返して、画面の上部がタイトルで埋まってしまいます。これが嫌でした。

本文20pxも、PCでじっくり読むにはやや大きめに感じます。文字は大きいほうが読みやすい場面もありますが、大きすぎると読みやすさとは別の圧迫感が出ます。本文が大きすぎると、1行の文字数が減って、目の移動が増え、かえって疲れることもあります。

比較：PC版のブログ・メディアはどうしているか

いくつかのPC向け記事ページのタイポグラフィ傾向を調べてみました。主に既存のタイポグラフィ調査記事やデザインガイドを参考にしています。

国内メディアのPC版タイトル

国内のメディア記事ページでは、PCの記事タイトルは20〜30px程度の例が多く、本文は15〜16pxに収まる例があります。情報量を優先し、タイトルを目立たせるよりスクロールを抑える方向です（LIG）。

ブログタイポグラフィの一般傾向

英語圏のブログタイポグラフィガイドでは、PCの本文は 16〜18px が読みやすい範囲として扱われることが多いです（Lystingz）。

H1については、UI/UXの一般的な目安で 32〜36px 前後がよく使われます。ブログの記事タイトルとしては、このあたりから少し下げて 28〜36px 程度が推奨レンジとして扱われることもあります（Rteetech、Design Bootcamp）。

日本語タイトルの事情

英語圏の目安は、英語の短いタイトルを前提にしている面があります。日本語のタイトルは文字数が多くなりやすく、PCでも2行に折り返すことが珍しくありません。

48pxで2〜3行折り返すと、タイトルだけで画面上部のかなりの面積を占めてしまいます。英語圏の目安より一段小さくしても、日本語としては自然に見えるはずです。

判断：35〜38pxのH1、17〜18pxの本文に

今回は、PC版のH1を 35〜38px、本文を 17〜18px 程度に調整することにしました。

タイトルの存在感は残しつつ、本文を読む画面として少し落ち着かせる狙いです。倍率でいうと約2.0〜2.1倍。48px時代の2.4倍より、記事ページとしては自然なバランスに近づきます。

実装：CSSで上書き

HTMLテンプレートは変更せず、custom.css にPC向けのメディアクエリを追加しました。モバイル版の調整と同じアプローチです。

@media (min-width: 769px) {
  .single .post-content {
    font-size: clamp(1.0625rem, 0.98rem + 0.25vw, 1.125rem);
    line-height: 1.75;
  }

  .single .post-content > header h1 {
    font-size: clamp(2.125rem, 1.85rem + 0.75vw, 2.375rem);
    line-height: 1.28;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}

ポイントを整理します。

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

Tue, 05 May 2026 08:25:00 +0900

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

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

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

サイト	モバイルh1	傾向
NHK	16px	本文と同じサイズ
読売新聞	16px	本文と同じサイズ
日経	16px	本文と同じサイズ
毎日新聞	16px	本文と同じサイズ
産経新聞	16px	本文と同じサイズ
Yahoo!ニュース	17px	比較的小さめ
朝日新聞	18px	ニュース系では大きめ
ITmedia	~13.5px	小さめ

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

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

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

サイト	モバイルh1	傾向
Zenn	~23px	開発者ブログ寄り
Note	28px	記事特化型
Qiita	~28px	技術コミュニティ
はてなブログ	~19px	控えめ

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

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

Material Design 3（Android）

トークン	サイズ	用途
Headline Large	32sp	大きめのページ見出し
Headline Medium	28sp	ページ見出し・主要セクション
Headline Small	24sp	小さめのページ見出し・セクション見出し

iOS Human Interface Guidelines

スタイル	サイズ	用途
Large Title	34pt	ナビゲーションタイトル（※今回のブログ記事タイトル用途では大きめ）
Title 1	28pt	ページタイトル
Title 2	22pt	セクション見出し

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

Webデザイン on Keyuki Blog