Webサイトのデザインをつくるとき、多くのデザイナーは「PCは1440px、スマートフォンは375px」というように、特定のサイズを基準にしていると思います。

その際、見落としがちなのが「デバイス（PC / スマホ端末）の画面サイズとブラウザに表示される領域（ビューポート）は異なる」ということ。

今回はデザイナー向けにビューポートについて簡単に解説できればと思います。

そもそもビューポートとは

ビューポート（viewport）はひとことで言えば「Webページを表示できる領域」のこと。

上記のイメージのように、ブラウザにはタブやアドレスバー、ユーザーの設定によっては拡張機能やブックマークなども配置されているので、基本的にモニターサイズとビューポートのサイズはイコールにはなりません。
（Macの場合、画面を最大化するとアドレスバーなどのブラウザUIは見えなくなりますが、実際に最大化してブラウンジングする人はあまり多くないと思います）

画面のアスペクト比

さて、ビューポートが何かわかったところで、もしもビューポートの概念をうっかり忘れてデザインを進めてしまうとどんな問題が起こるのか。

figma、Adobe XDではデザインしたものをプレビュー画面で確認することができますが、プレビューと実際にWebにアップされたものとを比較した際に「コンテンツ（もしくは画像）が画面から見切れてしまう」「背景の写真に文字が被ってしまう」など、プレビューとの差異が生じることがあります。

どうしてそのようなことが起こるのか。それはおそらく、デザインを作ったときのアートボードのアスペクト比がビューポートを考慮していない可能性が考えられます。

下記は2025年の日本市場におけるPCの画面解像度のシェア率をまとめた統計データです。

この統計を見てもわかるように、多くのユーザーは16:9のモニターを使用しており、photoshopでアートボードを作る際の「Web一般」も16:9（1366×768）のモニター想定のものがプリセットとして用意されています。（最近はfigmaでデザインを作る人が多いのでこの画面を見る人は少ないかも……）

一般的な16:9のモニターの場合、OSやブラウザの種類、ウィンドウ状態によっても変わりますが、ブラウザを最大化している前提であれば基本的には16:9よりも横長になるため、上記のプリセットをビューポートのサイズと混同してデザインを進めてしまうと前述のような差異が起こりがちです。

また、figmaのプリセットにはスマホの機種ごとのフレームサイズが用意されていますが、PCと同様にスマホのブラウザでもアドレスバーなどのブラウザUIが配置されるため、こちらもサイズ通りピッタリに作成するとデザインとWebで差が生じることがあります。

さらに、スマホの場合はスクロールするとビューポートが可変するため、より厄介です。

仮に、figmaでiPhone16をベースとしたデザインを作成するとしましょう。その場合、フレームサイズにプリセットの「iPhone16　393 × 852」を選ぶことになると思います。（解説用にわかりやすく画面内には均等に図形を配置しました）

これをfigmaのプレビュー機能で確認すると、ファーストビュー内にきれいに収まっていることが確認できます。

しかし、これをWebページに落とし込んでブラウザで見ると、下記のような見え方になります。上部のステータスバー（時刻や電波 / バッテリー状況を表示する部分）と、下部のブラウザUIによって実際にビューポート内で見える部分はデザインより狭い範囲となります。

もし、ファーストビューなど画面内にコンテンツや写真を見切れさせずに収めたいなどのデザイン的な意図がある場合には、このビューポートを意識すると良いかと思います。

総論

• 画面サイズとWebページの表示領域では、アスペクト比が異なる
• デザインをつくるときには、ブラウザUIなどによって実際の表示領域が変化することを意識すると、デザインと実際の表示との差異を軽減できる
• ューポートはOS・ブラウザ・ユーザーの設定など、さまざまな環境によって変化するため、どの画面でも常に同じ見え方を維持することは難しい

Webサイトは、デザインした画面がそのまま表示されるわけではありません。
デバイスやブラウザ、ユーザーの環境によって、見える範囲は少しずつ変化します。

だからこそ、特定の画面サイズだけに合わせるのではなく、ビューポートが変化することを前提にデザインしておくことが大切です。