Webデザインレイアウトの基本
Webサイトのレイアウトは、いかに閲覧者にとって優しく、知りたい情報をすぐに入手できるかが重要になります。以下にポイントを挙げます。
Webユーザビリティ～
閲覧者にとって使いやすいWebサイトとは
Webサイトにとってもっとも重要なのは「コンテンツ」であり、伝えたい人に的確に情報を伝えるために存在すべきだと考えられています。必ずしもデザインに凝る必要はなく、閲覧者が共通して無意識に「ここをクリックしたらコンテンツのトップに戻れるのではないか」、「ここをクリックしたらトップページに戻れるかも？」といった予測がつきやすいWebサイトを作成するように心がければよいのです。
Webサイトの閲覧者は、決してデザインを見るためではなく、コンテンツ（情報）を探しに訪れているのです。Webサイトのデザインがどんなに優れていたとしても、自分の求める情報をなかなか見つけられないようでは結局「使えないWebサイト」になってしまいます。
閲覧者が探している情報にすぐにアクセスできるよう工夫し、また、現在どのWebページを見ているのかナビゲーションをしっかりしておけば、閲覧者は快適にコンテンツを利用することができます。このような場合、シンプルな構成（デザイン）のWebサイトのほうが、さまざまなブラウザやシーンにも対応しやすくなります。
使いやすいWebサイトを作成するポイントとして、以下のようなことが挙げられます。
- シンプルで、インターネットでよく見かけるWebサイトのレイアウトを参考にする
- 迷子にならない、しっかりとしたナビゲーションをする
- どのWebページからでもすぐに元のWebページに戻れるようにする
- 探したい情報を見つけるまでのクリックの回数を減らすように工夫する
- Webページの表示までの時間を短くする
（一度読み込んだWebページに使われるスタイルの情報はあらかじめキャッシュ（一時ファイルとしてダウンロード）されるため、他のWebページの閲覧時にわざわざインターネット上のファイルを取りに行く必要がなくなる）
閲覧者がはじめてWebサイトを訪れたとき、トップページに戻るリンクがなかったり、現在どのWebページを見ているのかわからなくなったりすると困ってしまいます。サブページには、必ずトップページに戻るリンクを設置しましょう。
また、現在どのWebページを見ているのか一目でわかるようにすることも重要です。そのためには、ナビゲーション内の現在のコンテンツ見出しを強調表示したり、「パンくずリスト」（Webサイト内でそのWebページの位置をトップページから階層構造で表し、ハイパーリンク一覧として記述したもの）を各Webページの同じ場所に設置したりするのがよいとされています。通常、パンくずリストは「>」で階層構造を表します。このようにすることで、閲覧者にとって現在位置を直感的に理解する手助けになります。
ちなみに、このWebページのパンくずリストは以下のとおりです。
Home > Topics > Webデザインレイアウトの基本
一般的なニュースサイトは、左上にサイトロゴまたは社名（コーポレイトロゴ）、上部にナビゲーションバーやリンクバー、中央左側にメインコンテンツが配置されています。また、右側のサイドバーには広告や新着記事、アクセスランキングなどが、一番下には企業情報やお問い合わせ方法などが並んでいます。
通常、人間は「モノ」を見る場合、左上から右下に視線を移動するので、最初に目に留まるのは左上になります。左上に会社などのロゴがあれば、現在どのWebサイトにアクセスしているのかがすぐにわかり、主体となるニュースコンテンツを左側に配置することによって、それらが自然に注目されるようにしているのです。
ダイナミックWebテンプレートを利用した
デザインやレイアウトの統一
トップページからサブページに移動した場合に、配色や背景色が変わっていたり、レイアウトやデザインがまったく異なっていると、閲覧者に違和感を与えるだけでなく、目的のコンテンツにたどりつかない場合があります。
Webデザインレイアウトを簡単に手早く統一するには、Expression Webの「ダイナミックWebテンプレート」を利用します。ダイナミックWebテンプレートには、設定や書式のほかに、テキスト、画像、ページレイアウト、スタイル、Webページの変更可能な領域などのページ要素を含めることができます。
まず、基本となるレイアウトを決定し、Webページごとに変更したい場所（メインコンテンツエリアなど）に編集可能な領域を設定します。続いて、このダイナミックWebテンプレートからWebページを作成し、編集可能な領域をそれぞれ編集して仕上げていきます。後からダイナミックWebテンプレートを編集して更新すると、既にそのテンプレートが適用されているWebページにもその変更内容が反映されます。
Expression Webでは、既存のWebページに後からダイナミックWebテンプレートを適用することもできます。特に、Webサイトのデザインを全体的に一新したい場合など、ダイナミックWebテンプレートを活用することによって効率的に作業が行えます。
最後に、シーン別に基本的なWebデザインレイアウトをExpression Webに用意されているCSSレイアウトテンプレートを基に使用例を挙げます。必ずしもこれが正解とは限りませんが、目安として参考にしてください。
 |
 |
 |
| Webサイトのコンテンツが5種類程度の場合、ナビゲーションを上部に設置 | Webサイトのコンテンツが多数ある場合、 左側にメニューを設置 |
コンテンツが充実してきたら、 メニューをネスト（入れ子）する |
| 「会社概要」「ニュースリリース」「業務紹介」「実績紹介」「お問い合わせ」など | サイドメニューでは、横書きのリンクに対してスペースの関係から下方向にコンテンツカテゴリを増やすことが可能 | 上部のナビゲーションにはメインメニュー、サイドメニューにはそれぞれのサブメニューとしてリストする。 |
※この記事は、拙著『ひと目でわかるMicrosoft Expression Web 2 (マイクロソフト公式解説書)』に収録されたコラム記事を転載・サイト掲載用に一部編集したものです。
