スクリーンとピクセル

ウェブ制作やプログラミングのように、多種多様なコンピューターの画面へ、何かを思い通りに表示させたい時、必要となる考え方が、スクリーンとビューポートです。今回はまず、スクリーンについて、整理してみます。

スクリーン(screen)

日本語で「スクリーン」と言うと、プロジェクターで映像を映し出す先の白い幕(銀幕)を指しますね。

しかし英語では、この白い幕はもちろん、テレビも、パソコンのディスプレイも、スマートフォンの画面も、映像を映し出している場所は全て “screen” として表現されます。(ただし、印刷物や音響機器は、”screen“に含まれません。)

ここからは「スクリーン」という日本語も、この英語の “screen” の意味で使っていきます。

ピクセル

スクリーンは、ピクセル(pixel)を縦横に隙間なく並べたものになります。pixel は、pictures(pix) + element からできた合成語です。

ピクセルは、画素とも言われ、映像要素の最小単位になります。

参考：　画像表示ディスプレイ

なお、白い幕自体には、映像を映す機能はないので、その場合はプロジェクター側の話になります。

解像度

ガラケーから液晶テレビまで、スクリーンには様々な大きさがありますが、人の目で映像を認識するには、適度な視野が必要です。小さいスクリーンは近くで、大きいスクリーンは離れて見ないと、必要な情報が見えず周りの背景ばかりが気になったり、逆に映像の一部分ずつしか見えず全体像が把握できなくなったりします。

よって、映像を適切な距離と視野で見た場合、十分小さなピクセルの1個1個は目で識別できなくなり、ピクセルの集まりによって映像が見えるようになります。大きなスクリーンであれば、離れて見るので、割と大きなピクセルでも良く、逆に小さなスクリーンであれば、かなり小さなピクセルが必要になります。そこで、スクリーンサイズに対して、最低限必要なピクセルサイズの比率を実際に調べてみると、ざっと数100分の1 以下のサイズという結果になります。

言い換えると、ピクセルを縦横に隙間なく1000個くらい並べれば、そこそこ綺麗に映像を映し出せるスクリーンになります。逆に、縦横に並べるピクセル数を1000個より極端に少なくすると、モザイクのような粗い映像になりますし、1000個より増やすほど、より実物に近い映像を映し出せることになります。

この縦横に並べるピクセル数のことを解像度と言います。ピクセル数が少ないことを低解像度、ピクセル数が多いことを高解像度と言います。解像度は、1920×1080 のように、横のピクセル数 × 縦のピクセル数 という書き方で表します。

アスペクト比

スクリーンの縦横のピクセル数の比率のことをアスペクト比と言います。アスペクト(aspect)とは、「見えている面」のことです。通常、画面は長方形になっていますが、その「横：縦」の比率が、アスペクト比です。スクリーンだけでなく、画像についても、「横：縦」の比率をアスペクト比と言う場合があります。

現在主流のフルHD(1920×1080)のアスペクト比は 16：9 で、他に、4K、8K などの高解像度ディスプレイも 16：9 に準じたアスペクト比になっています。 ちなみに、”K” は「千」の意味で、横ピクセル数の規模を表しており、フルHDは2Kで、４Kと8KはそれぞれフルHDの2倍と4倍の横ピクセル数を持つということです。

また、横長の画面をランドスケープ(landscape: 風景画)、縦長の画面をポートレート(portrait: 人物画)と言います。

横を縦よりも優先する文化

解像度の表記は、「 横のピクセル数 × 縦のピクセル数 」でした。また、アスペクト比の表記は「横：縦」でした。

初めのうちは、並べる表記の「どっちが縦でどっちが横だっけ？」と、ど忘れしてしまうかもしれません。しかし、 ほとんど全て、横が先 と覚えてしまえば、迷うことはなくなります。なぜ、横が先なのでしょう？

これは、ディスプレイの起源にまでさかのぼります。

現在のディスプレイのご先祖様とも言えるブラウン管(昔のテレビ)は、19世紀に欧米で発明されました。欧米では、英語をはじめ、様々な言語で「横書き」が標準です。彼らはごく自然な発想で、ピクセルをたどる走査順路を、左から右へ、上から下へという流れに決めてしまいました。

このため、映像関係の様々な技術では今も、横が縦より優先されているのです。

また、人の2つの目は鼻を挟んで横に並んでいるので、横方向の視野の方が縦方向の視野より広く、主に地上を見渡す生活に適しています。このような観点からも、横優先文化は支持され続けているのかもしれません。

鏡はなぜ左右反転して見えるのか？

余談ですが、鏡が左右反転して見えるのに上下反転しては見えないのも、単に人間の意識がそう思わせているだけ、というのはご存じでしょうか？

日常生活で左右ターン(振り返り)はしても、上下ターン(逆立ち)はしないので、人間は無意識に、左右ターンして向き合った時のあるべき姿と鏡を比較しているのです。実際、逆立ちした見た目と鏡とを見比べれば、さっきと逆で、上下反転して見えて左右反転にはなりません。

鏡に映っているのは反転像ではなく、あくまでも「正面そのものの写し」であり、私たちは無意識に見比べる対象の方を左右反転させているのです。

したがって鏡にとって上下左右の区別はなく、本来は、左右反転も上下反転も斜め反転も、みな対等なのです。

スクリーンサイズ

スクリーンの「サイズ」には、2つの意味があります。1つの意味はスクリーン全体の対角線のインチ数(インチ単位)、もう1つの意味はスクリーン全体の縦横それぞれのピクセル数(ピクセル単位)です。

解像度とピクセル密度

実は解像度にも2つの意味があります。1つの意味は先述した縦横のピクセル数(ピクセル単位)、もう1つの意味はピクセルサイズで、スクリーンの縦または横1インチ当たりに、何ピクセル詰められているかの ピクセル密度(ピクセル/インチ単位) で表現します。

ピクセル密度は、1インチを、ピクセル1個のサイズ(インチ)で割って、1インチ当たりのピクセルの個数 を出すので、ピクセルサイズの逆数となります。

ピクセル密度 [dpi] ＝ 1 インチ当たりのピクセル数 ＝ 1 [インチ] ÷ ピクセル1個のサイズ [インチ] ＝ 1 / ピクセルサイズ [インチ]

数値が小さいほど良好(＝きめ細かい画質)であるピクセルサイズそのものを使うと、「数値を比較した時、大きいほど良好」と感じる直感に反します。そこで、ピクセルサイズの逆数であり、数値が大きいほど実際に良好となって、直感に反しないピクセル密度 が採用されるのだと思います。
あとは割り算(÷)より掛け算(×)の方が計算が楽なので、あらかじめ割り算した結果(逆数)であるピクセル密度を出しておいて、その後を掛け算(×)だけで計算しやすくするメリットもあると思います。

ピクセル密度の単位には、dpi = dot per inch が使われます。( ppi = pixel per inch が使われることもあります。)

通常、ピクセルは正方形という前提で、縦横共通の密度を想定しています。

スクリーンサイズと解像度

整理すると、以下のような考え方です。

ハードウェア製造視点では、他パーツとの関係が重要なため、インチやピクセル数を重視します。

ソフトウェア制作視点では、与えられたハードウェア制約内で視認性の高いソフトウェアデザインをしなければならないので、ピクセル密度(dpi)とその数を重視します。

ハードウェア製造視点での解像度と、ソフトウェア制作視点でのスクリーンサイズは同じで、縦横のピクセル数を見ています。

ズーム

印刷物では、内容が細かくて見づらい時、拡大鏡(ルーペ／虫眼鏡)を使って大きくして見ます。

スクリーンでは、拡大鏡を使わなくても、ズームという画像処理によって、細かい部分を拡大表示することが可能です。

ズームでは、メモリに記録された元画像の各画素データは変えられずに、画像処理によって、スクリーン上の各ピクセルへの割り振りだけが変えられます。

元のピクセル割り振りに対して、ズームによって変えられたピクセル割り振りの比率を、ズーム倍率と言います。

ズーム倍率を上げる(同一のスクリーンが元画像の細部に入る)ことをズームイン、
ズーム倍率を下げる(同一のスクリーンが元画像の細部を出る)ことをズームアウトと言います。

拡大によっては、スクリーンに入りきらない部分が増えるかもしれません。その場合は、スクロールするか、少しズームの倍率を下げることで対応します。

この時、ズームの倍率が2倍などの整数倍であれば、元画像の画素をスクリーンの画素へ均等に割り振るため、画質が劣化しません。(ピクセル密度は低下しますが、スクロール先まで含めた画像全体のピクセル数は維持されます。)

しかし、ズームの倍率が小数倍(1.3倍などの半端な拡大や、0.7倍などの縮小)であると、画素を不均等に、あるいは平均化して割り振るため、画質が劣化します。(輪郭がスムーズでなくなったり、ぼやけたりします。)

CSSピクセル

スクリーンに並べられているピクセルとは別に、CSSでのレイアウト用に使われる、スクリーン表示前の座標単位をCSSピクセル(単位: px)と言います。

CSSピクセルは、画像データの画素のようなもので、CSSレイアウトの座標単位です。

ズームでは、メモリに記録された元画像の画素は変えられずに、スクリーン上の各ピクセルへの割り振りだけが変えられました。

メモリに記録された各CSSピクセルのデータも、ズームによって変えられずに、スクリーン上の各ピクセルへの割り振りだけが変えられます。

