aspect-ratio - 16:9 画面の Web デザインについてのあなたの考え

Question

同僚や顧客が主にデスクトップ (PDA、電話などではない) で使用する Web アプリを設計しています。より多くのユーザーが 16:9 タイプの画面を装備するようになるにつれて、従来の画面レイアウトは人間工学的ではなくなりました。

たとえば、長い垂直のナビゲーションバーが完全に収まらない場合や、次の入力フィールドに移動するために複雑なフォームをスクロールする必要がある場合があります。

この展開にどのように対処していますか？もっと横に広がっていますか、それとも古いレイアウトにこだわっていますか? それは本当に問題ではありませんか？

アップデート

すべての返信に感謝します。私はそれらが有用であることを発見しました。ここに私に起こったいくつかの考えがあります：

私は、4:3 形式が依然として最も広く使用されている可能性があると指摘していますが、それが変わることを期待しています。
また、私が会社でここに訪問するほとんどのユーザーは、すべてのウィンドウを最大化しています (本当に!)。そのため、コンテンツに合わせてブラウザーのサイズを変更するという考えは、そこでは役に立ちません。
私の場合、ほとんどの Web アプリには、情報の検索と表示、またはデータ入力が含まれます (中には、大きくて複雑なフォームを含むものもあります)。私が気になっているのは主にデータ入力アプリです。おそらく、AJAX とタブ付きコントロールは、そこに進む道かもしれません。

score 14 · Accepted Answer

ワイドスクリーンの採用を見ると、ほとんどの場合、解像度はボード全体で水平方向に増加しています. 1024x768 のラップトップは 1280x800 になり、1600x1200 のディスプレイは 1920x1200 になります。縦サイズは通常通りご利用いただけます。

この回答を更新して、人々が Web を閲覧する方法、場所、目的に関する変化に適応する時が来ました。私はある程度流動的なレスポンシブデザインに傾倒していますが、メディアクエリやその他の便利なテクニックのおかげで、デザイナーはプレゼンテーションのリフローをより細かく制御でき、ビューや画面のサイズにも適応できます。

使用可能なビューが特定の制限を下回ったときにコンテンツを適応させて折りたたむこと、テキストを最大行幅に保ちながら他の要素を展開して再配置することは、私が始めたことです.

これは、サイトをモバイルデバイスに縮小するだけでなく、要素を HDTV のフルスクリーンブラウザに適合させて適合させるため、またはネットブックに似たオフサイズの小さなタブレットでいっぱいにして見栄えを良くするためでもあります。 .

中央のテキスト列をためらうことなく 2000 ピクセルに拡張できる従来の「流動的な」レイアウトの使用について、私はまだ個人的には理解していません。実際のテキストの内容。個人的には、余白も小さすぎるようなサイトに出くわしました.ブラウザを広げても、1920 の幅をいっぱいにしても余白は増えず、それでも小さすぎます.デザイナーは私に不快な余白を課しました.そして、ブラウザの開発ツールでサイトの CSS を変更するよりも、それを修正することはできません ^^

レスポンシブデザインの最初のステップは、私が大好きな 960 ピクセルの固定幅を採用し、ビューが小さいときに 3 つのステップで適応させることでした。これにより、小さなデバイスでも電話画面まで快適になりました。ただし、私の現在の課題は、1200px マークの周りを超えてデザインを拡大することです。ここでは、私の好みに対して幅が広すぎて、別の要素のリフローを行う必要があります - しかし、多くのサイトには、そのために使用するコンテンツさえありません...

score 6 · Accepted Answer

ユーザーとしてだけでなく、Webデザイナーおよび開発者としてもお勧めするいくつかの原則を次に示します。

水平スクロールは避けてください。ほとんどの人は、一方向にしか機能しないマウススクロールホイールを持っています。水平スクロールは、非常に苛立たしいと見なされることがよくあります。現在、垂直スクロールは通常受け入れられます。
長い段落では、列のサイズが重要になります。通常は15〜20語程度の幅をお勧めしますが、自由に試してみてください。alphadoggからのリンクは興味深い読み物ですが、Web開発で「インチ」という用語を使用するのは難しいと言わざるを得ません。単語や文字はおそらくより良い測定値であり、それは私を次の項目に導きます：
幅には相対単位を使用します。これにより、ほとんどの場合、幅を一定の単語数に保つことができます。
役立つヒント：相対単位の問題は、ページがページの幅を超えて拡張される可能性があることです。ほとんどのブラウザでは、cssでmax-widthプロパティを90％程度に指定することで、これを管理できます。したがって、誰かのディスプレイでテキストが大きい場合でも、水平方向にスクロールする必要はありません。

