レイアウトサンプル

サイトは見る人の環境によって、印象が変わります。一般的なレイアウトを例に、それぞれの特徴をまとめてみます。
幅固定・中央寄せ
横幅を「700ピクセル(px)」などと固定し、中央にレイアウトします。
メリット
どんな画面の大きさでも偏った印象はありません。現在よく見る形なので、ボタンの配置なども予測しやすく迷わないと思います。
デメリット
特に見あたりません。
レイアウト例:
- Yahoo! JAPAN http://www.yahoo.co.jp/
- アップル http://www.apple.com/jp/
幅固定・左寄せ
横幅を「700ピクセル(px)」などと固定し、左側にレイアウトします。
メリット
ボタンの配置などを固定できるため、堅い印象を出したい場合や機能を重視する場合などに有効です。
デメリット
最近の横に広いワイドディスプレイでは、右側に大きくスペースができます。
レイアウト例:
リキッド(横幅可変)
ウィンドウの幅に対して「80%」などという指定をします。そのため見ているブラウザの幅によってレイアウトが変わります。「100%」でなければ、左寄せか中央寄せかの選択肢もあります。
メリット
コンテンツ(特にテキスト)が多い場合は有効なレイアウトです。
デメリット
コンテンツの分量によりレイアウトが変わるため、一部のページでとても偏ったデザインになる可能性があります。
レイアウト例:
- アサヒ・コム http://www.asahi.com/
- Amazon http://www.amazon.co.jp/
画面中央
横だけでなく、縦位置についても中央寄せにしたレイアウトがあります。どのページも同様の見え方になるため、サイト内の統一感を出すことができます。Flashだけのサイトでは、このレイアウトをよく見かけます。
各ページのボリュームに制限があり、原稿作成や設計の段階で若干多く工数を割きます。
フレームについて
フレーム(画面を分割し複数のページを同時に表示する機能)は、新しいHTMLのルール(XHTML1.0以降)では「非推奨」とされています。便利な点もありますが、SEO的に極端に不利だったり、レイアウトがとても制限されるため、あまりお勧めできません。