画面は固定と可変のどちらがいいの？

質問

今、ホームページを作ろうと思っています。そのときウインドウサイズを変えると表示の横幅がそれに伴って変わるタイプと固定となるタイプがあると思うのですが、どちらがいいのですかね？どんなときにどちらを選択したらよいか知っている方いれば教えてください。

回答No.6

sou_sk · ベストアンサー

補足するとブラウザ戦争をやっていた昔はテーブルでこてこてに固めるデザインが主流、、というかそれ以外にやりようが無く、みんなで TOYOTA や Sony のような有名どころの Web を計測して横幅何Pixel と出しては平均値を決めてデザインを切っていたりしました。 (ブラウザやOSのウィンドウ枠の関係で 732 や 764 といった微妙な数字になる)
ブラウザ間で異なる実装といくつかのプラットフォームとブラウザの間でいかに安定したデザインを実現するかに苦労した物です。
この状況では可変にするとリスクが大きくなりデザインが複雑になると表示も安定せず、またユーザー環境もそれほど豊かでなく 800x600 や 1024x768 といった解像度で生きていた人も多く 800x600 の決め打ちの方が収支計算で良い結果が出せる時代でした。

それから時代も変わってクライアントの種類は増えブラウザも増え、特に PDA やらゲーム機、ケータイのように従来のPCを下回るアクセスデバイスが登場し反面PC環境はリッチになり最早ユーザーの利用環境、解像度を特定出来る状況ではありません。

またブラウザの CSS への対応も進み テーブル を捨てて HTML + CSS にシフト出来るケースも増えてきました。NN4.7 のようなバギーなブラウザもようやく退場しようとしています。

Dreamweaver のプレビューレンダリングも MX でようやくまともに CSS が反映できるようになりましたし、SEO やセマンティックWebの概念は機械から見て意味のある HTML を求めています。

状況的にも技術的にも HTML の書き方を改める時です。

HTML + CSS で書けば 可変 が前提になります。テーブルデザインと違い固定にする必要性が無く、環境も変わったからです。
ただデザイン上、必要性があれば固定も取ります。
ただし誰のための何を目的とした、また時代と状況をわきまえて考えられたデザインなのか、は問われるべきでしょう。

こういった変化を踏まえて可変を推奨します。

お礼

過去の経緯を詳しくご説明いただきありがとうございました。どこを調べても聞けない貴重な情報でした。ここまで丁寧なご回答いただき恐縮するとともに大変感謝いたします。目的を自分なりに整理して検討を進めたいと思います。

回答No.7

Kirishima

デザイン優先なら固定。
ユーザビリティ優先なら可変、ですかね。

画面のサイズを変更する自由をユーザーに任せるかどうか、
そういったスタンスで決めるのではないでしょうか？

お礼

アドバイスありがとうございます。端的なご回答で分かりやすかったです。

回答No.5

sou_sk

可変です。

/. も okweb も hotwired も可変です。
1600x1200 の解像度を取っているのに 800x600 決め打ちで出されても萎えます。ZDNet とかスクロール回数が増えて面倒なだけです。

/. や okweb はそれが読みやすいから可変にしているのだと思います。 ZDnet が固定を取る理由も分かります。広告表示枠が決まっており広告は可変ではありません。
海外のデザイナーさんで固定を取る人もいますがこれも分かります。優れた訴求力のあるデザインで、そのデザインを実現する方法が固定だからです。

結局その人のポリシーやデザイン次第です。
ただ読みやすい文書を提供しようと思えば相手の環境に合わせる事が前提となりデフォルトは可変で考える事になります。
その上でデザイン等その必要がある場合にのみ固定デザインを行います。
尚、フォントサイズは必ず可変にします。

テーブルでデザインを切っていた時はこれが出来なかったのですが valid な HTML + CSS で書くようになってこのスタイルになりました。

見出し要素やリスト要素を使い意味づけされた文書として HTML を書く。デザインは反映しない。
プログラムと合わせる場合もここで行う。

上記の HTML を元に CSS で修飾をかけていく。ここでデザインを反映する。

単純化するとこんな行程になります。

機械から見て美しい HTML になるのでメンテナンスも楽、SEO 対策にもつながって google の反応も良い、とこの辺は可変・固定関係ありません。HTML の質の問題。問題が起こって固定<>可変に変えるときも CSS 触るだけだし。

一度技評のページでも見てみてください。

参考URL：

http://www.gihyo.co.jp/book/2003/234071/support/CSSdesign/

お礼

CSSって、StyleSheetのことですよね。まだ勉強不足ですが、CSSをうまく使いこなすことが大切だって事がわかりました。もう少し、勉強したいと思います。詳しいご説明ありがとうございました。

回答No.4

saidon

固定です
見る方としても、更新する方としても
固定の方が断然見やすくアクセスアップに関わります

お礼

見易さを重視するのであれば固定の方ですね。ご回答ありがとうございます。

回答No.3

t-d-s

サイトの内容で決まってきちゃいますよね。
どっちがいいとかは基本的にないですよ。
ただ、アドバイスとして注意点を

可変の場合
べつに横780ｐｘの画像を外側に入れればいいけど、可変は小さくもなるし大きくもなるんですよ。ちっさい画面で見れば、明らかに崩れます。逆に予想よりでかいと、スカスカのページです。

固定
別にボディー背景に画像入れればいいけど、
でかい画面だと、隙間できます。
小さいとスクロールがめんどくさいです。

どっちもどっちだな…
ただ、可変の場合は最低でもこの幅！っていう画像を入れれば持ちこたえます。
大きくなっても、すべてのレイヤーを％にすればなんとななります。

でも、固定でもかっこいいページはかっこいいんです。
参考にならなくてごめんなさい

お礼

なるほど。可変にするとウィンドウを小さくすると表示が崩れるのが気になっていたのですが、画像をうまく使えば可変でも表示を崩さないで済ませることもできそうですね。参考にさせていただきます。

回答No.2

master-3rd

どちらが…というのはやっぱり一概には言いにくいですね。
ただ、ほとんどのサイトでは固定は使用して無いですよね。固定はすべての画面環境に対応できるわれでは無いので使用しづらいんでしょう。

一般的なページには可変した方がいいでしょうね。
表を多く使用していて綺麗に表示させる必要があるのなら固定の方がいいかも。

とりあえず、自分で画面サイズを小さくしてみて、試してみたらいいですよ。

お礼

そうですか。可変が一般的だけど表などを多用するときは固定がいいんですね。参考になります。
ありがとうございました。

回答No.1

kosa

固定タイプで作る方がデザイン的にも時間的にも楽ですね。
固定タイプだと800×600の解像度に対応しているのが一般的ではないでしょうか？

お礼

早速のご回答ありがとうございます。なるほど800×600が一般的なんですね。