WEBサイト制作サービスWEBsite Design service

WEBサイト制作:レイアウトパターン

WEBレイアウト・パターンの分類とトップページ

WEBサイト制作(ホームページ制作)におけるレイアウトパターンと効用

  • WEBページのレイアウトパターンとして、ナビゲーションとコンテンツのレイアウトにより、5分類化したものです。
形態 特徴 代表的なサイト例 レイアウト
2分割T型 ナビゲーションでの表示枠が限定されているため、分野固定化したサイトで、マウスを重ねるとローカルナビゲーションを表示して選択できる。
コンテンツを全面に活用できることが特徴で、コンテンツ内を分割して自由なレイアウトができる。目的とするページへのリンクが分かり難いため、コンテンツ内に補助的にリンク先を埋め込んだケースが多い。
アップル
(コンピュータ)
2分割T型レイアウト
2分割I型 コンテンツ中心型で、ナビゲーションとの連携を取りながら独立な構造を形成できる。サイト構造がフラットな場合に最適である。
ナビゲーションとコンテンツの連携をとるため、目的のページへ少ないクリックで到達できる。検索サイトに多い。
講談社 2分割T型レイアウト
逆L字形 最も多く利用されているレイアウトであり、サイト全体の共通的な要素をグローバルナビゲーションとし、商品群や事業別の内容をローカルナビゲーションで詳細な内容や階層別にコンテンツを表現できる。
大規模なサイトに向いている
マイクロソフト(MacTopia) 2分割T型レイアウト
ブログ3分割型 コミュニティ形成のログイン、カテゴリー別のニュース等の履歴を右側、コンテンツを中央、左側にネット広告や補助的な説明等を配置できるもので、ブログで多く使われている。
ニュース発信やポータルサイトに多い。
gooブログ 2分割T型レイアウト
ビジュアル中心型 コンテンツを全面にビジュアルな画像、動画中心にしたもので、ナビゲーションをビジュアルの中に埋め込んだ形のレイアウトであり、新製品の紹介の商品イメージを表現したもので、「flash」で作成されたものが多い。 博報堂生活総合研究所 2分割T型レイアウト

ページのトップへ戻る


トップページの役割と内容

  • トップページは、WEBサイトの顔ともいえるため、企業イメージ(商品イメージ)を表現することとWEBサイトの目的・用途を組み合わせた内容のレイアウトパターンで表現されます。
  • そのため、サイト全体のカテゴリーナビを埋め込んだビジュアル全面型やビジュアルとお知らせ、ナビをミックスした型が多い。
  • また、企業イメージよりも機能全面をトップページにした情報検索サイトやファン形成型は、ディレクトリー検索とお知らせ中心とした内容が多い。
  • ビジュアル型のトップページ

  • 情報検索やファン形成型のトップページ

MSNのトップページ

OCNのトップページ

  • T型(アップル)、I型(講談社)、逆L字形のトップページ

ページのトップへ戻る

WEBページ構成要素

  • WEBページデザイン制作は、トップページとコンテンツページに大きく分かれ、トップページではメインビジュアル、お知らせ(ニュース)があり、コンテンツページではパン屑リスト、本文があり、他の項目は共通で利用されるのが通常です。

WEBページ構成要素のトップページ

WEBページ構成要素のコンテンツページ

  • ナビゲーション
  • ロゴ(サイト用)
  • パン屑リスト
  • ページタイトル
  • メインビジュアル
  • サブタイトル(キャッチ)
  • 本文
  • お知らせ(ニュース)
  • 広告
  • フッター(コピーライト)

ページのトップへ戻る