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

 
date:2009.01.30   posted by:sakuma
 
adobe 6 premium for mac

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

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

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

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

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の本懐ですから。
リキッドレイアウトなんて小手先の技術だし、そういう事に拘り過ぎるとコーダーの自己満足になりかねない話で。サイト作って終わりじゃなくて、その先がちゃんと見えてるかどうかです。そこを見据えた上で「リキッドしかねえ!」と判断したなら「リキッドで行け!」という。

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

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

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

しからば。

 
"lab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
 
 
"socolab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.17-位置情報サービスに必要な技術まとめ in work
•2010.05.17-Message Bottleをリリースしました in news
•2010.05.13-おっぱいW-cupをリリースしました in news
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.05.05-メッセージボトル in services
•2010.05.05-おっぱいワールドカップ in services
•2010.05.05-DJ Turndroid in services
•2010.05.05-勇者マイミク in services
•2010.05.05-くままり。 in services
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.04.01-Androidアプリ「DJ Turndroid」をリリース! in news
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.21-mixiアプリの登録手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.14-Googleサーバー活用法[ファイル置き場] in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-ブログ向け音楽プレイヤー「DSN Player」 in news
•2009.05.27-もっとがほしいDSN in work
•2009.03.20-会津しこんがasahi.comの動画に in news
•2009.03.02-みんなが大好きjQuery in work
•2009.02.28-居酒屋“会津しこん”がasahi.comで紹介されました in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
•2009.01.17-会津しこんで取材 in work
•2008.12.22-地域SNSから生まれた居酒屋「会津しこん」 in news
 
 
"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
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|lab socolab UI