質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 4,401

7968

score 243

スマホサイトを作ったことがありますが、アプリ制作の知識や経験はありません。
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サイトをデザインするメリットは、デザインしたものを印刷したときにディスプレイの表示とほぼ同じぐらいの大きさで印刷されるということぐらいかと考えております。

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

参考・閲読サイト

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+1

身もふたもない話ですが、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 を高くすると、画像データが
非常に大きくなってしまい、サーバ・回線への負荷も高まりますので、必要最低
限に抑えるための基準という意味もあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/13 14:58

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

    キャンセル

0

調べた結果を回答として投稿します。

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

調べてみましたが、Windowsに関してですが、今も96dpiかと思います。
WindowsのシステムDPIとモニタDPIに関して下記が参考になります。

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

上記に関してですが、誤りでシステムDPIとモニタDPIの違いを理解せずに書いたのではないかと思います。
WindowsのシステムDPIのデフォルトは今も96dpiが正しいかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

これに関してですが、ブラウザごとに異なるというのが正しいのかもしれません。
下記の記事では画面解像度によってブラウザから印刷した解像度が異なるとのことです。
ここでの画面解像度とはモニタDPIではなく、システムDPIのことを指しているのかもしれません。

時間があるときに同じように検証してみます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/16 18:11 編集

    2017.1.16
    デザインが一新されたので、コメント投稿がMarkdownに対応したのか確認してみるテスト。

    [ヤフーのリンク](http://www.yahoo.co.jp/)

    - リスト1
    - リスト2

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる