Webサイトを構築している1つ１つのページ、そのページを構成する部位にはそれぞれ役割があります。
Webページの持つ役割や、よく使われている構成要素のレイアウトを学びましょう。
内容に合わせたレイアウト方法・へッダーやフッターなどの部分に入る要素の特性を知ることで、ユーザーが使いやすいサイトを作ることが出来ます。
WEBサイトの階層と構成
コーポレートサイトのような一般的なWEBサイトにある各ページは、は大きく「ホーム」「カテゴリー」「詳細」「フォーム」の４つ役割タイプで分類することが出来ます。
以下はコーポレートサイトの構造の一部を示したものです。
それぞれのページが持つ役割を見ていきましょう。
ホーム
構造上最上位にあるページです。
サイト内の主要なコンテンツへと誘導するのが主な役割であるのと同時に、webサイトの「顔」とも言える、印象を大きく左右する重要なページです。何のサイトなのか、どんな雰囲気なのかを一瞬でユーザーに伝えられるようなデザインにすることが多いです。
① ヘッダーエリア
- ロゴは多くは左上に配置します。デザインによっては中央に配置するケースもあります。
- ヘッダーにはメインコンテンツ間を移動できるよう、グローバルナビゲーションを設置します。
- 情報量が多い場合はグローバルナビゲーションをドロップダウンメニューにし、第三階層以下へのダイレクト移動が出来るようにする場合もあります。
- グローバルナビゲーションとは別に、会員ログイン、言語切り替えなどのボタンを配置することもあります。
② コンテンツエリア
- メインビジュアル部分では、最もユーザーに伝えたいメッセージが掲載されます。
- メインビジュアルの下には強く伝えたいコンテンツ、サイト内の主要コンテンツへのリンクを配置します。ユーザーの興味をひき、見たいページにすぐ移動できるように配慮が必要です。
③ フッターエリア
- ロゴやアドレス（会社所在地）が固定で表示されます。
- サイト内の主要コンテンツへのナビゲーションを小さく表示することもあります。
カテゴリー
同じグループの下階層ページへのリンクをまとめたページです。
このページに多くの説明を盛り込むのではなく、詳細が記されている下層ページへユーザを導くナビゲーションの役割が大きいページです。
① ヘッダーエリア
- ホームと同じ内容が表示されます。ただし、グローバルナビゲーションのメニューは現在見ているカテゴリ名が分かるように、色を変える・太字にするなどの工夫が必要です。
② コンテンツエリア
- コンテンツは下階層へのリンクがメイン、どういったカテゴリーなのか概要など。
- 特集など見て欲しいページへの誘導を入れたり、カテゴリーに属するページの一覧を表示させユーザーが興味を持っている情報の深掘りを促します。
- 第二階層以下の場合にはブレッドクラムナビゲーション（パンくず）を表示させ、見ているページがサイト階層のどこかを分かりやすくするのがオーソドックスです。
③ フッターエリア
- ホームと同様の要素が表示されます。
詳細
一つの事柄に対して最も詳しく情報がまとめられたページです。
商品１つの紹介ページであったり、ブログの記事なども詳細グループですね。
多くの詳細ページは、ホームやカテゴリトップよりもテキストや画像などの情報が多くなります。
① ヘッダーエリア
- ホームと同じ内容が表示されます。ただし、グローバルナビゲーションのメニューは現在見ているカテゴリ名が分かるように、色を変える・太字にするなどの工夫が必要です。
② コンテンツエリア
- 見出しのレベルはH1～H6まであります。
- 情報の種類によって、リストやテーブルといった表現を用いてマークアップされます。
- 画像には写真や図版（イメージ図やグラフ）があります。
- 最下部に関連コンテンツへのリンクや、サイトの目的を達成するための導線（お申しみ、お問い合わせなど）を表示させます。
③ フッターエリア
- ホームと同様の要素が表示されます。
フォーム
ユーザーに何かしらの情報を入力してもらうためのページです。
お問い合わせ、お申込み、各種登録などが該当します。
① ヘッダーエリア
- お申し込みやお問い合わせのフォームでは、グローバルナビゲーションを非表示にしてユーザーの離脱を防ぐことがあります（※サイトの種類や状況によって決定する）。
- フォーム画面が何ページか続く場合は、ステップナビゲーションを表示させユーザーが現在地を把握できるようにします。
② コンテンツエリア
- テキスト入力フォーム、プルダウンメニュー、ラジオボタン、チェックボックス、日付入力カレンダーなど、様々な入力形式でユーザーの情報を取得します。
③ フッターエリア
- ヘッダーエリアと同様、お申し込みやお問い合わせのフォームがあるページでは、フッターナビゲーションを非表示にしてユーザーの離脱を防ぐことがあります（※サイトの種類や状況によって決定する）。
WEBページの構成要素
４タイプのページレイアウトを見ていただくとわかるように、一般的なWEBサイトは以下３つに大きくエリア分けるすことが出来ます。
- ヘッダー部分
- コンテンツ部分
- フッター部分
それぞれのエリアの特徴、配置される要素や実際に使用されているデザインを見てみましょう。
ヘッダーエリア
ヘッダーエリアは一般的にページ最上部を指します。
サイトの運営組織の名前やサイト名（ロゴ）や、全ページに渡って横断的に利用されるグローバルナビゲーションなどが表示されます。
①ロゴ
企業やサービスの口ゴは最も目に入る「左上」に設置するのが基本です。
サイトによってはアクセントとして中央に設置することもありますが、ケースとしては少ないと言えます。ファイル形式はSVGを使用し、高解像度ディスブレイでも綺麗に表示されるようにするのが望ましいです。
②グローバルナビゲーション
全ページ共通で利用するメニューです。
明らかにナビゲーションと分かるため、リンクアイコンは省いてテキストだけで表現することが多いです。ただし、別ウィンドウでリンク先を開く場合、メニューの開閉がある場合はアイコンを使って表示した方が親切でしょう。
高さは150pxl以内に設定されることが多いです。
が、ナビゲーションの幅や段組みに厳密な規定はありません。表示させたい内容やサイトのデザインに合わせて決定します。文字サイズも同様に、デザインやWEBサイト全体で使用しているフィントサイズの基準を考慮して決定します。
グローバルナビゲーションについては次回【2.ナビゲーションの種類】で詳しく紹介します。
デザインの参考
1.多機能型ヘッダー
下記は「大和ハウス」のヘッダー部分です。
ロゴ・社名と検索バー、下図で①としたユーザーに起こして欲しいアクション（資料請求・お問い合わせ）やSNSへのリンクが横並びで配置されています。
②がグローバルナビゲーションと呼ばれる部分で、サイトを訪れた方が探したい情報の元へと辿り着けるよう各カテゴリーへのリンクが表示されています。
加えて、ページ最上部の右側には補助的なメニューとして、会員限定サイト・サイトマップなどへのリンクが設置されています。外部リンクを示すアイコンも使われているので分かりやすいですね。
非常に使いやすく機能的なヘッダーエリアと言えるでしょう。
余白や文字サイズ等に注意しないと、見にくくなってしまうこともあるため注意が必要です。
2.メインビジュアルと一体にする
背景に写真を敷いてへッダのエリアを区切らずメニューを表示する方法もあります。
上図の「大阪芸術大学 大学院」のサイトはメインビジュアル部分とシームレスで表示することで、よりグラフィカルな印象になっていますね。開放感や統一感を重視したいときに有効な手法と言えます。
文字が読みにくくならないように気を付けましょう。
3.メニュー部分にのみ背景色を入れる
ヘッダーエリアとキービジュアル部分が繋がった印象になるのは同じですが、へッダエリアの構成要素のみに背景を付けます。背景の色や要素に影響されずナビゲーションの文字が見やすい・ナビゲーションであることが認識しやすいことがメリット。
フッターエリア
フッターエリアは、一般的にページ最下部を指します。
フッターの役割は企業情報や著作権表記ほか記載しなければならないものの表示、ページ最下部まで読み進めたユーザーに次のアクションを促すためのリンクがメインです。
サイト内の主要コンテンツを示したフッターナビゲーションやサイトマップを設置することもあります。
特に情報量の多いコーポレートサイトでは主要ページへのサイトマップが表示されている事が多いです。
反対に、情報量があまり多くないサイトや特集ページでは、SNSへのリンクや問い合わせボタンをメインに配置されている場合もあります。ヘッダー部分以上にヘッダーの項目はケースバイケースと言えますね。
デザインの参考
下図は「花王株式会社」のホームページで使われているフッターです。
SNSリンク、フッターナビゲーション、ミニサイトマップ、著作権表示と情報量が多いですね。カテゴリー数やぺージ数が多い場合は、このようなカテゴリーごとにまとめられたサイト内リンクがあとユーザーは探しているページへの進み方を把握しやすいです。
次に「ユニクロ」のフッターを見てみましょう。
ホームページやオンラインショップでは、①のようにWebサイトに記載する必要があるコンテンツへのリンク・グループブランドのショップページのリンクが主になっています。
②はサステナビリティについての特集ページで使われているフッターです。
こちらは必要最低限の項目でシンプルな構成ですね。
コンテンツエリア
コンテンツエリアはヘッダーとフッターを除いた、そのページのメイン要素と言える部分です。
「ホーム」「カテゴリー」「詳細」「フォーム」どの役割を持つページかによって中身は変わってきます。
【コンテンツエリアを構成する主な要素の例】
- ブレッドクラムナビゲーション
- 見出し
- リンク
- ボタン
- リスト
- テーブル
- タブ
※各要素については、後半のワイヤーフレーム作成編でご紹介します。
まとめ
一つのWebサイトを構成するページであっても、下層ページへの誘導、関連情報を見やすくまとめる、予約・購入などのアクションをして頂く箇所など役割が違っています。それぞれの役割を理解し、ユーザーやサイトで扱う情報と見合わせてレイアウトを決めていきましょう。