画面サイズと解像度について

「なんとなく違うらしい」程度しか知らなかった 画面サイズと画面解像度 の違い。
今更すぎるけれど、あらためてしっかりお勉強。

※今回は、Webデザインにおけるデジタルディスプレイを扱う上での基本概念を説明をしています。
印刷物のデザインについて扱う場合、単位(単語)によっては異なる概念となったり、より詳細な仕組みが存在するものもあります。そのため、あくまでWebデザインをする上での説明という前提でお読みください。

単位について

まず、画面サイズ/画面解像度に関連して利用される単位をひと通り見てみましょう。

in(inch / インチ)

現実世界の実サイズ(物理的な大きさ)
1inch = 25.4mm = 2.54cm
inch と表記する単位の方が見慣れていますが、正しい単位は in. (ピリオド付き)です。

pt(ポイント)

こちらもinchと同じく現実世界の実サイズ(物理的な大きさ)
主に印刷物で利用される単位で、紙に印刷される細かい実寸法を示す尺度に使われます。。

1pt = 1/72inch = 0.3514mm
1inch = 72pt
1mm = 2.83pt

px(pixel / ピクセル)

画面で表示する画像において、色情報を表す最小単位のドット・点
画面上のドットの数を示す単位であり、ドットのサイズは表示デバイスによって異なるため、実サイズ(物理的な大きさ)を表す指標にはなりません。

Webの世界においては、厳密には、pxにはCSSピクセルとデバイスピクセルという2つの概念が存在します。とてもややこしい話になるので、後述する「デバイスピクセル比について」の項目で説明します。ここではとりあえず、pxは点の数を表す単位であるということだけ覚えておいてください。

dpi・ppi(Dots・Pixcels per inch)

dpi = dots per inch = 1インチあたりのドットの数
ppi = pixcels per inch = 1インチあたりのピクセルの数

画面のドット密度・ピクセル密度を表す単位で、どちらも解像度の単位として利用されています。

「pixcel = dot じゃないの?何でdpiとppiに分ける必要があるの?」という疑問が湧くところですが、こちらも詳細は記事後半「デバイスピクセル比について」の項目で後述します。

dpiとppiは、主にディスプレイ本体の解像度を示す場合や、デジタルディスプレイでデザインした印刷物の解像度を扱う場合に利用される単位です。Webの解像度を扱う場合ではあまり利用することはありませんが、解像度の単位として覚えておきましょう。

dppx(dots per pixcels)

dppx = dots per pixcels = 1ピクセルあたりのドット数

こちらも「デバイスピクセル比について」の項目で後述しますが、高解像度ディスプレイにおいては、1px=1dotの等式は成立せず、1pxは複数のドットで構成されます。そのため、そのデバイス(表示環境)の1pxが何個のドットで構成されるのかを示すための単位としてdppxが登場しました。

dppxは、主にCSSのメディアクエリ内で、高解像度ディスプレイに対応させるためのスタイルの切り替え処理などに利用されています。(1dppxの表示環境の際はこのCSSを割り当てる、 3dppxの表示環境の際はこのCSSを割り当てる、といったような指定をすることで、各環境に最適なスタイルを適合し、表示速度やパフォーマンスを無闇に落とさない設計をします)

画面サイズについて

ここから、1つ1つの概念について細かく説明していきます。まず初めに画面サイズについて見てみましょう。一言で画面サイズといっても、実は2通りの尺度があります。画面の実寸サイズ表示領域のサイズの2つです。利用される場面・用途によって、どちらの意味を指し示すかが異なるものの、どちらも一言で「画面サイズ」と表現されてしまうため、この2つを混同しないように理解することが重要です。

画面の実寸サイズ

画面サイズを表現する1つめの尺度は、デバイス画面の実寸サイズです。PC・タブレット・スマホなどの画面の物理的な大きさ・サイズです。inch, cm, mm など長さを示す単位で表現されます。

ただし、ここで注意が必要です。普通に考えると、実寸サイズが大きければ、その分画面に表示できる領域も大きくなる、と思いますよね?でも実は違います。実寸サイズと表示領域は確かに比例関係にはありますが、必ずしも一致しません。同じ実寸サイズをもつデバイスであっても、表示領域は全く異なる。という現象が起こります。

表示領域のサイズ

