Webページのパーツ分解

Webページを構成する要素

ヘッダー

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

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

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

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

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

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

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

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

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

コンテンツ

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

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

サイドバー

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

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

フッター

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

 

基本的なレイアウト

1カラム

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

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

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

2カラム

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

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

3カラム

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

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

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

マルチカラム

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

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

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

 

◇まとめ◇


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

2 Responses to “Webページのパーツ分解”

  1. こんにちは
    初めましてあいばみかです
    文字が白くて読みづらかったのでできればサイドメニューと同じ黄色が黒をリクエストします☆
    突然で申し訳ありません。でもせっかく書いているブログなので勿体無いと思ったので…
    応援ぽちしてかえりますね^ ^

    • shoutarou123 より:

      あいばみかさん、こんにちわ!

      ご指摘ありがとうございます。先日作り上げたばかりの『ブログ』で、
      見づらい点は、もちろん気づいております。
      今、懸命にCSS3を勉強しているところです。

      数日中には、その辺の装飾に取り掛かれるとおもいます!
      見守っていていただけたらうれしいです。

      見違えるような仕上がりを期待していて下さい。
      本当に、今回は見づらいブログへの訪問ありがとうございました。

コメントを残す

サブコンテンツ

【PR】

今だけ!値下げ決行!【初心者に嬉しい】画像編集マニュアル

【期間限定】LINEの人気スタンプが無料で手に入る!

お得な返礼品を貰おう!ふるさと納税

【無料登録】オススメのASPはココ!

女性が有利?ポイントサイト攻略マニュアル【無料】

奇跡的に文章力がアップする『魔法の〇〇集』プレゼント【無料】

【初心者でも安心】バイナリーオプションの自動攻略ツール(特典付き)

このページの先頭へ