多くのサイトで各Webページの半分が空のままになっているのはなぜですか？
多くのサイトで各Webページの半分が空のままになっているのはなぜですか？これは画面スペースの無駄ではありませんか？
この良い例の1つは、Stack Exchange Networkサイトです。
ご覧のとおり、各ページの両側に大量の空白が残っています。
空白はサイトを特定の画面サイズと互換性がありますか？
スペースを離れることは、サイトをモバイルフレンドリーにするのに役立ちますか？
スペースによってページが混み合っていないように見えますか？
または、正当な理由はなく、人々はそうすべきでないことに気づいていないのでそれを行うだけですか？
私は両方のデザインを使用していて、どちらの方法でもユーザーから文句を言われたことがないサイトに取り組んできました。
スペースがあるサイトの例： Stack Overflow 、 GitHub 、 Facebook
スペースのないサイトの例： Amazon 、 Chase 、 Gmail
多くの理由がありますが、主なものは視覚的な混乱と情報の階層片側、および構造の一貫性UI側。
視覚的な混乱
クラッターは私たちの生活の中で重要な現象であり、ユーザーインターフェイスと情報の視覚化の設計において重要な考慮事項です。多くの既存の視覚化システムは、ユーザーが表示するオブジェクトまたは情報をフィルタリングするか、非線形拡大技術を使用して画面の中央にあるオブジェクトの表示領域を拡大することで、混乱を減らすように設計されています。 Webページ、マップ、およびその他の視覚化を設計するためのヒントは、多くの場合、大量の情報を表示しながら、情報の表現と構成を注意深く選択することにより、乱雑さを最小限に抑える手法に焦点を当てています。 [Rosenholtz et al。、2005]
簡単に言えば、アイデアは、要素を論理的な方法で提示することにより、視覚的、したがって認知的過負荷を回避することです。この論理的な方法は、次の点に関連しています。
情報の階層
情報には階層があり、表示したいものの中で最も重要な部分です。つまり、失敗と成功の違いです。
情報の階層は、eラーニング設計を含むすべての設計形式で使用する必要があるユニバーサルデザインの原則です。定義により、ページまたは画面上の要素またはコンテンツの配置であり、重要度（昇順または降順）の順序を示します。
以下のboxedモデルを見てください。
ご覧のように、階層が構造化されており、ほとんどの人が理解できることは明らかです。レスポンシブモードでは、この階層はすべての要素を期待どおりにスタックするため、モバイルアドバンテージは非常に明確であることに注意してください
これで、同じレイアウトが全幅に変換されました。
（フルサイズで見てみてください）
これで、階層1はなくなりました。ユーザーの目は、おそらく2と3を最初にスキャンします。そして6と7！基本的に、最も重要な要素は階層の下にあります。順序を3-1-2-4のように変更できます。次に、レスポンシブモデル（デバイスだけでなく、画面のサイズ変更も）にスタックするときに問題が発生します。これは、3が最初の要素になるため、問題を解決するのではなく、問題を作成するためです。
ご覧のとおり、問題はかなり大きく、これらは主要な問題にすぎません。
ただし、UIまたはレイアウトの側面もあります。
構造の一貫性
全幅のページがあるとしましょう。何があっても100％になります。小さなラップトップでは100％、24インチモニターでは100％。ラップトップを使用している人は、画面に非常に特定の量の情報を含む特定の方法で要素を表示する特定の構造で、要約された情報を見ることが容易にわかります。
これで、その24インチモニターのユーザーには、まったく異なるものが表示されます。まず、ユーザーがテニスマッチのように感じ、頭が片側から反対側に移動する可能性があります。 もちろん、視覚的な彩度と摩擦は信じられないほど高くなります。ただし、情報の垂直表示も異なります。以下を参照してください。
1366x768
今1920x1200（24インチモニター） 
かなり違いますね画像が拡大されました（そしてこれはさらに別の問題である可能性があります！）およびテキストは彼のサイズを維持し、テキストの量をほぼ2倍にしました。これに、存在する信じられないほどの画面サイズと、まだ存在せず、おそらく数か月後に表示される画面サイズを掛け合わせて考えてください
言い換えると、制御を維持する代わりに、ランダム性を優先してそれを放棄します。
もちろん、特別なケースではなく、一般的なルールについて話しているので、あちこちに例外があります
最後の注意点：
全幅の例から、Amazonだけが使用していることと、数え切れないほどのA/Bテストを使用して、何年にもわたってテストを行ったことがわかります（これについては、現在見つけることができない非常に興味深い記事がありました）。しかし、ここでは階層が機能しています。ほとんどの製品は同様の概算ウェイトを保持するため、階層を事前に把握できない製品を販売しています。ユーザーの検索に一致します。
Googleと同様に、boxedモデルを使用し、コンテンツを左側に配置し、左側に小さな空白を入れます。 LinkedInのメインページはボックスで囲まれ、中央に配置されます。ただし、ログインしていないユーザーのランディングページには全幅の要素があります。しかし、細心の注意を払うと、そのページであっても、他はすべてboxedになります
ユーザーが一度に表示する情報の量には妥当な制限があります。
ユーザーが同化/理解できるよりも多くの情報がビューに表示されると、圧倒されます。 これはコンテンツの種類によって異なります および情報の表示方法。
それは空のスペースを残すことの問題ではなく、必要なスペースの量を使用することであり、それ以上ではありません。
あなたの例でポイントを説明するには：
Webサイトはスクロールを利用できるため、1つの画面にできるだけ多くの情報を表示する必要はありません。
では、コンテンツをどのように配布するのですか？
サイトによっては、コンテンツが中央揃えまたは左揃えになる場合があります（これはおそらく左から右に読んだことが原因です）。コンテナの境界にスペースを配置するのではなく、要素の内部に配置する別の方法があります。この種類のレイアウトは、コンテナー内にいくつかの列があり、両側にサイドバーがある場合に便利です。言い換えれば、十分な列があり、ある時点で情報が離れすぎているために各要素（各行）の一貫性が壊れ始める場合に価値があります。そして、そのポイントに達したら、以前の方法のいずれかでその空のスペースを追加し続けるために戻ります。
ホワイトスペースに関する学術研究
はい、空白は読みやすさを向上させ、視覚的な混乱を減らすために使用されます[1] 、 [2] 。
画面上にあるオブジェクトが多いほど、目と脳が処理しなければならない [3] 。 空のスペースを使用して、ページの処理に必要な注意リソースを削減します。ただし、多すぎる（50％を超える）と、読みやすさとユーザーの満足度に悪影響を与える可能性があります [4] 。
空白はサイトを特定の画面サイズと互換性がありますか？
あんまり。ページに空白がない（およびコンテンツと積み重ねられている）場合、異なる解像度で設計するときに、異なる解像度でページのすべての要素を配置する方法が大きな問題になります。
スペースを離れると、サイトがモバイルフレンドリーになりますか？
まあ正確ではない。モバイル解像度では、余白がそれほど多くないことに気付くでしょう。携帯電話で利用できる画面スペースが限られているため、レイアウト構造が異なります。
参照：
[1] Chaparro B. et al。、Reading Online Text：A Comparison of Four White Space Layouts、2004
[2] Coursaris C.およびKripintris K。、Webの美学と使いやすさ：ホワイトスペースの影響に関する実証的研究、2012
[3] S.ラックとE.フォーゲル機能と論理積のための視覚的ワーキングメモリの容量、1997
[4] Bernard M.、Chaparro B.、およびThomasson R。、Web上の情報の検索：空白の量は本当に重要ですか？、2000
私が作成したサイトについて話すWeb開発者として、私たちは大きな幅のディスプレイ用に設計しませんでした。そして、空白は、ブラウザーの幅を拡大したとき（またはCSSの背景色が何であれ）のデフォルトです。
デスクトップとモバイルの両方で応答性の高いスケーラブルなWebサイトを設計および開発するコストは、すでにかなり高くなっています。当社の分析によると、ユーザーの90％以上がサイトを1400ピクセル未満の幅の解像度で表示しています。
結局のところ、1400px以上の解像度でサイトを閲覧するユーザーの10％未満のために設計と実装に時間とお金を費やすことは価値がありません。
一部の人は私のように閲覧するため、モニターを90度回転させます。
他の人々はタブレット、電話、解像度640 * 480、8ビットカラーのWin 3.11を使用しています。一般的に、最高のWebサイトは特定のデバイスではなく、すべてのデバイスで読みやすく表示されるように設計されています。
コンテンツの幅が当然広い場合は、必ずページを広くしてください。そのため、たとえば、大きなテーブルは、狭い列で窮屈にするよりも、必要なだけの幅を使用した方がはるかに使いやすくなります。過去にgoogle docsスプレッドシートのフルスクリーンを使用したことがあり、それは便利です。
しかし、他の人が言ったように、テキストが読みにくくなるまでのテキストの長さには制限があります。これは、目が左に戻ると次の行の開始点を見つけるのが難しくなるためです。そのため、テキスト列は非常に広くする必要があります。
幅の広いWebページがないことのもう1つの論点は、1つのWebサイトをもっと見られるように、私は巨大なモニターを購入しなかったということです。画面が大きくなると、ウィンドウを最大化する可能性が低くなるため、ブラウザの幅はそれほど広くありません。
私は巨大なモニター（実際には、2つの巨大なモニターを並べて表示し、マシンがそれらを駆動する場合はさらに多くなるでしょう）を購入して、複数のウィンドウ、ブラウザー、エディターなどを並べて表示できるようにしました。そうすれば、アプリを常に切り替える必要がなくなり、一方からもう一方に目を通すだけで、より効率的になります。これは、人々が同時に他のことに取り組んでいる作業コンテキストでよく使用される、stackexchangeのようなサイトに最も当てはまります。ほとんどの場合、娯楽サイトではそれほど重要ではありません。
したがって、ユーザビリティの質問と同様に、ユーザーが作業しているコンテキストについて考えます。サイトはユーザーが見ている唯一のものですか、それともユーザーが行っていることの一部にすぎませんか？あなたは本当にそれを確信できますか？たとえば、その情報をログに記録しましたか？
彼らがしているのはそれだけだとしても、実際に目的を果たさない限り、画面に表示しても意味がありません。さもなければ、それらはあなたが実際に彼らが見たいと思うものを損なうだけのノイズです（あるいは実際、彼らは見たいと思っています）。ですから、それが本当に役立つのであれば、先に進んでください。しかし、それのためにスペースを埋めるだけではありません。
そのデザインは、ブートストラップを使用して簡単に見つけて変更できます。例は次のとおりです。 http://getbootstrap.com/css/#grid-example-fluid
UIの簡単な答えは、段落の幅は、目が左から右に行うことができる強制されていない動きの量に相当します-また、紙のシートに相当します。
通常、段落の読みやすい領域は、平均サイズの手の幅よりも広くないはずです。
この質問とその主題への関心を見て本当に驚きました。これは、「空白はスペースを無駄にしていますか？」という質問に関する古い議論の一部のようです。
これは神話だと思います。ホワイトスペースがデザインの成功の鍵であるという考えを支持する多くの議論があります。
コンテンツのメインブロックの幅を制限してレイアウトの空白を設定するための最も重要な引数は、デザインをより使いやすくし、ユーザーを支援する最も重要な要素にフォーカス。経験から、私はこれらのWebサイトにページに多くの情報を残すだけで、必要なものを見つけることができないと感じています。画面全体に情報を表示するのは大変ですが、左側と右側にテキストが表示されている中央の列にどのように集中できるかわかりません。
私はこれが少し主観的であることを知っていますが、ページに多くの情報があるページでは、開発者が「もっと」のボタンを追加したり、重要なものを合成したりするのに時間をかけたくないと感じています。それは罰のように感じ、それは安く感じます。
空白は次のことに役立ちます。
- 最も重要なコンテンツに焦点を当てます。
- 読解力を向上させます。
- ミニマリズムとエレガンスの外観と感覚を作成します。
この記事 なぜホワイトスペースがUXデザインにとって重要であるか で、私は興味深い意見を見つけました。
空白は理解度を最大20％増加させることが証明されています。（...）
空白はメンタルマップの作成に役立ちます。（...）
ホワイトスペースの力は、人間の注意と記憶の限界から生まれます
更新：より具体的には、左側と右側にマージンを設ける代わりに、列を増やすか、メインボックスの幅を大きくすることです。
最初のオプションの問題は、重要な情報に優先順位を付けることが難しいことであり、2番目のオプションでは、幅の広いテキストを読むのが難しいということです。
列の幅を制限するための適切な引数が提示されます here このリファレンスは言及することが重要です：
コンテンツの理想的な行の長さはありますか？
「Webスタイルガイド– Webサイトを作成するための基本的な設計原則」からの一節を引用します。
テキストレイアウトの理想的な行の長さは、人間の目の生理学に基づいています…
通常の読み取り距離では、視野の弧は数インチにすぎません。これは、適切に設計されたテキストの列の幅、または1行あたり約12ワードです。研究によると、読者が目と首の筋肉を使用して1つの行の終わりから次の行の始まりまで追跡する必要があるため、行の長さが理想的な幅を超え始めると、読み取りが遅くなり、保持率が低下します。目がページ上の長い距離を移動する必要がある場合、リーダーは簡単に失われ、次の行の始まりを探す必要があります。定量的研究によると、適度な行の長さはテキストの読みやすさを大幅に向上させます。
Webスタイルガイド– Webサイトを作成するための基本的な設計原則Patrick J. LynchおよびSarah Horton第2版、97ページ。
視野が役割を果たすと思います。一枚の紙も簡単に読めるし、ウェブサイトの横幅もほぼ同じくらい。この方法では、ページの読み取りまたは解析中に頭を水平方向にそれほど動かす必要がありません。
また、空白を減らそうとした場合でも、どうすればよいでしょうか。必ずしも簡単ではありません。質問のほとんどはすでにかなり短いです。 2ページは互いに隣接していますか？それは一般的に最初のスクロールまたはスクロールでどのように機能しますか？
上記のすべての回答を読みましたが、発生する可能性のある応答の問題についての言及はありませんでした。
私はまだ「モバイルファースト」のデザインを取得していませんが、Webアプリケーションをレスポンシブデザインする場合、同じコンテンツは320pxから..何でもいいように見える必要があります。私は主にダッシュボードで作業しているので、多くのスペースが必要ですが、ほとんどの場合、コンテンツをあまりストレッチできないため、すべての解像度階層で応答性がよくなります。
コンテナの幅が長いほど、コンテンツは小さな解像度の層に積み重ねられ、それらの解像度ではコンテンツブロックの高さが高くなることに常に注意してください。たとえば、1920pxの幅のコンテナー内の1行のテキストは、モバイル画面ビューで140pxの高さを消費します。これは、小さな電話画面の高さの30％であり、ブラウザーのUIを除外しています。現在21：9 3440x1440pxの画面を表示しています。画面上で左右に伸びるアイテムがある画像。デスクトップを左右に見るために頭を回さなければならないことは言うまでもありません。 ：D
次に例を示します。 https://jsfiddle.net/cjj1Ln36/1/
経験上、1400pxを超えるものは、特にリッチコンテンツ（タイトル、テキスト、グラフの組み合わせなど）にとってはやり過ぎです。通常、より高い解像度で行うべき論理的なことは、列のコンテンツを分割することですが、解像度によっては、経験上、これらの列は解像度に応じて不毛であるか密度が高すぎます。また、コードの2つのブロックに同じコンテンツが含まれる可能性は非常に低いため、動的なWebサイトでは予測が不可能であるため、列のコンテンツが密で、他のコンテンツが疎である可能性があります。
写真が豊富なWebサイトの場合、状況はさらに悪化します。
a）写真が1400pxの全コンテナ幅を使用しているが、4：3のような一般的な比率を維持する必要がある場合、画面の高さ全体を占める可能性が高く、それを超える可能性があります。
https://jsfiddle.net/mg965au8/1/
b）写真がテキストの横で使用されている場合、1400pxの解像度から、写真がテキストの上に配置できる意味のある解像度（例：768px）に至るまで、おそらくコンテンツがまばらになり、縮小中に画像の高さを超える可能性があります。私は問題を説明するためにフィドルを作成しました。低解像度から最大1400pxまで拡張してみてください（コンテナなしで想像してください！）。すべてのブラウザ幅で見栄えは良いですか？おそらく違います。
https://jsfiddle.net/2xnt3mk2/
また、上記の他のすべてが言ったこと-圧倒的すぎる、など
特にテキストが多いWebサイトでは、全幅のテキストよりも狭い列のテキストの方が読みやすいです。また、テキストが小説ではない場合、テキストの行の半分以上が全幅に達しないため、不快で不均一な「テキストのしみ」が作成されます。
（物理的な）小説と辞書でテキストがどのように表示されるかを考えてください。辞書は通常2つの列に表示されます。それは重要であるため、読者は読んでいるものによりよく焦点を合わせることができます。小説のすべての単語を保持することはそれほど重要ではありません。読者がすでに物語に興味を持っていると想定しているため、それほど難しくありません。
要約すると、人間は注意力が乏しく、一度に少しの情報しか与えられない場合、集中力が高まります。
また、コンテンツタイプ、そのサイズ、画面からのユーザーの距離にも依存します。
ビデオ、大きな写真やプレゼンテーションを含むダッシュボード-全画面表示が最適なオプションです。
テキストコンテンツおよび中小規模の写真の場合、快適な知覚フィールドを考慮することが重要です。
座っているユーザーとの距離が50〜65 cm（20〜26インチ）の通常のPCまたはノートブックの場合、目を左から右に移動する必要がなく、快適な知覚フィールドの幅はどれくらいでしょうか。
目は価値が高すぎてすぐに疲れてしまうので、人々は2次元の動きから1次元の動きまでの広範囲の自由度を修正し、ページを垂直方向にスクロールして、目の位置を固定したままにすることを好みます。
目を左から右に前後に移動し、さらに現在/次のコンテンツの垂直位置を再固定するため、ページを垂直にスクロールする方が簡単です。一部のコンテンツは、メインの知覚フィールドの外に配置された場合、単純に失われる可能性があります。
その結果、ページ全体の視覚的な印象が損なわれる可能性があります。