画面サイズを表現する2つめの尺度は、画面の表示領域のサイズです。デジタルディスプレイでは、画面の物理的な大きさとは別に、その実サイズの画面にどれだけのサイズの画像を表示できるかという尺度を持っています。これが表示領域のサイズです。

この表示領域のサイズを表す単位が、前述した px(ピクセル)です。ピクセルドットの数を、いくつ分表示できる画面か?で表示領域の大きさがわかります。画面で表示できるピクセルドットの数は、デバイスの種類や設定によって異なるため、同じ実寸サイズの画面であっても表示できる領域に差が出てしまうわけです。

2つの尺度がある理由

画面サイズという1つの概念に、上記2つの概念が存在してしまう理由は、ディスプレイ画面を構成するPX(ピクセル)のサイズが異なるためです。「PX(ピクセル)」の項目でも説明したように、PX(ピクセル)ドット1つのサイズは、デバイスによって異なります。そのため、小さいピクセルドットが埋められている画面では、その分大きな表示領域を持つことができます。

実際に見える画像の例

例えば、次のいちごの画像を見てください。説明用のサンプルなので、実際は横幅500px程度の画像ですが、縦横幅がとても大きなサイズ(2000pxくらい)の写真画像だと仮定してください。横一列ごとに2000個のピクセルドットが連なってできた画像ということです。

%e3%81%84%e3%81%a1%e3%81%93%e3%82%99%e3%81%a1%e3%82%83%e3%82%932

パソコンAとパソコンB

同じ実寸サイズ(仮に10inch = 25.4cmとする)の画面をもつ2つのパソコンAとBがあるとしましょう。2つのパソコンの画面のサイズは同じですが、それぞれ表示領域が異なるとします。

パソコンAはBよりも表示領域の大きな画面(2000px表示できる)をもち、パソコンBはAよりも表示領域の小さい画面(1000pxまで表示できる)だったとします。パソコンA とBの画面の大きさは全く同じですが、 表示領域が異なると、見える画像が変わってきます。

表示領域の大きい画面(パソコンA)で見た場合

%e3%81%84%e3%81%a1%e3%81%93%e3%82%99%e3%81%a1%e3%82%83%e3%82%932
表示領域の大きい(ピクセルドットの多い)パソコンAでいちごの画像を見て見ると、1〜8番まで全てのいちごの画像が見えます。横幅2000pxの画像に対して、横幅2000pxまで表示できる領域を持っているからです。(※実際には、横幅だけでなく縦幅の領域も関係してきますが、今回は説明のため横幅のみで説明します。)

表示領域の小さい画面(パソコンB)で見た場合

 

 

 

 

表示領域の小さい(ピクセルドットの少ない)パソコンBでいちごの画像を見ると、5番のいちごしか見えません。横幅2000pxの画像に対して、1000pxまでしか表示領域を持たない画面のため、残りの1000px分は画面に表示できなくなってしまいます。

上記2つの画像は同じ画面でみているので画像の大きさも異なってみえますが、表示領域の異なる2つのデバイスでこれら2つの画像をみると、同じ大きさで見えるという現象がおこります。(デバイスの差によるものなので、必ずしも同じ大きさになるわけではありません。)これが、画像の表示領域が異なるということです。

※補足
実際には、上記サンプルように表示される例はありませんが、ここでは「画面の表示領域」の説明の参考としてわかりやすい数字にして説明しています。実際の表示に関しては、下記に説明する、画面解像度・デバイスピクセル比などと合わせて確定するため、より複雑な状態となります。ここでは、画面には表示領域の違いがある、ということだけ覚えてください。

 

画面解像度について

前項で2種類の画面サイズ(実寸サイズ・表示領域のサイズ)について説明しましたが「なんで画面サイズに2種類も尺度があるんだよ〜」って思いますよね。でも実は、前述した2つの画面サイズの尺度「画面の実寸サイズ」と「画面の表示領域」の関係性を数値化したものが「画面解像度」です。画面解像度とは、ある一定の実寸サイズに、どれだけの表示領域を持った画面かを示す値です。

画面解像度の単位 / dpi・ ppi

画面解像度=ある一定の実寸サイズにどれだけの表示領域を持った画面かを示す値
と説明しましたが、この「ある一定の実寸サイズ」には「in(インチ)」が利用されることが多いです。そして「表示領域」はpx(ピクセル)で表現されることを前述しました。つまり、下記のように言い換えることができます。

