見出しタグは文字を大きくする道具ではない｜h1からh6の正しい考え方

Webサイトをコーディングするとき、文章の見出しにはh1からh6までの見出しタグを使用します。

数字が小さいほど文字が大きく表示されることが多いため、見た目に合わせてタグを選んでしまうことがあります。

しかし、見出しタグは文字サイズを変更するためのものではありません。

ページ内の情報を章や節に分け、文章の構造を伝えるためのHTMLです。

見出しの順番が不自然だと、利用者だけでなく、検索エンジンや読み上げ機能にも内容を理解してもらいにくくなります。

今回は、h1からh6の役割と、Web制作で迷いやすい見出し構造の考え方を初心者向けに解説します。

見出しタグは文章の階層を表す

見出しタグには、h1、h2、h3、h4、h5、h6の六段階があります。

これらは、文章の重要度を単純に順位付けするものではありません。

ページ全体のタイトル、その中にある大きな章、章の中にある小さな項目というように、情報の階層を表します。

本に置き換えると、次のような関係です。

h1は本のタイトル

h2は章のタイトル

h3は章の中にある節

h4は節の中にある小項目

数字が増えるほど、上位の見出しに含まれる細かな内容を表します。

文章を見ずに見出しだけを並べても、ページの内容と流れを理解できる状態が理想です。

h1はページの主題を表す

h1は、そのページが何について書かれているのかを表す最上位の見出しです。

会社概要ページであれば「会社概要」、サービスページであればサービス名、ブログ記事であれば記事タイトルがh1の候補になります。

同じサイトでも、ページごとに主題は異なります。

すべてのページでサイト名だけをh1にすると、そのページ固有の内容が見出し構造から分かりにくくなる場合があります。

サイト名はヘッダーのロゴとして表示し、ページ本文ではそのページのタイトルをh1にする構成が一般的です。

重要なのは、h1を形式的に置くことではなく、ページ全体を最も適切に表す言葉を設定することです。

h2はページ内の大きな区切りに使う

h2は、h1で示した主題を複数の章へ分けるときに使用します。

たとえば、サービス紹介ページであれば、次のような項目がh2の候補になります。

サービスの特徴

対応できる内容

料金

ご利用の流れ

よくある質問

お問い合わせ

これらは、すべてサービスというページ全体の主題に含まれる大きな章です。

デザイン上のセクションとh2が一致することは多いですが、背景色が変わるたびに必ずh2が必要というわけではありません。

見た目の区切りではなく、文章の内容が新しい章へ移るかどうかで判断します。

h3はh2の内容をさらに分ける

h3は、直前のh2に含まれる内容を細かく分類するときに使用します。

たとえば、「サービスの特徴」というh2の中で、特徴を三つに分けて説明する場合、それぞれの特徴をh3にできます。

「料金」というh2の中に複数のプランがある場合も、各プラン名をh3にすると構造が分かりやすくなります。

h3は単独で置くのではなく、どのh2に含まれる内容なのかを考えます。

h3のあとに別の大きな話題へ移る場合は、次のh2を使用します。

見た目が似ているから同じ見出しレベルにするのではなく、内容同士の親子関係で決めることが大切です。

文字の大きさで見出しタグを選ばない

ブラウザの初期表示では、h1が最も大きく、h6へ進むほど文字が小さくなる傾向があります。

そのため、「少し小さく表示したいからh4にする」という選び方をしてしまうことがあります。

しかし、文字の大きさや太さ、色、余白はCSSで変更できます。

h2を小さく表示することも、h3を大きく表示することも可能です。

HTMLでは情報の意味を決め、CSSでは見た目を整えると役割を分けます。

見出しレベルを見た目だけで選ぶと、画面上では自然でも、HTML上では章の中に突然細かな小項目が現れる不自然な構造になります。

見出しレベルを飛ばすと構造が分かりにくくなる