繰り返しになりますが、ほとんどの場合、コンテンツをブラウザ幅の100％に単純に流すことはお勧めしません。そして、ディスプレイが大きくなるにつれて、とにかくブラウザウィンドウを最大化する人がはるかに少なくなると思います。

score 6 · Accepted Answer

16：9の画面は、考えてみれば、実際には垂直方向に制限されていません。これらのモニターでの私の経験では、ネイティブ解像度は通常1920x1080です。垂直方向のスペースは、ほとんどの解像度（1024x768、1280x1024など）よりもまだ大きくなっています。

しかし、私は水平方向のスペースを処理するために液体のレイアウトを書き始めました。一部のWebデザイナーは、960pxの固定幅を使い続けることを好みます。それはすべて、ユーザーに何を提示しようとしているかによって異なります。

score 3 · Accepted Answer

最近は古い画面のことはあまり気にせず、800pxでは足りないときは簡単に1000pxに切り替えられます。ただし、1920x1080の解像度など、より広いものを意図的に設計しないでください。そのような画面を持っているユーザーの数はそれほど多くありません。そうでない場合でも、デザインが広すぎるとユーザビリティに影響します。水平方向に約1500pxに引き伸ばされたテキストを読むのは、あまり良くありません。

score 3 · Accepted Answer

考慮すべきことの 1 つは、アプリケーションの姿勢です。それは、ユーザーがしばらくの間、全神経を集中することが期待される主権アプリですか? 最近、ユーザーが他の言語に翻訳できるようにする Web アプリのページを再設計しました。この場合、ユーザーはアプリケーションのこの部分にしばらく「飛び込む」ことになるため、気を散らす通常のナビゲーション要素を取り除いて、目の前のタスクにより多くのスペースを確保しました。

この場合、ユーザーベースは社内の人に限られており、全員がワイドスクリーンモニターを持っていることを知っていたので、ワイドスクリーンモニターを使用することを決定するのは簡単でした。一般に、ワイドスクリーン以外のモニター用に設計する必要があると思いますが、大きな利点がある場合は、追加のスペースを活用できるように設計してください。通常の画面用にレイアウトされたページを見たことがありますが、JavaScript を使用してページの幅が広いかどうかを検出し、幅が広い場合はページ要素を再配置しました。そうすれば、デフォルトの構成は常に使用可能でしたが、広い画面と JavaScript を使用するユーザーはスペースをより有効に活用できます。

score 2 · Accepted Answer

私はすべての開発を 30 インチモニターで行い、簡単な健全性チェックとして 20 インチモニターでプレビューします。私が行った最近のアプリケーションリリースでは、対象ユーザーが使用しているものの統計情報を JS に送り返し、1024x768 より小さい乱数を大量に返しました。私が収集した 100 ほどの統計のうち、1440x900 より大きい画面で全画面表示を実行していたユーザーは 5 人か 6 人だけでした。

score 1 · Accepted Answer

私の設計コースでは、線の長さは線の高さの40倍を超えてはならないという経験則がありました。その理由は明らかです。目が次の行の先頭に戻ったときに、それが次の行であり、同じ行や次のプラス1ではないことを確認する必要があります。

このため、私は常に固定幅のデザインを使用しています。私の現在のモニターには、幅43cmのアクティブエリアがあります。このSOページの行の高さは5mmです。SOが流体設計を使用する場合、ラインの長さ/ラインの高さの比率は許容できない84になります。
また、30インチモニターでは事態はさらに悪化します。

score 1 · Accepted Answer

見た目ではなく、コンテンツが重要になるようにサイトを設計します。次に、ユーザーが選択できる代替 CSS スタイルシートを提供できます。

これは、設計者にとってより困難な場合があります。たとえば、レイアウトにテーブルを使用しても機能しません。

score 1 · Accepted Answer

しないでください。

4:3 のデザイン、最大幅 800 ～ 900 ピクセル。

私が使用する多くのコンピューター (職場のほぼすべてのコンピューターと同様) は 4:3 です。私のラップトップだけが 16:9 です (実際には 16:10 だと思いますが、十分近いです)。