画面解像度
= 1inchの画面に何px(dot)表示できる画面かを示す値
= 1inchあたりの表示px(dot)数
= pixcels(dots) per inch
=ppi(dpi)  (画面解像度の単位)

画面解像度の単位 ppi・dpi が示すものは、その画面の精密さです。1inchあたりに表示されるピクセル数(ドット数)が多いほど、そのディスプレイはきめ細かい精密な画像を表示できる画面になるわけです。

また、これまでpxとdotに関してピクセルドットと表現しましたが、実際には、px(ピクセル)とdot(ドット)は必ずしも一致しません。詳細は「デバイスピクセル比について」の項目で後述しますが、1px = 1dot にはならない場合があるということです。そのため、どちらの単位で画面解像度を見るかで値が異なる場合があるため、ppi と dpi の2つの単位に分かれています。

画面解像度が高い・低いとはどんな状態か

画面サイズの項目で例に出した2台のパソコンを、画面解像度で表現するとどうなるでしょうか。

パソコンA=10インチ画面で2000pxの表示領域
パソコンB=10インチ画面で1000pxの表示領域

これを1インチあたりの表示領域に変換すればいいので

パソコンA=1インチあたり200pxの表示領域=200ppi(画面解像度)
パソコンB=1インチあたり100pxの表示領域=100ppi(画面解像度)
※1px = 1dot の場合は、dpi = ppi となるため、dpiの単位を使ってもよいです。

これで、パソコンAとBの画面解像度が出てきました。表示領域の大きいパソコンAの方が高い数字になっています。ppi(dpi)の数値が高い=画面解像度が高いほど、同じ画面の中にたくさんの表示領域を持てるということがわかります。

 

デバイスピクセル比について

前項では、いちごの画像を使ってパソコンAとBの表示領域の比較を行いました。しかし実際はこの説明の通りにはいかない場合があります。最近のパソコンやスマホなどの高解像度ディスプレイでは、画面サイズと画面解像度の他に「デバイスピクセル比」という概念が存在するためです。

このデバイスピクセル比が1であれば、前述したいちごのサンプル画像は説明した通りに表示されますが、最近のPC・タブレット・スマホを含む高解像度(高精細)ディスプレイでは、デバイスピクセル比が1のディスプレイは殆どありません。そのため、実際に画面に表示される画像について考えるには、画面サイズ・画面解像度と併せて、デバイスピクセル比について考慮する必要があります。

では、デバイスピクセル比とは何なのか。順を追って説明していきます。

デバイスピクセルとCSSピクセル

冒頭の説明で「px(ピクセル)=画面上のドットの数を表す単位」と説明しましたが、厳密には、px(ピクセル)は、デバイスピクセルとCSSピクセルの2つの概念にわかれて存在しています。それぞれの意味する内容も異なるため、違いを理解し、2つの概念を使い分けられるようにしましょう。

デバイスピクセルとは

デバイスピクセルとは、言葉の通り、デバイスのピクセル数のことです。PCやスマホなどのデバイス画面に配置されている、物理的なピクセルドットの数(表示できる最大のピクセル数)を示します。

デバイスピクセルの示す意味は、今まで説明したピクセルの基本的概念と同じ(画面のドットの数)です。しかし、次に説明する新しい概念「CSSピクセル」の登場によって、デバイスピクセルとCSSピクセルの2つの概念を使い分ける必要が出てきました。

CSSピクセルとは

CSSピクセルとは、CSSで指定する仮想的なピクセル数のことです。「仮想的な」と表現しましたが、CSSピクセルの示すピクセルは、デバイスピクセルのように物理的に実際に存在するものではありません。 CSS上でサイズを指定するための、相対的なサイズを示します。

1デバイスピクセル=1個のドット(実際の物理ドット)に対し、
1CSSピクセル=X個のドット(Xは変数)を示します。

CSSピクセルは、デバイスの設定ごとに変動する流動的な単位となります。デバイスによって、このXの値が異なるため、1CSSピクセルの示すドットの数はデバイスごとに変動することになります。

