画像・OS・ディスプレイの解像度、DPIスケーリング、viewportについて

スマホサイトを作ったことがありますが、アプリ制作の知識や経験はありません。
Retina（高精細）ディスプレイへ対応したスマホサイトを作るときは、画像を2倍または3倍で作ればいいよねという程度の知識しかなく、ピクセルやドット、DPI、PPI、解像度まわりについて理解していなかったので、ここ数日調べております。
私には難解すぎて、解像度について考えてる夢をみました。
理解できていないので、寝ても覚めても解像度について考えています。
いくつか疑問点があり、ご存じの方いればご教示ください。

調べている途中のため、私の認識に誤りがあるかもしれません。
そのときはご指摘ください。

調べている中で、dpiとppiは明確わけるべきという意見も見受けられましたが、この質問の中では、印刷に関するものはdpiと表記し、それ以外はdpiとppiを同義として扱います。
ディスプレイや画像はピクセルベースのため、ppiと表記するのが適当かと存じますが、AndroidアプリやDPIスケーリングなどdpiが用いられるため同義として扱います。ご了承ください。

解像度と一言で言っても下記のように分かれているかと思います。

######印刷解像度
1インチあたりに幾つのドットで印刷するかを表す。
dpiの値は、出力のときのみ関係するもので、画像やディスプレイでの表示には直接関係しない。

######画像解像度
画像解像度はピクセルの総数のことで、縦横のピクセル数を640px * 480px のように表す。
画像をディスプレイやブラウザ上で表示するときにdpiまたはppiは全く関係ない。

######OSの解像度
Windowsは96dpiで、Macは72dpiだが、今はdpiの設定を変更できる。
このdpiはOSのGUIを表示するときの解像度で、画像やディスプレイの解像度とは全く無関係。
OSの解像度を変更することで、表示されている大きさは変わる。
Windows7の場合だとコンパネ > すべてのコントールパネル項目 > ディスプレイの小（100%）、中（M）、大（L）で変更できる値のこと。

######ディスプレイの解像度
画像解像度と同じく、ピクセル総数のこと。
フルHDの場合は、1920px * 1080px のように縦横のピクセル数で表す。
Windows7の場合だとコンパネ > ディスプレイ > 画面の解像度から変更できるけど、これはディスプレイに描画する解像度の設定。
ディスプレイは物理ピクセルがあり、フルHD対応のディスプレイの場合は、1920px * 1080px のピクセルが敷き詰められている。
この一つ一つのピクセルに色情報を与えることで、画面を表示している。
Windowsの設定で「画面の解像度」を 1920px * 1080px に変更し、ディスプレイの物理ピクセルと同じ数に設定するとドットバイドットで描画される。

######ブラウザの表示領域
解像度とは呼ばないが、ブラウザがWebサイトを表示する領域。
Viewportと呼ばれ、Layout Viewport（表示部分）とVisual Layout（レイアウト全体）の2つがある。
HTMLのviewportを指定することで、Layout Viewportの表示領域を指定できる。

誤りがあるかもしれませんが、私の中では上述したような理解をしております。
いくつか質問がございます。
ご存じの箇所だけでも結構ですのでご教示いただけると幸いです。
私の知識不足で質問の内容や意図が不明な場合は、不足していると思われる内容が記載されたWebサイトや書籍等を教えていただけると嬉しいです。

###【質問1】ブラウザから印刷するときの解像度は？

ブラウザで表示し、印刷するときにどの解像度で印刷されているのか確かめるために下記を試しました。
CSSで 100px * 100px の線を表示して、Windows7のGoogleChromeで表示してA4の用紙に印刷を行いました。
定規で測ると2.65cmありましたので、96dpiで印刷されていると思います。
500pxの画像を表示しても試しましたが、定規で測ると13.25cmあり、96dpiで印刷されました。
どこで指定した解像度なのか調べるために、このやり方で、Windows7のOSの解像度を大（L）にした環境で印刷しましたが、大きさは変わりませんでした。
OSの解像度で設定されたものではないとすると、ブラウザ側で96dpiという設定をしているのでしょうか？
ブラウザの画面を印刷したときの解像度はどこで設定されたものなのか知りたいです。

