前回はセマンティックHTMLの大切さがわかりましたが、実際にWebページ全体の構造はどう作ればいいんですか？
その疑問、よく分かるよ！今回は、実際のWebページがどのような構造要素で組み立てられているかを学んでいこう。まるで家を建てるときの設計図のように、Webページにも決まった構造があるんだ。
家の設計図みたいに？それって、どんな部分があるんですか？
家にリビング、キッチン、寝室があるように、Webページにも「ヘッダー」「ナビゲーション」「メインコンテンツ」「サイドバー」「フッター」という基本的な部屋があるんだよ。実際に見てみよう！
ページ全体の構造を理解しよう
HTML5では、Webページの構造を明確に表現するための5つの重要な要素が用意されています。これらは構造要素と呼ばれ、ページ全体を論理的に区分けする役割を持ちます。
各要素の役割と具体例
| 要素 | 役割（何のために使うか） | 具体例（中に入れるもの） | 注意点 |
|---|---|---|---|
| <header> | ページやセクションの導入部分を表し、サイトの「顔」を提供します。 | ロゴ、サイトタイトル、グローバルナビ、検索フォーム、ユーティリティリンク | ページ全体にも記事セクションにも使えます。文脈に応じて使い分けてください。 |
| <nav> | 主にページ間やセクション間の移動を助けるリンク集を示します。 | グローバルメニュー、ページ内目次、セクション用のメニュー | 主要なナビゲーションに限定して使うのが望ましいです。補助リンクは別に配置することが多いです。 |
| <main> | そのページの核心となる主要コンテンツを示します。検索や読み上げで重視されます。 | 記事本文、商品詳細、主要な機能コンテンツ | 1ページに1つだけ設置することが原則です。ヘッダーやフッターは含めません。 |
| <aside> | メインコンテンツに関連するが独立した補足情報を示します。 | 関連リンク、注釈、広告、サイドバーのウィジェット | 補足的な内容に使用します。主要ナビゲーションには使わないでください。 |
| <footer> | ページやセクションの締めくくりとして補助情報を提供します。 | 著作権表記、連絡先、補助ナビ（プライバシー等） | セクションごとのフッターにも使えます。重要なお知らせは別の要素で明確にする場合もあります。 |
私たちが普段見ているWebサイトは、実は5つの主要な構造要素で組み立てられています。それぞれが特定の役割を持ち、ユーザーにとって使いやすく、検索エンジンや支援技術にとって理解しやすいページ構造を作り上げているのです。
これらの構造要素を適切に使うことで、単なる見た目の美しさだけでなく、アクセシビリティやSEOの観点からも優れたWebサイトを作ることができます。
なるほど！普段見ているWebサイトが、こんな風に整理されているんですね。それぞれの部分に専用のタグがあるって初めて知りました！
これらの構造要素を正しく使うことで、Webページは「ただの見た目」から「意味のある情報構造」に変わるんだよ。次は、それぞれの要素について詳しく見ていこう。
各要素の詳細と使い方
<header>, <nav>, <main>, <aside>, <footer>の5つの要素について、それぞれの役割、使い方、実際のコード例を詳しく解説します。
header要素 - サイトの顔
<header>要素は、サイト全体またはセクションの「顔」となる部分です。サイトのブランディングや主要なナビゲーション要素を配置し、ユーザーの第一印象を決定する重要な役割を持ちます。
配置する要素
- サイトロゴ・タイトル 企業やサービスの顔となる要素
- キャッチフレーズ サイトの目的や価値を簡潔に表現
- グローバルナビゲーション 主要ページへのリンク集
- ユーティリティリンク ログイン、検索、言語切り替えなど
重要なポイントとして、<header>要素はページ全体だけでなく、記事や章の冒頭にも使用できます。文脈に応じて適切に使い分けることで、情報の階層構造を明確にできます。
実際のコード例とプレビュー
<header>
<h1>サイトロゴ</h1>
<div>
<a href="/login">ログイン</a>
<a href="/contact">お問い合わせ</a>
</div>
</header>
- プレビューにはスタイルを追加して見やすくしています。
nav要素 - ナビゲーション
<nav>要素は、サイト内の他のページや同一ページ内のセクションへのリンク集を表します。ユーザーが迷わずに目的の情報にたどり着けるよう設計する必要があります。
設計のポイント
- 明確なラベル ユーザーがリンク先を予想できる分かりやすい文言
- 適切な数 認知負荷を避けるため、5〜7個程度に絞る
- 階層構造 大項目・小項目を使って情報を整理
- 現在位置の表示 ユーザーが現在どのページにいるかを明示
<nav>要素は複数配置することも可能で、例えばヘッダーのメインナビゲーション、フッターの補助ナビゲーション、記事内の目次ナビゲーションなど、目的に応じて使い分けます。
実際のコード例とプレビュー
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/company">会社情報</a></li>
<li><a href="/news">ニュース</a></li>
</ul>
</nav>- プレビューにはスタイルを追加して見やすくしています。
main要素 - メインコンテンツ
<main>要素は、ページの核心となる内容を表す特別な要素です。1つのページに1つしか配置できず、そのページで最も重要な情報を含みます。検索エンジンも特に重視するエリアです。
使用上の制約
- 一意性 1ページに必ず1つだけ配置する特別な要素
- 直接の子要素
<body>の直接の子要素として配置することが推奨 - 除外する内容 ヘッダー、フッター、ナビゲーションなどの共通部分は含まない
- SEO効果 検索エンジンがページの主要コンテンツとして認識
間違った使用例として、サイドバーや複数のコンテンツエリアを<main>で囲むことは避けてください。あくまで「このページで一番重要な内容」のみを対象とします。
実際のコード例とプレビュー
<main>
<article>
<header>
<h1>Webアクセシビリティの基本</h1>
<p>公開日: 2025年1月8日</p>
</header>
<section>
<h2>アクセシビリティとは</h2>
<p>
Webアクセシビリティとは、障がいの有無や年齢に関係なく、
すべての人がWebサイトを利用できるようにする取り組みです。
</p>
</section>
<section>
<h2>実装のポイント</h2>
<ul>
<li>適切なHTML要素の使用</li>
<li>代替テキストの設定</li>
<li>キーボード操作への対応</li>
</ul>
</section>
</article>
</main>- プレビューにはスタイルを追加して見やすくしています。
aside要素 - 補足情報
<aside>要素は、メインコンテンツに関連するが、それ自体は独立した補足的な内容を表します。サイドバー、関連記事、広告、注釈などに使用されます。
配置パターン
- 関連性 メインコンテンツと何らかの関連があるが、独立している内容
- 配置の柔軟性 ページ全体のサイドバーから記事内の補足まで幅広く対応
- 複数配置可能 目的に応じて複数配置することも可能
- 文脈依存 配置する場所によって意味合いが変わる
<aside>要素の意味は配置する場所によって変わります：
- ページレベルの
<aside>サイト全体の補助情報（サイドバー、広告など） - 記事内の
<aside>記事の補足情報（注釈、関連用語など）
実際のコード例とプレビュー
<div>
<!-- メインコンテンツ -->
<main>
<h1>JavaScript入門</h1>
<p>
JavaScriptは、Webページに動的な機能を追加するための
プログラミング言語です...
</p>
</main>
<!-- サイドバー -->
<aside>
<section>
<h3>関連記事</h3>
<ul>
<li><a href="#">HTML基礎講座</a></li>
<li><a href="#">CSS入門ガイド</a></li>
</ul>
</section>
<section>
<h3>最新ニュース</h3>
<p>新しい学習コンテンツが追加されました！</p>
</section>
</aside>
</div>- プレビューにはスタイルを追加して見やすくしています。
footer要素 - サイトの足元
<footer>要素は、サイトやセクションの「足元」として、著作権情報、連絡先、サイトマップなどの補助的な情報を提供します。ユーザーにサイトの信頼性を伝える重要な役割も持ちます。
含めるべき情報
- 著作権表示 サイトの所有者と著作権年を明記
- 連絡先情報 住所、電話番号、メールアドレス
- 法的情報 プライバシーポリシー、利用規約へのリンク
- 補助ナビゲーション サイトマップ、追加リンク
<header>要素と同様に、<footer>もページ全体だけでなく記事やセクションの終わりにも使用できます。適切に配置することで、情報の完結感を与えられます。
実際のコード例とプレビュー
<footer>
<div>
<div>
<h3>会社情報</h3>
<p>株式会社サンプル</p>
<p>〒100-0001 東京都千代田区</p>
<p>TEL: 03-1234-5678</p>
</div>
<div>
<h3>サービス</h3>
<ul>
<li><a href="#">Webデザイン</a></li>
<li><a href="#">システム開発</a></li>
<li><a href="#">コンサルティング</a></li>
</ul>
</div>
</div>
<div>
<p>© 2025 Sample Company. All rights reserved.</p>
<nav>
<a href="#">プライバシーポリシー</a>
<a href="#">利用規約</a>
</nav>
</div>
</footer>- プレビューにはスタイルを追加して見やすくしています。
それぞれの要素の使い方がよく分かりました！特に<main>要素は1ページに1つだけっていうのが重要なんですね。
その通り！<main>要素の一意性は本当に重要だよ。そして、これらの構造要素を組み合わせることで、ユーザーにとってもコンピューターにとっても理解しやすいWebページが作れるんだ。次は実際にこれらを組み合わせた実践例を見てみよう。
実践的なページ構造の設計
学んだ5つの構造要素を組み合わせた、実際のWebページ構造を確認しましょう。コードを読んで、要素の配置パターンを理解することが重要です。
基本的なページ構造のテンプレート
最も標準的なHTML5ページ構造です。この構成を基本として、様々なWebサイトが作られています。
<body>
<header>
<h1>サイトタイトル</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>記事のタイトル</h1>
<p>公開日: 2025年1月8日</p>
</header>
<section>
<h2>記事の内容</h2>
<p>ここにメインコンテンツ...</p>
</section>
</article>
</main>
<aside>
<section>
<h3>関連記事</h3>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
</ul>
</section>
</aside>
<footer>
<p>© 2025 サンプルサイト</p>
<nav>
<a href="/privacy">プライバシーポリシー</a>
</nav>
</footer>
</body>よく使われるレイアウトパターン
実際のWebサイトで採用される代表的な3つのレイアウト構造を確認しましょう。
1カラム（モバイル優先）
スマートフォン向けやシンプルなサイトで使われる縦並び構造です。
<body>
<header>
<h1>サイトロゴ</h1>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>
<p>© 2025</p>
</footer>
</body>2カラム（サイドバー付き）
企業サイトやブログでよく見る、メインコンテンツ＋サイドバーの構成です。
<body>
<header>...</header>
<div class="container">
<main>
<article>...</article>
</main>
<aside>
<section>関連情報</section>
</aside>
</div>
<footer>...</footer>
</body>ナビゲーション分離型
アプリケーションや管理画面で使われる、ナビゲーションを独立させた構造です。
<body>
<header>
<h1>アプリ名</h1>
</header>
<nav>
<ul>主要メニュー</ul>
</nav>
<div class="content">
<main>...</main>
<aside>...</aside>
</div>
<footer>...</footer>
</body>重要なポイント
構造要素を使う際に覚えておくべき基本ルールです。
- main要素 は1ページに1つだけ
- nav要素 は主要ナビゲーションのみ（すべてのリンクではない）
- 構造要素はネスト可能（記事内のheader/footerなど）
- 意味に基づいて選択（見た目ではなく役割で判断）
- 階層構造を意識（親子関係を明確にする）
なるほど！構造要素は見た目じゃなくて、情報の意味で選ぶんですね。特に<main>要素は1ページに1つだけっていうのを忘れないようにしないと。
そうだね！そして、これらの構造要素を適切に使うことで、検索エンジンや音声読み上げソフトなどが、あなたの作ったWebページの構造を正しく理解できるようになるんだ。最後に理解度をチェックしてみよう。
理解度チェッククイズ
それじゃあ、ページ構造要素の理解度をクイズで確認してみよう！これまで学んだ知識を活用して答えてね。
ページ構造要素ミニクイズ
<!-- パターンA -->
<body>
<header>
<h1>サイト名</h1>
<nav>
<ul><li>ホーム</li></ul>
</nav>
</header>
<main>
<article>記事内容</article>
</main>
</body>
<!-- パターンB -->
<body>
<main>
<h1>サイト名</h1>
<main>
<article>記事内容</article>
</main>
</main>
</body><!-- 使用例1 -->
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社情報</a></li>
<li><a href="/service">サービス</a></li>
</ul>
</nav>
<!-- 使用例2 -->
<nav>
<a href="/privacy">プライバシーポリシー</a>
<a href="/terms">利用規約</a>
<a href="/contact">お問い合わせ</a>
<a href="/sitemap">サイトマップ</a>
</nav><body>
<header>
<h1>ブログタイトル</h1>
</header>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/archive">過去記事</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h1>記事タイトル</h1>
</header>
<p>記事の内容...</p>
</article>
</main>
<footer>
<main>
<p>重要なお知らせがあります</p>
</main>
<p>© 2025 ブログ</p>
</footer>
</body>まとめ
クイズを通して、構造要素の使い分けがよく理解できました！特に、基本的なページ構造のテンプレートと3つのレイアウトパターンが参考になりました。
それはよかった。今回学んだ5つの構造要素（header、nav、main、aside、footer）は、どんなWebサイトを作る時にも必ず使うことになる基本中の基本なんだ。それぞれの意味と役割を正しく理解して使い分けることが重要だよ。
特に実践的なレイアウトパターンの違いが分かって良かったです！1カラム、2カラム、ナビゲーション分離型と、用途に応じて構造を選べるんですね。
そうなんだ！そして何より重要なのは、「見た目ではなく情報の意味で要素を選ぶ」ということ。これによって、ユーザーにとっても検索エンジンや支援技術にとっても理解しやすいWebページが作れるようになるんだ。
- header要素 サイトの顔となる部分、ロゴとナビゲーションを配置
- nav要素 主要なナビゲーションのみ使用、適切な数に絞る
- main要素 ページの核心的内容、1ページに必ず1つだけ
- aside要素 関連する補足情報、サイドバーや注釈で活用
- footer要素 サイトの信頼性を示す情報を整理して配置
- 選択基準 見た目ではなく情報の意味と役割で要素を選ぶ
- ネスト活用 記事内でのheader, footerなど階層的な構造設計
次回は、さらに詳細なセマンティック要素（article, section等）について学び、より精密な文書構造の設計方法を習得していきましょう。