私は新しい Web アプリを設計している最中で、アプリのレイアウトとデザインを最適化する必要がある「Web セーフ エリア」について考えています。Web セーフ エリアとは、ブラウザーで Web サイトを表示するために使用できる実際の領域を意味します (モニターの解像度と、ブラウザーと OS が占有するスペースの影響を受けます)。
私は自分でいくつかの調査と考えを行いましたが、一般的な意見が何であるかを確認するためにこれを共有したいと思いました. これが私が見つけたものです：
最適なディスプレイ解像度:
- w3schools web statsが最も参照されているソースのようです (ただし、これらはサイトの結果であり、技術に精通したユーザーに偏っていると述べています)。
- http://www.w3counter.com/globalstats.php (追跡サービスを使用する 15,000 の異なるサイトからのデータを集計)
- StatCounter Global Stats > Display Resolution (統計は、300 万を超える Web サイトの StatCounter ネットワーク全体から収集された 1 か月あたり 150 億ページビューを超えるサンプルで StatCounter によって収集された集計データに基づいています)
- NetMarketShare Screen Resolutions (marketshare.hitslink.com) (Web 分析コンサルティング会社であり、サイト訪問者のブラウザーからライブ統計顧客のオンデマンド ネットワークにデータを取得します。データは、1 か月あたり約 1 億 6000 万の訪問者から収集されます)
ディスプレイ解像度の概要:上記のソース間には多少のばらつきがありますが、一般的に 2011 年 1 月現在、1024x768 は約 20% のように見えますが、〜 85% は少なくとも 1280x768 のより高い解像度を持っています (1280x800 がこれらの中で最も一般的です)ソースにもよりますが、ウェブ全体の 15 ～ 20% です。1280x1024 と 1366x768 が 9 ～ 14% のシェアでこれに続きます）。私の推測では、北米でフィルタリングすると、より高い解像度の値がさらに一般的になり、北米の企業ユーザーでフィルタリングするとさらに高くなると思います (残念ながら、地理的にフィルタリングされた無料の統計は見つかりませんでした)。もう 1 つの注目すべき点は、1024x768 のデスクトップ ユーザー人口は、iPad (1024x768 のネイティブ ディスプレイ) がこれらの数を支えている可能性が高いため、前述の 20% よりも低い可能性が高いことです。
私の推奨は、1280x768 の制約を中心に最適化することです (*注: 1280x768 は実際には比較的まれな解像度ですが、1366x768 が比較的一般的であり、1280 が最も一般的な水平解像度であることを考えると、有効な制約範囲であると思います)。
ブラウザー + OS の制約: 制約 をさらに追加するには、ブラウザー (最もスペースを消費する IE を想定) と OS (WinXP-Win7 を想定) が占めるスペースを差し引く必要があります。
- Win7 は 40px の高さで最大のタスクバー フットプリントを持っています (XP と Vista は 30px)。
- デフォルトの IE8 ビューは、ステータス バーで画面の下部に最大 25 ピクセルを使用し、Windows のタイトル バーとブラウザー UI で画面の上部にさらに 120 ピクセルを使用します (デフォルトの「お気に入り」ツールバーが存在すると仮定すると、代わりにお気に入りツールバーなしで 91px である必要があります)。
- スクロールバーがないと仮定すると、ウィンドウの輪郭のために水平方向に合計 4px も失われます。
これは、583 ピクセルの垂直スペースと 1276 ピクセルの水平スペースが残っていることを意味します。つまり、1276 x 583 の Web セーフ エリア
これは正しい考え方ですか？
私はいくつかのデザインのベスト プラクティスを Google で検索しようとしましたが、ほとんどの場合、1024x768 前後のデザインについて話していますが、これは急速に消えつつあるようです。
これに関する助けがあれば大歓迎です！ありがとう。
