H1〜H3の使い分けをやさしく解説|読者にも検索エンジンにも伝わりやすい見出し設計の基本
Web記事を書くときに欠かせないのが見出しタグ(Hタグ)です。この記事では、H1〜H3の役割、基本的な使い分け、やりがちな間違い、初心者でも実践しやすい見出し構成の考え方までを、やさしく整理して解説します。
H1・H2・H3とは?まずは役割を理解しよう
見出しタグは、ページの情報を階層で整理するためのHTML要素です。H1、H2、H3と数字が大きくなるほど、より細かい区切りを表します。
見出しは、単に文字を大きく見せるためのものではありません。読者にとっては「どこに何が書いてあるか」を把握しやすくし、検索エンジンにとってはページ構造を理解する手がかりになります。本文が丁寧でも、見出し構造が乱れていると、内容の整理が伝わりにくくなることがあります。
特に、情報量が多い記事ほど、見出しの役割は重要です。最初に全体像を示し、次に大きなテーマを分け、その中で詳細を説明する流れができていると、読む側も迷いにくくなります。
H1:ページ全体の主題を示す見出し
H1は、そのページで一番大きなテーマを示す見出しです。一般的には、1ページに1つの主見出しとして使うと構造が分かりやすくなります。
たとえばこの記事であれば、「H1〜H3の使い分けをやさしく解説」がページ全体の主題にあたります。H1を見るだけで、そのページが何について書かれているのかが分かる状態が理想です。
H2:大きな話題の区切り
H2は、記事の大きな章やトピックを区切る見出しです。記事全体の骨組みになります。
H2を並べると、その記事の流れや全体構成が見えるようになります。読者はH2を追うだけでも内容の概要を把握しやすくなるため、記事設計の中心になる要素といえます。
H3:H2の中の詳細説明
H3は、H2の中で内容をさらに細かく分けたいときに使います。
たとえば、H2で「よくある間違い」と大きくまとめたあとに、「H2のあとにいきなりH4を使う」「見た目調整のためにHタグを使う」といった具体例を分けるのがH3です。H3があることで、1つの章の中でも論点を整理しやすくなります。
なお、見出し自体の読みやすさを整えたい場合は、 読みやすい見出しと段落の基本 も参考になります。
大切なのは「順番」より「階層構造」
Hタグで最も大切なのは、ただ番号順に並べることではなく、内容の親子関係が伝わる構造になっていることです。
見出しタグは「H1の次は必ずH2、次はH3」と機械的に考えるより、どの話が大きなテーマで、どの話がその補足なのかを整理するために使います。親テーマの下に子テーマがぶら下がっている状態が見えると、読者にも構造が伝わりやすくなります。
- H1:記事タイトル
- H2:基本を理解する
- H3:H1の役割
- H3:H2の役割
- H3:H3の役割
- H2:見出し構造の作り方
- H3:よくある失敗
- H3:改善のポイント
このように並べると、H2が大きな章、H3がその中身になっていることが分かります。本の目次を作る感覚で考えると、見出しの階層は理解しやすくなります。
よくある間違い
H2のあとにいきなりH4を使う
見出しの階層を飛ばすと、構造が伝わりにくくなります。まずは H1 → H2 → H3 の基本を守るほうが分かりやすいです。
どうしてもさらに細かく分けたいと感じる場合でも、まずはH3で整理できないかを考えるのがおすすめです。階層を深くしすぎると、かえって読者が全体像をつかみにくくなることがあります。
見た目調整のためにHタグを使う
見出しタグは文字を大きく見せるためのものではありません。見た目はCSSで調整し、Hタグは構造を示すために使います。
デザイン上の強調をしたいだけなら、クラス指定やCSSで調整するほうが適切です。Hタグを装飾目的で使うと、ページの意味構造が崩れやすくなります。
H2だけで全部並べる
短い記事なら問題ない場合もありますが、情報量が増えると読みにくくなりがちです。
1つのH2の中に複数の論点があるなら、H3で分けたほうが内容が伝わりやすくなります。特に、手順・注意点・比較ポイントなどが並ぶ記事では、H3を使った整理が役立ちます。
読者にも検索エンジンにも伝わりやすい見出しの作り方
キーワードは自然に入れる
狙っているテーマ語を見出しに含めると、何についてのパートかが伝わりやすくなります。ただし、不自然な詰め込みは避けることが大切です。
たとえば「Hタグ」「見出し構造」「H1 H2 H3」などの関連語は、必要に応じて見出しに入れることでテーマが明確になります。とはいえ、読者が見て自然に理解できる見出しであることが最優先です。
読者の疑問に沿った流れにする
見出しは、読者の疑問に答える順番で並べると分かりやすくなります。検索意図の整理から考えたい場合は、 検索意図の読み取り方(初心者向け) も参考になります。
たとえば初心者向けの記事なら、「そもそも何か」→「どう使い分けるか」→「何に注意するか」→「実践方法」という順番のほうが理解しやすいことが多いです。読者の頭の中の疑問の流れに沿うことが、読みやすい構成につながります。
1見出し1テーマを意識する
1つの見出しに複数の話題を詰め込みすぎると、内容がぼやけやすくなります。
たとえば「Hタグの役割とSEO効果と設定方法をまとめて解説」のように広げすぎると、何を中心に読むべきかが分かりにくくなります。1見出しにつき1つの主題を意識すると、本文も書きやすくなります。
見出し構成を作る基本ステップ
ステップ1:H1を決める
まずは、その記事全体のテーマを1文で決めます。
H1が曖昧なままだと、その後のH2やH3もぶれやすくなります。最初に「この記事は何を伝えるページか」を言い切っておくと、構成全体が整えやすくなります。
ステップ2:H2で全体の流れを作る
次に、大きなトピックを並べます。
H2は記事の骨組みなので、ここで話の順番が決まります。導入、基本、注意点、実践、まとめなど、読者が自然に読み進めやすい順序を意識して並べることが大切です。
ステップ3:H3で具体化する
各H2の中で説明が複数に分かれる場合は、H3で細分化します。
この段階で「どこまで分けるべきか」に迷うこともありますが、1つのH2の中で話題が2つ以上に分かれるなら、H3で分けたほうが整理しやすくなることが多いです。
記事全体の流れから整えたい場合は、 記事構成テンプレの基本 もあわせて確認すると整理しやすくなります。
こんな記事と相性が良い
- 初心者向けの解説記事
- 手順や設定方法を説明する記事
- 比較ポイントを段階的に整理する記事
- FAQや注意点を分かりやすく並べたい記事
これらの記事は、もともと情報を段階的に整理する必要があるため、見出し構造との相性が良いです。特に、読者が途中で離脱しやすい長めの記事ほど、見出しの整理が効果を発揮しやすくなります。
よくある質問
H1は複数使ってもいいの?
技術的に必ずしも即NGとは限りませんが、主見出しを1つにしておくとページ構造が分かりやすくなります。
実務では、H1を1つにしておくほうが、ページの主題も整理しやすく、運用面でも迷いにくくなります。特別な理由がない限り、まずは1ページ1H1で考えるのがおすすめです。
H2だけで記事を作ってもいいの?
短い記事なら問題ない場合もありますが、情報量が増えてきたらH3を使ったほうが整理しやすくなります。
たとえば短いお知らせ記事や、項目数の少ないページならH2中心でも十分な場合があります。一方で、説明が増えてきたらH3で分けたほうが、読者にとっても内容を追いやすくなります。
見た目のためにHタグを使ってもいい?
おすすめしません。見た目はCSS、構造はHタグと役割を分けたほうが、ページ設計として分かりやすくなります。
デザイン調整のためにHタグを使い始めると、後から構造を見直しにくくなることがあります。意味と見た目の役割を分けることが、長期的には管理しやすいページにつながります。
まとめ
H1〜H3の使い分けは、記事の分かりやすさを支える基本です。
- H1はページ全体の主題
- H2は大きな区切り
- H3はH2の中の詳細説明
- 大切なのは番号そのものより階層構造
- 見た目ではなく構造のために使う
見出しは、本文を書く前の設計図でもあります。最初に構造が整理できていると、本文も書きやすくなり、読者にとっても理解しやすい記事になりやすくなります。
最初は難しく感じるかもしれませんが、本の目次を作るような感覚で考えると理解しやすくなります。まずは既存の記事を1本見直して、「H2は大きな章になっているか」「H3はその詳細になっているか」を確認するところから始めてみてください。