Webページのパーツ分解

この記事を書いている人 - WRITER -

shoutarou123

HN：しょう太郎 居酒屋経営しながら、アフィリエイトしています。行動力と収入は比例する「ヒミツの手法」を学び、楽しみながら人生を過ごしています。 自分で学び（Input）、人に教えること（Output）で、共に成長し喜び合える仲間を大切に思っています。

Webページを構成する要素

ヘッダー

まず、ページの最上部には【サイトタイトル】があります。

これは、Webサイト全体の共通タイトルですから、最も重要です。

タイトル部分は、テキストだけでなく、画像を用いたロゴを表示することもあります。

またページの上部には、サイト全体の共通メニュー【グローバルナビゲーション】があります。

このナビゲーションメニューには、何を配置するかはサイトマップを作成する段階で決めておきましょう。

グローバルナビゲーションの下にある大きな画像があります。

この画像は、【キービジュアル】といって、このサイトで一番伝えたい事の写真やイラスト、CGなどで表現します。

【メインビジュアル】とか【タイトルバナー】ともいいます。

これらをまとめた領域を【ヘッダー】と呼びます。

コンテンツ

ヘッダー部分の下には、メインの記事エリアがあります。

記事の構成は、【見出し】と【本文】とか、【見出し】と【箇条書き】のように、タイトルと内容の関係にもとづいて文章構造が展開されます。

サイドバー

メインの記事エリアの左右どちらか、もしくは両方に、ページの補足や関連する内容を示すエリアです。

メインの記事エリアをブラウザの幅いっぱいにつくってしまうと、テキストの折り返しが長くなり、読み手の視認性が低下してしまいます。

フッター

ページの下部には、補足的なリンクを表示したり、コピーライトを表記したりするエリアです。

基本的なレイアウト

１カラム

これは、ページ幅いっぱいに内容を広げたパターンです。

サイドバーをページの下部に配置したり、次の階層のページに設置したりして、トップページを『特別なもの』として扱えます。

また横幅にゆとりがあろので、何枚かの画像を並べたり、大きな画像を１枚配置したりといった表現もできます。

２カラム

最もポピュラーなパターンです。

メインの表示エリアの幅を指定し、空いた部分にサイドバーを配置して、ナビゲーションや補足のコンテンツを表示します。

３カラム

ニュースサイトやポータルサイトでよく使われるパターンです。

多くの情報を効率よく見せるには、テキストを中心にして、他を表示させるスペースに工夫が必要です。

１画面で膨大な情報量を扱うWebサイトに適しています。

マルチカラム

これまでのパターンよりも、さらに多くのカラムを利用したパターンです。

これは、内容を区切ったブロックを複雑に入れ込んだものです。

事前の設計が特に重要であり、しっかりと整理をしないと雑然としたイメージになってしまいます。

◇まとめ◇

1. Webページはヘッダー、コンテンツ、フッターなどで構成する
2. 一般的なパターンは２カラム
3. 多くのWebサイトは、基本のレイアウトに則っている