More than 1 year has passed since last update.

株式会社ピーアールオー（あったらいいな！を作ります） Advent Calendar 2022

@mrd-takahashi(Mari Takahashi)in

株式会社ピー・アール・オー【公式】

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

Posted at 2022-12-12

株式会社ピーアールオー（あったらいいな！を作ります） Advent Calendar 2022の12日目、前日は「Markdown+PlantUML環境をdevcontainerで構築する」でした。

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

印刷もWebも経験があるものの、うろ覚えの部分も多いので、「解像度とサイズ」について再確認用にまとめてみます。

解像度と単位

解像度とは、1インチ(25.4mm)あたりのドットやピクセル(画素)の数を表します。印刷ではdpiですが、ppiという単位もあります。
「同じ」「ほぼ同じ」と解説しているサイトもあるけど本当に？という辺りからまとめてみます。

dpiとppiが「同じ」という認識は正しいのか？

ひとくちに「解像度」と言っても、dpiとppiでは使用する対象が違う。

名称	単位	対象と意味
出力解像度	dpi	出力機器の解像度を指す。出力機器とはプリンターやディスプレイのこと
入力解像度	dpi	入力機器で原稿を読み取るときの解像度。「スキャナー解像度」とも
画像解像度	ppi	画像そのものの解像度を指す

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

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

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

1インチあたりの「数」という点では同じ

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

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

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

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

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

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

ディスプレイで表現されたカラーを印刷で完全再現するのは困難

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

Photoshopの画像解像度の単位は勿論ppiです。

印刷における「350dpi」という数の根拠

さらに脱線しますが、印刷とセットで出てくるのが「画像は350dpiで入稿してください」。
大多数の人は、なぜ「350」という数になるのか疑問に思うのではないでしょうか。

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

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

ベスト解像度は350dpiですが、280dpiでも良質な印刷結果を得られた事があります。
とはいえ、依頼する印刷会社の機材により印刷結果は変わる¹ので、依頼先のアドバイスに従うのが正しいです。
なんだかんだ言っても、解像度は印刷原寸で最低300dpiは欲しいところ²。

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

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

ディスプレイにおける解像度

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

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

今でこそカラーディスプレイは当たり前ですが、1984年に発売された「Macintosh」のディスプレイは白黒でした。
カラーディスプレイの登場は、1987年の「Macintosh II」 発売まで待つことになります。

私は新社会人の頃からずーっとMac利用者なので、Windowsの動向がさっぱりわからないのですが、YouTubeで起動動画を発見。

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

初期のmacOS³やWindowsは、画面で見たものとほぼ同じに出力できる「WYSWYG (What you see What you get)」 ことを目指して設計されているのですが、なぜかOS間でdpiが微妙に違う。

macOSの場合、文字サイズの単位(pt)⁴がほぼ1/72インチであることに注目し、画像解像度が72dpiに近いディスプレイを採用したというのが理由だったようです。
参考：WYSIWYG - Wikipedia

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

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

引用：ASCII.jp：Windowsのディスプレイとモニター　いまだ96DPIが基準

画面解像度とは縦横に並んだピクセルの数

まるっと「解像度」と呼ぶ事の罪深さよ

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

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

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

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

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

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

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

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

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

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

単位は難しい

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

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

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

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

参考URL

解像度 / dpi / ppi

印刷全般

アプリデザイン制作時に参考になる資料

計算ツール

特定色が強く出る等、印刷機に個体差があるため。 ↩
解像度が足りなければどうにかする技はある。最近のAdobeはスーパー解像度の処理ができて便利。 ↩
当時のmacOSの名前は「System」。日本語版は「漢字Talk」と呼ばれていました。 ↩
日本では「Q(きゅう)」という単位を使っていました。1Q = 0.25mm ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up