https://blog.keyuki.net/tags/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/ Recent content in Webデザイン on Keyuki Blog Hugo en Tue, 05 May 2026 08:25:00 +0900 https://blog.keyuki.net/posts/mobile-heading-size-research/ Tue, 05 May 2026 08:25:00 +0900 https://blog.keyuki.net/posts/mobile-heading-size-research/ <p>自分のブログ（Hugo + Anankeテーマ）をスマホで見たとき、記事タイトルがなんだか大きすぎる気がしました。そこで、日本語の主要サイトがモバイルでどんな見出しサイズを使っているのか調べてみました。</p> <h2 id="日本語ニュースサイトのモバイルh1">日本語ニュースサイトのモバイルh1</h2> <p>2026年5月時点の筆者調べです。Chrome DevToolsで375px幅に設定し、各サイトの記事タイトル要素のcomputed font-sizeを確認しました。</p> <table> <thead> <tr> <th>サイト</th> <th>モバイルh1</th> <th>傾向</th> </tr> </thead> <tbody> <tr> <td>NHK</td> <td>16px</td> <td>本文と同じサイズ</td> </tr> <tr> <td>読売新聞</td> <td>16px</td> <td>本文と同じサイズ</td> </tr> <tr> <td>日経</td> <td>16px</td> <td>本文と同じサイズ</td> </tr> <tr> <td>毎日新聞</td> <td>16px</td> <td>本文と同じサイズ</td> </tr> <tr> <td>産経新聞</td> <td>16px</td> <td>本文と同じサイズ</td> </tr> <tr> <td>Yahoo!ニュース</td> <td>17px</td> <td>比較的小さめ</td> </tr> <tr> <td>朝日新聞</td> <td>18px</td> <td>ニュース系では大きめ</td> </tr> <tr> <td>ITmedia</td> <td>~13.5px</td> <td>小さめ</td> </tr> </tbody> </table> <p>今回筆者が確認したニュース系サイトでは、モバイルの記事タイトルが <strong>16〜18px</strong> 程度に収まる例が多く見られました。情報密度を優先し、タイトルを大きく見せるよりもスクロール量を抑える設計に見えます。一方で、過去の国内メディア調査ではスマホh1は <strong>18〜28px、特に24pxが最多</strong> という結果もあり、サイトや記事テンプレートによって差があります（<a href="https://blog.asobou.co.jp/web/fontsize">アソボウブログ</a>）。</p> <h2 id="ブログ技術プラットフォームのモバイルh1">ブログ・技術プラットフォームのモバイルh1</h2> <p>記事をじっくり読んでもらうタイプのサイトは、もう少し大きめのタイトルを使います。</p> <table> <thead> <tr> <th>サイト</th> <th>モバイルh1</th> <th>傾向</th> </tr> </thead> <tbody> <tr> <td>Zenn</td> <td>~23px</td> <td>開発者ブログ寄り</td> </tr> <tr> <td>Note</td> <td>28px</td> <td>記事特化型</td> </tr> <tr> <td>Qiita</td> <td>~28px</td> <td>技術コミュニティ</td> </tr> <tr> <td>はてなブログ</td> <td>~19px</td> <td>控えめ</td> </tr> </tbody> </table> <p>ブログ系は、おおむね <strong>19–28px</strong> の範囲でした。記事タイトルを目立たせて、読者の注意を引く設計です。</p> <h2 id="デザインガイドラインの推奨値">デザインガイドラインの推奨値</h2> <h3 id="material-design-3android">Material Design 3（Android）</h3> <table> <thead> <tr> <th>トークン</th> <th>サイズ</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td>Headline Large</td> <td>32sp</td> <td>大きめのページ見出し</td> </tr> <tr> <td>Headline Medium</td> <td>28sp</td> <td>ページ見出し・主要セクション</td> </tr> <tr> <td>Headline Small</td> <td>24sp</td> <td>小さめのページ見出し・セクション見出し</td> </tr> </tbody> </table> <h3 id="ios-human-interface-guidelines">iOS Human Interface Guidelines</h3> <table> <thead> <tr> <th>スタイル</th> <th>サイズ</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td>Large Title</td> <td>34pt</td> <td>ナビゲーションタイトル（※今回のブログ記事タイトル用途では大きめ）</td> </tr> <tr> <td>Title 1</td> <td>28pt</td> <td>ページタイトル</td> </tr> <tr> <td>Title 2</td> <td>22pt</td> <td>セクション見出し</td> </tr> </tbody> </table> <p>なお、Material Designの <strong>sp</strong> とiOSの <strong>pt</strong> はCSSの <strong>px</strong> と直接は換算できません（画面密度やDynamic Typeの文脈があります）。ここではおおよその目安として参照しています。</p>