Web ブラウザーの幅をモニターと同じにするのは好きではありません。スペースの無駄です。そんなに広い範囲で文字を読むことはできません。デスクトップの 4:3 LCD (現在使用している) の幅は 14 インチです。14 インチ幅のテキストを読むことはできません。目はどの行にあるのかを見失います。ひどい痛みです。ほとんどのサイトでは、実際のコンテンツの幅が制限されています。私にとっての StackOverflow のメインコンテンツコラムは約 8 インチで、読みやすいサイズです。

したがって、16:9 になると事態は悪化します。14インチの代わりに16インチを持っているかもしれません。それは巨大です。では、そのすべてのスペースで何をしますか? 2 つの記事を並べて (新聞の 2 つのコラムのように) 並べて表示したい場合を除き、テキストだけを挿入することはできません。つまり、重要でないナンセンスでそれを埋めるだけです。より多くのサイドバー、より多くの広告コラム。基本的に、スペースを埋めるためにコンテンツを強制しています。

誰もが 1920x1080 を実行しているわけではありません。誰もが Web ブラウザーを最大化したままにしているわけではありません。画面の半分近くを重要でない列で埋め尽くすのは、私にとって魅力的ではありません。

score 0 · Accepted Answer

これは、いくつかの有用な情報が含まれている可能性のある別のSO質問へのリンクです。

book-recommendation-web-user-interface-design

score 0 · Accepted Answer

私はまだ4：3モニターを使用している大多数のために開発することに固執します。16：9固有のコンテンツを作成したい場合は、「ワイドスクリーンモニター用に拡張」バージョンへのリンクを提供します。これは、すべてがアナモルフィックではなかった時代のDVDの裏側のラベルのようなものです。

score 0 · Accepted Answer

ユーザーがワイドスクリーンモニターを使用しているからといって、ウィンドウが最大化されているわけではないことを忘れないでください。

score 0 · Accepted Answer

ワイドスクリーンモニターの常連ユーザーとして、デザイナーがサイトの幅を広げているのを見たくありません。私は 24 インチのワイドスクリーン (1920x1200) を使用しており、Web を閲覧するときは通常、2 つのブラウザーを並べて実行しています。どちらかといえば、いくつかのサイトをもう少し狭くするのが最善でしょう. ほとんどのサイトは 960 ピクセルで問題なく動作しますが、すべてを表示するためにサイトを大きく開いたり、スクロールしたりしなければならないときは面倒です。

score 0 · Accepted Answer

私は常にウェブサイトの幅として 964px を使用しています。サイトによって異なりますが、垂直スクロールバーを考慮して、幅を 1024px 未満に抑えています。これは、サイトが 800 ピクセルの幅の画面では大きすぎず、1024 および 1280 ピクセルの幅の画面で見栄えがするのに十分な大きさであることを利用しています。

私の経験では、かなり大きなワイドスクリーンを使用しているユーザーでも (私自身は 22 インチ (1680x1050) のデュアルスクリーンを使用しています)、読みやすさのために幅約 1024 ピクセルの固定幅レイアウトを好むことがわかりました。

私は非常に長いスパンのテキストを読むのがとても嫌いで、「本の幅」に保つのが好きです。私が魅力的だと感じ、大規模なユーザーベースを持っているほとんどのウェブサイトは、これらのサイズに近い.

お役に立てれば。

score 0 · Accepted Answer

Web ユーザーの大部分はまだ標準の非ワイドスクリーンモニターを使用しているため (以下の統計と私のコメントを参照)、私は彼らのために設計します。個人的には 1024x768 の解像度に最適化しています。

http://www.thecounter.com/stats/2009/January/res.php

score 0 · Accepted Answer

ワイドスクリーンで垂直解像度が問題ないと思い込まないでください。1440x900 は一般的な解像度のようです。1024x768 よりも大きいですが、1280x1024 よりも著しく短くなっています。

また、これらの新しいワイドスクリーンモニタがすべて適切に使用されていると思い込まないでください。モニターがネイティブ解像度で使用されていないセットアップをかなり見てきました。人々は、何かが間違っていることに気付いていないか、たとえ少しあいまいになっていても、特大の文字を高く評価しています.

aspect-ratio - 16:9 画面の Web デザインについてのあなたの考え

19 に答える 19

Related

Reference