ファーストビューは何pxまで？ ブラウザの表示領域サイズ大公開

御社のサイトでは、ファーストビュー（ページを開いてスクロールしなくても表示される範囲）をどれくらいに想定していますか？ 無理にファーストビューに要素を詰め込まなくても、興味をもてばユーザーはスクロールしてくれることを以前に書きましたが、ファーストビューが重要であることには変わりません。

とはいえ、ノートパソコンや液晶ディスプレイの進化でユーザーの使う画面のサイズは変わってきています。また昨今のChromeやOpera、Firefox 4のような、縦方向により多くのコンテンツを表示できるようにしているブラウザの普及で、さらにファーストビューのサイズは変わってきているでしょう。

そこで、Web担のサイトの訪問者が、どれぐらいの表示領域サイズでブラウザを使っているのかのデータを紹介しましょう。まずは、2011年のブラウザの高さデータと幅データから。

Web担訪問者のブラウザ表示領域の高さ

Web担訪問者のブラウザ表示領域の幅

これではよくわかりませんね。少しグラフの作り方を変えて、「どれだけの高さ（幅）までは、全体の何%のユーザーがスクロールせずに表示できるか」のサポート率のグラフにしてみました。

どの高さを想定すると訪問者のどれだけがスクロールせずに見られるか

どの幅を想定すると訪問者のどれだけがスクロールせずに見られるか

たとえば、80%の人が縦スクロールせずに見られる高さは550px程度しかなく、また、80%がスクロールバーなしに見られる幅は1000px以下ということになります。

グラフを見ると、幅はほぼ1000pxを基準に考えればいいものの、高さはかなりばらつきがあることがわかります。

こうしたデータを2006年からの推移で示したのが次のグラフです。最近になればなるほどサイズが大きくなっていますので、5年分をすべて重ねて表示してあります。

どの高さを想定すると訪問者のどれだけがスクロールせずに見られるか（2006年～2011年）

どの幅を想定すると訪問者のどれだけがスクロールせずに見られるか（2006年～2011年）

この変化を見ると、ワイドディスプレイ化の影響でしょうか、幅に関しては2006年当時から大幅に広がってきている（80%サポートラインで見ると800px→1000px）ものの、高さに関しては約550pxのまま変わっていないことがわかります。

結論としては、ディスプレイが大きくなってきているものの、縦方向に関してはさほど増えていないため、全体の80%に対してちゃんと見せたければファーストビューは550px程度で設計するのが良いということになります。