ファーストビューの最適な高さとサイズ【PC・スマホ・タブレットなどデバイス別に解説】

ファーストビューはホームページの第一印象を左右する重要な要素ですが、多くの企業が配置・高さ・デバイスごとの表示に悩んでいます。

適切な高さ・配置・作り方を知り、効果的なファーストビューを作ればブランドイメージや売上向上につながります。

『ファーストビューの最適な高さを具体的な数値で教えて』
『ファーストビューに入れるべき要素とその配置方法は？』
『スマートフォンとPCで見た目が大きく異なる場合の対応方法を知りたい』

今回の記事では最新データに基づき、デバイスごとのファーストビューの最適な高さや効果的な作り方をまとめました。

本記事を読めば、PC・タブレット・スマホでそれぞれに最適化されたファーストビューを設計できます。

まずはファーストビューの基本を理解し、段階的に実践してホームページのパフォーマンスを向上させましょう。

※2024年11月28日：記事の情報を更新しました

ファーストビューとは？

ファーストビューは、ホームページに訪問したユーザーがスクロールせずに表示される最初の領域です。
ユーザーが最初に目にする部分であり、ホームページの第一印象を決定付ける重要な要素です。

多くのユーザーは3秒以内にホームページが自分にとって有益かどうかを判断し、興味を引かない場合はすぐに離脱するといわれています。

また、「3-30-3ルール」では以下の流れで最終的に約3分間の滞在になるのが理想とされています。

1. 最初の3秒でユーザーの注意を引く
2. その後の30秒で興味をかき立てる
3. 最終的に3分間、ユーザーがホームページに滞在する

ファーストビューでユーザーの注意を引くには、適切な高さとサイズで作成しつつ強いインパクトが求められます。

ファーストビューに最適な高さ【デバイス別】

デバイス別にファーストビューの最適といわれる高さは、以下のとおりです。

• PC：550px～650px
• スマホ：667pxまで
• タブレット：1024pxまで

各デバイスのディスプレイサイズ（解像度）のシェアを参考にして、ファーストビューの高さを出しました。
詳しく解説をします。

PCのファーストビューの高さは550px～650px

PCのディスプレイサイズ（解像度）のシェア率を、以下の表にまとめました。

※参考：Desktop Screen Resolution Stats Japan
※2024年10月のシェア率

ディスプレイサイズは小さくても1280px×720pxなので、PCのファーストビューの高さは550px～650pxに設定しましょう。

高さを550px～650pxにすると、一目で必要な情報を確認できます。
ユーザーの視線は左上を始点としてZ字型・F字型などの動きで下方に移動するため、下部の情報ほど目に入りません。
そのため、一目でユーザーの視野に入る範囲がおおよそ550px～650pxだと考えられています。

また、ブラウザのウィンドウサイズが異なる環境でも、550px～650pxの範囲なら多くのユーザーに対応できます。

スマホのファーストビューの高さは667pxまで

スマホのディスプレイサイズ（解像度）のシェア率を、以下の表にまとめました。

※参考：Mobile Screen Resolution Stats Japan
※2024年10月のシェア率

現在主流となっているディスプレイサイズの高さは小さくても667pxなので、スマホのファーストビューの高さは667pxまでに設定しましょう。

スマホのディスプレイサイズの上位シェアで高さが小さい375px×667pxは、iPhone SEも含まれます。

なお、以前は5インチ前後の画面サイズが主流でしたが、現在のスマホは6インチ～7インチが中心となりつつあります。
そのため、将来的には800pxほどが最適な高さになるかもしれません。

タブレットのファーストビューの高さは1024pxまで

タブレットのディスプレイサイズ（解像度）のシェア率を、以下の表にまとめました。

※参考：Tablet Screen Resolution Stats Japan
※2024年10月のシェア率

現在主流となっているディスプレイサイズの高さは小さくても1024pxなので、タブレットのファーストビューの高さは1024pxまでに設定しましょう。

タブレットのディスプレイサイズで最もシェア率があるのは768px×1024pxなので、高さを1024pxまでにすれば多くのユーザーに対応できます。

なお、タブレットは横向きにしてホームページを閲覧するケースも考慮に入れる必要があります。
横向きを考慮すると、タブレット向けのファーストビューは740px～800pxほどが最適な高さとしておすすめです。

横幅・高さが画面いっぱいのファーストビューの作成方法

横幅・高さが画面いっぱいのファーストビューを作成するには、CSSの「vw（viewport width）」「vh（viewport height）」を使用しましょう。

vw・vhはビューポート全体の幅や高さを基準に要素のサイズを指定できる単位で、画面サイズに応じて自動的に調整されます。

たとえば、以下のように設定すれば画面全体に広がるデザインの実現が可能です。

.first-view { 
    width: 100vw; /* 横幅を画面いっぱいに */
    height: 100vh; /* 高さを画面いっぱいに */
    display: flex;
    justify-content: center;
    align-items: center;
}

上記のコードでは、「width: 100vw」「height: 100vh」で、要素がビューポート全体を占めるよう指定しています。

なお、コンテンツや要素を詰め込みすぎると、スマホでは画面に収まらなくなる可能性があります。

そのため、「@media」「display: none」「ハンバーガーメニュー」などを活用してスペースを確保しましょう。

また、デザイン時にはGoogle Chromeのデベロッパーツールなどでスマホ表示させ、ファーストビューの表示を確認してください。

ファーストビューの高さに関するよくある質問

ファーストビューの高さに関してよくある質問を挙げると、以下のとおりです。

• ファーストビューの画像サイズはどれくらいが最適？
• スマホのファーストビューの高さを750pxにするのはダメ？
• PCのファーストビューの高さが1440pxだと大きすぎる？

あらかじめ疑問を解消しておき、適切な高さのファーストビューを作成してユーザー体験の向上に努めましょう。

ファーストビューの画像サイズはどれくらいが最適？

ファーストビューの画像サイズはデバイスごとに最適化する必要があり、PCでは1200px×650pxが目安です。

ただし、高品質な画像をどのデバイスでも提供したいなら、2560px×1440pxといった大きなサイズも検討しましょう。

また、画像サイズが大きすぎると表示速度が遅くなるため、デバイスの種類や画面サイズに応じて表示する画像を切り替えるのも有効です。

スマホのファーストビューの高さを750pxにするのはダメ？

スマホのファーストビューの高さを、750pxに設定するのはあまりおすすめできません。

なぜなら、現在のスマホで高さ700px以下のシェア率は8%ほど存在するからです。

ファーストビューの高さはピクセル指定ではなく、CSSの「vw（viewport width）」「vh（viewport height）」を利用しましょう。

PCのファーストビューの高さが1440pxだと大きすぎる？

PCのファーストビューの高さが1440pxは大きすぎるため、推奨できません。

PCで大きいディスプレイサイズの2560×1440pxのシェア率はわずか5%ほど、高さ1200px以下のシェア率は4割以上を占めています。

高さ1440pxでは多くのユーザーがスクロールを強いられるため、直帰率・離脱率の増加につながる可能性が高いです。

まとめ

ファーストビューの高さについて解説をしました。

PC・スマホ・タブレットなどは、画面サイズが異なります。

2024年時点でファーストビューの最適な高さは、PCで550px～650px、スマホで667pxまで、タブレットで1024pxまでです。

ファーストビューの高さは、ユーザーがホームページの第一印象を決める要素です。
ホームページの閲覧または離脱にも左右されるので、最適な高さにする必要があります。

また、効果的なファーストビューにするには、ターゲットユーザーを選定し、明確なメッセージとキャッチコピーを決めるのも重要です。

継続的なABテストやヒートマップ分析を通じ、ユーザー体験の向上とコンバージョン率の改善を目指しましょう。