スクリーン上に並べられているピクセルを物理ピクセル、CSSピクセルのようなスクリーン表示前のピクセルを論理ピクセル、とする分類もあります。

スクリーン解像度とCSSピクセルの関係

近年、スクリーンの高解像度化(ピクセルの縮小化)は、携帯端末やインターネットが爆発的に普及した2000年前後より、何倍にも進化しました。

実は、高解像度化は、より実物に近づけるという点で、写真や動画などの映像表現を見る分には良いのですが、旧来のウェブページを見るのには適しません。

なぜなら旧来のウェブページは、余白やフォントサイズまでCSSピクセル数(px)指定で制作されていたからです。

現在も、px 単位は使われますが、他単位と使い分けたり、固定値ではない使い方をすることで、より洗練されています。

スクリーンの解像度がほぼ想定通りであった頃(つまりピクセルサイズがほぼ想定通りであった頃)は、CSSピクセル数(px)指定で制作してあっても、全く問題はありませんでした。

しかし、携帯端末のカメラの性能が上がり、手軽に高解像度の写真や動画を撮れるようになるにつれ、今度はスクリーンの映像表示性能が重視されるようになります。

そこで端末メーカーは、対角線インチ数がほぼ同じスクリーンで、解像度(ピクセル数)をどんどん増やしていきました。

特にスマートフォンの対角線インチ数は、持ち運びやすさを重視するため、当初からあまり変わっていません。

このため、スクリーンの解像度(ピクセル密度)はどんどん上げられていきます。解像度(ピクセル密度)を上げるために、その逆数であるピクセルサイズはどんどん小さくされます。

すると、CSSピクセル数(px)指定で制作された旧来のウェブページの、余白やフォントの見た目は、ズームで拡大しない限り、どんどん小さくされるのです。

つまり、端末のサイズを変えずに高解像度にすることで、レイアウトが縮小され過ぎて、かえって見づらくなってしまうのです。

もちろん、見る人が都度、ズームで拡大して見やすくすることもできますが、いちいちズームを調節しなければならないのでは、やはり不便です。

デバイスピクセルとデバイス非依存ピクセル

端末メーカーも、ピクセル密度を上げるだけ上げて、レイアウトが小さくなるのを放置していたわけではありませんでした。

CSSピクセル数(px)で指定されたレイアウトが小さくならないように、高解像度スクリーンを持つ端末では、スクリーン本来のピクセルとは別に、ブラウザやアプリがCSSピクセルを割り振る先としての、新たなピクセル単位を使えるようにしました。

そこで、スクリーン本来のピクセルを、デバイスピクセル(単位: device pixel または単に pixel) と呼び、ブラウザやアプリ用に、CSSピクセルを割り振る先として使用できるようになった新たなピクセルを、デバイス非依存ピクセル(device independent pixel 単位: dip)と呼び、使い分けられるようにしました。

Android用語で、dp : density-independent pixel (密度非依存ピクセル)と呼ばれるものも、デバイス非依存ピクセルの一種ですが、デバイス非依存ピクセルの方が、Android限定の特別な定義に縛られず、より一般的な概念になります。

デバイス(device)とは本来、様々な機器のことを指しますが、ここではPCやタブレット、スマホ、ガラケーなど、スクリーンを持った各種端末と考えておけば良いでしょう。

デバイス非依存ピクセルを使うと、ピクセルサイズが小さい(ピクセル密度が高い = 数百dpi) 最近のデバイスで、ピクセルサイズが大きかった(ピクセル密度が低かった = 約96dpi) 旧来のデバイスと、同程度のピクセルサイズを再現できます。

旧来のデバイスピクセル

デバイスピクセル

デバイス非依存ピクセル

デバイスピクセル

デバイス非依存ピクセル

デバイスピクセルの1辺が旧来の1/2程度のデバイスなら、デバイスピクセル 2×2個 でデバイス非依存ピクセル 1個分、 デバイスピクセルの1辺が旧来の1/3程度のデバイスなら、デバイスピクセル 3×3個 でデバイス非依存ピクセル 1個分 です。

三種のピクセルの関係

標準的なブラウザでは、ズーム前の初期段階において、1個のCSSピクセルが、1個のデバイス非依存ピクセルへ割り振られます。 ( 1px = 1dip )

ただしCSSピクセルの、デバイス非依存ピクセルやデバイスピクセルへの割り振られ方は、様々なズームによって変わりますので、注意が必要です。

そして、1個のCSSピクセルを、1個のデバイスピクセルへではなく、それを 2×2 か 3×3 程度にまとめたデバイス非依存ピクセルへ割り振ると、その解像度(ピクセル数やピクセル密度)は、スクリーン本来のデバイスピクセルによる解像度よりも低下します。