h1の次にいきなりh4を置いたり、h2の下にh5を置いたりすると、間にある階層が存在しない構造になります。

状況によって例外はありますが、基本的には一段ずつ順番に深くしていくと分かりやすくなります。

たとえば、次のような流れです。

ページタイトルをh1にする

大きな章をh2にする

h2の中を分ける場合はh3にする

h3の中をさらに分ける場合はh4にする

次の大きな章へ移るときはh2へ戻る

h3のあとにh2へ戻ることには問題ありません。

小さな節の説明が終わり、次の章へ移ったことを表すためです。

数字を常に増やし続けるのではなく、文章の階層に合わせて上下させます。

見出しの直後に本文を置く

見出しを連続して並べ、間に説明文がない構成も注意が必要です。

たとえば、h2の直後にh3を置き、その下に初めて文章が始まる場合、h2の内容が何なのか分かりにくくなることがあります。

h2の直後には、その章で何を説明するのかを短く書いてから、h3へ進むと読みやすくなります。

ただし、必ず長い導入文が必要なわけではありません。

見出しだけで関係が十分に分かる場合もあります。

形式だけで文章を増やすのではなく、利用者が内容のつながりを理解できるかを基準に判断します。

装飾用の文字を見出しにしない

Webデザインでは、セクションの背景に大きな英単語を置いたり、短いキャッチコピーを目立たせたりすることがあります。

見た目が大きいからといって、すべてを見出しタグにする必要はありません。

装飾目的の英単語と、日本語のセクションタイトルを両方とも見出しにすると、同じ内容の見出しが二つ並ぶ場合があります。

また、意味を持たない装飾文字が見出し一覧へ含まれると、ページ構造を確認しにくくなります。

見出しタグを使うかどうかは、文字の大きさではなく、次の内容を代表する言葉かどうかで判断します。

装飾は装飾、見出しは見出しとして役割を分けることが大切です。

カードのタイトルは必ず見出しとは限らない

サービス一覧、施工事例、ブログ一覧などでは、カードごとにタイトルが表示されます。

カードのタイトルを見出しにするかどうかは、そのページの構造によって変わります。

一覧の各項目が独立した内容を持ち、タイトルの下に説明文が続く場合は、見出しとして扱うと分かりやすくなります。

一方、短いボタン名やカテゴリー名など、後ろに内容が続かない文字まで見出しにする必要はありません。

カードの文字を大きくしたいという理由だけで見出しタグを使うと、ページ内の見出し数が増えすぎます。

その文字を見出し一覧へ並べたときに、ページの構成として自然かを考えます。

よくある質問の見出し構造

よくある質問では、セクション名と各質問の関係を整理します。

「よくある質問」をh2にした場合、それぞれの質問はh3として扱う方法があります。

質問を開閉できるアコーディオンにしても、質問文が見出しであることは変わりません。

ただし、開閉操作を行う部分はボタンの役割も持ちます。

見出しとしての意味と、開閉する操作を両立させる構造を考える必要があります。

見た目だけで要素を選ばず、「何についての見出しか」「何を操作するボタンか」を分けて考えることが重要です。

WordPressでは記事タイトルの重複に注意する

WordPressテーマでは、投稿タイトルや固定ページタイトルが自動的にh1として出力されることがあります。

その状態で、本文の先頭にも同じタイトルをh1として入力すると、一つのページに同じ見出しが重複します。

ブロックエディターでページを作成するときは、テーマ側がどのようにタイトルを表示しているか確認します。

特にオリジナルテーマでは、次の点を決めておくと管理しやすくなります。

ページタイトルをどのテンプレートで出力するか

管理画面のタイトルをh1として使うか

本文内でh1を使用できるようにするか

一覧ページのタイトルをどこで出力するか

トップページのh1を何にするか

表示された画面だけでなく、実際のHTMLでも見出しの重複を確認します。

トップページのh1は特に迷いやすい

下層ページではページ名をh1にしやすい一方、トップページには明確なページタイトルが表示されていないことがあります。

ロゴをh1にする、メインのキャッチコピーをh1にする、事業内容を含む説明文をh1にするなど、複数の選択肢があります。

どの方法でも大切なのは、トップページが何のサイトなのかを適切に伝えられることです。

デザイン上の短いキャッチコピーだけでは、事業内容や対象地域が分からない場合があります。

反対に、検索キーワードを大量に詰め込むと、利用者にとって不自然な文章になります。

ブランドの言葉と事業内容を整理し、ページの主題として自然なh1を考えます。

見出し構造はアクセシビリティにも関係する

画面を見ている利用者は、文字の大きさ、色、余白などから見出しを判断できます。

しかし、読み上げ機能を利用する場合は、HTMLの見出し情報がページを理解する手掛かりになります。

見出しだけを一覧表示し、目的の章へ移動する機能もあります。

そのため、見た目だけ見出し風にした文字は、見出しとして認識されません。

反対に、レイアウト目的で見出しタグを使用すると、意味のない文字まで見出し一覧へ含まれます。

適切な見出し構造は、ページを最初から最後まで順番に読まなくても、必要な情報へ移動しやすくするために役立ちます。

見出しタグだけで検索順位が上がるわけではない

h1やh2へ検索キーワードを入れれば、それだけで検索順位が上がるわけではありません。

検索エンジンにとっても、ページの内容、独自性、分かりやすさ、利用者の疑問に答えているかといった点が重要です。

見出しタグは、文章の構成と各項目の関係を伝える手掛かりになります。

検索キーワードを無理に繰り返すのではなく、各章で何を説明しているのかが正確に分かる見出しを付けます。

利用者が見出しを見て内容を予測できる構造は、検索エンジンにとっても理解しやすい構造になります。

デザイン完成後ではなく文章設計の段階で考える

見出し構造は、コーディングを始めてから決めるより、ページ構成を作る段階で整理した方が効率的です。

ワイヤーフレームや原稿を作るときに、次のように分類します。

ページ全体の主題

大きな章

章の中にある項目

項目ごとの説明

補足情報

操作するためのボタンやリンク

この段階でh1、h2、h3の関係を考えておけば、デザインや実装でも迷いにくくなります。

見出しが多すぎる場合は、ページ内の情報を細かく分けすぎている可能性があります。

反対に見出しがほとんどない長文は、内容を適切に区切れていないかもしれません。

公開前に見出しだけを読み直す

ページを作成したら、本文を隠したつもりで見出しだけを上から確認します。

次の点を見ると、構造上の問題を見つけやすくなります。

h1からページ内容を理解できるか

h2がページ内の大きな章になっているか

h3が直前のh2に含まれているか

見出しレベルが不自然に飛んでいないか

同じ意味の見出しが重複していないか

装飾文字が見出しに含まれていないか

本文のない見出しが並んでいないか

見出しだけでページの流れを予測できるか

WordPressが自動出力するタイトルと重複していないか

スマートフォンでも階層の違いが分かるか

見出し構造の確認は、デザインチェックとは別に行うことが大切です。

まとめ

h1からh6までの見出しタグは、文字の大きさを変更するためではなく、ページ内の情報構造を表すためのHTMLです。

h1でページ全体の主題を示し、h2で大きな章へ分け、必要に応じてh3以降で細かく分類します。

文字サイズや色はCSSで調整し、見出しレベルは内容の親子関係で決めます。

WordPressでは、テーマがページタイトルを自動的にh1として出力している場合があるため、本文との重複にも注意が必要です。

適切な見出し構造は、利用者が内容を読み進めやすくなるだけでなく、読み上げ機能や検索エンジンがページを理解する助けにもなります。

見た目を整えたあとにタグを当てはめるのではなく、まず文章の構造を整理してからデザインする。

この順番を意識することで、読みやすく、修正や追加にも強いWebページを作れるようになります。