サイトマップができたら次はデザインの骨組みを作ります。
これをワイヤーフレームといいます。

まず見た方が早いと思うので、ワイヤーフレームの例を載せます。↓

ワイヤーフレーム

さて、ここからちょっと重要な説明をします。
コーデング(htmlファイルを作る)上で覚えた方がいいことです。

まず、上部のロゴやサイトマップ(ユーティリティ部分)からHOME(ナビ部分)で一つのブロックとして考えます
そして、この一番上のブロックをヘッダーといいます。ヘッドの言い換えたもの。そのままページの頭という意味です。

次にどーんと大きく見せるイメージ画像を載せるのが一般的かと思います。
ここは画像だけのブロックとします。

その次にお知らせなど、目立たせたい情報を載せます。
図でいうとお知らせと今月のおすすめの部分です。
このブロックはコンテンツといいます。内容部分という意味です。

次はバナー部分です。
バナーはコンテンツと横並びに表示させることも多いです。
今回はコンテンツの下にしました。
横並びならこのブロックはサイドバーといいます。右か左側という意味です。
下の場合はフットバーですかね~たぶん。あまり使わないのでちょっと自信ないです(汗

最後に一番下のブロックです。
ここはフッターといいます。フットを言い換えたもの。足という意味です。いや、足と同じで最下位にあるという意味です。
ここにはテキストでグローバルナビゲーションやユーティリティを表示させたりしますが、規模が大きい(ページが何十、何百とある)サイトの場合がほとんどです。
数ページのサイトなら必要はありません。
例ではコピーライト(著作権の記載)とサイト名だけ載せることにしました。

こんな風にブロックごとに配置を決めていきます。
画像はごく一般的なサイトの骨組みです。
これ以外にもいろんな構成がありますが、ブロックごとに考えるのは変わらないはずです。
興味のある方は「ワイヤーフレーム 作成」とかで検索してみてください。

次は2階層目のページのワイヤーフレームを作ります!