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

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

新規登録して質問してみよう
ただいま回答率
86.12%
Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

7968
7968

総合スコア253

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

4回答

3リアクション

2クリップ

7606閲覧

投稿2016/12/21 02:02

編集2016/12/27 07:10

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

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

#参考・閲読サイト

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

sharow, 5o5o_wagon, kei344👍を押しています

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。