Viewport = 画面の可視表示領域。Screenとの違いは?

名詞: Viewport

複数形: Viewports

IPA表記: /ˈvjuː.pɔːrt/

読み表記: ビューポート / VYOO-pawrt

意味:

Webブラウザ上でWebサイトのコンテンツが実際にレンダリングされ、ユーザーの視界に入っている有効な可視領域。

一般的な訳語:

表示領域、可視画面、ビューポート。フロントエンド開発やレスポンシブWebデザインでは訳さずそのまま「ビューポート」と呼ばれる。

詳細:

WebデザインやUI設計において混同されやすい表現に「Screen（画面・スクリーン）」がある。ScreenはPCモニターやスマートフォンの液晶ディスプレイそのものが持つ「ハードウェアとしての物理的な表示寸法や解像度」を指す。これに対してViewportは、OSのタスクバーやブラウザのアドレスバー、タブ、ブックマークバーなどを除いた、「ブラウザ内でWebコンテンツが実際に描画されている矩形領域」を指す。

レスポンシブWebデザインにおけるメディアクエリ（CSSのブレークポイント）やスクロール深度の計測は、端末の物理画面サイズ（Screen）ではなく、このViewportの寸法を基準に処理される。ブラウザウィンドウの幅を変更したり、スマートフォンでアドレスバーが出現・格納されたりするたびにViewportの高さは動的に変動する。Screenが「物理的な器」であるのに対し、Viewportは「コンテンツとの接触面を決定する技術的な計算枠」である点で明確に区別される。

ネイティブな組み合わせ:

Bottom Of The Viewport (ビューポートの最下端)

"Positioning a secondary CTA at the bottom of the viewport encourages users to keep scrolling without obstructing content."

ビューポートの最下端に副次的なCTAを配置することで、コンテンツの閲覧を妨げることなくユーザーに継続的なスクロールを促すことができる。

Responsive Viewport Units (ビューポート相対単位)

"Modern frontend developers use responsive viewport units like vh and vw to ensure typographic balance across all screen sizes."

現代のフロントエンド開発者は、あらゆる画面サイズで文字組みの調和を保つために、vhやvwのようなビューポート相対単位を使用する。

Enter The Viewport (ビューポート内に進入する)

"Lazy loading images only when they enter the viewport dramatically improves initial page load speed."

画像がビューポート内に入った瞬間にのみ遅延読み込みを行うことで、ページの初期読み込み速度を劇的に向上させることができる。

動画から切り取った生の文:

"(2:50) And we also added a video demo that peaks up at the very bottom of the viewport which encourages people to scroll, press play, and watch what the software does."

また、表示領域（ビューポート）の最下端から少しだけ覗かせるビデオデモを追加したことで、訪問者がスクロールして再生ボタンを押し、ソフトウェアの挙動を確認するよう促しています。

"(1:30) This is the first thing people see when they come to your website and if it doesn't catch their attention people are going to leave your site before they see anything else."

これは訪問者がWebサイトに来て最初に目にするものであり、もし関心を引けなければ、他の要素を見る前にサイトを去ってしまいます。

"(7:00) 100% of visitors are going to see your hero section but a very small percentage are ever going to make it down to the bottom of your site."

訪問者の100%がヒーローセクションを目にしますが、サイトの最下部まで到達する人はごくわずかな割合にすぎません。