昔のディスプレイでは、このXの値はどのデバイスでも常に「1」で固定値だったため、デバイスピクセルとCSSピクセルという2つの概念に分けて考える必要はありませんでした。しかし、高解像度・高精細ディスプレイの出現によって、Xの値を2や3に変える必要性が出てきてしまったのです。

デバイスピクセル比 / device pixel ratio

上記CSSピクセルの項目で、1CSSピクセル=X個のドット と説明しましたが、1ドット=1デバイスピクセルであることから、すなわち1CSSピクセル=X個のデバイスピクセル と言い換えることができます。つまり、CSSピクセルとデバイスピクセルは、それぞれ1:X の比例関係を持つことがわかります。この、CSSピクセルとデバイスピクセルの比率を、デバイスピクセル比(device pixel ratio)といい、Xの値で比率を表現します。

例えば、X=2の時、すなわち、1CSSピクセルを2つのデバイスピクセルで表示するとき、そのディスプレイはデバイスピクセル比=2と言えます。 例えば、X=1の時、すなわち、1CSSピクセルを1つのデバイスピクセルで表示する画面があるとき、そのディスプレイはデバイスピクセル比=1と言えます。下記の画像は、その状態を図式化したものです。


1つの正方形で1つのデバイスピクセルを表現しています。ピンク色のドットを表現する際、デバイスピクセル比1の画面では、1つのピンクドットを1つのデバイスピクセルで表示していますが、デバイスピクセル比2の画面では、1つのピンクドットを、縦横2つずつ合計4つのデバイスピクセルで表現していることがわかります。

デバイスピクセル比が高いほど、1つのドットを表現する際に使われるデバイスピクセルが増えるため、同じ画面領域の中でそれだけ精密な画像を表示することができるようになるわけです。

※補足
上記画像のように1つのドットを表現するだけであれば、1つのデバイスピクセルで表示しても4つのデバイスピクセルで表示しても見た目は変わりません(むしろ、4つで表示するとボケてしまいます)が、この仕組みを利用して、画像の部分にだけ、実際のCSSピクセルよりも2倍・3倍の画像を表示するような設定をすることで、全てのデバイスピクセルに別々の画素を表示することを可能とし、より精密な画像表示を可能とします。

デバイスピクセル比は何できまる?

ではこのデバイスピクセル比は、一体どこで設定されているものなのでしょうか。高ければ高いほど高精細で綺麗な画面になるのであれば、高く設定できる方がいいですよね。しかしながら、デバイスピクセル比の値は、私たちが自由に設定できるものではありません。各デバイス個別に、あらかじめ決められた値になっています。

例えば iPhone6 ではデバイスピクセル比は2、iPhone6 Plusではデバイスピクセル比は3という値で設定されているようです。(※ただし、拡大モードの設定などによってこの比率は変動していくため、常に固定でこの比率で表示されるというわけではないようです。)

dpi と ppi の違い

冒頭の単位の項目で「同じではない」とだけ説明した、解像度の単位 dpi と ppi ですが、ここまできて同じではない理由がわかったでしょうか。

誤  × px(ピクセル)= dot(ドット)の数
正 ○ px(ピクセル)= dot(ドット)の数 × デバイスピクセル比

上記関係式からわかるように、デバイスピクセル比の値によって1pxを表現するドットの数が異なる(dotの数とpixcelの数は必ずしも一致しない)ため、dpiとppiは必ずしも一致しません。とくにppiに関しては、状況によってpx単位の基準(CSSピクセルを指すのかデバイスピクセルを指すのか)が変わってしまったり、dpiとppiの使い分けがされないことも多く、Webの業界ではとても曖昧な概念となってしまっています。dpiとppiの違いを理解し、気をつけて利用するようにしましょう。

高解像度ディスプレイの表示の仕組み

CSSピクセルは複数のデバイスピクセルによって表現される、というところまで説明しましたが、では何故そのような複雑でややこしい仕組みになってしまったのでしょうか?画面設計する立場としては、デバイスピクセル比の登場によって、とてもややこしく面倒な作業が増えてしまうので、従来通り1ピクセルは1ドットというシンプルな設計でよかったようにも思えます。

テレビのディスプレイ

