2009年頃の記録:Webページの横幅(固定幅かリキッドか)の話。

2009年頃の記録として記事を書き直しつつ残しています。

Webページのリキッドというのはリキッドレイアウトのこと。「液体」という比喩どおりブラウザを表示するウインドウの幅に合わせて、レイアウトの最大幅が可変するレイアウトのことです。
固定幅というのは説明しなくともお分かりの通り、左右幅が固定のレイアウト。

さて、そのWebページの横幅ですが、Webサイトの構造設計を手がけている自分の経験で言うと、テキスト中心の情報系のサイトは、固定幅にリキッドも選択肢にいれて設計を考え、モノやサービスの情報を提供するサイトや企業情報サイト(例えば販売・予約・店舗・施設案内・会社情報等)は、ほぼ固定幅で考えていました。

なぜテキスト中心の情報系のサイトにだけ、固定幅もリキッドも検討し、それ以外は固定幅をハナから想定してるか、ですが。
テキスト中心の情報系のサイトは、マスコミ系、ニュースメディア、掲示板、ブログとか、いろいろ想像できますが「タイトル、見出し、本文、写真、問い合わせ先、出典・引用」とか、コンテンツが単純にパターン化しやすいのと、やはりテキスト中心=テキスト比率が多いのでリキッド(回り込み)に合っている場合が多いということ。

テキスト中心の情報系のサイトというのは更新度や鮮度が命ですからCMSも進み、テンプレートも単純です。

なかには、写真と説明文(商品スペックなど)がブロック単位で回り込みを利用して、横3段だったり5段だったり、広ければブロックが回り込んで段が増えたりというAmazonやdmm(ビデオレンタル)のようなやりかたもありますが、それはそれでいいんじゃないでしょうか。

逆にテキスト中心ではないサイトは、なぜ最初っから固定?
やっぱり各ページの構成要素が1パターンじゃないから、かな。企業であれば、企業概要、営業情報、支店・営業所、採用情報、アクセス・・みんな要素が変わります。リキッドにするということは、1コーナーだけするってわけにはいかないわけで、構成上リキッドが難しいページがあればそっちを優先して固定にします。
構成上リキッドより固定幅がいいだろうと思うページとは、やはりテキスト情報に乏しいとか、固定のレイアウトのほうがユーザービリティを図れるページ。

まあぶっちゃけリキッドの多い情報系は“デザインデザイン”してないので、我々制作会社が受注する件名の中では非常に少なく、結果、リキッドレイアウトの制作経験も、実は圧倒的に少なかったりします。

ただ固定幅にろリキッドにしろ、制作側が一方的に決めているというのは稀で、普通はクライアントの指定だったり会議での合議だったり。そこで出る参考数値はモニターの解像度の資料とか、Yahoo!のサイズが指針だったりするのは昔から変わりませんでした。

固定幅の場合は、比較的モニタ画面の小さいビジネスPCの解像度を考慮して、左右サイズをどうするか検討し、かつ世間のポータルと呼ばれているサイトの横幅も参考にして設計していました。

PCモニタの解像度は昔で言えば640×480ピクセル、800×600ピクセル、1024×768ピクセルと高解像度化しており、2017年の現在では13インチ程度のノートPCでも1920 x 1080ピクセルが一般化しています。

2009年頃はそのPCの解像度(横幅)が小さくとも1024ピクセルはあるだろうとか、ヤフーが950ピクセルだからとか想像してWebページの横幅も決めていました。
ちなみに2017年3月現在もヤフーは左右950ピクセルです。

その後、2010年に米国のデザイナーによって発表されたレスポンシブデザイン(コーディング)が話題となりましたが、それでも当時はすぐに取り入れる企業は乏しかったため、「固定幅かリキッドか?」「横幅は何ピクセルにする?」という話は続きます。

レスポンシブがすぐに取り入れられなかった理由は複数あります。
Webサイト側ではシステムやCMSの改修に大きな負担を強いられる点や、端末としてはスマートフォンはブラウザが新しいので大きな問題は無かったですが、やはりPCのブラウザ(特にインターネットエクスプローラ6)の問題でしょう。
2009年に発表されたHTML5へのブラウザの対応遅れが大きかったように思います。

話を戻すと、現在主流になりつつあるレスポンシブにも、固定幅かリキッドかと似たレイアウト方式があります。
レスポンシブでいう「リキッド・レイアウト」がその類です。
またリキッドぽいもので「フレキシブル・レイアウト」という形式もあり、PCで表示するときはコンテンツの左右幅を固定し、タブレット、スマートフォンの場合はリキッドレイアウトとするパターンです。

その意味では、グラフィックだとA4、B3、B全、新聞でも全5段とか、サイズは(ほぼ)不変なのですが、Webの設計、デザインは常に変動するサイズをデザインする特殊性があるように思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください