固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析

ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レイアウト、ハイブリッドレイアウトのどれを使用すべきか、ということです。それぞれに長所と短所があります。最終的な決定はウェブサイトのユーザビリティに依存し、1 つのレイアウトだけで目標を達成するのは簡単ではない可能性があります。それで、それがとても混乱しているのなら、正しい決定を下すためのコツはあるのでしょうか?いくつかの問題を考慮し、目標結果を適切に設定することで、あらゆる面の長所を組み合わせた成功するレイアウト デザインを作成できます。

この記事では、各レイアウトオプションの長所と短所について説明します。実際、使いやすさを念頭に置いていれば、どのソリューションでも成功する Web サイト レイアウトを実現できます。

なぜこれについて議論するのですか? Web デザインはユーザビリティという基準によって導かれますが、Web サイトのユーザーの多様性により、さまざまなユーザーにとって十分に使いやすい Web サイトを作成することは困難になっています。

幅広いユーザー向けの Web サイトを設計する場合、設計者は訪問者間の次のような潜在的な違いを考慮する必要があります。

• 画面解像度
• どのブラウザを使用していますか?
• 閲覧ウィンドウは最大化されていますか?
• スペースを占有する追加のブラウザ コンポーネント (履歴、ブックマーク、Google ツールバーなど) を有効にするかどうか
• オペレーティングシステムやハードウェアの状態さえも

標準的な Web ページのサイズは存在しないため、Web デザイナーは作業時に無数の問題を解決する必要があります。

1.固定レイアウトと流動レイアウトの違い

ほとんどのデザイナーと開発者は固定Web レイアウトと流動的な Webレイアウトについて基本的な理解を持っていますが、ここで簡単に概念を説明しておきましょう。

固定ページレイアウト

固定Web ページレイアウトとは、Web サイトのコンテンツが固定幅のコンテナー内に囲まれ、コンテナー内のブロックのパーセンテージまたはピクセル幅の値が固定されていることを意味します。最も重要な点は、コンテナを移動できないことです。訪問者には、画面の解像度に関係なく、固定幅のコンテンツが表示されます。

上の図は、固定幅の Web ページレイアウトが一般的にどのように実装されるかを示しています。内側のコンポーネントは、それぞれ 520、200、200 ピクセルの固定幅に設定されています。ほとんどのユーザーの画面解像度が 1024×768 以上であるため、960 ピクセルの幅が現代の Web デザインの標準となっています。

流動的なウェブレイアウト

流動的な Webレイアウト(リキッド Webレイアウトとも呼ばれる) は、ほとんどのコンポーネント (メイン コンテナーを含む) をパーセンテージ幅に設定し、ユーザーの画面解像度に適応させることで実現されます。

上の画像は流動的な Webレイアウトを示しています。ほとんどのデザイナーは、流動的なレイアウト内の特定の要素（余白やパディングなど）に固定の幅を指定しますが、レイアウト全体では通常、パーセンテージ幅を使用し、ユーザーに基づいて実際の幅を自動的に調整します。

2.固定レイアウトのウェブデザイン

多くのデザイナーは、固定レイアウトの方が安全だと考えているため、固定レイアウトを好みます。つまり、デザイナーが見るものが、ユーザーが見るものと同じであるということです。しかし、その長所と短所に関しては、フローレイアウトと同じくらい心配です。

利益

• 固定幅レイアウトは設計が簡単で、カスタマイズも簡単です。
• 表示幅はどのブラウザでも同じなので、画像、フォーム、ビデオなどの固定幅のコンテンツで競合が発生する可能性が低くなります。
• min-width (最小幅) と max-width (最大幅) を設定する必要はありません。これらの 2 つのプロパティはすべてのブラウザでサポートされているわけではありません。
• Web ページが最小画面解像度 800×600 と互換性があるように設計されている場合でも、コンテンツはより大きな解像度のモニターでも十分に読み取ることができます。

デメリット

• 固定幅レイアウトでは、高解像度の画面を持つユーザーに対してページ上に大きな空白が作成され、「神聖な比率」、「三分割法」、全体的なバランス、その他のデザイン原則が破壊される可能性があります。
• 小さな画面では水平スクロール バーが表示され、ユーザー エクスペリエンスに影響する場合があります。
• シームレスなテクスチャ タイル、パターン、その他の連続画像は、大きな解像度に合わせて最適化する必要があります。
• 固定幅は一般的に使い勝手が悪くなります。

固定レイアウト設計例

以下の 5 つの Web ページのデザイナーは、いずれも固定レイアウトWeb ページの特性を最大限に活用しています。これらのウェブサイトはすべて、多くのデザイン要素を組み合わせ、固定レイアウトを使用して完璧なシーンを作成します。固定幅を利用することで、デザイナーはサイト コンテンツの周囲の追加のデザイン要素をより適切に制御できるようになり、コンテンツとナビゲーションの幅をより正確に調整できるようになります。

デザイナーがワイドスクリーン向けに連続画像をどのようにデザインしているかに特に注意してください (画面の解像度を上げてみてください)。

3.固定レイアウトのデメリットを回避する

固定レイアウトを使用することに決めた場合は、次のヒントを知っておく必要があります。固定レイアウトの悪影響を軽減し、成功するデザインを作成するのに役立ちます。

翻訳メモ: 次の段落は、文字数を増やして印税を稼ぐために書かれたようです。この段落をスキップするには、ここをクリックしてください。

まずは統計を見てみましょう

今日のほとんどのデザイナーは、ほとんどのインターネット ユーザーが 1024×768 以上の解像度を使用すると想定しています。 W3Schools が公開した世論調査では、そうではないことが示されています (W3Schools のデータは完全に信頼できるわけではないことに注意してください。詳細は後述します)。

ご覧のとおり、640×480 はこの表では適格ではありません。 W3Schools のデータによると、この解決策はユーザーによって完全に放棄されたようです。実際、この解像度を使用するユーザーは確かに存在しますが、ユーザーの数が少なすぎるため、デザイナーはそれらを完全に無視し、より高い解像度でより使いやすい、より適切なデザインを作成します。

この解像度を使用するユーザーであっても、持ち運びに便利な小型コンピューターでのみ使用し、通常使用するメインの画面解像度ではありません。

ただし、ここでの統計は誰もが期待するほど正確ではない可能性があります。 W3Schools の訪問者は主に特定のグループ (デザイナーや Web 開発者) であるため、結果は一般の人々から少しずれている可能性があります。しかし、他の調査でも同様の結果が出ています。 2009 年にいくつかの独立系企業が実施した調査によると、800×600 解像度のユーザーの割合は 10% 未満です。 （注釈：Benhuoerのウェブサイトの統計によると、この数字は2％未満です）

以下はSohTanaka.comの興味深いグラフです。ここでは、さまざまな画面解像度を持ついくつかの大規模 Web サイトの互換性を調べています。

調査対象となったすべてのウェブサイトは、最終的に見事に生まれ変わりました。最大規模のインターネット企業でさえ、自社の主なユーザーはより大きな画面解像度を持つユーザーであると判断しています。

画面解像度に関する追加調査については、次のリソースも参照してください。

• W3カウンター
• TheCounter.com グローバル統計
• ワンスタット

960ピクセルか760ピクセルか?

まとめると、ほとんどのデザイナーは合計ピクセル幅として 960 または 760 を選択します。前者は、解像度が 1024×768 以上の画面に適しており、少しの空白を残すことができます。後者は、800×600 解像度での最適な表示幅です。この幅に設定すると、その 10% を処理でき、大きな画面でも見栄えが良くなります。

レイアウト全体を常に中央に配置する

固定幅のデザインを使用する場合は、バランスを保つためにメイン コンテナーを中央に配置するようにしてください (通常はmargin: 0 auto;を使用すれば十分です)。そうしないと、ワイドスクリーンのユーザーに対してコンテンツが隅に押し込まれ、見苦しくなってしまいます。

4. 流動的なページレイアウト