###【質問2】Windowsは96dpi、Macは72dpiというのは昔のこととありますが、今は違うのでしょうか？

解像度などについて調べると、Windowsは96dpi、Macは72dpiという記載が散見されます。
この解像度は昔の話で今はもう少し解像度が高いという記載もありました。

この96dpi、72dpiというのはOSの解像度を指しているのかと思います。

例えば、Windowsの場合だとこのやり方で、OSの解像度を変更することが可能かと思います。
デフォルトでは小の96dpiになっており、今も変わらないと思うのですが、私の認識は誤りでしょうか。

###【質問3】スマホにもOSの解像度はあるのでしょうか？

WindowsにはOSの解像度（システムDPI）とモニタの解像度（モニタDPI）の2つあるかと存じます。
iOSやAndroidなどのスマホにも別々のDPIがあるなら、それぞれの値を教えていただけると嬉しいです。
確認できるWebサイトや書籍等があれば教えてください。

###【質問4】dpiスケーリングとviewportについて詳しく知りたい

dpiスケーリングについて調べてみましたが、Windowsに関する情報が多く、dpiスケーリングに関する情報がほとんどありません。
dpiスケーリングとは、文字通りdpiを変更してピクセル密度を変更するという意味で捉えています。
dpiを変更することで、見た目も拡大されたような表示になったり、縮小したような感じに表示されるかと存じます。
このdpiスケーリングという用語はdpiを変更する意味で使われるのかと思います。
そのため、OSの解像度を変更することも、ディスプレイの解像度を変更することもdpiスケーリングと言えるのかと勝手に思っております。

ここにはdpiスケーリングとviewportに関して下記のように記載されています。

iPhoneやAndroidなどのスマートフォンブラウザが、自身の画面解像度を認識し、自動スケーリングしていることで実現している。

dpiスケーリングは、Viewportへのレンダリング前に実施される。論理ピクセルそのものが変化するため、CSSやJavaScriptが参照するピクセルも、液晶画面の> 物理的なピクセルとは異なるものになる。

dpiスケーリングはブラウザが行っているのでしょうか？
metaでviewportの設定することでdpiスケーリングされるのでしょうか？
viewportとdpiスケーリングは関係ないのでしょうか？
レンダリング前にdpiスケーリングを実施するというのは、もう少し具体的に言うとどのタイミングなのでしょうか？
Webサイトはサーバーからのレスポンスがあり、ブラウザが解析して描画しているかと思います。
ブラウザが解析するときにdpiスケーリングをして、描画しているのでしょうか？

dpiスケーリングについて理解が浅く、うまく質問できていないかもしれません。
dpiスケーリングとは何か、どのタイミングで行われているか、dpiスケーリングとviewportの関係をもっと詳しく知りたいです。
直接的な回答ではなくても、ここを調べた方がよいとか、参考になるサイトや書籍等を教えて頂けるだけでも嬉しいです。

###【質問5】Webサイトを制作するときの解像度を72ppiまたは96ppiにする合理的な理由は？

Webサイト制作というか、画像データやディスプレイ表示においてdpiは全く関係ないかと思います。
ただ、Webサイトを制作するときに72ppiまたは96ppiにするのが一般的かと思います。
72ppiまたは96ppiにする合理的な理由はありますでしょうか？
また、皆さんはいくつの解像度で制作しているのでしょうか？

私は72ppiまたは96ppiでWebサイトをデザインするメリットは、デザインしたものを印刷したときにディスプレイの表示とほぼ同じぐらいの大きさで印刷されるということぐらいかと考えております。

ご存じの方いれば、ご教示ください。
明確な回答じゃなくても、参考サイトや書籍を教えていただけるだけでも嬉しいです。

#参考・閲読サイト

全て理解できたわけではないですが、一通り目を通したサイトです。

行動規範の内容に同意します

回答4件

