はじめに
背景
Webサイトは画面サイズや閲覧環境が多様になり、縦方向の設計が以前より重要になりました。とくに「ファーストビュー」（訪問者が最初に見る画面領域）の高さは、印象や離脱率に直結します。
本書の目的
本書は、Webサイトの縦サイズに関する設計の考え方を分かりやすく整理します。PCとスマホそれぞれの目安値や、解像度ごとの安全な表示範囲、縦方向で優先すべき情報配置について実務的に解説します。
対象読者
デザイナー、コーダー、コンテンツ制作者、ウェブ担当者など実際に画面設計に関わる方を想定しています。専門用語は最小限にし、具体例を交えて説明します。
本書の構成
第2章で縦サイズの基本方針を示し、第3章でPCの推奨高さ、第4章でスマホの実務上の目安を扱います。実際の数値と考え方を両方押さえ、現場で使える知識を提供します。
Webサイトの「縦サイズ」は固定しないのが基本
概要
Webページのサイズは横幅×縦幅で表しますが、横幅は基準を決めやすい一方で縦はスクロール前提で可変にするのが一般的です。縦方向に上限を設けず、必要な分だけ情報を積み重ねる考え方が基本です。
なぜ縦を固定しないのか
画面ごとに高さが違うため、すべての環境に合う単一の縦サイズを決めるのは現実的ではありません。ユーザーはページをスクロールして情報を探すため、コンテンツ量に応じて縦に伸ばす方が使いやすくなります。
スクロールと閲覧行動
人はスクロールを使ってページを読む習慣があります。縦を無理に詰め込むと窮屈に感じ、重要な部分が埋もれる恐れがあります。逆に情報を整理して段落ごとに区切ると、読みやすさが向上します。
実務での扱い方（具体例）
・記事ページ：見出し・リード・本文を順に並べ、縦に長くなるのを受け入れます。
・商品ページ：主要情報は画面上部にまとめ、詳細は下へ配置します。
・実装のコツ：コンテンツベースで高さを決めるCSS（例：min-heightや自動高さ）を使い、固定ピクセル値は必要な箇所だけに留めます。
縦サイズを柔軟に扱うことで、どんな画面でも読みやすく、運用しやすいサイトになります。
PCサイトの推奨「縦サイズ」―ファーストビューはおよそ800〜900px
目安
PCサイトのファーストビューは、おおむね800〜900pxを目安にすると分かりやすいです。代表的なモニター解像度では、1920×1080の環境で約800〜900px、1366×768の環境では500〜600px程度が最初に見える範囲になります。実際の表示高さはOSやブラウザのメニューを除いて約850〜950pxになり、重要情報を安全に収めるなら700〜800px前後を目標にしてください。
設計上のポイント
- 横幅は1200〜1400pxを基準にするのが主流です。これを基に高さを700〜800px前後で設計するとバランスが取りやすいです。
- ファーストビューには見出し、主要な行動喚起（CTA）、視覚的に訴える画像を優先して配置します。重要な情報は上から700〜800px以内に収めると安心です。
- 固定の高さにしすぎず、コンテンツ量や比率に応じて調整します。ウィンドウサイズを縮めた際の崩れを必ずチェックしてください。
実務的な確認方法
- デザイン時に1920×1080と1366×768の両方でプレビューし、主要要素が隠れないか確認します。
- ヘッダーの高さやブラウザのUIを考慮して、見出しとCTAを“安全領域”に収めます。
この目安を基に、まずは700〜800pxを重要情報の目標領域とし、表示幅1200〜1400pxを想定して調整すると実装しやすくなります。
スマホサイトの「縦サイズ」―500〜700pxに主要情報を収める
ビューポートと実機の違い
スマホでは画面の実解像度とブラウザのビューポートが異なります。デザインはビューポート基準で考えると実際の表示に近づきます。
主流のビューポート例と実用範囲
代表的なビューポートは360×800、390×844などです。実用的には横幅はおおむね390〜428px、高さは600〜700px程度が表示範囲の目安になります。
ファーストビューの目安
ファーストビューは横幅360〜375px、高さ500〜600pxに主要要素を収めると安全です。500〜700pxの縦幅に重要情報を配置するのが堅実です。
優先して入れる要素と配置
ロゴ、キャッチコピー（短め）、メイン画像、CTA（ボタン）はスクロール前に見えるようにします。キャッチは長文にせず要点だけに絞ると伝わりやすくなります。
実務上の注意点
縦長画面に頼りすぎると重要訴求がスクロールしないと見えなくなります。ファーストビューに誘導要素を入れ、下に詳細を置く構成が望ましいです。必ず複数端末で実機確認し、タップ領域やフォントサイズもチェックしてください。
簡単な実装ヒント
・ヒーロー領域は最大高さを設定（例: max-height:600px相当）
・重要ボタンは画面内に固定表示や余白を広めに
・画像はレスポンシブにして読み込みを最適化
このように、縦500〜700pxを基準に設計すると多くの端末で重要情報が確実に伝わります。
