ファーストビューの高さは何pxにするといいの？直帰率を下げるための方法などについて説明します！

今回はタイトルの通り、LP（ランディングページ）やWebサイトの縦幅、つまりファーストビューの高さ、メインビジュアル、直帰率などについて、説明していきたいと思います。

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

まずファーストビューとは何かを説明します。ファーストビューというのは、リンクを踏んで初めに画面に行事されている範囲を言います。例えば、AppleのMac商品紹介ページ（https://www.apple.com/jp/mac/）を開いた時、以下の画像がファーストビューです。

英語では「Abobe the Fold」（アボブザフォールド）と言います。

ファーストビューの設定は必要か

ファーストビューは上記で説明した通り第一印象になります。サイトの種類によってはファーストビューでユーザーの9割がブラウザバックしてしまうものもあり、ファーストビューを改善しただけで反応率がアップした！という話もよくあります。

ファーストビューのコンテンツとポイント

ファーストビューには、ユーザーが閲覧を辞めてしまわないようにユーザーの気を引くコンテンツというものが重要になります。そこで直帰率を下げるためにはどうすればいいか、ファーストビューのコンテンツとポイントについて説明します。

メインビジュアル

商品やものを説明する場合、画像で説明すると伝わりやすく、メインビジュアルというのは画像を使って一目でどのようなものかを伝えることができます。文字だけでは時間がかかったり誤解を生むことがあるため、メインビジュアルを設定するたでケモユーザーから交換や信頼を持っていただけます。例えば、スライドショーなど様々なビジュアル表現があります。

そんなメインビジュアルのデザインの参考になるサイトを紹介します。

●WEBデザインのメインビジュアルまとめ
http://mainvisual.net-king.com/
カテゴリーからも選択でき、見たいデザインを中心に見ることができます。

●ブブンデザインアーカイブ

http://bubundesignarchive.jp/mvs/

こちらもカテゴリーごとに選択することができます。また、ロゴデザイン、アイコン、見出しといった様々なデザインも見ることができます！

キャッチコピー、メッセージ

食品や商品紹介のページに訪問した際、「国産」や「ランキング1位」とメッセージが書かれていると安心感を持ちますよね。メインビジュアルも重要ですが、伴ってキャッチコピーを記載することで直帰率を下げることができます。

キャッチコピーのポイントは、「ターゲットは誰か」「説明したいものは何か」を考えて入れましょう。

ナビゲーション

ナビゲーションというのは、ユーザーが次にどのページに行きたいかのボタンを配置し、適切に案内をしていくリンクです。例えば、資料請求やお問い合わせのボタン、「海遊館」のサイトのように下にスクロールしてくださいと表記されているものがあります。

ナビゲーションがない場合、どこに欲しい情報があるか理解してもらえず離脱してしまうこともあります。ユーザーにわかりやすい場所にリンクを設置することがポイントです。

その他、サイトに合わせる

Webサイトには先ほどの海遊館の他に、商品紹介のページ、老人向けのページと様々なものがあります。サイトごとに色を変えたり、文字を大きくしたりとサイトごとに合わせることも重要になります。

解像度を指定できるのか

ユーザーがWebサイトを見る環境を、こちらから指定したり操作したりすることはできません。印刷物であればA4サイズやB5サイズといったように、同じサイズで表示させることができるのですが、Webサイトになるとユーザーが使用するディスプレイの解像度によって変わってきてしまうため、同じ見え方に指定することはできないのです。

ファーストビューと解像度の関係

(画像引用：https://corporate.wowow.co.jp/features/henai/3887.html)

ファーストビューの範囲は、ユーザーが使用しているディスプレイの解像度と密接に関係があり、訪問してくれたユーザーの解像度に合っていないサイズが設定されていた場合、そのユーザーには見にくいと感じられてしまいます。そのためファーストビューの縦幅をどれくらいにすればいいのか、と悩むWebサイト制作関係者は多いと思います。

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

最新の解像度使用率を調べる方法

解像度の使用率を調べるためには、statcounterを利用します。

このサイトで、以下の順にクリックをします。

「Edit Chart Data」
↓
Statistic：「Screen Resolution → Desktopのみチェック」
↓
Regoin：「Japan」
↓
Chart Type：「Bar」
↓
Period：「Monthly」：「Last Mounth」
↓
「View　Chart」

すると結果が表示されます。

https://gs.statcounter.com/screen-resolution-stats/desktop/japan/#monthly-201908-201908-bar

結果からファーストビュー幅を推測

上記で紹介したページの各サイズ別の使用率を見ていくと

◉1920*1080 24.73%
◉1336*768 14.26%
◉1536*864 6.24%
◉1280*1024 4.54%
⁝

と続き、その他の解像度が29.94%となっています。
最近ではテレビを中心として、4Kや8Kといった高解像度が普及し始め、パソコンを使ったゲームやPlayStation 4などの家庭用ゲームも4K出力ができる物が増えてきました。そのためパソコンのディスプレイにも4K,8Kを使用する人が増え始めているのかもしれません。

一般的にはフルHDと呼ばれる1920×1080のサイズが多いようです。ですが、ブラウザを画面いっぱいで閲覧する人ばかりではないことと、フルHD以外にも使用者がいることを踏まえ、縦幅は550px前後が無難だと言えるでしょう。

スマートフォンの適切サイズは？

550px前後はPCサイトの場合です。スマートフォンの普及率が高まる今日、スマートフォン用にもサイトを作成することが必須となってきています。そのためスマートフォンのファーストビューを無視するわけにはいきません。スマートフォンのサイトを制作といってもAndroidとiPhoneの違いもありますし、機種によっては画面サイズも解像度も違ってきます。

先ほど紹介したstatcounterでスマートフォンの結果では、373×667の解像度の使用率31.6%とわかりました。スマートフォンには画面の回転機能もあるため、一概にこのサイズがいいとは言えませんが、広く見て高さは550〜650px、幅は350px前後がいいと言えますね。

https://gs.statcounter.com/screen-resolution-stats/mobile/japan#monthly-201908-201908-bar

PCの縦幅は550pxから！

最近スマートフォン界ではXperia1やiPhone11が発売され、解像度、比率が少しずつ変化していくように、もしかするとパソコンの解像度も少しずつ上がっていくかもしれません。まずはファーストビューの縦幅を550px前後にして、そこからユーザーの反応などを見ながら修正していくと、より良いサイトが出来上がると思います。

自分がこのサイトを見た時、受け取って欲しい印象を受け取れるかや、欲しい情報がすぐ手に入るかなどユーザーを意識したWeb制作をしていきましょう！