デザイナーが流動的なレイアウトを使用しない理由はたくさんありますが、流動的なレイアウトの利点を理解していない人も多くいます。流動的なレイアウトの使用を計画する際に考慮すべき長所と短所は次のとおりです。

利益

• 流動的な Web ページレイアウトは、クライアントの状況に適応できるため、より親和性が高くなります。
• 追加の空白の量はブラウザや画面解像度に関係なくほぼ同じなので、視覚的に魅力的になります。
• 適切に設計された流動的なレイアウトでは、小さな画面で水平スクロール バーを回避できます。

デメリット

• デザイナーは、クライアント側でのデザインの表示を制御することが難しく、特定のサイズの画面で作業するため、潜在的な問題を見つけるのも難しくなります。
• 固定幅の画像、ビデオ、その他のコンテンツは、さまざまな画面解像度に対応するために、異なる幅に設定する必要があります。
• 特に大きなディスプレイ画面の場合、コンテンツが不十分だと余白が過剰になり、見た目が損なわれます。

流動的なレイアウトの例

次の 2 つの例では、どちらもパーセンテージ幅を使用して、さまざまな画面解像度に適応しています。最初の例ではコンテンツ ブロックの幅を調整し、2 番目の例では空白のサイズを調整します。

5. 適切なモバイルウェブレイアウトを設計する

流動的なレイアウトには特定の問題が生じる可能性がありますが、ちょっとした工夫で解決できます。

シンプルなデザイン

流動的な Webレイアウトに適用されるパターンと複雑なテクニックが少ないほど、作成と保守が容易になります。同時に、さまざまな画面解像度に簡単に適応できます。コードと設計をより洗練させることで、互換性の問題をより適切に回避、発見、解決できるようになります。

たとえば、 Smashing Magazineでは流動的なレイアウトが使用されています。デザインは非常にシンプルで、上部の黒＋オレンジのナビゲーションバーのみが拡張され、各コンテンツエリアの幅は状況に応じて変化します。 CSS は、あらゆる状況に対応し、サイドバーと内部コンテンツの位置がずれるのを防ぐために使用されます。

最小幅（min-width）と最大幅（max-width）

これらの 2 つのCSSプロパティ (min-width と max-width) を使用すると、大きい画面または小さい画面を持つユーザーに対して固定幅を指定できます。画面が小さすぎる場合、コンテンツ ブロックは指定された幅に固定され、画面の下部に水平スクロール バーが表示されます。画面が大きすぎる場合、コンテンツも最大幅に固定され、コンテンツが拡張しすぎてテキストの読みやすさに影響することがなくなります。詳細については、以下を参照してください。

• W3SchoolのCSS max-widthプロパティに関するページ、
• CSS min-width プロパティに関する W3Schools ページ。

残念ながら、Internet Explorer のほとんどのバージョンでは、これら 2 つのプロパティはサポートされていません。この問題は、IE 固有の式「Internet Explorer での高さと幅の最大値と最小値」 (中国語の参照) を使用することで解決できます。

6. 柔軟な設計

実は、Web ページのレイアウトを設計するときには、3 番目のオプションがあります。一部のデザイナーは、 2 つの主要なレイアウトタイプの特性を組み合わせた、いわゆる「エラスティック レイアウト」を使用することを好みます。重要な点は、要素の幅を定義するために単位emを使用することです。次の引用は、em とは何か、そしてそれがどのように機能するかを説明しています。

「コンピュータ画面上の「ピクセル」は拡大縮小できないポイントですが、em はフォント サイズに対する相対的な幅の単位です。em はフォント サイズに応じて変化し、ユーザーのフォント サイズ設定を反映します。」
-パトリック・グリフィス、A List Apart

柔軟な設計は多くの利点をもたらすように見えますが、前の 2 つのレイアウトと同様に、長所と短所がまだあります。

利益

• このレイアウト設計を適切に使用すると、非常にユーザーフレンドリーなインターフェースを作成できます。意図された効果は、ユーザーの好みに応じてすべてのサイズを拡大または縮小できることです。
• 柔軟なレイアウトは、流動的なレイアウトと固定されたレイアウトの両方の利点を備えているため、どちらを選択するかが難しいデザイナーに適しています。

