ランドマーク（header・nav・main・footer）でページの領域を伝える

ランドマークは、ページを「ヘッダー」「ナビ」「本文」「フッター」といった領域に分ける HTML の仕組みです。見える人はレイアウトで領域を把握できますが、スクリーンリーダー利用者はそうはいきません。header・nav・main・footer といった要素を使うと、支援技術が領域単位でジャンプできるようになり、毎回メニューを読み飛ばす手間が消えます。

執筆: JIT株式会社公開: 2026年7月17日

ランドマークとは何ですか？

ランドマークは、ページ内の主要な領域（ヘッダー・ナビ・本文・フッターなど）に付ける意味的な目印です。header・nav・main・footer・aside といった HTML5 要素が、それぞれ対応するランドマークになります。スクリーンリーダーはこれを使って領域間を直接移動できるため、利用者は目的の場所へ素早くたどり着けます。

晴眼者はページを開いた瞬間、レイアウトから「上がヘッダー、左がメニュー、真ん中が本文」と一目で把握します。スクリーンリーダー利用者は音声で上から順に読み進めるため、この「一目」が使えません。ランドマークは、その領域構造を音声のユーザーにも渡すための仕組みです。

どの要素がどのランドマークになりますか？

header がバナー、nav がナビゲーション、main が主要コンテンツ、footer が最下部の補足情報、aside が補助情報のランドマークになります。これらは見た目を変えず、意味だけを与える要素です。div で組んでも表示は同じですが、div にはランドマークの意味が無いため、支援技術からは領域の区切りが見えません。

主なランドマーク要素と役割
要素	ランドマーク	使う場所
`header`	banner	サイト共通の最上部（ロゴ・サイト名）
`nav`	navigation	主要なリンクの集まり
`main`	main	そのページの主要コンテンツ（1 つ）
`aside`	complementary	本文の補助（関連記事・広告枠など）
`footer`	contentinfo	運営者情報・著作権・フッターナビ

ランドマークで組んだ骨格

<body>
  <a href="#main" class="skip-link">本文へスキップ</a>

  <header>            <!-- バナー: ロゴ・サイト名 -->
    <nav aria-label="メインナビゲーション"> … </nav>
  </header>

  <main id="main">    <!-- ページの主要コンテンツ（1 つだけ） -->
    <h1>ページの見出し</h1>
    …
  </main>

  <aside aria-label="関連情報"> … </aside>  <!-- 補助情報 -->

  <footer>            <!-- 最下部: 運営者情報・フッターナビ -->
    <nav aria-label="フッターナビゲーション"> … </nav>
  </footer>
</body>

main は 1 ページに何個まで置けますか？

画面に見えている main は 1 ページに 1 つだけです。main はそのページの中心的な内容を示す唯一の領域で、複数あるとスクリーンリーダーが「どれが本文か」を判断できません。ヘッダーやフッターを除いた、そのページ固有の主要部分を 1 つの main で囲みます。スキップリンクの飛び先としても main が基準になります。

main は「このページで、そのページだけの中心的な内容」を囲みます。全ページ共通のヘッダー・ナビ・フッターは含めません。main が 2 つあると、スクリーンリーダーは主要領域を一意に決められず、「本文へ」のジャンプが機能しなくなります。

スキップリンクとランドマークはどう関係しますか？

スキップリンクは、キーボード利用者がヘッダーのメニューを飛ばして本文へ直接移動するためのリンクで、main へ飛ばすのが基本です。ページ先頭に「本文へスキップ」を置き、href="#main" で main の id を指します。ランドマークで本文が明確になっていれば、飛び先も自然に決まります。両方そろって初めてキーボード操作が快適になります。

スキップリンクはキーボードだけで操作する人のための命綱です。これが無いと、全ページで毎回メニュー内のリンクを Tab で一つずつ通過してからでないと本文に届きません。main に id を振り、ページ先頭のリンクからそこへ飛ばします。普段は隠しておき、Tab でフォーカスが当たったときだけ表示するのが一般的な実装です。

nav が複数あるときはどうしますか？

グローバルナビとフッターナビのように nav が複数あるときは、それぞれに aria-label で名前を付けて区別します。aria-label="メインナビゲーション" と aria-label="フッターナビゲーション" のように書くと、スクリーンリーダーの領域一覧で見分けがつきます。名前が無いと「ナビゲーション」が複数並び、どれがどれか分からなくなります。

aria-label の値は「ナビゲーション」という語を含めないのがコツです。スクリーンリーダーが自動で「ナビゲーション」と付け足すため、aria-label="フッターナビゲーション" でも「フッターナビゲーション、ナビゲーション」と二重に読まれることがあります。気になる場合は aria-label="フッター" のように短くします。

