TheDesignium

これらのサイトは基本固定幅のレイアウトですが、文字のサイズを大きくすることでサイト全体の幅が広く、小さくすることで狭くなるようになっています。これがエラスティックレイアウトの特徴です。

固定幅やリキッドレイアウトのサイトでは、文字サイズをデフォルトのサイズから変更させてしまうと、非常に読みづらくなってしまったり、酷い時にはデザインが崩れてしまったりするものもありますが、エラスティックレイアウトではデザインの印象を変えないままで文字サイズの変更が可能です。遠視、老眼の方など文字のサイズを大きくして読まれている方も居ますので、そのような方へのユーザビリティを考慮するなら大変有用な手法です。

技術的なことを言うと、普段HTMLやCSS使用している長さの単位は「px」ですが、これを全て「em」という単位に変換する、という事をしています。CSSの中で「px」で指定されているブロックや余白、文字のサイズなどを全て「em」指定に直してやることでエラスティックレイアウトのサイトが作れます。

「em」は文字のサイズを基準に定められる数値で、そのサイトの基準文字サイズが12pxならば1em=12px、16pxならば1em=16pxとなります。ブラウザの方で文字サイズが変更されると、サイトの基準文字サイズが大きく（小さく）なるので、それに合わせて1emの数値も大きく（小さく）なります。

例えばサイトの横幅が760pxで基準文字サイズが12pxの場合、em換算に直すと760÷12＝60なので、横幅は60emです。なので「760px」となっている箇所を「60em」と置き換えます。この作業を全てのプロパティに対して行なえば、エラスティックレイアウトの完成です（本当はいろいろ細かいことがあるのですが・・・）。

ただし、画像やFlashなどは文字サイズの変更についてきてくれないので、そのあたりはレイアウトを崩さないための考慮が必要になります。

この手法は最近（昨年あたりから）になって知られるようになった新しい技術なのですが、まだまだ馴染みがないため、特に日本ではこの手法を採っているサイトは少ないようです。

しかし、それもさもありなんというか、エラスティックレイアウトのサイトを構築する際には、デザインをかなりシンプルなものにしておかないと、文字サイズの変更時のデザインの整合性を保つのは難いです。特に背景に画像を貼っている場合などは、伸縮される場合のことを考慮しなければならないので、デザインの制約はかなり大きいです。正直商業レベルのサイトでこの方法を採用したサイトを作れるデザイナーは、日本国内で見てもかなり少ないのではないかと思います。3桁居ないかも知れません。

バリバリにデザインされたサイトをエラスティックレイアウトで作るのはかなり無理があるのですが、逆に言うと、ブログサイトなどのシンプルで、かつ文字情報の多いサイトで使うのは適切でしょう。個人でサイトを作るのを趣味とされている方は試してみてはいかがでしょうか。

・・・ただ、最近のブラウザ（IE7やFirefox、Opera）は、もう基本機能としてズーム機能が付いているので、拡大縮小したいならそちらを使えばいいんじゃない？という事情もあったりしますが・・・

デザイニウムの仕事では、日本料理技術専門学校のサイトで一部エラスティックレイアウトを取り入れています。ただ、完全にエラスティックではないので、やっぱり一部表示がおかしくなったりします。試す際はお手柔らかにお願いします・・・

それを裏付ける興味深い資料が以下の記事にて言及されています。

・「サイトの横幅」再論：950px時代のウェブデザイン［絵文録ことのは］

これは、とある個人サイトを訪れた人のブラウザの表示幅がどれくらいであったかの統計です。文中には、「800pxより画面が広い人：90.0% 」、「950pxより画面が広い人：75.1%」とあり、横幅800pxのサイトをそのまま見切れずに見れる人は全体の9割、横幅950pxの場合は4分の3である、とのこと。これが看過できる数字かどうか、というのはサイトの運営者によると思いますが、指針としては十分使える数字です。事実、次の「1024pxより画面が広い人」では44.9%と数字が一気に下がり過半数を切っていますので、やはり950px辺りが一つの基準点であると言えるでしょう。

固定幅デザインが採用される一番の理由は、提供側の意図した情報やデザインが、意図した形で確実に提示できるからです。言い換えれば、それが一番無難な方法なわけです。もちろん、その意図したものがリキッドレイアウトでも表現できるならその方が良いですが、トップページから下の全てのページにリキッドレイアウトを適用するためには、製作前の情報設計の段階からリキッドレイアウトである前提を組み込んでおくことが必要になります。
つまりは、デザイナーやコーダーの判断で、「あ、ここはリキッドで行けんじゃん。じゃあリキッドにするか。」というわけには簡単にはいかないということです（ただこれは商業サイトの製作の話なので、個人サイトの場合はこの限りでもないです）。

