Webデザインレイアウトの基本
新聞社のニュースサイトを見てみると、おおむね、左上にサイトロゴ、上部にリンクバー、中央左側にメインコンテンツが配置されています。また、右側のサイドバーには広告や新着記事、アクセスランキングなどが、一番下には企業情報や問い合わせ方法などが並んでいます。
人間はものを見る時、通常、左上から右下に視線を送るので、最初に目に留まるのは左上です。左上にサイトのロゴがあれば、今、自分がどのサイトに来ているのかがすぐに分かるでしょう。また、主体となるニュースコンテンツは、左側に配置することによって、それらに注目しやすくしているのです。
例えば、Webブラウザのメニューは左上にありますよね？ ナビゲーションメニューは上部または左側に配置すると閲覧者に認識されやすいため、無難です。
Expression Webでは、これらの基本に沿った9種類のCSSレイアウトテンプレートが用意されています。これを利用することによって、使い勝手のよいレイアウトを持つWebサイトをスムーズに構築できます。
ダイナミックWebテンプレートによるレイアウトの統一
Webページレイアウトを簡単に統一するには、「ダイナミックWebテンプレート」を利用します。ダイナミックWebテンプレートはFrontPage 2003から受け継いだ機能で、HTMLベースのマスターコピーです。ダイナミックWebテンプレートには、設定や書式のほかに、テキスト、画像、ページレイアウト、スタイル、Webページの変更可能な領域などのページ要素を含めることができます。
大まかな流れを説明すると、まずCSSレイアウトテンプレートから基本となるレイアウトを選択し、Webページごとに変更したい場所（メインコンテンツエリアなど）に編集可能領域を設定します。続いて、このダイナミックWebテンプレートからWebページを作成し、編集可能領域をそれぞれ書き換えて仕上げていきます。なお、後からダイナミックWebテンプレートを編集して更新すると、すでにそのテンプレートが適用されているWebページにも、その変更内容が反映されます。
Expression Webでは、既存のWebページに後からダイナミックWebテンプレートを適用することもできます。
基本となるレイアウトの選択
状況別にレイアウト選びの基準を紹介します。必ずしもこれが正解というわけではありませんが、ひとつの目安として参考にしてください。
カテゴリ数が5つ程度までの場合は、上部ナビゲーションバーで
大まかにコンテンツをカテゴライズして5つ程度に収まった場合は、上部のナビゲーションリンクバーで対応します。
例えば、「会社概要」「ニュースリリース」「業務紹介」「実績紹介」「お問い合わせ」といった場合は、下の図のようなレイアウトを選択します。
 |
ヘッダー, ナビゲーションバー, 1列, フッター |
ページ上部のナビゲーションバーで、各カテゴリのインデックスページにリンクを張り、横並びに配置します。上部に配置することで、カテゴリ間を移動する際にスクロールする必要がなく、一番使い勝手が良いレイアウトですが、あまりカテゴリ数を増やすことができないのが欠点です。
カテゴリ数が多数ある場合は、サイドメニューで対応
コンテンツのカテゴリ数が多くなる場合は、サイドメニューに各カテゴリのインデックスページへのリンクを設置します。いわゆるブログのページレイアウトと似たものになるでしょう。
 |
2列, 左固定 |
 |
ロゴ,ヘッダー, 2列,フッター |
サイドメニューでは、横書きのリンクに対してスペースの関係から、下方向にどんどんコンテンツカテゴリを増やすことができます。ただし、あまり増やしすぎるとまとまりがなくなってくるので、カテゴリをネストする必要がでてきます。
コンテンツが充実したサイトは、カテゴリをネストする
Webサイトを運営していくうちに、だんだんコンテンツが充実してくるでしょう。コンテンツがある程度の数になってきたら、カテゴリのネストを検討してください。
カテゴリをネストすることによって、より引き締まった、まとまりのあるサイトになります。親カテゴリはヘッダーに横並びに配置（それぞれ親カテゴリのインデックスページへリンク）し、サイドバーには、現在選択されている親カテゴリの子カテゴリを縦に並べて配置（それぞれ子カテゴリのインデックスページへリンク）します。
 |
ヘッダー, ナビゲーション, 2列（左固定）, フッター |
 |
ヘッダー, ナビゲーション, 2列（右固定）, フッター |