実際、高精細な高解像度ディスプレイにするだけであれば、CSSピクセルという概念は必要ありません。デバイスピクセル数を増やせば、増やした分だけ高解像度ディスプレイになり、デバイスピクセルを小さくすれば、小さくした分だけ高精細になるからです。例えば最近では、テレビのディスプレイも高解像度化し、4K画質や5K画質と呼ばれる高解像度ディスプレイが出てくるようになりました。4K画質のディスプレイは、3840×2160ピクセルもの点が埋め込まれた高解像度ディスプレイですが、1ピクセルに1ドットの画素を表示するシンプルな設計になっています。

高精細ディスプレイによるサイズ変動

ではなぜ、CSSピクセルという概念を生み出したのでしょうか。
実はその理由は「ユーザビリティ向上」のためにあります。

例えばデバイスピクセル比3の高精細ディスプレイでは、デバイスピクセル比1のディスプレイと比べて、1/3も小さいサイズのピクセルドットが利用され、その分3倍多い数のピクセルドットが敷き詰められていることになります。つまり、デバイスピクセル1つのサイズを小さくすればするほど、そしてその分、敷き詰めるドットの数を増やしていくほど、高精細なディスプレイになるというわけです。

しかし、デバイスピクセルのサイズがどんどん小さくなっていくと、これまで利用されていたWEBサイトの画面や画像はどうなってしまうでしょうか。細かく表示できるようになる分だけ、小さい表示になってしまいます。

デバイスピクセル比1のデバイスを利用していた時には、普通に表示できたWebサイトを、デバイスピクセル比2のデバイスを使うと、1/2以下のサイズで表示されてしまう…. デバイスが変われば、同じWebサイトでも、表示されるサイズが変わってしまう。いくら細かく広い表示領域を持てるようになったとしても、これでは、とても不便ですよね。

画像や文字も見えにくくなりますし、ボタンや入力操作の項目に関しては、小さくなりすぎて操作不可能になってしまう場合まで出てきてしまいます。ボタンが操作できなくては、Webサイト内のリンク移動すらできませんし、既存サイトの閲覧までできない事態になりかねません。そのため、どうにかしてこの問題を解決する必要がでてきたわけです。

CSSピクセルの登場

高解像度で綺麗な画面を実現しながらも、既存のサイト閲覧には影響がでないようにするにはどうすればいいか。
そこで考えられたのが「CSSピクセル」という新しい概念でした。既存サイトで設定されたCSSのサイズ尺度に変動を加えないようにするため、デバイスの実ピクセルと、CSSの指定するピクセルを別の尺度で考えることにしたわけです。

別の尺度にしてしまえば、デバイスピクセルを増やしても、CSSのピクセルサイズが影響されることはありません。その代わり、高解像度化されたディスプレイに対して、1つのCSSピクセルをいくつのデバイスピクセルで表示するか?というデバイスピクセル比の設定をしてあげることで、既存サイトのCSSで設定されたサイズ感をそのまま維持しながらも、高解像度なディスプレイで画面表示できるようになったわけです。

まとめ

Webサイトの画面について考えるためには、デバイス端末の画面サイズ・画面解像度・デバイスピクセル比の3つを考えておかないといけないですよ〜という記事でした。何故それら3つの概念が存在しているのか、それぞれどう利用されているのか、なんとなくでも理解できたでしょうか。

Webデザイナーさんの中には、Retina対応のために、とりあえず画像は何倍でも大きく作っておけばいいとか、2倍か3倍にすればいいとか、適当な知識で作っている人がたまにいるようなのですが、今回の内容をしっかり理解して、対象とするデバイスの特性に合わせた画像の用意&画像の切り替えを行なって、最大限のパフォーマンスを出せるサイトに設計できるようになるのが理想ですね。

※ちなみに、Retinaディスプレイというのは、Apple製品の高精細高解像度ディスプレイの名称です。Apple製品の高精細ディスプレイは全てRetinaディスプレイと呼ばれるため、各ディスプレイのデバイスピクセル比などもバラバラです。特定の比率をもった高解像度ディスプレイのことをRetinaディスプレイと呼ぶわけではないので注意しましょう。

また、冒頭でも説明しましたが、今回の解像度にまつわる話は全てWebデザインにおける場合の話です。印刷関係・DTPのデザインについて考える場合は、また別の視点と概念を理解する必要があるため、参考にはならないかもしれません。印刷物における解像度についても、いつか勉強したいですね。