そして次に、製作にかかるコストの問題です。同様のデザインで固定幅のサイトとリキッドレイアウトのサイトを製作した場合、一般的に後者の方がコストがかかります。ページの幅が変わっても表示の整合性を保てるデザインを作らなければならないため、デザイン上の制約が出てくることになります。デザイナーは、そのデザインがリキッドでも実現できるかという事を常に念頭においてデザインを作成する必要があり（デザインとコーディングの両方の知識が必要）、それをクリアした上で高いデザイン性を保つ、というのはなかなか骨な事なのです。特にデザインとコーディングを分業で行なっている場合には、デザイナーとコーダーとの間でそういった仕様的な摺り合わせを密に行っておく必要があり、デザイン以外の部分でも固定幅サイトの作成より多くの手間＝コストを要求することになってきます。

自分は上記の理由から、商業のサイトにリキッドレイアウトが取られるケースが少ないのだと考えます。リキッドレイアウトに意味が無いという訳ではなく、リキッドレイアウトである必然性が求められなければ、サイトは固定幅で作られることが大半だということです。前回採り上げたAmazonのように、リキッドレイアウトと情報デザインが深いレベルで結びついているサイトなら、手間をかけてリキッドレイアウトを採用する意味が十分にあります。ただ、それをするためにはサイトの製作者だけではなく、運営側もその意義を分かった上（もしくは理解してもらった上）でないと、製作までこぎつけることは難しいかなと思います。もちろん手間をかけた分はお金もかかるわけで・・・

最後に個人的な意見を述べるならば、どっちでもいいじゃんてことです。固定幅かリキッドか、なんて議論よりはデザインの方が重要だし、もっと言うならデザインよりコンテンツの方が重要だと思います。コンテンツさえ優れていれば、デザインが多少酷くても人は見に来るし、人が集まれば口コミでどんどん広まってくれます。アクセスを集めることがWebの本懐ですから。
リキッドレイアウトなんて小手先の技術だし、そういう事に拘り過ぎるとコーダーの自己満足になりかねない話で。サイト作って終わりじゃなくて、その先がちゃんと見えてるかどうかです。そこを見据えた上で「リキッドしかねえ！」と判断したなら「リキッドで行け！」という。

というわけで最後にぶっちゃけてしまいましたが、この考察は続けるかもしれないしこれで終わりかもしれないです。議論がどっちに白熱していくか、ですね。

次回は固定幅、リキッドレイアウトに続くもう一つの可能性である「エラスティックレイアウト」について触れてみようかと思います。

ちなみに自分のカテゴリーの命名者は自分じゃないですから。社長の案ですから。そこんところよろしくお願いします。

しからば。

固定幅レイアウトのサイトは、サイトの本体ブロックが中央寄せないし左寄せになっていることが多いですが、ブラウザの表示領域がサイトの横幅よりも広い場合、サイトの左右に大きくスペースが開くことになります。楽天やAmazonのような物販ポータルサイトの、特にトップページの場合、出来る限り画面内に情報を詰め込みたいので、このデッドスペースを有効活用したいわけです。

そして逆にページの幅よりもブラウザの表示幅が狭い場合、忌まわしい横スクロールバーが出現します。縦のスクロールバーはマウスのホイールで比較的楽に上下させることができますが、横のスクロールはスクロール操作に対応していないマウスが多いため、わざわざドラッグしてバーを引っ張ってやらないと画面全体を見ることが出来ません。これはブラウジングをする上で非常に大きなストレスになりますので、Web製作者としてはこの事態が発生するは出来る限り避けたいのです。

この問題に関しても、リキッドレイアウトなら表示領域に合わせてページ幅を調節するため、横スクロールバーが発生する事態を最小限に抑えられます（ただし限度はあります）。

これははてなブックマークのトップページですが、これだけブラウザの幅を狭めても横スクロールバーは表示されません。このページはかなり良くできたリキッドレイアウトです。

ここまでで見ると、リキッドレイアウトとは良い事尽くめじゃないかという印象ですが、これには弊害もあったりします。そして固定幅レイアウトにもやはり利点があります。そのあたりについては次回の記事で詳しく説明させていただきます。

To Be Continued …