編集長ブログ―安田英久
ファーストビューは何pxまで? ブラウザの表示領域サイズ5年間の変化を大公開

御社のサイトでは、ファーストビューをどれくらいに想定していますか?

今日は、Webページのデザインやワイヤーフレームの検討時に考慮すべき、ユーザーの閲覧環境について。特に、ブラウザの本当の表示領域を生データから紹介します。

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

とはいえ、ノートパソコンや液晶ディスプレイの進化でユーザーの使う画面のサイズは変わってきています。また昨今の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程度で設計するのが良いということになります。

また、スマートフォンも含めたデータになっていると、小さなサイズの訪問者が増えて混乱してしまいそうですが、実は最近のスマホ端末は下手なPC用ディスプレイよりも縦方向の解像度が高いので(iPhone 4で960px)、ファーストビューを考える際にはなかなか難しいものです。やはりスマホはスマホ用の画面で設計するのが良さそうですね。

ちなみに、これらのデータは、SiteCatalystで取得した情報です。Google Analyticsなどのアクセス解析ツールでもユーザーの解像度の情報は取得できますが、それは「画面(デスクトップ)の解像度」。そこにブラウザを開いて、ブラウザのツールバーやタブの範囲を除いた部分が表示領域ですから、実際には違うデータだと思うのがいいでしょう。

これと同様の情報をGoogle Analyticsで取得したい場合は、独自にJavaScriptでブラウザのビューポートを調べてカスタム変数やイベントトラッキングで情報を保存していく必要があります。

デスクトップの中に開いたブラウザのウィンドウから、タイトルバー、タブ、ツールバー、スクロールバーなどを除いた部分が、ページコンテンツで使える領域(ビューポート)。
この記事が役に立ったらシェア!
tweet710このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

ドメインオーソリティ
ドメインオーソリティ(DA)は、そのWebサイトが検索エンジンでの順位においてど ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore