こんにちは！Webデザインを学ぶとき、あなたもこんな疑問を持ったことがあるでしょう。
「Webサイトのファーストビュー（FV）って、どのくらいのサイズで作ればいいんだろう？」
そして、Googleで「ディスプレイサイズ シェア」と検索すると、必ず上位に出てくる数字があります。
「1920 x 1080ピクセル (Full HD)」
なるほど、じゃあデザインも1920pxの横幅いっぱいに、高さ1080pxに収まるように作れば、一番多くの人に見てもらえるんだ！……と考えてしまうと、実は大きなワナにはまってしまいます。
この記事では、なぜ「1920x1080px」という統計データをそのまま信じてはいけないのか、そして、私たちが本当に考慮すべき「サイズ」とは何なのかを、できるだけ分かりやすく解説します。
1. 誰も「1920px」そのままのサイズでは見ていない？
結論から言うと、モニターのスペックが「1920x1080px」であっても、実際にWebページをそのサイズで見ている人はごく少数です。
「どういうこと？」と思いますよね。 その最大の理由が、PCのOS（WindowsやMac）に標準搭載されている「スケーリング（拡大表示）」機能です。
なぜ「拡大」するの？
想像してみてください。13インチや15インチのノートPCで、横幅1920pxの解像度を「100%（拡大なし）」で表示したらどうなるでしょうか？
…そう、文字やボタンが米粒のように小さくなって、とても読めません。
そのため、今のPCは「画面は高解像度（キレイ）にしつつ、表示する文字やUIは読みやすい大きさに自動で拡大する」のが当たり前になっています。
- Windowsの場合: 「150%（推奨）」や「125%」に設定されていることが多い。
- Mac (Retina) の場合: そもそもが「200%」を前提とした表示（擬似解像度）になっている。
2. 本当に知るべきは「実効解像度」
私たちが知るべきなのは、モニターの物理的な画素数（1920px）ではなく、スケーリング（拡大）された後の**「実効解像度（ブラウザが認識するサイズ）」**です。
計算は簡単です。 解像度 ÷ 拡大率 = 実効解像度
実際に、主流の「1920x1080px」のPCが、拡大後どのくらいのサイズとして動いているのか見てみましょう。
WindowsノートPC (1920x1080px) の場合
- 150%拡大 (よくある設定)
- 横幅: 1920px \ 1.5 = 1280px
- 高さ: 1080px \ 1.5 = 720px
- → 実効解像度: 1280 x 720 px
- 125%拡大 (これも多い設定)
- 横幅: 1920px \ 1.25 = 1536px
- 高さ: 1080px \ 1.25 = 864px
- → 実効解像度: 1536 x 864 px
MacBook (Retina) の場合
- MacBook Air (M1/M2など)
- → デフォルトの擬似解像度: 1440 x 900 px
- MacBook Pro 14インチ
- → デフォルトの擬似解像度: 1512 x 982 px
3. 【結論】じゃあ、結局どのサイズで作ればいいの？
もうお分かりですね。 統計上は「1920px」が最多でも、実際に見られている横幅は1300〜1600pxあたりがボリュームゾーンだということです。
これを踏まえて、Webデザイナーが守るべき「安全なサイズ」を決めます。
横幅の考え方（コンテンツ幅）
Webサイトの本文や主要なコンテンツは、中央の「安全圏（コンテナ幅）」に収めます。
コンテンツ幅の目安: 1000px 〜 1200px
- 現在は1000px前後を採用するサイトが非常に多いです。
- 情報量が多いサイトなどでは1200px程度まで広げることもありますが、まずはこの範囲を「安全圏」と考えるのが良いでしょう。
- デザインカンプ（Figmaなど）を1920px幅で作るか？という点について。
確かに1920pxでカンプを作るケースもありますが、実務では1440pxや1536pxなど、より実態に近い幅で作ることのほうが多いかもしれません。 - 1920pxを基準にすると、要素間のスペースが広くなりすぎ、全体的に「大味」で間延びしたデザインになりがち。
- カンプの横幅がいくつであれ、「背景画像がどう見えるか」の確認はしつつ、主要な内容は、必ず中央の1000px〜1200px（安全圏）に寄せてレイアウトする意識が最も重要です。
高さの考え方（ファーストビュー）
「高さ1080px」も、そのまま信じてはいけません。
- 最も小さい「実効解像度の高さ」は720px (150%拡大時) でした。
- さらに、ここからブラウザのUI（タブ、アドレスバー、ブックマークバーなど）**の高さが引かれます。これが大体 100px 〜 150px あります。
計算してみましょう。 720px (実効解像度) – 120px (ブラウザUI) = 600px
ファーストビュー高さの目安: 600px 〜 700px
つまり、Webサイトで一番伝えたいキャッチコピーや「お申し込みボタン」は、「高さ600px〜700px」の範囲に収めておけば、「スクロールしないと見えない！」という事故をほとんどのPCユーザー（特にノートPC）で防ぐことができます。
まとめ
統計データを鵜呑みにせず、「ユーザーが実際に見ている環境」を想像することが、優れたWebデザインの第一歩です。
- 「1920x1080px」はモニターのスペック。
- OSの「スケーリング（拡大）」が標準なので、実際の表示（実効解像度）はもっと小さい（横幅1280pxや1440pxなど）。
- 「高さ」はブラウザのUI分も引かれるので、さらにシビアに考える。
- 安全圏は「コンテンツ幅 1000px〜1200px」「FV高さ 600px〜700px」と覚えておこう！
この「実態」を知っているだけで、あなたのデザインは格段に「ユーザーフレンドリー」になりますよ。