Webページのレイアウトにはさまざまなパターンがありますが、基本的な構成要素はどのサイトでも大きく変わりません。Webサイトを訪れたユーザーが求めている情報にスムーズにたどり着けるように、一般的には「グローバルエリア」「コンテンツエリア」「ローカルエリア」の3つで構成します。
ナビゲーションとして機能する2つの要素
Webページの基本的な構成要素が決まっているように、各要素に配置する内容や働きもほぼ決まっています。
グローバルエリアは、サイト内で共通の要素を配置する領域です。一般的には、ページの最上部/最下部にあるヘッダー/フッターを指します。サイト内のどのページに移動しても共通して変わらないので、トーン&マナーによってサイトのアイデンティティを表現できる領域でもあります。
グローバルエリアのうち、ヘッダーにはサイトの名称を表すサイトロゴと、サイト内の主要なページへリンクする「グローバルナビゲーション」を配置します。ユーザーの視線を留める位置にあるので、つい多くの要素を盛り込みたくなりますが、雑然としたヘッダーはユーザーの混乱を招き、利便性を損ねます。各要素の重要度を設定し、配置する要素を厳選しましょう。
フッターは、ヘッダーより重要度の低いサイト内共通のナビゲーションなどを配置します。一般的にはプライバシーポリシーやサイトマップへのリンク、コピーライトなどで構成します。
ローカルエリアは、各ページが属しているカテゴリー内の共通要素を配置する領域です。一般的には、同一階層内へ誘導する「階層型ナビゲーション」、ページの内容と関連の深いページへ誘導する「関連ナビゲーション」、ユーザーニーズが高いページへ誘導する「ダイレクトナビゲーション」などで構成します。それぞれのナビゲーション要素がユーザーのコンテンツ閲覧行動に大きく影響するため、位置や表現方法に注意します。
コンテンツエリアの要素と働き
コンテンツエリアは、各ページの主題となる固有の内容(コンテンツ)を配置する領域です。企業サイトやメディアサイトであれば記事の本文、ECサイトであれば商品の紹介文や商品写真などで構成します。ECサイトの注文画面のように直線的に誘導する「ステップナビゲーション」、現在地を示す「パンくず」といったナビゲーションを配置する場合もあります。
トップページやカテゴリートップなど、他ページへの誘導を目的としたページのコンテンツエリアは、階層型ナビゲーションや関連ナビゲーション、ダイレクトナビゲーションなどを配置します。
著者:アンティー・ファクトリー
アンティー・ファクトリーはWeb戦略だけでなく、タッチパネルやスマートフォンなどの各種インターフェイス・アプリケーション開発、次世代広告コミュニケーションの設計や開発を行っています。ワールドワイドなクリエイティブを展開し、発展しつづける会社です。