gerenuk.crazyphoto.org/

Smashing Magazine では、ウェブデザインのレイアウト問題に関する記事が掲載されています。結論から言うと、「ウェブデザインにおけるレイアウトのただ1つの答え」などという都合のいいものは存在しません。
ただ、各レイアウトの特徴をもう一度整理し、現在のディスプレイ解像度やブラウザのトレンドを分析することで最適解に近づくことは可能なはずです。

よく考えると自分も、「特徴なんて全部ちゃんと理解してる」と口では言いながら、安易に固定レイアウトを選択し続けている節があるので、今一度各レイアウトの特徴を見直して状況に応じて使い分けられるようになりたいと考えています。

また、gerenuk ではウェブデザイン（特にブログデザイン）について独自の考察記事を書いています。合わせてご覧いただければ幸いです。

• 2009年版・人気ブログ型サイトのデザイン 第2回 レイアウト編
• ブログデザインで気をつけている10個の細かい要素
• 人気ブログ型サイトのデザインと統計

1. 固定と可変レイアウトの違い

固定レイアウト（Fixed Website Layouts）

固定レイアウトとは、コンテンツを固定された横幅で囲ったレイアウトのことです。^[1]
重要な点は、囲う要素（container や wrapper など）が動かないところにあります。
つまり、ディスプレイの解像度がどうなっていようと、見た目は同じになるはずです。

可変レイアウト（Fluid Website Layouts）

可変レイアウトは、訪問者のディスプレイ解像度を基準にして、パーセンテージでコンテンツの横幅を決定するレイアウトのことです。^[2]
また、リキッド・レイアウトとも言われています。

デザイナーの中には余白部分（margin）に固定数値を入れる人もいますが、基本的に幅に関する数値はパーセンテージで指定します。
つまり、幅は訪問者ごとに決定されます。

2. 固定レイアウトによるウェブデザイン

多くのウェブデザイナーは、可変レイアウトよりも固定レイアウトを好みます。
固定レイアウトであれば、デザイナーの見ているものがそのまま訪問者の見ているものであると保証されているからです。
しかしながら、どちらにしても良い点と悪い点は存在します。

長所

• デザインのしやすさに関して言えば、固定レイアウトの方が簡単である。
• 全てのブラウザーで幅は同じなので、画像・入力フォーム・動画など固定幅の要素との兼ね合いに、それほど頭を悩ませなくて済む。
• ブラウザーによってはまだサポートされていない、mix-width や max-width を使う必要がない。
• 800×600px のような小さい解像度に合わせたデザインでも、大きい解像度においても十分に読みやすい。

短所

• 大きすぎる解像度においては、必要以上に余白を作ってしまう可能性がある（これでは黄金比や三分割法などのデザイン原理を崩してしまう）
• 小さすぎる解像度においては、固定レイアウトの幅にもよるが、横方向にスクロールバーが表示されてしまう。
• シームレスなテクスチャーやパターンなどの連続した画像は、大きすぎる解像度において調節する必要が出てくる。^[3]
• ユーザビリティーにおいて評価が低くなってしまう。

3. 可変レイアウトによるウェブデザイン

デザイナーは様々な理由から可変レイアウトを避けてしまい、このレイアウトの良い点を見落としがちです。
以下は可変レイアウトによるウェブデザインの長所と短所です。

長所

• 訪問者の環境に合わせて調節されるので、ユーザーフレンドリーである。
• 余白の割合が全てのブラウザーやディスプレイ解像度において一緒であり、視覚的に有利。
• 上手くデザインできれば、横方向のスクロールバーが小さい解像度においても表示されなくなる。

短所

• たとえ制作環境ではレイアウトがきれいに表示されたとしても、訪問者の環境ではどのように表示されるのか把握しづらく、問題を見落としがち。
• 画像や動画のような固定幅のコンテンツは、異なるディスプレイ解像度で調整する必要がある。
• とてつもなく大きい解像度においては、コンテンツの量が足りなくなって過剰な余白が生まれ、美的に劣ってしまう可能性がある。

4. エラスティック・レイアウトによるウェブデザイン

エラスティック・レイアウトは、他の2つのレイアウトの特徴を合わせたような、3つ目の選択肢です。
全ての要素の単位は em で指定されます。
以下の引用文が、em とは何であるか、なぜ有用なのかを説明してくれます。

ピクセル（px）はコンピューターの画面において拡大や縮小が出来ない。
一方で em はフォントサイズから決定される。
em は訪問者の文字サイズ設定によって決まる相対的な単位である。

Patrick Griffiths, A List Apart

エラスティック・レイアウトは有用性が期待される一方で、他の2つのレイアウトと同様に長所と短所を持っています。

長所

• 正しく実装されれば、このレイアウトはとてもユーザーフレンドリーになる（訪問者の文字サイズによって、レイアウトに関する要素が大きくなったり小さくなったりする）
• 固定・可変の両レイアウトを支持するデザイナーにとっては、その両方の長所を兼ね備えているので最高のレイアウトになる。

短所

• このレイアウトはかなりの知識量が要求され、多くの訪問者に正しく表示されるように繰り返しテストする必要がある。
• 他の2つのレイアウトよりも、制作が難しい。
• レイアウトの性質ゆえに、エラスティック・レイアウトでは IE6 に対する CSS ハックが必要になる場合がある。

5. どのレイアウトが最適か？

固定レイアウトか可変レイアウトかの選択は、ウェブサイトの形態によります。
長所と短所をよく比較し、あなたのサイトに適した方を決定してください。

例えばポートフォリオ・サイトの場合、デザインのしやすさから、固定レイアウトのほうが良いでしょう。
個々の要素をデザインしやすいというだけでなく、メインとなる画像を配置しやすくなるはずです。
固定レイアウトは、ポートフォリオ以外のサイトについても、制作しやすさからデザイナーに支持されています。

完全な互換性を求めるのなら、可変レイアウトがいいでしょう。
この場合重要になるのは、大きい解像度における余白の問題ではなく、むしろ小さい解像度における問題です。
多くの訪問者を対象にするウェブサイトの場合、少ない割合の訪問者の環境に対応することも重要です。
いずれにしても、可変レイアウトを効果的に使いたいのならば、シンプルでクリーンなデザインを心がける必要があります。

どちらにしたらいいかまだ決まりませんか？
エラスティック（もしくは部分的にエラスティックな）レイアウトがまだ選択肢に残っています。
正しく使いこなせれば、2つのレイアウトの良いとこ取りが出来ます。
外枠に em を使ってエラスティック・レイアウトにし、その他の小さなレイアウトの要素にはパーセンテージや固定幅を指定するという使い方もあります。

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています．

• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? | CSS | Smashing Magazine
• Webレイアウトの選び方、ディスプレイ解像度の変遷 | エンタープライズ | マイコミジャーナル
• ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

関連記事

• 2009/06/23: 掟破りで何が悪い！　横方向にデザインされた格好良いサイト10個
• 2009/06/25: ブログをデザインする時に見て欲しい、使いやすくするための工夫10個
• 2009/06/22: つま先まで気を抜かない、フッターデザイン論
• 2009/06/13: 未来を先取りした「手動」のウェブ・インターフェイス
• 2009/06/15: 必ずモノにしたい！　ウェブデザイン向け Photoshop チュートリアル16個