インターネットビジネスのあらゆる手法を解説します。アイデアで稼げるサイト構築を目指します。自分に合ったビジネスに取り組み、金脈を発掘しましょう!

Webページのパーツ分解

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

Webページを構成する要素

ヘッダー

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

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

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

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

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

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

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

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

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

コンテンツ

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

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

サイドバー

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

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

フッター

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

 

基本的なレイアウト

1カラム

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

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

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

2カラム

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

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

3カラム

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

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

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

マルチカラム

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

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

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

 

◇まとめ◇

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

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

Comment

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

    • shoutarou123 より:

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

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

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

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

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© ゼロからの収入! , 2016 All Rights Reserved.