PR
HTML

【HTML設計】英語見出し＋日本語サブ見出しのベストプラクティスを考える

HTML
この記事は約7分で読めます。

WebサイトやサービスLPなどでよく目にする、「英語の見出し＋日本語サブ見出し」というデザイン。
Figmaやデザインカンプ上では直感的でも、HTMLでマークアップするときに悩まれる方は多いのではないでしょうか？

今回はそんな見出しの最適なマークアップ方法をSEOやアクセシビリティ、最新HTML（HTML Living Standard）の仕様をもとに考察してみました。

「英語見出し＋日本語サブ見出し」とは

今回考察していく「英語見出し＋日本語サブ見出し」とはこのようなデザインのことを指しています。
ページタイトルやセクションのタイトルなどでよく使われている印象なのですが、これをいざ「コーディングしてください！」と渡されるとどのタグを使うべきなのか迷う方も多いのではないでしょうか。

私自身もこのデザインカンプが来ると毎回「このサイトはナビでは日本語を記載しているからh2を日本語にして…？」と悩んでいます。
最適なマークアップを考える前に、何年かコーディングをしてきた中で見かけてきた実装方法をまとめてみたいと思います。

① data-title と ::after 擬似要素で日本語を表示する

<h2 data-title="ブログ">BLOG</h2>
h2::after {
  content: attr(data-title);
  display: block;
  font-size: 14px;
  color: #666;
}

まずよく見るのはdata属性＋擬似要素を使用してサブ見出しを設定し、見出しをテキストとしてマークアップする方法です。
コードとしてシンプルなだけでなく、テキストとして認識してもらう情報も必要最低限になります。

一見、シンプルでいい方法には見えますが、デメリットになってしまう面もあります。

特徴

  • 見た目だけの装飾にサブ見出しを表示
  • HTML上には表示されないが、CSSでビジュアルに追加される

メリット

  • 見た目の制御がしやすい
  • HTML構造がシンプルになる

デメリット

  • アクセシビリティに弱い：スクリーンリーダーや検索エンジンは ::after の内容を認識できない
  • SEOに不利：見出し内のキーワード（日本語）が検索エンジンに評価されない可能性が高い

② <hgroup> を使って見出しを構造化する

<hgroup>
  <h2>BLOG</h2>
  <p class="subtitle">ブログ</p>
</hgroup>

次に見かけるのは<hgroup>を使用してマークアップする方法です。
<hgroup>は一時期廃止されていましたが、最新のHTML Living Standardでは復活しているので、このマークアップ方法はルール的に問題なくなりました。

特徴

  • HTML Living Standardでは復活しており、ブラウザ互換性も良好（WHATWG）
  • <hgroup> の使用には注意が必要

メリット

  • SEOに強い：英語も日本語も検索エンジンにインデックスされる
  • アクセシビリティが高い：スクリーンリーダーも読み取れる
  • デザインと構造が分離されていて保守しやすい

デメリット

  • <hgroup> の理解が浅いと誤用されがち（上記のような正しい使い方なら問題なし）

③ シンプルに <h2> + <span> で記述

<h2>
  BLOG <span class="subtitle" aria-hidden="true">ブログ</span>
</h2>

最後の例はシンプルにサブ見出しを<span>で囲む方法です。
私はSEO的な面を意識したマークアップをすることが多いので、できるだけ検索にワードがかかりやすくなるようこの方法をよく取っています。

特徴

  • コード的にシンプル
  • サイト上に存在するテキストがきちんとマークアップされている

メリット

  • HTML構造が明確
  • SEO・アクセシビリティともに安定
  • 不要であれば aria-hidden="true" で読み上げをスキップできる

デメリット

  • aria-hidden="true" の設定を忘れると2重で読み上げられてしまう

意味がある情報は「HTMLに書く」のが原則

おそらくこの見出しをマークアップする時、ここまでに挙げた3つの実装方法のいずれかを取っているのではないでしょうか？

実装方法をまとめながら改めて考えていたのですが、個人的に装飾目的で ::after に日本語を追加する方法は見た目は美しいですが、情報の意味をHTMLに落とし込むという観点では不十分に感じています。

いい参考記事が見つからなかったのでchatGPTと壁打ちをした結果、SEOに強く、アクセシブルで、構造的にも正しいHTMLを書くためには、下記の方法がいいのではないかと思います。

  • 一番安定： <h2> に <span> を添える
  • 構造的に明示： <hgroup> を使う
  • 非推奨： ::after で見た目だけ追加

決して自分の方法を押したいわけではないのですが、見出しタグ内に余計な情報が入らないかつサイトの必要な情報をきちんとマークアップできるのは<span>で添える方法だと考えています。
<hgroup>タグも良いとは思っているものの、使い方に癖があるので誤用してしまうリスクを考えるとシンプルかつ間違いない方法が大事なのではないでしょうか。

運用でよくあるTips

結論に至ったところで。この見出しを実際に実装する時には細かな工夫や配慮が求められます。
特にデザインとアクセシビリティのバランスをとるうえで、以下の3つのポイントをおさて置くことが大事なので、合わせて紹介したいと思います。

1. 英語の方を大きく、日本語を小さく見せたいときはCSSで制御

例えば、「BLOG（英語）」を大きく、「ブログ（日本語）」を小さく表示したい場合、HTMLの構造はそのままにして、CSSの font-size で視覚的な強弱をつけるのが理想です。

h2 {
  font-size: 32px;
}
h2 .subtitle {
  font-size: 14px;
  display: block;
  color: #888;
}

構造を変えて見出しレベルを分けたり、<small> や ::after で代用するよりも、意味はHTML、見た目はCSSで分担する方が保守性も高く、SEO・アクセシビリティの両立にも適します。

2. サブタイトルに lang="ja" を付けると音声読み上げにやさしい

ブラウザやスクリーンリーダーは、指定された言語属性に応じて適切な読み上げエンジンを切り替えます。
たとえば、全体が英語のページ内で日本語を補足したい場合は、以下のように lang="ja" を付けるのがベターです。

<h2>
  BLOG <span class="subtitle" lang="ja">ブログ</span>
</h2>

スクリーンリーダーが日本語部分を正しく認識・読み上げてくれるため、多言語ページでのUX向上に効果的です。

3. 読み上げ不要な要素には aria-hidden="true" を使う

もしサブタイトルが装飾的な目的のみで、スクリーンリーダーに読み上げさせたくない場合は、aria-hidden="true" を指定することでアクセシビリティ上のノイズを避けることができます。

<h2>
  BLOG <span class="subtitle" aria-hidden="true">ブログ</span>
</h2>

aria-hidden を使う際は、視覚的には重要でも、意味的には不要なときに限って使用するようにしましょう。乱用すると逆に意味の伝達が損なわれる恐れがあります。

まとめ

小さな実装にも、ユーザー体験や技術的正しさを支える工夫がたくさん詰まっています。
見た目・意味・技術の3点をバランス良く組み合わせることで、デザインの意図をより正しく、そして多様なユーザーに届く形で表現できるようになります。

Webサイトにおける「デザインと意味のバランス」は、フロントエンド実装の醍醐味でもあり、奥深さでもあります。
意味のある情報はしっかりHTMLに書く。そしてCSSで美しく整える。そんな基本を大事に、より良い実装を目指していきたいですね。

タイトルとURLをコピーしました