知識を取り込み、そして発信する
ワイヤーフレームとは、Webページの構成を整理するための設計図です。
色や装飾、フォントなどのデザインは考えず、「どこに、どんな情報があるか」だけを大まかに表します。
HTMLを書くときは、見た目ではなく要素の役割を考える必要があります。
たとえば、ページの上部にある情報はheaderなのか、リンクの集まりはnavなのか、それとも本文として扱うべきなのかなど。
これらは完成デザインを見て判断するのではなく、画面構成（ワイヤーフレーム）をもとに決めるのが基本です。
このページでは、ワイヤーフレームを確認しながら、なぜこの部分をheaderにするのか、なぜarticleになるのかといったHTMLタグの選び方の理由を順番に見ていきます。
まずは、ページのワイヤーフレームを見てみましょう。
この段階では、色やデザインではなく、画面がどのような構成になっているかだけに注目します。
ワイヤーフレームを見ると、ページは大きく次の3つの領域に分かれていることがわかります。
ワイヤーフレームの上部には、サイト名・キャッチコピー・メニューといった、ページ全体に共通する情報がまとまっています。
このような領域は、HTMLでは header として表すのが一般的です。
headerはページの上部にあるから使うのではなく、ページやサイトの案内となる情報をまとめるための要素です。
ワイヤーフレームを見ることで、この情報は本文ではなく、ページ全体の案内と判断できるため、headerを選ぶ理由がはっきりします。
次に、ワイヤーフレームの中央部分を見てみましょう。
ここには、メインとなる画像や新着情報などのコンテンツ・ページの主な内容が配置されています。
このように、そのページで一番伝えたい内容が集まっている領域はHTMLではmainとして表します。
mainの中には、あとからsectionやarticleなど、さらに細かい構造を作っていくことになりますが、ここがページの中心となる内容だと大きく捉えれば十分です。
ワイヤーフレームの下部には、個人情報の取り扱いについてのリンク・住所・電話番号といった、ページ全体に関わる補足情報が配置されています。
このような情報は、HTMLではfooterとして表します。
footerも下にあるから使うのではなく、ページ全体の締めくくりとなる情報をまとめる要素です。
ワイヤーフレームを見て、本文ではないが、ページの最後に必要な情報と判断できるため、footerを使う理由が明確になります。
以上を踏まえて、ワイヤーフレームに要素を当てはめてみます。
ここまで見てきたように、HTMLのタグは見た目で決めるものではありません。
どんな情報か、何のための領域か、ページ全体の中でどんな役割を持つかを考えるための材料が、ワイヤーフレームです。
同じワイヤーフレームでも、構造の分け方は人によって少しずつ異なることがあります。
HTMLの構造には、必ずしも1つの正解があるわけではありません。
大切なのは、自分なりに理由を持って構造を考えることです。
それでは、ここで確認したワイヤーフレームの構造をもとに、実際にHTMLを書いていきましょう
なお、リンク先は決定していないため空文字としています。
headerの中には、役割ごとに要素を分けて配置します。
サイト名は、そのページの主題を表すため、h1を使います。
一番伝えたいタイトルという意味で、見た目の大きさとは関係ありません。
キャッチコピーは、サイトの説明文なのでpを使います。
見出しではなく、あくまで補足説明という位置づけです。
ページ移動のためのリンクがまとまっている部分は、navとして表します。
navはリンクがあるから使うのではなく、ナビゲーションであることを示すための要素です。
それでは、headerを記述していきます。
headerのコード
<header>
<h1>株式会社サンプル食品</h1>
<p>
あなたの未来の健康のためにできること。<br>
安全な食品を提供することをお約束します。
</p>
<nav>
<ul>
<li><a href="">商品案内</a></li>
<li><a href="">企業情報</a></li>
<li><a href="">代表挨拶</a></li>
<li><a href="">お問合せ</a></li>
</ul>
</nav>
</header>
この時点では、レイアウトや見た目は考えません。
すべて縦に並んでいても問題ありません。
大切なのは、この情報は何のためにあるのか、それぞれの役割に合ったタグを使っているかという点です。
キャッチコピーとナビゲーションをまとめたくなるかもしれませんが、この段階ではdivを使う必要はありません。
理由はシンプルで、ここでは意味を整理することが目的だからです。
レイアウトを整える段階になって、必要であればCSSの都合でdivを追加します。
それは間違いではなく、自然な作業です。
mainの中には、役割ごとに要素を分けて配置します。
ページの冒頭にある大きな画像は、このページの印象を伝えるためのものです。
文章ではありませんが、ページの内容を構成する一部なのでmainの中に含めます。
この段階では、細かい分類を気にする必要はありません。
まずはmainの中に配置されていれば問題ありません。
また、画像はまだ決まっていないことが多いため、デザインツールなどでNo Imageなどで対処します。
新着情報は、複数のお知らせがまとまった情報のかたまりです。
このような、同じテーマの情報をまとめた領域はsectionとして表します。
新着情報全体には見出しがあり、その中に複数の項目が並んでいます。
この構造は、sectionの役割にぴったり当てはまります。
さらに、新着情報の中には、日付と内容を持つ項目が複数並んでいます。
それぞれのお知らせは、単体でも意味を持つ情報です。
このような、独立した情報のまとまりはarticleとして表します。
ワイヤーフレームを見ると、新着情報は繰り返し構造になっているため、1件ずつをarticleとして分けて考えるのが自然です。
ワイヤーフレームには、新着情報の横に広告バナーが配置されています。
これはページの主な内容ではありませんが、関連する補助情報です。
このような位置づけの要素はasideとして表します。
asideはmainの中に含まれますが、本文とは別の役割を持つ情報であることを示すための要素です。
ここでは、実際の画像が未確定なため、仮のダミー画像を使用しています。
それでは、mainを記述していきます。
mainのコード
<main>
<img src="img/noImage.png" alt="メインイメージ">
<section>
<h2>新着情報</h2>
<article>
<a href="">
<time>2026.1.10</time>
<p>新製品サンプルCのご案内</p>
</a>
</article>
<article>
<a href="">
<time>2026.1.1</time>
<p>新年のあいさつ</p>
</a>
</article>
<article>
<a href="">
<time>2025.12.1</time>
<p>新製品サンプルBのご案内</p>
</a>
</article>
</section>
<aside>
<img src="img/noImage.png" alt="広告バナー">
</aside>
</main>
この時点では、配置や横並びは意識しません。
すべて縦に並んでいても問題ありません。
また、画像のサイズもCSSのレイアウト時にサイズが不明なため、アタリ画像として使用してかまいません。
footerの中には、役割ごとに要素を分けて配置します。
footerの中には、役割の異なる情報が並んでいますが、どれもページ全体に関わる情報という点で共通しています。 この段階では、特別な構造を作る必要はありません。 それぞれを段落として配置すれば十分です。 それではfooterを記述していきます。
footerのコード
<footer>
<p><a href="">個人情報の取り扱いについて</a></p>
<p>〒000-0000東京都○○区▲▲町1-2-3サンプルビル3F</p>
<p>電話番号代表00-0000-0000</p>
</footer>
この時点では、横並びや中央寄せなどは考えません。
見た目が整っていなくても問題ありません。
footerもheader同様、この段階ではdivを使う必要はありません。
レイアウトを整える段階になって、必要であればCSSの都合でdivを追加します。
ここまで、ワイヤーフレームをもとにheader、main、footerの構造を考え、HTMLを記述してきました。
同じワイヤーフレームでも、構造の分け方は人によって多少異なります。
HTMLの構造には、必ずしも1つの正解があるわけではありません。
大切なのは、なぜそのタグを選んだのかを説明できることです。
ワイヤーフレームを見て役割を考え、理由を持って構造を決めることができれば、HTMLとして十分に意味のあるものになります。
最後にここをクリックして書いた内容を確認してみてください。
同じワイヤーフレームを使い、CSSでレイアウトを整える方法は、ワイヤーフレームのレイアウトで解説しています。
CSSの基本を一通り学習していると、より理解しやすくなります。