固定幅レイアウト vs. リキッドレイアウトその2

固定幅レイアウト vs. リキッドレイアウトその2in work

date:2009.01.30 posted by:sakuma

前回からの続きです。
はっきりいって前回の話は導入部であり、今回が本番ですw

どうやら前回取り上げたページからの議論が白熱してきたらしく、この事について言及しているブログが増えてきています。以下の記事が関連リンクなどをまとめてくれていますので、興味のある方は参考にされてみてはどうでしょうか。

・ブログで小説！「web屋サンが主張するリキッドレイアウト」なんてどうでもいい彼女のための最初の１ページ

最初に固定幅レイアウトのトレンドを説明させていただきます。

Webのデザイン論が確立されてきた頃、「サイトの横幅は最大800pxに抑えるべし」というのが黄金律のように言われていました。これは当時の一般的なCRTモニターの解像度が横幅800～1200pxだったことに起因します。要は、横幅800px以上のサイトをデザインしてしまうと、モニター最大幅が800pxの環境でページを見た時に、いくらブラウザ画面を広げても確実に見切れる部分が出てしまうということです。自分がWebデザインを始めた頃にはもう流布していた話なので、少なくとも8年位前です。

時は変わって現在、その黄金律はいささか効力を失ったのか、横幅800pxを越えるサイトが頻繁にデザインされるようになっています。特に、最大手検索ポータルであるYahoo!が採用した「950px」という横幅はデファクトスタンダードになっています。

高解像度の液晶モニターやGPUが普及し、ユーザーの閲覧環境が改善されている現在では、横幅800pxという縛りはWebの提供側にとっては足枷になってきている、ということです。

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

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

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

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

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

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

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

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

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

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

しからば。

"UI"で関連する記事一覧 (シーケンスで表示する)
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました！ in work
•2009.05.27-もっとがほしいDSN in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウトその2 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウトその1 in work
•2009.01.23-WEBユーザビリティを学び始めて最初に抱く疑問 in work
•2009.01.15-webユーザビリティの世界に入門 in work

« prev post pagetop next post »

parmalink: http://www.thedesignium.com/work/472

Relative Keyword|lab socolab UI

固定幅レイアウト vs. リキッドレイアウト その2in work

固定幅レイアウト vs. リキッドレイアウトその2in work