一方、スクリーン本来のデバイスピクセルは、ベクタデータ(アウトラインフォントやSVG形式の画像等)による描画や、CSSピクセルでサイズ指定しない画像/動画の再生において使われ、解像度(ピクセル数やピクセル密度)の高いスクリーンほど、実物に近いシャープな表示が可能になっています。

デバイスピクセル比

CSSピクセルもデバイスピクセル同様、正方形なので、CSSピクセルとデバイスピクセルとのサイズの比率を、縦と横で共通のデバイスピクセル比 という言葉を使って表します。

初期段階( 1px = 1dpi )においては、1個のCSSピクセルが、1個のデバイス非依存ピクセルへ割り振られるので、デバイスピクセル 2×2 のCSSピクセルを「デバイスピクセル比 2倍」、3×3 のCSSピクセルを「デバイスピクセル比 3倍」　…というように表現します。

デバイスピクセル

CSSピクセル
(デバイス非依存ピクセル}

デバイスピクセル比 2倍

デバイスピクセル

CSSピクセル
(デバイス非依存ピクセル)

デバイスピクセル比 3倍

デバイスピクセル比 2倍 の CSSピクセル

デバイスピクセル比 3倍 の CSSピクセル

暗黙のズーム

上で述べたデバイス非依存ピクセルのように、1 CSSピクセルの表示に、縦横 2, 3 デバイスピクセルを使うことも、表示を拡大させることになるので、一種のズームイン(2倍、3倍の倍率)になります。

ただしこの場合、元のサイズ(倍率1.0)で表示することがないまま、いきなり拡大表示されているため、見る人は、ズームインされている意識を持てません。

こうした暗黙のズームは、デバイス非依存ピクセルのズームだけに限らず、この他にも、OS や アプリ(ブラウザ含む)に、隠れて入っている場合があります。

暗黙のズームの例：　デバイス非依存ピクセル、Windows の表示スケール設定、ブラウザのページズーム設定など

暗黙のズームが入っていると、CSSピクセル数を扱う時に想定外の結果になるので、注意が必要です。

例えば、Windows 10 のパソコンでは、本来、デバイスピクセル比は 1.0 のはずですが、「ディスプレイ設定」で「テキスト、アプリ、その他の項目のサイズを変更する」が、100％ 以外になっていると、これが暗黙のズームとして作用し、デバイスピクセル比が、1.25 や 1.50 などの小数倍になります。

実際の数値の取得

デバイスピクセル比やスクリーンサイズは、DOM(Document Object Model)を使って数値を出すことができます。

DOM(Document Object Model)は、様々なドキュメントとその要素をオブジェクト化したモデル(分身)です。分身であるオブジェクト(モデル)を調べたり、操作したりすることで、ドキュメントが持つ属性値を利用したり、ドキュメントに変更を加えたりができます。JavaScriptなどのプログラムで使用します。

ただし、 デバイスピクセル比やスクリーンサイズの値は、OSやブラウザにより、どのズームの影響を受ける/受けないの仕様が異なります。

このため、なんらかのズームによって値が変わる場合もあれば、どのズームによっても値が変わらず常に初期値( 1px = 1dpi 扱い)のままになる場合もあるので、注意が必要です。

そして残念ながら、これらのズームの倍率を、DOMを使って取得することはできません。(プライバシー保護のため？)

よって、以下の値は絶対的な数値としてではなく、その環境ごとでの相対的な数値としての利用に限定されるものと考えてください。

デバイスピクセル比の値

デバイスピクセル比の値は、DOMから、

• window.devicePixelRatio ・・・ デバイスピクセル比

を使って求められます。

なお、あなたが現在ご覧になっているスクリーンでは、以下の値になっています。

• window.devicePixelRatio ＝

スクリーンの縦横ピクセル数の値

スクリーン全体の縦横CSSピクセル数の値は、DOMから、

• window.screen.width ・・・ 横ピクセル数値
• window.screen.height ・・・ 縦ピクセル数値

を使って求められます。

なお、あなたが現在ご覧になっているスクリーンでは、以下の値になっています。

• window.screen.width ＝
• window.screen.height ＝

なお、スクリーンによっては、ランドスケープにしても、これらの値だけポートレート基準で固定されている場合があります。その場合、常に window.screen.width が短辺で、 window.screen.height が長辺になります。

終わりに

スクリーンは、高解像度化され続けていますが、旧来のウェブページも見づらくならないように、ズームの工夫がされています。しかしその一方で、制作側がそれをきちんと理解していないと、思い通りに表示ができなかったり、環境によって想定外の表示になってしまったりする原因になります。

ここで理解を深めていただけたら幸いです。

次はぜひ、ドキュメントについての記事をご覧ください。