section や article はランドマークになりますか？

article は常に article ロールになりますが、section がランドマーク（region）になるのはアクセシブルな名前が付いているときだけです。aria-labelledby で見出しと結ぶか aria-label を付けた section だけが region として一覧に出ます。名前の無い section は、支援技術からは単なる区切りとして扱われ、領域ジャンプの対象になりません。むやみに section で囲まず、意味のあるまとまりにだけ名前を付けて使います。

section と article はどちらも「まとまり」を作る要素ですが、ランドマークとしての扱いは異なります。article は、それ単体で完結し配信・再利用できる内容（記事・コメント・製品カードなど）に使い、常に article ロールになります。一方 section は、アクセシブルな名前が付いたときだけ region ランドマークになります。

名前を付ける — <section aria-labelledby="h">…</section> のように見出しと結ぶと、領域一覧に「その見出し名」で出る
名前が無い section — 支援技術からは単なる区切り。ランドマークにはならないので、乱用しても意味は増えない
迷ったら div でよい — 意味のまとまりでなければ、無理に section にする必要はありません

「とりあえず section で囲む」は、名前が無ければアクセシビリティ上の効果を生みません。名前を付けて意味を持たせるか、ただの箱なら divにする、の二択で考えると整理しやすくなります。

div だけで組むと何が問題ですか？

div は意味を持たない汎用の箱なので、いくら class 名を landmark っぽくしても、支援技術には領域として認識されません。全体が div の入れ子になっていると、スクリーンリーダー利用者は領域ジャンプが使えず、ページを上から順に読むしかなくなります。見た目が同じなら、意味のある header・nav・main・footer を使わない理由はありません。

NG: div だらけ（div soup）

<!-- NG: 見た目は同じでも、支援技術には領域が見えない -->
<div class="header">…</div>
<div class="nav">…</div>
<div class="main">…</div>
<div class="footer">…</div>

React や Next.js で気をつけることはありますか？

コンポーネント分割で領域要素が二重になったり、余計な div でラップされたりしやすい点に注意します。ヘッダーコンポーネントの中でさらに header を出して二重にする、レイアウトで main を包む div を挟む、といった事故が起きがちです。出力される実際の HTML を検証ツールで確認し、header・main・footer が過不足なく一度ずつ現れているかを見てください。JSX 上の見た目ではなく、描画後の DOM が基準です。

コンポーネント志向のフレームワークでは、JSX 上は綺麗に見えても、描画後の DOM でランドマークが重複・欠落することがあります。よくある事故は次の 3 つです。

領域要素の二重化 — レイアウトで <header> を出し、ヘッダーコンポーネント内でも <header> を出して banner が 2 つになる
main を余計な div で包む — ラッパーを挟むこと自体は問題ないが、main を分割して 2 つにしてしまうと本文が一意に決まらなくなる
フラグメントの活用漏れ — 意味の無いラッパー div を足しがち。不要な入れ子は <>…</>（フラグメント）で避けられる

対策は単純で、ブラウザの検証ツールで実際の DOM を見ることです。header・main・footer がそれぞれ 1 回ずつ、nav は名前付きで必要数だけ出ているかを確認します。JSX のソースではなく、出力された HTML が支援技術の見る現実です。

ランドマークは SEO に効きますか？

順位を直接動かす要素ではありませんが、間接的に効きます。header・nav・main・footer といった意味的な構造は、検索エンジンや AI クローラーが「どこが本文で、どこがナビか」を判断する手がかりになります。特に本文を main で明示しておくと、ページの主題を機械が拾いやすくなります。まずはアクセシビリティのために使い、SEO はその副産物と考えるのが健全です。

意味的な HTML は、検索エンジンにも AI クローラーにも「ページのどこが本題か」を伝えます。特に AI の多くはレンダリング前の HTMLを読むため、main で本文が明示されていると主題を拾いやすくなります。構造化データ（JSON-LD）と役割は異なり、こちらはページの領域構造を示します。

ランドマークが正しく置けているか、どう確認しますか？

ブラウザの検証ツールで main が 1 つだけあるか、header・nav・footer が div で代用されていないかを見ます。スクリーンリーダーの領域一覧（ランドマーク一覧）機能を使うと、支援技術から実際にどう見えるかが分かります。本ツールのアクセシビリティ診断でも、主要なランドマーク要素の有無を確認します。

チェックの要点は「main が過不足なく 1 つ」「header・nav・footer が div で代用されていない」の 2 つです。入力欄まわりのアクセシビリティはフォームのラベル、画像は alt 属性を合わせて確認してください。