各ページの構造的デザインを考える

■構造的デザイン

ページ作りを始める前に各ページの構造的なデザインを考えて行きます。構造的なデザインと言うのは分かりやすく言うと「何をどこに配置するか」と言う事です。例えばこのページは上から「ヘッダー」、「パンくずリスト」、「コンテンツ」、「フッター」と言った構造になっていて、「コンテンツ」部分は「メニュー」、「コンテンツ(記事)」、「多目的領域」の3カラム構造になっています。

• ヘッダー
• グローバルナビゲーター
• パンくずリスト
• コンテンツ
• メニュー
• 広告領域
• フッター
• など...

■ヘッダー

ページの最上部に配置されます。ホームページのタイトルやサイトロゴを置く事が多いです。

■グローバルナビゲーター

全ページに共通のナビゲーターです。発見しやすくアクセスしやすい位置に置くようにします。

■パンくずリスト

ホームページのトップページからのルートを辿ったリンクです。階層構造の中での現在位置が一目で分かり、ユーザビリティの向上に繋がります。

■コンテンツ

ホームページの内容部分です。1カラム、2カラム、3カラムなどの型があります。

1カラムは1つの縦領域しか持たない構造です。大抵は記事領域のみで構成されます。

2カラムは2つの縦領域を持った構造です。記事領域とメニュー領域で構成される事が多いようです。左側にメニューを置く型を「左袖型」、右側にメニューを置く型を「右袖型」と言います。

3カラムは3つの縦領域を持った構造です。大抵は記事領域と2つのその他の領域から構成されます。一方をメニュー領域、もう一方を多目的領域(広告領域やブログパーツ置き場)として使う事が多いようです。

■フッター

ホームページの最下部に配置されます。著作権の記載やフッターリンクなどに使われます。