今回のポイント
Webページの画面構成の基本について知る
フレームを用いたレイアウト構成の方法
テーブルを用いたレイアウト構成の方法
タグのid指定とidに対するCSSの書き方

 前回まで,HTMLとCSSの基礎知識について解説してきました。いよいよ今回から“Webデザイン”の話に入りましょう。まずは,Webページの基本的な画面構成と,レイアウト構成の変遷について勉強します。お気づきの通り,ここまでのサンプルで見たように,“見出しと本文だけで構成されているページ”(図1)なんてものは,ほとんど存在しません。

図1●見出しと本文だけというページ。こんな構成のページは現実にはほとんど存在しない
図1●見出しと本文だけというページ。こんな構成のページは現実にはほとんど存在しない

 ページ構成のデザインには,その時その時のトレンドというものがあります。最近のWebページの構成要素としては,次のようなものがあります。

  1. 本文
    見出しも含みます。そのページの主要なコンテンツです。
  2. ヘッダ
    ページ上部にありサイト内でほぼ共通の看板のような部分です。サイト名とイメージ画像などが入ります。サイト名部分はサイトトップへのリンクである場合が多いです。1階層上のジャンルへのリンクが置かれることもあります。
  3. ナビゲーション
    サイト内の同階層の別コーナーへのリンクを中心にリンクが並びます。ヘッダにジャンルのリンクがない場合には,ここに大分類リンクが来ることもあります。
  4. フッタ
    ページ下部の“締め”の部分です。著作権表記と会社案内,プライバシー・ポリシーの説明などが置かれます。リンク内容は業務に関する物,著作権者に強く関わる物が中心です。

 商用サイトではナビゲーションやヘッダ,フッタに広告が入ることがあります。広告そのものは“外部にある関連サイトへのリンク”としておくことにします。

 今,あなたが見ているITproのページも,各ブロックに色を付けてわかりやすくすると,この構成になっているのがわかります(図2図3)。ブロックの意味合いを図で見ながら,実際に今読んでいるページの内容を確認してください。なお図は2007年2月時点のデザインであり,本稿を読んでいただく時期によってはデザインが変更になっている場合もあります。

図2●ITproのページ構成(上部)。ヘッダと本文,ナビゲーションがある
図2●ITproのページ構成(上部)。ヘッダと本文,ナビゲーションがある

図3●ITproのページ構成(下部)。フッタ内には著作権表記,その他細かいリンクが入っている
図3●ITproのページ構成(下部)。フッタ内には著作権表記,その他細かいリンクが入っている

 ITproでは本文の下にも関連リンクが並んでいて(図3で青く本文とされている部分),ここを本文と見なすか,ナビゲーションと見なすかはやや難しいのですが,とりあえずここでは関連リンクも本文の一部と分類しておきましょう。大まかに言えば上下にヘッダとフッタがあってメイン部分を上下に挟み込み,メイン部分は左右に分割されて,本文とナビゲーションになっているという構成です。

 なおサイトのトップページに関しては本文に該当する部分がなく,ヘッドラインとジャンルへのリンクが並んでいるだけということもあります。Amazonmsnなどのトップページを見ていただくとよくわかります。この場合もページの上下にはヘッダとフッタがあります。

ワイド型ディスプレイが「多カラム化」を後押しする

 ナビゲーションはITproでは本文に対して右側に置かれていますが,必ずしも右にあるものとは限りません。左にナビゲーションというサイトもありますし,本文を挟んで左右にナビゲーションというサイトもあります。ヘッダとフッタに挟まれている部分の横分割の数によって「2カラム」「3カラム」のような呼び方をします(図4図5)。赤い部分がナビゲーション,青い部分が本文です。ITproは「右ナビゲーションの2カラム」と表現できます。

図4●2カラムの例。本文とナビゲーションが左右逆になっていることもある
図4●2カラムの例。本文とナビゲーションが左右逆になっていることもある

図5●3カラムの例。この図のようにナビゲーションで本文を挟むケースのほかに左右どちらかにナビゲーションが並ぶ構成もある
図5●3カラムの例。この図のようにナビゲーションで本文を挟むケースのほかに左右どちらかにナビゲーションが並ぶ構成もある

 現在はITproのような2カラムが大多数を占めますが,3カラムのサイトも増加傾向で,サイトによっては4カラム(本文と本文左右に三つのナビ)という形態も存在しています。本文の横幅を縮めていくことで,カラムを増やしてもある程度までは横幅の増加を抑えられますが,記事の読みやすさを考えると狭くするのにも限界がありますから,どうしてもカラム数が増えればページの横幅は伸びていきます。

 それでも多カラムが増加傾向にあるのには理由があります。ディスプレイ環境の変化ですね。ご存じの通り,昨今はワイド型のPC用液晶ディスプレイが普及しつつあります。プログラマのようにたくさんのウィンドウを開いて並行作業を行う人は,他のウィンドウをつついて切り替えやすくするために,ブラウザを使いやすい大きさで開くことがほとんどです。

 しかし,あまりPCに詳しくない一般ユーザーは全画面でブラウズする傾向が強く,ワイド型液晶を使用すると大きく横長になります。すると多くのサイトでは左右に変な余白が発生して間の抜けたスカスカ感がでます。そこでページ提供者としては,このスカスカの空間の有効利用を考えるようになり,横へ横へとカラムを増やしてページを横長対応にしていこうという意識が働くわけです。

 かといって閲覧者全員がワイド液晶であるというほど普及しているわけではありません。そのため4カラムまでいってしまったサイトでは,ワイド液晶ではない閲覧者にはどうしても横スクロールが発生することになります。Windowsに限らずPCの操作環境として横スクロールというのは操作が面倒なものです。これは,やたらと横に長いExcelのシートを仕事で見なくてはならないときに多くの人が痛感します。

 縦スクロールはマウスのホイール機能で随分と楽になりましたが,横スクロールにまで対応するマウスは多くはありません。スクロールバーでの操作が主になりますね。しかしスクロールバーはぴたっと自分が望むところに止めるのが難しいことも思い出してください。今後はワイド画面におけるページデザインのあり方というものもデザイナの力量として問われていくことになるでしょう。ワイド系と旧来のVGA系の混在する現在はWebデザインも混迷期にあるといえます。

この先は会員の登録が必要です。今なら有料会員(月額プラン)は12月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら