Webやアプリにおける解像度とサイズ

株式会社ピーアールオー（あったらいいな！を作ります） Advent Calendar 2022の12日目、前日は「[Markdown+PlantUML環境をdevcontainerで構築する](https://qiita.com/42_mk/items/79543ca3aa107c5635b2) 」でした。

ベテランほど「**初心にかえる**」のは大事。

印刷もWebも経験があるものの、うろ覚えの部分も多いので、「**解像度とサイズ**」について再確認用にまとめてみます。
# 解像度と単位
解像度とは、**1インチ(25.4mm)あたりのドットやピクセル(画素)の数**を表します。印刷ではdpiですが、ppiという単位もあります。
「同じ」「ほぼ同じ」と解説しているサイトもあるけど本当に？という辺りからまとめてみます。

## dpiとppiが「同じ」という認識は正しいのか？
ひとくちに「解像度」と言っても、dpiとppiでは**使用する対象**が違う。
|名称|単位|対象と意味|
|:-----------:|:-----------:|:-----------|
|出力解像度|dpi|**出力機器**の解像度を指す。出力機器とはプリンターやディスプレイのこと|
|入力解像度|dpi|**入力機器で原稿を読み取る**ときの解像度。「スキャナー解像度」とも|
|画像解像度|ppi|**画像そのもの**の解像度を指す|

「同じ」って解説しちゃダメだろう…:rolling_eyes:

ただ、いくつ説明を読んでも、ほんとーにわからないのですよ(間違っている情報もある)。
DTP専業でもない限り無理無理の無理 ㌦ｧｧｧｧｧ(ノ ﾟДﾟ)ノ　＝＝＝＝　┻━━┻

じゃあ、「ほぼ同じ」と解説している理由はどこにあるのか？という点を含め、つらつら書いてみる。

## 1インチあたりの「数」という点では同じ
dpiもppiも、1インチあたりのドットまたはピクセルの事なので、「**数**」という点では同じです。
ところが、カラー情報の持ち方や表現の仕方は全く違ったりします。

## ppiはカラー情報を持ち、dpiは持っていない

|単位|カラー情報|
|:-----------:|:-----------:|
|dpi|白黒|
|ppi|フルカラー|

衝撃的な事実。**dpiは白黒の点(ドット)の集まりで、色を持たない。**

dpiは**白黒のドットの情報**です。階調(グラデーション)やカラー情報を持ちません。
対して、**ppiは階調ありのカラー情報を持っています**。

出力解像度の項目で「出力機器とはディスプレイ」だと書いてあるので混乱しますが、私たちが使う**ディスプレイの単位はppi**です。カラー情報を持っています。
ディスプレイは**1pxあたり3つのサブピクセル(RGB)** を持ち、この**サブピクセルの点灯**でカラーを表現します。
対してオフセット印刷では**CMYKのインクを使い、ドットの密度や重なり**でカラーを表現します。

### ディスプレイで表現されたカラーを印刷で完全再現するのは困難
ディスプレイで見たカラーを印刷でも使いたいとリクエストされる事もありますが、**再現不可能**なカラーもあります。
ディスプレイは「**光の三原色**」と呼ばれる**RBG**、印刷では「**色の三原色**」と呼ばれる**CMY(K=黒を除く)** で表現します。
**RGBは混ぜるほど白**に近づきます。しかし、**CMYは混色するほど黒**に近づくため、再現不可能な色も出てくるのです。

Photoshopの画像解像度の単位は勿論ppiです。
![Photoshopの解像度](http://drive.google.com/uc?export=view&id=1YsbXLY0nS75LVTUxXZXdb-RY_Z5XAv8L)
## 印刷における「350dpi」という数の根拠
さらに脱線しますが、印刷とセットで出てくるのが「**画像は350dpiで入稿してください**」。
大多数の人は、なぜ「**350**」という数になるのか疑問に思うのではないでしょうか。

オフセット印刷には「**スクリーン線数(lpi)**」という概念があります。
線数とは**ドット(網点)の細かさ**の事で、**1インチにドットがいくつ入るか**示しています。
この線数が大きければ細密な表現が期待できます。

一般的なカラー印刷のスクリーン線数は175線。これは**1インチあたり175個のドットで表現**するという意味です。
印刷物で使用する画像の必要解像度は線数の2倍と言われているため、「**175 × 2 = 350dpi**」という計算になり、「**印刷に最適な解像度は印刷原寸で350dpi(1インチ350個のドットで表現する)**」という事になります。

ベスト解像度は350dpiですが、280dpiでも良質な印刷結果を得られた事があります。
とはいえ、依頼する印刷会社の機材により印刷結果は変わる[^印刷会社の機材により印刷結果は変わる]ので、依頼先のアドバイスに従うのが正しいです。
なんだかんだ言っても、解像度は印刷原寸で最低300dpiは欲しいところ[^最悪300dpiは欲しいところ]。
[^印刷会社の機材により印刷結果は変わる]: 特定色が強く出る等、印刷機に個体差があるため。

[^最悪300dpiは欲しいところ]: 解像度が足りなければどうにかする技はある。最近のAdobeはスーパー解像度の処理ができて便利。

ちなみに同じ印刷でも、**インクジェット印刷は網点を使わない**ため、スクリーン線数は関係ありません。ただ、**印刷の詳細度の尺度としては利用**されています。


ここまでが、主に印刷に関する「**解像度**」のおはなし。
これで終われば混乱せず平和に終わらせられるけど、ディスプレイに話を移した途端、さらなるカオスの海が待っているんだなあ…これが:rolling_eyes:

# ディスプレイにおける解像度
ディスプレイにおける「解像度」とは、正しくは「**画面解像度**」のこと。「**ディスプレイ解像度**」とか「**モニター解像度**」とも表記されます。
初期の画像解像度については、**Macは72dpi**、**Windowsは96dpi**で設計されていました。

「**ディスプレイでdpiを使うのはおかしい**」と思った方。あなたは前項のとりとめない文章を真面目に読みましたね？いい人です:laughing:

今でこそカラーディスプレイは当たり前ですが、**1984年に発売された「[Macintosh](https://en.wikipedia.org/wiki/Macintosh_128K)」のディスプレイは白黒**でした。
カラーディスプレイの登場は、**1987年の「[Macintosh II](https://en.wikipedia.org/wiki/Macintosh_II)」** 発売まで待つことになります。

私は新社会人の頃からずーっとMac利用者なので、Windowsの動向がさっぱりわからないのですが、YouTubeで起動動画を発見。
<iframe width="560" height="315" src="https://www.youtube.com/embed/xnudvJbAgI0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/GlW3s23_SYU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

拝見するとWindows2.xがカラー化されているので、Windowsも1987年以降はカラーをサポートしていることがわかります。

初期のmacOS[^macOS]やWindowsは、**画面で見たものとほぼ同じに出力できる「[WYSWYG (What you see What you get)](https://ja.wikipedia.org/wiki/WYSIWYG)」** ことを目指して設計されているのですが、なぜか**OS間でdpiが微妙に違う**。
[^macOS]: 当時のmacOSの名前は「System」。日本語版は「漢字Talk」と呼ばれていました。

macOSの場合、**文字サイズの単位(pt)[^文字サイズの単位]がほぼ1/72インチであることに注目**し、画像解像度が**72dpiに近いディスプレイ**を採用したというのが理由だったようです。
参考：[WYSIWYG - Wikipedia](https://ja.wikipedia.org/wiki/WYSIWYG)
[^文字サイズの単位]: 日本では「Q(きゅう)」という単位を使っていました。1Q = 0.25mm

対してMicrosoftは自分達でPC本体を製造せず、OSを提供するビジネスモデルです。
当然、無数にあるディスプレイの仕様を制御できるはずもなく、**実際のdpi値を使用せず、論理値として扱う**事にしました。
96dpiという数値が選ばれた理由は、

> ディスプレイと紙の印刷物では、目からの距離が異なるため、その分を調整した

引用：[ASCII.jp：Windowsのディスプレイとモニター　いまだ96DPIが基準](https://ascii.jp/elem/000/004/038/4038068/)

## 画面解像度とは縦横に並んだピクセルの数
まるっと「解像度」と呼ぶ事の罪深さよ:japanese_ogre:

「解像度」と付いてますが、**印刷現場における「解像度」とは別物**と考えないと非常に混乱します。
「**Webデザイン**にPhotoshopを使用する時の**画像解像度は72dpi(ppi)**」と聞く事もありますが、対象がディスプレイの場合、**画像解像度dpi(ppi)の値は表示サイズに影響を及ぼしません**。

例えば「1024px × 500px」の画像を作るとする。
画像解像度**144ppi**で作っても**72ppi**で作っても、**ディスプレイに表示されるサイズは「1024px × 500px」** で変わりはありません。

**画像の1pxはディスプレイでも1pxとして描画される**。

…はずだったんだけどな。ちょっと前まで:japanese_ogre:

## 1px = 1px が成り立たないRetinaディスプレイ
「Retinaディスプレイ」とは、いわゆる「**高精細ディスプレイ**」の事です。

スマホアプリの開発に携わっている人なら、とっくの昔に心得ている話だとは思いますが、デスクトップを主なターゲットとしているWebサービスやサイト制作の場合は、ちょっと縁が遠いかもしれません。

MacにしろiPhoneにしろ、Appleのプロダクトは画像描画の美しさに定評がありますが、従来型の描画では限界があります。

そこで「ピクセル」に2つの概念を与えました。

**デバイスピクセル (物理ピクセル)** = **画面に収まっている**ピクセル数 
**論理ピクセル (CSS Pixel)** = **実際に表示する**ピクセル数


||iPhone(2007年)|iPhone 3GS(2009年)|iPhone 4(2010年)|
|:-----------:|:-----------:|:-----------:|:-----------:|
|デバイスピクセル|320 × 480|320 × 480|620 × 980|
|論理ピクセル|320 × 480|320 × 480|320 × 480|
|ppi|163|163|326|

参照：[The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)

初代iPhoneとiPhone 3GSはデバイスピクセルと論理ピクセルに違いはありません。
しかし、iPhone4は**デバイスピクセルが2倍**になります。

**論理ピクセル**とは、複数のデバイスピクセル(物理ピクセル)を**擬似的に1つのピクセルとみなす**ピクセルです。
iPhone 4では、**画面上の620 × 980のピクセルを使い、320 × 480ピクセルのコンテンツを描画する**事になります。
**2px × 2pxを1pxとして描画する**ので、細やかな色の階調がより表現しやすくなります。しかし画面サイズは他の端末と変わりません。

このようなスケーリングのあるデバイスに対して必要な画像は、**デバイスピクセルに合わせて制作**する事になります。
論理ピクセルに合わせた画像は、スケーリングの際に**無理やり画像を引き伸ばす**格好になり、表示した時にぼやけます。

…iPhoneが出てきたら当然Androidの話も必要だし、「高精細ディスプレイ」に関してはもう少し調べたい。「Webやアプリ」とか言いつつ、ごく最初のさわりだけしか書けなかったなあ:rolling_eyes:

今回は時間切れとスタミナ不足でギフアップ。ちまちま更新したい…:smirk:

# 単位は難しい
単位については、Qiitaにはとってもいい記事があるんですよ。

https://qiita.com/7968/items/61a1deff80721f412096

体系的に調べていて、メートル・インチ・ポイントまで網羅しています。
記事のコメントも参考になります。

「解像度」というのは本当に難しくて、一体誰が正確な情報を持っているのか？という感じです。
歴史的な背景も相まって、「**どれも間違いではない**」という事も多い。

そんなわけで、この記事も下書きが3ヶ月ほど塩漬けになっていたのですが、最後に下書きを更新してから3ヶ月なので、実際は1年くらい半塩漬けになっていた気がします。調べるのがつらいw

# 参考URL
## 解像度 / dpi / ppi
+ [解像度 - Wikipedia](https://ja.wikipedia.org/wiki/%E8%A7%A3%E5%83%8F%E5%BA%A6)
+ [画面解像度 - Wikipedia](https://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8F%E5%BA%A6)
+ [出力解像度とは - コトバンク](https://kotobank.jp/word/%E5%87%BA%E5%8A%9B%E8%A7%A3%E5%83%8F%E5%BA%A6-11602)
+ [入力解像度 ｜ 株式会社プロトソリューション](https://www.protosolution.co.jp/glossary/design/na/nyuuryoku-k.html)
+ [dpi - Wikipedia](https://ja.wikipedia.org/wiki/Dpi)
+ [ppi - Wikipedia](https://ja.wikipedia.org/wiki/Ppi)
+ [PPIとDPIは何が違うのでしょう？ - 99designs](https://99designs.jp/blog/design-tips-ja/ppi%E3%81%A8dpi%E3%81%AF%E4%BD%95%E3%81%8C%E9%81%95%E3%81%86%E3%81%AE%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%EF%BC%9F/)
+ [第５章　解像度と出力の素敵な関係｜Adobe Illustrator使い方と出力講座：Adobe Illustrator お茶の子サイサイ](http://www.incunabula.co.jp/dtp-s/IllustratorDTP/illustrator_saisai/5_1.html)
+ [印刷用画像データを解像度350ppi（350dpi）にする理由の一例 | カラーマネジメント実践ブログ 〜フォトレタッチの現場から〜](https://omoide-photo.jp/blog/image-data-350ppi/)
+ [ASCII.jp：Windowsのディスプレイとモニター　いまだ96DPIが基準](https://ascii.jp/elem/000/004/038/4038068/)
+ [サブピクセル（副画素）とは - 意味をわかりやすく - IT用語辞典 e-Words](https://e-words.jp/w/%E3%82%B5%E3%83%96%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB.html)
+ [Webにおける解像度のお話 | ザリガニデザインオフィス](https://zarigani-design-office.com/blog/resolution_on_web/)
+ [CSS pixel - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel)

## 印刷全般
+ [オフセット印刷 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%95%E3%82%BB%E3%83%83%E3%83%88%E5%8D%B0%E5%88%B7)
+ [インクジェットプリンター - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%AF%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%83%97%E3%83%AA%E3%83%B3%E3%82%BF%E3%83%BC)
+ [スクリーン線数 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E7%B7%9A%E6%95%B0)
+ [スクリーン線数 | 用語集 | 大同印刷株式会社](http://daidoprinting.co.jp/glossary/glossary-8508)
+ [スクリーン線数 | 賢者の印刷用語集](https://www.well-corp.jp/solution/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E7%B7%9A%E6%95%B0/) 
+ [スクリーン線数 【印刷用語集】｜バンフーオンラインショップ](https://www.vanfu.co.jp/yougo/page.php?w=%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E7%B7%9A%E6%95%B0)
+ [印刷におけるスクリーン線数を解説！使用例と使い分けのための条件 | ラクスルマガジン](https://raksul.com/magazine/column/print-line/)
+ [画像解像度と線数 | 技術情報 | InDesign（インデザイン）専門の質の高いDTP制作会社―株式会社インフォルム](https://www.informe.co.jp/useful/dtp/dtp30/)
+ [線数と画像解像度の関係｜たつみ印刷](https://www.tatsumi-print.jp/theme193.html)
+ [高精細印刷を評価する単位、dpi と線数について](https://blog.okamura-pic.co.jp/beyondthelimitofprinting/%E9%AB%98%E7%B2%BE%E7%B4%B0%E5%8D%B0%E5%88%B7%E3%81%A8%E7%B7%9A%E6%95%B0)
+ [「光の三原色」と「色の三原色」の原理と仕組み｜色が見える仕組み（７）: 光と色と](https://optica.cocolog-nifty.com/blog/2012/04/post-ab6f.html)
+ [WYSIWYG - Wikipedia](https://ja.wikipedia.org/wiki/WYSIWYG)

## アプリデザイン制作時に参考になる資料
+ [The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)
+ [iOS Resolution // Display properties of every iPhone, iPad and iPod touch Apple ever made](https://www.ios-resolution.com/)
+ [What Dimensions & Resolution Should Use For iOS And Android App Design? | Altamira](https://www.altamira.ai/dimensions-resolution-for-ios-and-android-app-design/)

## 計算ツール
+ [スマートフォン・スマホの画面サイズ - 高精度計算サイト](https://keisan.casio.jp/exec/user/1530973087)
+ [ppi、dpi 画素密度計算 - 液晶ディスプレイ](https://testpage.jp/tool/ppi_dpi.php)