LPやWEBサイトの縦幅(ファーストビューの高さ)は何pxが適切か?

今回は標題のとおり、LP(ランディングページ)やWebサイトの縦幅、つまりファーストビューの高さは、何px(何ピクセル)が適切か?について、書きたいと思います。

ファーストビューとは何か?

ファーストビューとは何じゃらほい?ファーストだけに初回訪問者?初めてのWeb閲覧?
いえいえ、違いますよ~。まずは、下の画像をご覧ください。

screenshot-pixlr.com 2015-06-27 14-39-33

ファーストビューは、Webサイトにアクセスした際、ユーザー(サイト訪問者)が最初に見るWEBサイト表示範囲のことを言います。スクロールをする前の表示画面範囲です。「Abobe  the Fold(アボブザフォールド)なんてて言ったりもしますが、この言葉は覚えなくていいです。「ファーストビュー」を記憶してください。

このファーストビューの範囲、特に縦幅は、ユーザーが見ているディスプレイの解像度と密接に関係があります。
世の中にディスプレイのサイズはたくさんあるため、結果としてファーストビューの縦幅をどれくらいにすればよいか?悩むWEBサイト制作者やデザイン担当者、自社サイトWeb担当者、マーケッター(マーケティング担当者)が多い模様です。

Webサイト制作には、いろいろな種類があります。

コーポレートサイト
(いわゆる企業のホームページ)

ショップサイト
(ショップのホームページ)

ECサイト
(商品を購入できるショッピングサイト)

プロモーションサイト
(商品、サービス、イベント等の認知)

ブランディングサイト
(商品、サービスなどのブランドイメージ構築)

ポータルサイト
(各サイトへのアクセスの入り口となるサイト)

リクルートサイト
(求職者への自社アピールや説明会などの誘導目的)

イントラサイト
(社内コミュニケーション目的)

ランディングページ
(1ページで構成されたWebページ)

など、種類や内容も、その情報量も様々ですが、ファーストビューに関しては、そのページを見るユーザーにとってどれも同じ範囲・領域なのです。

 

ディスプレイ解像度のスタンダードは?

ユーザーがWEBサイトを見る環境を、こちらから指定したり、操作することはできません。
印刷物なら、A4サイズとかB5サイズとか決まったサイズで同じ見え方になるようにできるのですが、WEBサイトはできません。そのための対策として、「ほとんどの人にちゃんと見えるように調整」をしていくしかないということになります。

そこで、「世の中のユーザーは、どんなディスプレイ解像度でWEBサイトを見ているのかな?」という考えに行き着きます。
どんなモニターサイズ、ディスプレイ解像度が世の中のスタンダードなのかを把握して、ファーストビューのサイズを決めようというわけです。

 

最新の解像度シェアを調べる方法

解像度シェア率を調べるには、下記サイトを利用します。

screenshot-gs.statcounter.com 2015-06-27 15-02-04

http://gs.statcounter.com/

このサイトで「日本(Japan)」の「解像度(Screen Resolution)」を「棒グラフ(Bar)」で「直近1ヶ月(Monthly)」表示させると…、

StatCounter-resolution-JP-monthly-201505-201506-bar

こんな感じで縦横幅が出てきます。

↓↓↓↓↓↓↓↓↓↓↓

実際の結果を別タブで表示

各サイズ別のシェア率をみていくと

  • 横幅1920×縦幅1080ピクセルが23.5%
  • 横幅1366×縦幅768ピクセルが23.18%
  • 横幅1280×縦幅800ピクセルが5.67%
  • 横幅1280×縦幅1024ピクセルが5.03%

…と続きますが、大事なのは縦幅の分布ぐあい。
どうやら700ピクセル以上の画面解像度でPCモニターを使っている人が大半のようです。

Chrome・Firefoxなどのウェブブラウザを画面いっぱいに使っている人ばかりじゃないということを考えると、ファーストビューの縦幅は、500px~550pxにしたほうが無難ではないかという推測が成り立ちます。
ですが、これはPCサイトの場合です。スマートフォンの普及率が高まる昨今、スマホのファーストビューを無視するわけにはいきません。
スマホ専用にサイトを制作する場合は、AndroidとiPhoneの違いもありますし、機種によって画面サイズも解像度も多種多様、更に画面回転なる機能があるため、一概にこのサイズ!とは言えませんが、画面サイズが小さめのiPhone5/5s/5cにあわせて縦幅460pxにすると無難でしょう。

 

まとめ:LPやWEBサイトのファーストビューは550px程度

まずはファーストビュー縦幅を550px程度にして、そこから実際にユーザーの反応を見ながら修正する。調べていくと、このような流れになりました。ファーストビューに売り込みたい要素をすべて詰め込めばいいか?というと、そうでもないのが難しいと同時にも面白くもあるところ。

たとえば、TOPページ(トップページ)を設計する際には、キャッチコピーやキャンペーン情報など、まず心を掴む情報や、ランキング1位の人気商品や製品などのトレンド情報よく読まれている記事などの構成要素をファーストビューに持ってくると直帰率が抑えられます。
また、商品一覧ページを設計する際には、ユーザーは商品を見たいわけですから、ファーストビューに商品が表示されていないと離脱される可能性が高くなります。メニューより商品詳細ページへ誘導したところで、ファーストビューで表示される情報量が少なければ離脱が増えます。写真があるかないかでも変わってきますね。ECサイトだと、そこから購入に至るまでの操作性も大切です。
コーポレートサイトやリクルートサイトの閲覧者は、その会社の基本情報、実績データや社内の雰囲気、カラーなどの知りたい部分がページ内を探さないといけないようでは、その会社イメージもダウンします。

そのWebサイトのコンテンツ、目的や訴求内容などのポイント見極め、ファーストビューの表示領域サイズを考慮していく制作方法が理想的なのではないでしょうか。ファーストビューでユーザーに見える範囲にユーザーに最適化された情報をしっかり訴求することを意識しましょう。
ご参考頂ければ幸いです。

 

23/30/500 xx.x

このエントリーをはてなブックマークに追加