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

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

What's in this posts

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

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

モバイル版の記事タイトルサイズを調整して、スマホでの見え方はだいぶ落ち着きました。その後、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;
  }
}

ポイントを整理します。

モバイル版と分けた

min-width: 769px にしました。モバイル版は max-width: 768px で調整済みなので、769px以上をPC側として独立させました。少なくとも今回追加したPC向けの上書きは、768px以下のモバイル調整には当たりません。

記事ページだけに効かせた

.single は記事ページのarticle要素に付けているクラスです。一覧ページのカードタイトル（.f3）や、サイトヘッダーのタイトル（.f2）には影響しません。

本文コンテナは .post-content にスコープしています。これも記事ページだけのクラスです。

タイトルだけに効かせた

タイトルのセレクタは .single .post-content > header h1 にしました。記事の先頭にあるタイトルだけを対象にして、本文中のMarkdown見出し（h2, h3）には影響しません。

clamp()で画面幅に応じて少し変化

固定値ではなく clamp() にしています。

画面幅 H1 本文
769px付近 約35px 約18px
1024px前後 約37px 18px
1280px以上 38px（上限） 18px（上限）

狭めのPC画面では控えめに、広めの画面では少し余裕を持たせます。ただし上限を決めているので、超ワイド画面で際限なく大きくなることはありません。

調整後の見え方

実際に調整して確認した印象です。

1024px幅: タイトルは約37px、本文は18px。タイトルの存在感はあるものの、48px時代の圧迫感はありません。日付や読了時間との距離も自然です。

1280px幅: タイトルは38px（上限）、本文は18px（上限）。少し余裕が出ますが、行ごとの文字数も増えて読みやすいです。

1440px幅: タイトルは38px（上限）、本文は18px（上限）。広い画面でも本文が大きすぎず、適度な行長になります。

375px（モバイル）: モバイル版の調整は崩れていません。PC向けのメディアクエリは769px以上に限定しているので、モバイルには影響しません。

長い日本語タイトルが2〜3行に折り返しても、35〜38pxなら圧迫感は少ないです。アイキャッチ画像や本文冒頭とのバランスも、48px時代より自然に感じます。

まとめ

  • PC版のH1 48pxは、自分のブログでは少し大きく感じた
  • H1を35〜38px、本文を17〜18pxに調整した
  • モバイル版とは別にPC版の読み味も確認した方がよい
  • テーマの初期値は便利だが、自分の記事内容に合わせて微調整すると読みやすくなる

完璧な正解ではないと思います。ブログの内容やタイトルの長さによって、適切なサイズは変わります。ただ「違和感があった → 数値を確認した → 少しだけ整えた」という手順で進めると、自分のブログに合った落ち着き方に近づくと思います。 今後も試行錯誤していきたいかな、と思います。

参考