NEWS

DTP／Web制作をしていると解像度という言葉をよく耳にしますが、解像度の扱いって意外と難しくないでしょうか？そもそもDTPの解像度とWebの解像度は別物ですし、CSSピクセルやdipとか出てくると...もう頭痛い！

わからなくなっては調べて...また忘れて...の繰り返しです。そろそろケリをつけるべく備忘録としてまとめてみました。

解像度を難しくしている一番の原因はdpi, ppiといった密度を表している解像度がある一方で、デバイスピクセルのように単純にピクセルの数量を表している解像度もあるという点です。

• （1）密度としての解像度・・・ dpi, ppi
• （2）ピクセル数としての解像度・・・ 画面解像度、デバイスピクセル

どちらの解像度についての説明なのかを意識して、本記事や他サイト記事を読むとより理解が進むのではないかと思います。

DTPにおける解像度

印刷（DTP）における解像度は、1インチ（2.54cm）の中にどれだけドット（ピクセル）があるかの密度を表すものです。単位はdpi（dot per inch / ドット・パー・インチ）もしくはppi（pixel per inch / ピクセル・パー・インチ）。当然のことながら密度が小さいと粗く、大きいと滑らかに表現されます。

単位の前の数字は正方形の面積ではなく、一辺の1インチあたりのピクセル数で表します。たとえば、10dpiなら横10ピクセル×縦10ピクセルで合計100ピクセルとなり、350dpiなら横350ピクセル×縦350ピクセルで合計122,500ピクセルとなります。

DTPにおける解像度の説明は以上です。シンプルでありがたいですね。

Webにおける解像度

Webにおける解像度は密度ではなく、単純に画面上にあるピクセルの数量を表すものとなります。画面解像度と呼ばれることも多いです。単位は特になく「2560×1440」とか「750×1334」など、横と縦のピクセル数で表現されます。

Webでは密度としての解像度はないと言いましたが、厳密にいうとDTPのように1インチあたりのピクセル数としてdpi、ppiは存在します。ディスプレイの1インチあたりのピクセル数です。ただ実用的に使われることはあまりないので、Webにおいては【解像度＝画面解像度】と考えた方が現実的です。

ピクセルには決まった大きさはない

ピクセルは画面を構成する要素（色情報など）の最小単位ですが、デバイスのディスプレイによって1ピクセルの大きさが変わります。同じ画像（同じピクセル数の画像）でも高解像度のモニターでは小さく、低解像度のモニターでは大きく表示されます。

まー当たり前といえば当たり前なんですが、とても大事なことなのでっ

Photoshopで解像度を設定しても画質は変わらない

Photoshopなどの画像編集ソフトで画像を作成/加工する際に、解像度（dpi）の数値を変更してもピクセル数が変わらなければ同じ画質になります。

Retina対応するために2倍のサイズで作成すると言って、解像度を72dpiから144dpiにあげてもなにも変化はありません。なぜならピクセル数が同じだから...

上図はPhotoshopで解像度を変えた写真です。
ピクセル数が同じなら、解像度を変えても画質は一緒ですね。

Retina対応させたいのなら、ピクセル数を2〜3倍にしましょう。

たまにWeb制作時に解像度を72dpiに設定するとか、Macでは92dpiで制作するとか耳にすることがありますが、どう考えても道理にかないません。Web用の画像を作成する際にはdpiを意識する必要はありません。

Retina対応で必要な「CSSピクセル」

Retinaをはじめとする高解像度モニターに対応するために必要な知識として「CSSピクセル」と「デバイスピクセル」そして「デバイスピクセル比」があります。

• CSSピクセル：デバイスに表示させる理論上（仮想的）なピクセル数。
• デバイスピクセル：デバイスの物理的なピクセル数。画面解像度のこと。
• デバイスピクセル比：デバイスピクセルとCSSピクセルとの比率

CSSピクセル　×　デバイスピクセル比　＝　デバイスピクセル

さて、いよいよ面倒臭くなってきましたね...

デバイスピクセルは画面解像度のことなので大丈夫ですね。ディスプレイのピクセル数のことです。
問題はCSSピクセルです。Web制作者が通常のディスプレイで幅100px縦100pxの画像を表現したい場合に、もし仮に解像度が2倍のRetinaディスプレイでも同じように幅100px縦100pxで表示されてしまうと、見た目が半分のサイズに縮小されてしまいます。

せっかくディスプレイを高解像度にしても、その分サイズが小さくなってしまっては意味がありません。そこで登場するのがCSSピクセルです。

解像度が大きく異なるディスプレイでも、見た目の大きさが同じようになるように整えているのがCSSピクセルで、先ほどの例ですと通常のディスプレイでは100pxで表示されるところを解像度2倍のディスプレイでは200pxで表示されます。

高解像度（例：2倍）のディスプレイでは、4つのピクセルの塊を
1つのピクセル（1CSSピクセル）と擬似的に見なして表示させている

CSSピクセルによって、どのディスプレイでも要素の見た目の大きさが（ある程度）統一されるわけですね。

ちなみにCSSピクセルはデバイスで認識および実行されるので、制作者が設定する必要はありません。

ただ、高解像度ディスプレイに表示した時にボケないように画像を大きく作成する必要があるため、どのディスプレイまで対応させるかを確認するために、CSSピクセルやデバイスピクセル比を参照する必要は出てきます。

やはり、面倒臭がらずにきちんと理解しておいた方が良さそうです。

Androidアプリではdp（dip）が使われる

私はAndroidアプリをコーディングしたことがないため、dpに関しては経験に基づく紹介はできません。色々調べた情報を簡単にまとめさせていただきます。

dp（dip）とは

dip（density-independent pixels）とは密度非依存ピクセルのこと。

Androidのアプリのおいて、前述のCSSピクセルの役割を果たしているのがdp（dip）という単位です。dpで要素の大きさを指定することで、どのディスプレイでも見た目の大きさが（ある程度）統一されます｡

解像度グループ *

* 解像度グループとは便宜上使用している名前で、正式名称ではありません。

Android端末は解像度（dpi）が違うものが数多くあるため、密度の範囲によってグループ分けされています。ldpi(低解像度)、mdpi(中解像度)、hdpi(高解像度)、xhdpi(超高解像度)、xxhdpi(超高解像度)のような分けられ方です。

解像度グループ	dpi	倍率	dp	px
ldpi	120〜	×0.75	4dp	3px
mdpi	160〜	×1	4dp	4px
hdpi	240〜	×1.5	4dp	6px
xhdpi	320〜	×2	4dp	8px
xxhdpi	480〜	×3	4dp	12px
xxxhdpi	640〜	×4	4dp	16px

上記の表を参照すれば、8dpを指定するとmdpiのディスプレイでは8pxで表示され、xxhdpiでは3倍の24pxで表示されるというわけです。

▼参考サイト

【Android】いまさら聞けないdp入門
Android Developers リンク集 + DPI早見表

あとがき

解像度について解説しているブログは多々あります。しかしながら、個人的に不明点を全て網羅している記事が見つかりませんでした。そのため自分で必要な知識をまとめた次第なのですが...そもそも解像度の定義が複数あり、置かれている立場によって必要な知識が変わってくるため、万人が納得いく記事を書くことが非常に難しいということが今回書いてみてわかりました。

本記事も個人的な目線で解説した備忘録となっておりますが、読んだ方が少しでも解像度についての理解を深めていただけたら嬉しいです。