デメリット

• 最初の「利点」は正しいものの、柔軟なレイアウトには、使いやすさの面で依然として多くの問題が潜んでいます。すべてのユーザーにとって使いやすいレイアウトにするには、多くの創意工夫と継続的なテストが必要です。
• このレイアウトは、前の 2 つよりも実装がはるかに難しく、得られる使いやすさはわずかであるため、労力に見合わない可能性があります。
• このレイアウトの特殊な性質により、一部の柔軟なレイアウト デザインでは、追加のスタイル シートと IE6 用の特別な調整が必要になる場合があります。

柔軟なレイアウトの例

弾性レイアウトと流動的レイアウトは表面的には非常によく似ているため、多くの場合混同されてしまいます。基本的な違いは、エラスティック レイアウトの長さと幅の単位が em であるのに対し、流動的レイアウトではパーセンテージが使用され、エラスティック レイアウトのサイズは主にフォント サイズに応じて変化することです。このタイプのデザインは、ユーザーのブラウザのフォント サイズに基づいて適応されます。

7. どちらのレイアウトがあなたに適していますか?

選択するレイアウトは、Web サイトの性質によって決まります。上記の長所と短所を比較検討し、ウェブサイトのニーズに合った適切なソリューションを見つけてください。

たとえば、ポートフォリオの Web サイトには、固定幅レイアウトが最適です。こうすることで、よりデザイン重視のものを作ることができます。デザインの個々の要素をより細かく制御できるだけでなく、作業のグラフィカルなプレゼンテーションも扱いやすくなります。多くのデザイナー（ポートフォリオ以外のサイトで作業するデザイナーを含む）にとって、固定レイアウトは作業が簡単で、ユーザーに安心感を与える良き友人です。

100% の互換性を求めるデザイナーは、流動的なレイアウトに時間を費やすことを検討するのが賢明です。最大の課題は、ワイド画面に表示される過剰な空白ではなく、小さな画面での表示効果です。ユーザー数が多い Web サイトの場合、ユーザーベースのわずかな割合でも、絶対的には非常に大きな意味を持つことがあります。これを考慮しなくても、大規模な Web サイトはシンプルで機能的なデザインである必要があり、これは流動的なレイアウトを使用することで効率的に実現できます。

まだ決められない？ご心配なく、柔軟なレイアウト デザインや部分的に柔軟なレイアウトデザインもご利用いただけます。適切に使用すれば、柔軟なレイアウトにより、2 つの主要なレイアウトの利点を完全に統合できます。賢いデザイナーは、フォントとコンテナのサイズに em 単位を使用し、パーセンテージとピクセル幅を組み合わせて他のレイアウト要素を設定するなど、柔軟なデザインの原則を活用する方法を知っています。

他のデザイナーの意見

Heidi Cool のFixed vs. Liquid vs. Elastic レイアウトに関する回答

このデザイナーのコメントは、Web デザインについてあまり知らない他のデザイナーとレイアウト作業を行うことについてです。

「私はこのことについてよく考えました。case.edu では固定レイアウトを使用することにしました。理由は次の通りです。

1. 流動的なレイアウトはより複雑であり、作業によって流動的なレイアウトが簡単に壊れる可能性があるさまざまなスキルを持つユーザー向けに、テンプレート化されたデザインを提供しています(テンプレートは通常の HTML ファイルであり、Dreamweaver テンプレートではありません)。
2. 私たちは、サイト管理者が幅が広すぎるページ、つまり非常に読みにくい長いテキスト行のあるページを作成することを望んでいません。
3. 私たちは、常にすべての空白を埋めようとする人々が直面する空白の量を制限したいと考えています。大きなモニターを使用している場合、ページを埋め尽くすことは簡単ですが、小さな画面での表示がいかに劣悪であるかは無視しがちです。

