レイアウトパターンを配置する
基本的にWEBページには、ヘッダー、グローバルメニュー、コンテンツ、フッターの4要素が配置されています。
ヘッダーとフッターは、文字通りページの先頭と最後に存在する要素で、配置に悩む必要はありません。
まず最初に考えるのは、メニューの配置です。
メニューの配置
どのページからでも目的のページへすぐに辿り着けるようにメニューを配置することで、訪問者の満足度は上がります。
訪問者はホームページに情報を求めてやってきます。
肝心な情報までのルートが迷路になっていると、訪問者はストレスを感じて他のホームページへ移ってしまいます。
メニューの配置は「レイアウトを決める」でお話ししたように、商用デザインに倣ってレイアウトする事をお勧めします。
2分割T字型レイアウト、2分割I字型レイアウト、逆L字型レイアウトの3種類がメジャーなレイアウトです。
それぞれのレイアウトのメリット、デメリットは下記の通りです。
| 種類 | メリット | デメリット |
|---|---|---|
2分割T字型レイアウト |
グローバルメニューを横に並べ、コンテンツを下に置くことで、コンテンツの幅を大きく取れる | グローバルメニューの項目が増えた場合、画像の作り直し等、対応が複雑になる コンテンツの内容が少ないページでは殺風景になりやすい |
2分割I字型レイアウト |
グローバルメニューを縦に並べているため、項目が増えた場合でもすぐに対応できる | グローバルメニューによって横幅が制限されるため、コンテンツ部分が狭くなる |
逆L字型レイアウト |
グローバルメニューとローカルメニューを常に表示することにより、ナビゲーションが強くなる。ページ数の多い大規模サイトに対応できる | すっきりしたシンプルなデザインにすることが難しい |
ページ数が少ない場合は、コンテンツの内容や、今後の拡張の有無によって2分割T字型レイアウトか2分割I字型レイアウトのどちらかを選択すると良いでしょう。
ページ数が多い場合、または大規模化が予想される場合は、逆L字型レイアウトを選択しておくのが賢明です。逆L字型レイアウトは、主にショッピングサイトに使用されています。
ホームページの方向性や、「ページ構成とファイル名」でホームページの構成を決定していれば、レイアウトの選択が容易です。
レイアウトの選択は、訪問者に対するユーザビリティだけでなく、その後のホームページ管理に関わる重要な問題なので、しっかりと吟味しましょう。
例えば、「鈴木智子のホームページのアクセスアップ講座」では、メニューが3～4階層以上になっています。
グローバルナビゲーション：ホームページ制作講座、SEO・SEM講座…
ローカルナビゲーション：メリットのあるコンテンツを提供する、コンテンツのテーマを決める…
サブナビゲーション：企業（個人）サイトのパターン例、ブランドサイトのパターン例…
| トップ | index.html | |||||
  |
ホームページ制作講座 | production.html | ||||
|
|
メリットのあるコンテンツを提供する | merit.html | |||
|
|
コンテンツのテーマを決める | content.html | |||
|
|
レイアウトを決める | layout.html | |||
|
|
|
企業（個人）サイトのパターン例 | layout_company.html | ||
|
|
|
ブランドサイトのパターン例 | layout_brand.html | ||
|
|
|
ポータルサイトのパターン例 | layout_portal.html | ||
|
|
 |
ECサイトのパターン例 | layout_ec.html | ||
|
|
サイト名を決める | sitename.html | |||
 |
|
|||||
|
サイトマップ | sitemap.html | ||||
よって、グローバルナビゲーションをページの上部に横位置で配置し、ローカルナビゲーションはページの左側に配置する逆L字型レイアウトを採用。サブナビゲーションは、ローカルナビゲーションの該当ページを開いているときに表示されるようにします。
トップページと中ページ（ローカルページ）
ここまでの流れで基本のレイアウトが決まりました。
しかし、「鈴木智子のホームページのアクセスアップ講座」では、以下の理由から、トップページと中ページ（ローカルページ）のレイアウトを変えようと思います。
トップページは多くの人が最初に訪れる場所、いわばホームページの「顔」です。
トップページは、ホームページの主旨、主なコンテンツ内容、最新情報などを閲覧者に一目で訴えることが大切なのです。
情報やページ数が多いサイトなのかどうか、サイト構成が複雑なのかどうかを考え、分かりやすいナビゲーションアイコンや、簡潔で分かりやすい文章で、分かりやすいトップページに仕立て上げることが大切です。
「顔より中身を見て欲しい」と、言っていられないのがホームページです。
ヘッダー、グローバルナビゲーション、フッターの配置は全てのページで共通ですので、2分割T字型レイアウトを採用します。
ワイヤーフレームの作成
具体的なレイアウトが決まったら、ワイヤーフレームを起こします。
ワイヤーフレームとは、ホームページデザインの設計図のことです。
「鈴木智子のホームページのアクセスアップ講座」のトップページ（2分割T字型レイアウト）ではこのような形になります。
どの要素をどこに配置するかという判断、つまり「要素＝情報」は、限られたスペースを有効活用するのに重要なだけでなく、ユーザービリティ（使いやすさ）やファインダビリティ（発見しやすさ）にも大きく関わってきます。
ホームページは、ユーザーに使ってもらってはじめて意味があるのであって、運営者とユーザー双方の満足が車の両輪のようにサイトを動かし発展させるのです。
特にトップページのワイヤーフレームは、そのサイトの戦略や方針の縮図であり、運営者の目的と意図、ユーザーへの期待と配慮のすべてが詰め込まれているといっても良いのです。
Photoshopで制作する前に、紙の上で何度も何度も納得いくまで、ラフスケッチを繰り返してみるのもよいかもしれません。どの情報をどこに入れるのがしっくりくるか、パズルみたいなものですね。
ワイヤーフレームの構想が固まったら、「ホームページの幅を決める」で作成したPhotoshopファイルにガイドを配置していきます。次は、「ガイドを配置する」に進みましょう。
