Fixed design or liquid design ?

実は、目下 新しい個人サイトを構築中なんですが、ちょっとした悩みが..。

相対レイアウト（liquid design）にすべきか、固定レイアウト（fixed design）にすべきかで悩んでいます。XHTML ソースの方は、どちらを採用しても中身は変わらないんですが（というか、変わらないように書くべきなんですが）、問題は CSS や画像素材制作です。（僕の場合、実際に面倒なのは後者だったりします。お恥ずかしい話で、単に得意不得意の問題なんですけど。）

相対レイアウトと固定レイアウトの単純比較

比較項目		相対レイアウト (liquid design)	絶対レイアウト (fixed design)
コーディング難易度		高: 常に background-repeat を意識した素材制作をする必要がある。max-width や min-width への配慮も必要。	低: ボックスサイズや画像素材の縦横サイズを決めうちして制作できる。ボックスモデル（margin , padding, width 絡み）にさえ注意すれば、大きな問題はない。
大画面での見やすさ	総評	○: 表示領域を画面の解像度にあわせて伸縮できるので、見やすく操作しやすい。	×: 基本的なレイアウトは保持できる。
	問題点	行が横に伸びすぎて読みづらくなる。（しかもそのままでは文字の大きさが小さいまま不変。）	画面の解像度が大きくなるほど、テキストやボタンの見た目の大きさが相対的に小さくなり、操作の快適さが損なわれる。（→フィッツの法則）
	回避策	一行あたりの文字数の上限を max-width を、em で指定して制限する。 文字の大きさを JavaScript などを活用して変更できるようにする。（画面サイズを取得して、一定値を超えるとフォントサイズの大きい CSS ファイルを読込むようにするか、ユーザーに任意の文字の大きさを選択できるような UI を提供しても良い。）	Opera と IE 7 については、画面に表示されているあらゆるものをそのまま拡大／縮小するズーム機能が実装されている。 横幅やフォントサイズの異なる複数のスタイルを用意して、CSS の切り替えなどで対応する。ただしその分、コストはかさむ。

フィッツの法則（Fitts' law。Dcm 離れた Scm の目標に移動する場合の時間 T を求める方程式。）から言えば、目標が小さく遠いほど、目標にたどり着くまでの時間も長くなります。つまり、高解像度の画面ほど操作性上 不利になるわけで、この意味では相対レイアウト（liquid design）の方がユーザビリティ上は有利になります。ただ、固定レイアウト（fixed design）と比べて制作の手間が著しくかかるため、正直、自分でも及び腰になっています。

ところが、先日のエントリー（リキッドレイアウトサイト事例集）でも言及したように、このところ高解像度ディスプレイのシェアが無視できなくなりつつあります。A List Apart が 1024×768 サイズになったことは有名ですが、海外サイトでも明らかにこうした高解像度ディスプレイの存在を意識してきています。

悩むポイントになっているのは、Opera に続き、IE 7（現在 beta 2）が実装し出したズーム機能です。これがあれば、固定レイアウトであってもメンテナンスコストをまったくかけることなく、外観を崩さずにページをテキストや画像ごと伸縮できるんですよね。僕は基本的には Firefox 派なんですが、もうはっきり言って、大きなディスプレイを使ってる方は Opera を使われることをオススメします。クロスプラットホームで動作するし、CSS 2.1 クラスなら IE はもちろん、Firefox と比べても実装度が良いですし、ホントに最近、つくづく良いブラウザだと思うようになってきました。

さて、どうしたものか...。とりあえず、Firefox での実装予定がないかどうか、当たってみようかな。

テクノラティプロフィール