ベストアンサー

身もふたもない話ですが、dpi=ppi は「画素密度」なのです。慣用的に「解像度」
という言葉を使うことになっている場合がある、というのが実情です。

印刷業界では、基本的に出力するサイズが定格サイズであるため、画素密度を上げる
＝元データの解像度を上げるということを意味しました。その関係で「画素密度」を
「解像度」と呼ぶようになったのではないかと思われます。

実際最近では、「ディスプレイ解像度」としても dpi/ppi が出てくることがあります。
これは Retina ディスプレイに代表される、200dpi を超える高精細ディスプレイが
出てきたためですが、これも本来なら画素密度と言うべきところです。

それらを踏まえて回答です。

1.ブラウザから印刷するときの解像度
→ブラウザが印刷画像エリアに対して何dpiでレンダリングするか次第です。
印刷画像エリアの解像度はは OS ／プリンタドライバによって決まると思われますので、
結局OS・ブラウザ次第としか言いようがありません。

2.Windowsは96dpi、Macは72dpi
→あくまで、その画素密度であるという想定で設計された、というだけのことです。
Macは古くからdpiを意識して作られていましたが、Winはそうではありません。

3.スマホにもOSの解像度はあるのでしょうか？
→少なくとも AndroidOS は OS 自体がdpiが変動しても対応できるように作られており、
OSとしてdpi 設定ができます。ただ、スマホだとディスプレイサイズ・解像度が
変動することが基本ない環境であるため、固定で設定されている場合が多いようです。

4.dpiスケーリング/viewport
→「受け取ったデータに基づいて、画像データへ変換する処理」が「レンダリング」と
呼ばれる処理です。
viewport という処理は、仮想的な画像領域を用意し、その中でレンダリングを
行って画像を作成し、その画像を素材の一つとして、全体のレンダリングに利用
するという処理です。
dpiスケーリングとは、通常OS標準dpiなりに基づいてレンダリングされるところを、
異なるdpi設定で出力することにより、画素密度が激しく高い／低い環境でも、
実サイズが小さすぎたり大きすぎたりしてしまうことを回避するための機能です。

5.72ppi/96ppi
→「最も多い環境」がだいたいそのあたりにある（あった）、というメリットがあります。
最近では、これを大きく外している環境も増えてきていますが、それらの環境でも、
上記の想定で作られたサイトをなんとかして見やすい形で見る仕組みを実装している
場合が多いので、それなりに意味があります。
また、特にWebサイト制作においては、あまり想定 dpi を高くすると、画像データが
非常に大きくなってしまい、サーバ・回線への負荷も高まりますので、必要最低限に
抑えるための基準という意味もあります。

投稿2016/12/29 07:35

himazin.blm

総合スコア581

7968

2017/01/13 05:58

御礼が遅くなり申し訳ございません。私の知識不足で理解できていないところもありますが、回答を参考に調べてみたいと思います。回答ありがとうございましたm(__)m

行動規範の内容に同意します

【質問5】Webサイトを制作するときの解像度を72ppiまたは96ppiにする合理的な理由は？

検証していないため、推測です。
ブラウザから印刷するときの解像度はブラウザごとに異なる可能性があります。
おそらく大体のブラウザでは96dpiに設定もしくは、OSの解像度（システムDPI）に依存しているのかと思います。
WindowsのOSの解像度（システムDPI）は、デフォルトで96dpiになっていると思われます。
ブラウザから印刷するときは96dpiで印刷されるため、Webサイトを制作するときにも96dpiで制作するのではないかという私の推測です。

これから検証してみますが、96dpiよりも高い解像度の画像データを使っても容量が大きくなるだけで、画像だけ96dpi以上で印刷されることはなく、印刷したときの見た目は変わらないのではないかと考えております。
逆に72dpiなど96dpi以下の画像データを使ったときは、印刷したときに粗く印刷されるのではないかと考えております。
これに関しては実際に印刷してみて検証してみます。

投稿2016/12/28 02:42

編集2016/12/28 02:53

7968

総合スコア253