皆さんもおわかりのように、主な問題は依然として、当社の Web サイトがさまざまなスキル レベルの人々によって保守、構築、追加、削除されているという事実にあります。もし私が一人でウェブサイトに取り組んでいたとしたら、コードを書くときに、おそらく目標やコンテンツなどに基づいて決定を下すでしょう。 ”

柔軟なデザインはどこへ消えたのか?に対する madr の返信

彼は固定幅レイアウトの他の 2 つの利点を指摘しています。

「バナーや広告は画像やFlashで実装されることが多いため、伸縮自在なレイアウトやフレキシブルなレイアウトを作るのが難しくなります。私は新聞業界で1年半働いていましたが、広告は本当に扱いが難しいです。記事の写真も同様です。伸縮自在なレイアウトにすると、トップの写真に対して閲覧領域が大きくなりすぎることがあります。」

Safari 3 以下 (Safari 4 は間もなく登場予定 [笨工儿:已来了…])、Firefox 2 以下、および IE6 以下 (間もなく廃止予定…) を除くすべてのブラウザは、フォントだけでなくページ全体のズームをサポートしています。このような状況では、柔軟で弾力性のあるレイアウトを設計することはさらに非現実的になり、ほとんどのユーザーはあなたの善意に気付くことさえありません。 ”

jphilapy の返信:柔軟なデザインはどこへ消えたのか?

流動的なレイアウトをサポートする価値がある理由は 2 つあります。

「流動的なサイトは、さまざまな解像度に適応できます。ユーザーの画面サイズを調査して議論する必要はありません。また、画面解像度の統計は謎です。ブラウザをフルスクリーン モードで実行する人はほとんどいませんし、ツールバー、サイドバー、ウィジェットなどが多く、無数の画面条件が作成されます。

携帯電話（iPhone など）、ゲーム機なども、徐々に Web ブラウザ ファミリーの主要メンバーになりつつあります。一般に、これらのデバイスの画面解像度は小さいため、柔軟な Webレイアウトデザインのメリットを享受できます。

流動幅レイアウトと固定幅レイアウトに関するCalrion の回答

柔軟なレイアウトの使用を明示的に説明します。

「『柔軟な』レイアウトが最良の選択肢だと思います。ある程度流動的ですが、テキストの行が長くなりすぎないように幅を固定します。

私は Windows ユーザーなので、通常はウィンドウを最大化します。

これを最大限に活用したい理由は、使用しているアプリケーションに集中できるようにするためです。ほら、私の机の上にはいつもたくさんの物が置いてあるんです。さらに、ブラウザ (Firefox) を最大化すると、インターフェース要素、特にブックマーク ツールバーとタブ領域に最大限のスペースが提供されます。

使いやすさに関して言えば、経験豊富なユーザーには流動的なレイアウトが最適です。ブラウジングウィンドウのサイズを積極的に制御するからです。経験の浅いユーザーの場合は、幅が広くなりすぎるのを自動的に防ぐ柔軟なレイアウトが最適である可能性があります。

流動幅レイアウトと固定幅レイアウトについてに関するGeorg の回答

3 つのレイアウトを組み合わせると最良の結果が得られる理由:

「メインエリアは流動的で、サイドバーは固定で、少し伸縮性があるのが好みです。また、テキストエリアの最大幅は常に 600 ピクセルに設定しています。」

min/max を使用して、ページ全体の幅を 600 ～ 1200 ピクセルに設定し、中央に配置します。

幅 600 から 2400 までの画面で徹底的にテストし、その他の幅についてはユーザーに判断を任せます。テキスト行が広すぎることはなく (最大幅は 600)、圧縮時にページが途中でずれることもありません。

私が受け取ったフィードバックのほとんどは、ユーザーは何かが混乱していることにほとんど気づかなかったというものでした。ウェブページは読みやすいです。私のアプローチは有益な妥協案であることを説明してください。

あなたの駅は私にとって良さそうなので、これは有益な妥協案だと思います。テキストは老眼の私には小さすぎるので、1280 ワイドスクリーンの Opera で 120% に拡大します。問題は絶対に起こりません。 ”