田村仁研究室　日本工業大学創造システム工学科

メニュー

Webページの画面レイアウトは，本来デザイン面や機能面だけを考慮して行えばよかった．しかし，現在はSEO対策によってレイアウト方法に対して事実上の制約条件が付けられている．そのため，まずSEO対策について説明しよう．

SEO対策とは

SEO(Search Engine Optimization: サーチエンジン最適化)対策とは，作成したWebページがGoogleやYahooなどの検索エンジンでの検索結果でより上位に表示されやすくなるように調整をはかる対策のことをいう．

現在のインターネット上のWebページは，最初からURLを知らないページにアクセスする場合，検索エンジンで検索されることによってアクセスされることがほとんどである．せっかく自分が作成したWebページを，より多くの人に見てもらうためには，そのWebページで伝えたい内容のキーワードで，他のページよりも検索結果の上位に表示されないといけないことになる．特に，商業用のページの場合には検索結果の順位は死活問題とさえ言われている．

サーチエンジンは，世界中から収集したWebページの情報を整理して格納しておき，ユーザが入力した検索キーワードに対して，各ページの関連度や重要度を計算して各ページの優先順位を決定し，その順番にリスト表示する仕組になっている．各ページの優先順位を決定するアルゴリズムによって，ユーザが探しているページを簡単に見つけ出せるかどうかが決まることになるため，GoogleやYahooなど各社は優秀なアルゴリズムを開発するために必死に競争している．このアルゴリズムは，当然のことながら各社の企業秘密とされ，公開されていない．しかし，特定のキーワードと実際の表示順位の関係から，いろいろ推測されている．

SEO対策の例

優先順位決定アルゴリズムの推測結果や公開されている情報から，検索順位をあげるために一般的に行われている対策は次のようなものである．

フレーム分割は使用しない．(文書情報を検索エンジンが取得しにくいため)
H1など見出しをきちんと付ける．(ちゃんと文章の構造が分かるように書式を設定する)
ヘッダなどにちゃんと必要情報を載せる．
重要な情報は，ページの最初に載せる．(その情報を検索されやすくするため)

画面レイアウトのテクニック

ひとつのWebページは，メインとなる内容だけでなく，メニュー・ランキング・更新リスト・ページのヘッダー部分やフッター部分など複数のコンテンツから構成されるはずである．これらを画面上にどのように配置するかを考えることを画面のレイアウトと呼ぶ．自分の頭でデザインした画面のレイアウトを，実際にWebページに適用するためには，次のテクニックのうち，どれかを利用することになる．

SSIをのぞいた各機能はすでに説明したものである．SSIは，Server Side Includeの略で，専用のコマンドをHTMLページ中に埋め込んでおくと，Webサーバがページデータを送信する段階で，埋め込まれた場所に別ページの内容に挿入した形で発信してくれる．ただし，Webサーバ側がこの機能に対応するように設定されている必要があり，どのサーバでも自由に利用できる機能ではない．

フレーム分割によるレイアウト方法

本来，素直に画面レイアウトを実現する機能としてフレーム分割機能がある．そもそもどのように画面をフレーム分割するか決定し，FRAMEタグで画面を分割，各分割画面にメニューやランキングなどの各コンテンツ用のページを表示すればよい．この方法が作成者から見た場合一番簡単でしかも便利である．例えば，フッター部分に著作権表示や連絡先を表示したいとする．サイト内の全ページに同じフッターを表示したい時，フレーム分割を利用しているならば簡単である．フッター用のページをひとつ用意して，画面下部のフレームに常にそれを表示すればよい．フッターの内容を変更する時には，フッター用のページだけを変更すればよい．

ただし，印刷やブックマーク時などに分割ページではうまく機能しないなど利用者から見た場合に不便であり，さらにGoogleやYahooなどの検索エンジンがフレーム分割されたWebページを苦手としているため，SEO対策の観点からも最悪とされる．現在の商用サイトを見ればわかるが，フレーム分割を使用しているサイトは，ただのひとつも存在しない．

テーブル機能によるレイアウト

強引にページ全体を表とみなして，画面をセルとして分割してしまい，各セルにコンテンツを記述する方式である．強引であるが，デザイナーの思うどおりに細かい調整が可能であるため，一時期(90年代後半)よく利用されていた．しかし，テーブル機能を利用しているため，ページ中のいたるところにタグが頻繁に使用され，HTMLファイルを難読なものにする欠点がある．

あるセルにはインラインフレーム機能を用いて別ページの内容を埋め込むこともでき，フレーム分割と同様に合理的なページ更新も可能である．ただし，SEOを考慮した場合には，インラインフレーム機能を用いている場合かなり不利となる．このため，無駄を承知でヘッダーやフッターのような同じ内容を，全てのページにコピーすることが行われていた．

このテーブル機能を用いたレイアウトは，一時期(90年代後半)よく利用されていたが，各ブラウザがスタイルシート機能に対応するようになると，次第に廃れていった．

CSSを用いたレイアウト

現在の主流のレイアウト方式である．CSS機能を利用して，画面レイアウトを行う．例えば次のように画面を4分割するためにはdivタグを用いてページを4分割する．

<body>
<div id="page">
  <div id="header">
    ここがヘッダー
  </div>
  <div id="main">
    ここがコンテンツ
  </div>
  <div id="menu">
    ここがメニュー
  </div>
  <div id="footer">
    ここがフッター
  </div>
</div>

外部CSSファイル中では次のように指定すればよい．ここでのポイントは「float:」指定により，mainとmenuを左と右に寄せることで画面分割を行っている．

#page{width:750px;text-align:left;margin:0px auto;}
#header{width:750px;margin:0px 0px 15px 0px;}
#main{float:left;width:590px;}
#menu{float:right;width:150px;padding:0px 0px 0px 10px;}
#footer{clear:both;width:750px;margin:15px 0px 15px 0px;}

これ以外にも，CSS機能を使って様々なレイアウトやデザインを実現するためのテクニックが広く知られている．自分で調べてみること．

SSIの利用

CSSを利用した画面分割などのレイアウト方式では，例えばメニュー部分などの中身は，全ページに同じものをコピーしないとならない．これでは修正の手間が大変である．(多くの商用サイトは，その手間暇をかけてもSEO対策による効果を欲しがっているともいえる．)これを解決するのに，SSIを利用する手がある．SSIは，サーバ側であるページに別のファイル内容などを取り込むことができる．例えば次のようなコマンドがある．

<!--#include file="メニューファイル名" -->

このようなコマンドをすべてのHTMLファイルのメニュー部分に対応する場所に埋め込んでおき，実際のメニュー内容のHTML記述を別のメニューファイルに書き込んでおけばよい．これだけで，メニュー内容を全ページに埋め込むことができる．さらに，フレーム機能を用いたときと同様に，メニューファイルを書き換えるだけで，全ページのメニュー内容も更新できることになる．

ただし，Webサーバ側がSSIに対応してくれないと利用できない．残念ながら大学のサーバは未対応である．

詳しくはとほほのSSI入門などのページを参照すること．

また，SSIではないが，ブログやWiki(後述)などのWebアプリケーションを利用したページ作成が最近の一般利用者にとっての主流となっている．これらは，アプリケーション側でSSIと同様な機能を持ち，利用者側は自分の希望するブラウザ上でレイアウトを選択するだけで，自分専用の画面構成のページを作成できるものも多い．

インターネット利用技術演習

2009年度