はじめに
「Webサイトの縦サイズは何pxにすればいいの？」
「PCとスマホでは、どのくらいの高さを基準に作ればいいの？」と迷っていませんか。
デザインカンプを作るときに横幅は決められても、縦を1,000pxや2,000pxなど何pxまで用意すればよいのか分からず、作業の手が止まってしまうこともありますよね。
この記事では、PC・スマホで考える縦サイズの目安や、デザインするときの高さの決め方、確認しておきたいポイントまで分かります。
Webサイトの縦サイズはどのくらいが目安？
Webサイトの縦サイズを決めるときは、PCとスマホで画面に表示される範囲が異なるため、それぞれの目安を分けて考える必要があります。
ここでは、PCサイトとスマホサイトの縦サイズの目安と、スクロールを前提にページ全体の高さを設計する考え方を説明します。
PCサイトの縦サイズは何pxが目安？
PCサイトのファーストビューは、縦700〜900px程度を目安にすると設計しやすくなります。
ブラウザのタブやアドレスバーがあるため、縦1080pxのディスプレイでもすべてがWebサイトの表示領域になるわけではありません。
大切な情報は、最初の画面で見やすい位置に配置するとよいでしょう。
スマホサイトの縦サイズは何pxが目安？
スマホサイトのファーストビューは、縦600〜900px程度がひとつの目安です。
機種やブラウザによって表示できる範囲が異なるため、特定のサイズだけに合わせる必要はありません。
主要な情報がさまざまな画面サイズで見やすくなるように調整しましょう。
Webサイト全体の高さは固定せずスクロールを前提にする
Webサイト全体の高さは固定せず、文章や画像の量に合わせて縦方向へ伸びるように設計します。
高さを固定すると、内容の追加や画面幅の変化によって文章などが見切れることがあります。
ファーストビューを意識しながら、それ以降は自然にスクロールして読める構成にするとよいでしょう。
Webサイトの縦サイズを決めるときのポイント
Webサイトの縦サイズを決めるときは、ページ全体の高さだけでなく、画面を開いた直後にどこまで情報が表示されるかを確認する必要があります。
ここでは、ファーストビューに配置する情報、PCとスマホの表示範囲の違い、複数の画面サイズで確認する方法を説明します。
重要な情報をファーストビューに収める
ページを開いて最初に伝えたい情報は、スクロールせずに確認できるファーストビュー内に配置します。
ページの目的に直結する見出しや案内を上部に置き、どのようなページなのかひと目で分かるようにするとよいでしょう。
PCとスマホで表示される範囲が違うことを考慮する
PCとスマホでは画面の縦横比が異なるため、同じページでも一度に表示される情報量が変わります。
特にスマホでは情報が縦に並びやすいため、それぞれの端末でファーストビューを確認し、大切な情報が見やすい位置にあるか調整しましょう。
複数の画面サイズで見切れがないか確認する
Webサイトを制作したら、複数の画面サイズで文字や画像が途中で切れたり、画面外にはみ出したりしていないか確認します。
見切れがある場合は、高さや余白、配置を調整し、どの画面でも無理なく内容を確認できるようにしましょう。
PCやスマホで表示を確認するときに、どの画面幅を基準にすればよいか迷う場合は、スマホ制作で使いやすいサイズの目安も確認しておくと安心です。
▶Web制作でスマホのサイズは何px？画面幅の目安と決め方
Webサイトの縦サイズで迷ったときの決め方
Webサイトの縦サイズに迷った場合は、最初から特定のpx数に固定するのではなく、ファーストビューに表示したい情報を基準に調整します。
ここでは、ファーストビューに必要な情報を整理し、実際の表示を確認しながら縦サイズを調整する方法を説明します。
ファーストビューに必要な情報を決めてサイズを調整する
まずは、ページを開いた直後に見せたい見出しや画像、ボタンなどを決めます。
必要な情報を配置してから、ファーストビューに収まるように各要素の高さや余白を調整すると、バランスを取りやすくなります。
ファーストビューを整える際は、上部にあるヘッダーの高さによって実際に見える範囲も変わるため、ヘッダーサイズの目安もあわせて確認しておきましょう。
▶ホームページのヘッダーサイズは何px？PC・スマホ別の高さの目安
実際の画面で表示を確認して縦サイズを調整する
サイズを調整したあとは、実際のPCやスマホでページを開き、見出しや画像などが見切れていないか確認します。
必要な情報が画面外に出ている場合は、高さや余白を見直しながら、見やすい表示になるように整えましょう。
まとめ
Webサイトの縦サイズには目安がありますが、決まったpx数に合わせるのではなく、掲載する内容や端末に応じて調整することが大切です。
特にファーストビューでは、見出しや画像など大切な情報が見やすく収まっているかを意識しましょう。
PCとスマホの両方で実際の表示を確認しながら、見切れのない自然なレイアウトに整えてみてください。
