このページの本文へ

Webページの基本レイアウトと各部の名称

2011年12月14日 11時00分更新

文●アンティー・ファクトリー

  • この記事をはてなブックマークに追加
本文印刷
web-keyword

 Webページのレイアウトにはさまざまなパターンがありますが、基本的な構成要素はどのサイトでも大きく変わりません。Webサイトを訪れたユーザーが求めている情報にスムーズにたどり着けるように、一般的には「グローバルエリア」「コンテンツエリア」「ローカルエリア」の3つで構成します。

ナビゲーションとして機能する2つの要素

 Webページの基本的な構成要素が決まっているように、各要素に配置する内容や働きもほぼ決まっています。

 グローバルエリアは、サイト内で共通の要素を配置する領域です。一般的には、ページの最上部/最下部にあるヘッダー/フッターを指します。サイト内のどのページに移動しても共通して変わらないので、トーン&マナーによってサイトのアイデンティティを表現できる領域でもあります。

 グローバルエリアのうち、ヘッダーにはサイトの名称を表すサイトロゴと、サイト内の主要なページへリンクする「グローバルナビゲーション」を配置します。ユーザーの視線を留める位置にあるので、つい多くの要素を盛り込みたくなりますが、雑然としたヘッダーはユーザーの混乱を招き、利便性を損ねます。各要素の重要度を設定し、配置する要素を厳選しましょう。

 フッターは、ヘッダーより重要度の低いサイト内共通のナビゲーションなどを配置します。一般的にはプライバシーポリシーやサイトマップへのリンク、コピーライトなどで構成します。

 ローカルエリアは、各ページが属しているカテゴリー内の共通要素を配置する領域です。一般的には、同一階層内へ誘導する「階層型ナビゲーション」、ページの内容と関連の深いページへ誘導する「関連ナビゲーション」、ユーザーニーズが高いページへ誘導する「ダイレクトナビゲーション」などで構成します。それぞれのナビゲーション要素がユーザーのコンテンツ閲覧行動に大きく影響するため、位置や表現方法に注意します。

コンテンツエリアの要素と働き

 コンテンツエリアは、各ページの主題となる固有の内容(コンテンツ)を配置する領域です。企業サイトやメディアサイトであれば記事の本文、ECサイトであれば商品の紹介文や商品写真などで構成します。ECサイトの注文画面のように直線的に誘導する「ステップナビゲーション」、現在地を示す「パンくず」といったナビゲーションを配置する場合もあります。

 トップページやカテゴリートップなど、他ページへの誘導を目的としたページのコンテンツエリアは、階層型ナビゲーションや関連ナビゲーション、ダイレクトナビゲーションなどを配置します。

著者:アンティー・ファクトリー

アンティー・ファクトリーはWeb戦略だけでなく、タッチパネルやスマートフォンなどの各種インターフェイス・アプリケーション開発、次世代広告コミュニケーションの設計や開発を行っています。ワールドワイドなクリエイティブを展開し、発展しつづける会社です。

書影

書籍版は、企画・設計・制作・運用など、Webディレクション業務の大まかな流れに沿って構成。最新情報を盛り込み、書き下ろしのコラムや用語集も収録しました。ずっしり重い1030g、厚さ19.5mmで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊です。

Webディレクション標準スキル152

本体 4,280円+税、AB判392ページ(オール4色刷)
ISBN:978-4-04-868746-1

Amazon.co.jpで買う 楽天ブックスで買う

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています