blog home
- エントリーの表示を切り替える
- 月刊インタラ塾に行ってきたLink
- センサー講座 Lec.002 phidgetsの購入Link
- エントリーメニュー
- この記事のコメント一覧へScroll
固定幅レイアウト vs. リキッドレイアウト その2
2009.01.30 - スキル
前回からの続きです。
はっきりいって前回の話は導入部であり、今回が本番です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の本懐ですから。
リキッドレイアウトなんて小手先の技術だし、そういう事に拘り過ぎるとコーダーの自己満足になりかねない話で。サイト作って終わりじゃなくて、その先がちゃんと見えてるかどうかです。そこを見据えた上で「リキッドしかねえ！」と判断したなら「リキッドで行け！」という。
というわけで最後にぶっちゃけてしまいましたが、この考察は続けるかもしれないしこれで終わりかもしれないです。議論がどっちに白熱していくか、ですね。
次回は固定幅、リキッドレイアウトに続くもう一つの可能性である「エラスティックレイアウト」について触れてみようかと思います。
ちなみに自分のカテゴリーの命名者は自分じゃないですから。社長の案ですから。そこんところよろしくお願いします。
しからば。
link: http://www.thedesignium.com/blog/skill/530
TrackBack: http://www.thedesignium.com/blog/skill/530/trackback
autor: sakuma comment: 0件
tags: Webデザイン, レイアウト
この記事へのコメント一覧
コメントはありませんRSS
-
01:
-
02:
-
03:
-
04:
-
05:
-
06:
-
07:
-
08:
-
09:
-
tg:wevy(38) wevyムービー(22) イベント(20) 待ち受けFlash(16) Flash(15) Tips(11) 地域(11) ミズタニキリンのクレイジーセンサー(7) SNS(6) 会津大学(5) javascript(5) mixiアプリ(5) WordPress(5) wevy待ち受け特集(5) Webデザイン(5) wevy週間ランキング(5) アート(4) 社内教育(4) phidgets(4) 会津しこん(4) センサー講座(4) HTML/CSS(3) actionscript(3) WEBユーザビリティ(3) webアプリ(3) レイアウト(3) 地域、会津(3) GAINER(2) CSR(2) wiimote(2) Wii(2) DSN(F)シリーズ(2) mootools(2) 会津漆器(2) マルチタッチディスプレイ(2) 取材(2) ハッカソン(1) Google App Engine(1) OpenSocial(1) 福島県(1) Joomla(1) 音楽(1) AR(1) Processing(1) 会津若松(1) Movable Type(1) GAE(1) AIR(1) concept(1) 会津 データ(1) DROP BURGER(1) 地域性(1) ワークライフバランス(1) 夢(1) API(1) ドット絵(1) 映画(1) DSN Player(1) 新人研修(1)
- 2010.1.20:
- 2009.11.26:mixiアプリモバイル作成前に見ておくべき10のまとめLink
ミズタニキリン：
下記(A)、(B)より80～90%の機種はFlash lite 2.0に対応しているという結果になり「mixiのユーザー層にFlash lite... - 2009.11.24:
- 2009.10.10:
- 2009.10.6:
- 2009.12.10:センサー講座 Spe.001 Wiimote WhiteboardLink
お金と知識のない学生が努力と根性で作ったもの
from アナリハ
この前の１０月・１１月に定期的にプレゼンをする事になった。... - 2009.10.27:
- 2009.9.4:越後妻有アートトリエンナーレ 大地の芸術祭2009（前編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ 大地の芸術祭2009（後編）
越後妻有アートトリエンナーレ... - 2009.9.4:越後妻有アートトリエンナーレ 大地の芸術祭2009（後編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ 大地の芸術祭2009（前編）
越後妻有アートトリエンナーレ... - 2009.6.25:若手向けの勉強会企画してみました。Link
[勉強会]みちのくIT会議ってのが福島であったようだ。
from 笑う角でずっこける。
まぁ、タイトルでまとまってしまったけど…。 初めて聞く名前だったので情報を集めてみた。...