要約：ウェブデザインでは固定か可変かなどというレイアウト上の議論があるようですが、常にユーザの環境に合わせて最適なレイアウト/デザインを提供するのがベストではないでしょうか
ウェブデザインにおけるページのレイアウトで、コンテンツ部分の幅をピクセル単位で固定するかあるいは相対値（%等）で可変にするかで議論があるようです。最近は、閲覧者のフォントサイズも考慮に入れて、文字数（em等）で可変にするというエラスティック・レイアウトというのがあるようです。まとめてみると、以下のように整理できそうです。
| レイアウト名 | 固定レイアウト (Fixed Layout) |
可変レイアウト (Liquid/Fluid/Flexible Layout) |
弾力的レイアウト (Elastic Layout) |
|---|---|---|---|
| 定義 | コンテンツの横幅がピクセル値で固定されたレイアウト | コンテンツの横幅が%値で決められ、読者のブラウザ幅によってコンテンツ幅が変化するレイアウト | コンテンツの横幅が文字サイズ（em）で決められ、読者の文字サイズ設定によってコンテンツ幅が変化するレイアウト |
| サンプル画像 |  |
 |
 |
| サンプルCSSコード |
#container{
width: 800px;
}
|
#container{
width: 80%;
}
|
#container{
width: 50em;
min-width: 45em;
max-width: 60em;
}
|
| メリット | 横幅が閲覧者のブラウザ幅に依存しないので、大幅にデザインが崩れることがない | 横幅が閲覧者のブラウザ幅に柔軟に変化するので、固定レイアウトに比べるとより多くの環境で読みやすくなる |
|
| デメリット |
|
|
|
要するに、どれも一長一短なわけです。ちなみにエラスティックレイアウトの前者の問題についてはElastic layout – wrong term? > AlastairCで解決法が示されていますし、2xupさんは可変レイアウトにエラスティックレイアウトの手法を織り交ぜて、両者のいいとこ取りをしているようです。
過去の私案
で、私はどうしたか。基本は可変レイアウトベースですが、以下のような工夫を加えています。
- 最小・最大文字数を設定することで閲覧者のブラウザ幅や文字サイズによって極端に読みづらくなるケースを回避した
- 横幅に応じて自動的に段組をくむようにして、閲覧者のブラウザスペースを有効活用するようにした（現在は中止しています）
- ユーザが表示部分を微調整できるように、スライダーで動的に1行の文字数と文字サイズを変更できるようにした
これが当時の解決策でした。でも、本当にこれでいいのかなとは思っていたのですよね。
先日、読者の方とチャットした時に指摘してもらったんですが、まず2点目については幅に応じて段組するというのは読みやすいとは限らないということです。例えばブラウザ幅が広いと2段組、3段組になったりするわけですが、これは現在のウェブページが上から下への一方的な視線移動をするように設計されている中で、上下移動を何回も繰り返すことととなってしまい、手間が増えるのではないかと言うことです。
一方で、段組をせずに最大文字数を設定しておくと、ブラウザ幅が広い場合に余白が大きく出てしまって、画面に大きく無駄な領域が出来てしまいます。もちろん空の領域がないほどいいわけではありませんが、なにか有効活用できないかなとは思いますよね。
そして3点目については、まず私が懸念していたこととして「初めてこれを見た人はこれが何か理解できるだろうか」ということと「果たしてユーザはこれを使っているのか」ということがありました。この辺はユーザテストもしていないので、かなり不安を持っていたところです（ウェブデザインの基本はPDCAサイクルによる改善ですから）。加えて、読者さんには「カスタマイズパネルが邪魔である」という指摘もいただきました。
しかし、これら以前のそもそもの問題として「ユーザによる微調整が必要なのか」という問題もあるのです。つまり、そもそもこういった作業は、ブラウザ側がやるべきことであって、サイト側がやることではないと。なので、私は将来的にはこうした微調整バーは撤廃しようと考えています。
考え中の私案
読者さんとのやりとりの中で考えた結果、現在よりもよりよいデザインをということで考えているのは、閲覧者のブラウザ環境（横幅や文字サイズ）を取得して、自動的にその環境に沿って全ての人にベストとはいかないけど1 なるべく多くの人にベストである環境を提供するレイアウトです。一言で言うと最適化レイアウト（Optimized Layout）でしょうか。
幸いなことに、Javascriptを使用すれば横幅も、文字サイズも取得できるようです2 。
具体的には可変レイアウトをベースにし、最小・最大文字数を設定することで一定の環境に対応しつつ、そのような技術で閲覧者環境を取得して、自動調整を進めていくことでデザインの柔軟性を高めていこうと思っています。もっとケースに分解すると以下のような感じです。
- 閲覧者のブラウザ幅が狭い場合（600px程度）
- 文字サイズをやや小さめに設定することで、1行の読みやすい文字数を確保する（もちろん、閲覧者のブラウザで文字サイズが切り替えられるようにしておく）
- 閲覧者のブラウザ幅が通常程度の場合（900px程度）
- 特に自動調整無し
- 閲覧者のブラウザ幅が広い場合（1200px程度）
-
- 文字サイズを大きめに設定することで、1行の読みやすい文字数を確保する
- サイドバーの領域をやや広めに取る
- 閲覧者のブラウザ幅が広すぎる場合（2000px程度）
-
- 文字サイズを大きめに設定することで、1行の読みやすい文字数を確保する。
- サイドバーの領域をやや広めに取る
- 視線の上下移動を伴わない範囲で段組を組む
最初に手間をかけるのは少し大変かもしれませんが、一度WordPressのテーマなどのようにテンプレートにしてしまえば、そのテーマの利用者は手間をかけることなく利用者に読みやすい環境を提供できるので、問題無いと思います。
ちなみにFirefox 3ではwidthプロパティが追加されるようで、より柔軟なレイアウトが可能になりそうです。
これからは今の最適幅は何ピクセルかなどという話ではなく、どんな解像度でも快適にご覧頂けますといったような解像度非依存デザインの考え方を基本・前提としてウェブデザインを進めていきたいと思います。
調査の時に見つけたページ
- 弱視の方などアクセシビリティ上、配慮すべき方もいらっしゃると思うので[戻る]
- 必然的にJavascriptに依存することになりますが、当然ながらJavascriptを利用しなくても一定の環境をサポートできるようにしておかないといけませんね[戻る]
Popularity: 4% [?]
- キーワード：
サイト内
サイト外
読者のコメント
3件