レイアウトサンプル

同じ大きさのブタ

サイトは見る人の環境によって、印象が変わります。一般的なレイアウトを例に、それぞれの特徴をまとめてみます。

幅固定・中央寄せ

幅固定・中央寄せ横幅を「700ピクセル(px)」などと固定し、中央にレイアウトします。

メリット
どんな画面の大きさでも偏った印象はありません。現在よく見る形なので、ボタンの配置なども予測しやすく迷わないと思います。

デメリット
特に見あたりません。

レイアウト例:

幅固定・左寄せ

幅固定・左寄せ横幅を「700ピクセル(px)」などと固定し、左側にレイアウトします。

メリット
ボタンの配置などを固定できるため、堅い印象を出したい場合や機能を重視する場合などに有効です。

デメリット
最近の横に広いワイドディスプレイでは、右側に大きくスペースができます。

レイアウト例:

リキッド(横幅可変)

リキッドウィンドウの幅に対して「80%」などという指定をします。そのため見ているブラウザの幅によってレイアウトが変わります。「100%」でなければ、左寄せか中央寄せかの選択肢もあります。

メリット
コンテンツ(特にテキスト)が多い場合は有効なレイアウトです。

デメリット
コンテンツの分量によりレイアウトが変わるため、一部のページでとても偏ったデザインになる可能性があります。

レイアウト例:

画面中央

画面中央横だけでなく、縦位置についても中央寄せにしたレイアウトがあります。どのページも同様の見え方になるため、サイト内の統一感を出すことができます。Flashだけのサイトでは、このレイアウトをよく見かけます。
各ページのボリュームに制限があり、原稿作成や設計の段階で若干多く工数を割きます。

フレームについて

フレーム(画面を分割し複数のページを同時に表示する機能)は、新しいHTMLのルール(XHTML1.0以降)では「非推奨」とされています。便利な点もありますが、SEO的に極端に不利だったり、レイアウトがとても制限されるため、あまりお勧めできません。