この記事はこんな方におすすめです
- webデザインの解像度を学びたい方
- CSSピクセルを学びたい方
こんにちは、こんにちは、デザイナー/アートディレクターのnobuです。
当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。
今回はwebデザインの解像度について解説します。
webデザインを行うとき、一度は画像サイズや解像度について迷ったことがある方も多いと思います。
実際に十年ほど前まで「印刷の解像度は350ppi、webは72ppi。理由はいろいろあるけど、考えずに覚えましょう」みたいな風習もありました。
以前は私も72ppiがマストだと思っていたのですが、後から違うと知り衝撃でした。
先に結論を申し上げると、WEBデザインの画像解像度は、
とりあえず72ppiに設定する。気にするのは幅と高さのみでOK!
高解像度モニターへの対応は2x〜4xで書き出すと綺麗に表示される。
という感じです。
「そっか！OK！了解！」って方と「解像度とか基本でしょw」という博識な方はここまでで大丈夫です 笑
そもそも解像度ってなに?
という方は、当ブログの画像解像度の記事をぜひご覧ください。解像度について理解を深められると思います。
今回の記事を読むと、webデザインに必要な解像度の知識が得られます。
72ppiがお決まりになっている理由
1990年のマッキントッシュIIのころ、MACのトリニトロンモニターの解像度が72ppiだったので、画像解像度も同じ72ppiになりました。その名残で72ppiという数値が今でもwebデザイン界隈でお決まりとなっています。
ですが、web画像はディスプレイ解像度に依存しているので実はサイズに注意していればフォトショなどで設定する画像解像度は1ppiでも72ppiでも144ppiでも変わらないんです。
下に各解像度の画像をご準備しました。
ディスプレイの解像度と画像解像度を分けて考える
ディスプレイの解像度とは、画面サイズと中に敷き詰められているピクセル数を表しています。
TVやモニターのスペックに表示されている1920×1080みたいなアレです。
横1920×縦1080=全部で2073660のピクセルでスクリーンを表現しているよ〜って感じです。
1920×1080pxをフルHD、3840×2160pxを4Kと呼んだりしています。
ディスプレイの解像度は本当にただそれだけです。次項で詳しく解説しますが、解像度とは1インチ（25.4mm）の中に入っているピクセルの数を表しているので“〇〇ppi”を導くこともできますが、それはデザイナー（特にDTP系）がいつも気にしているフォトショなどで設定する画像解像度とは話の性質が違います。
- ディスプレイの解像度・・・ディスプレイの中に敷き詰められているピクセルの数、もしくはそれのppi
- 画像解像度・・・72ppiとか350ppiとか言ってるヤツ。
ディスプレイの解像度と画像解像度は分けて考えないとけっこう混乱します。
ちなみに、√(1920^+1080^)÷インチ数で解像度の計算ができます！pixel per inch（ppi）ってそのままなんですね！
参考画像
ディスプレイの解像度と画像解像度は底解像度にして考えるとわかりやすいです。
1pxの大きさはディスプレイサイズによって変わる【デバイスピクセル】
1pxの大きさはディスプレイサイズにより異なります。先ほども少し触れましたが、解像度とは1インチ（25.4mm）の中にピクセルがいくつ入っているかを表しています。幅×高さ_解像度の関係で1pxの大きさは変化します。
CSSとかのpxって絶対単位じゃないの?と思った方もご安心下さい。下記で詳しく解説します。
CSSの1px=１画素ではない…【CSSピクセル】
ここからが結構複雑です……
先ほどの項目でデバイスピクセルの1px(１画素)の大きさは相対的であると解説しました。しかし、それではCSSなどでpx指定してもディスプレイ解像度の違いで表示の大きさがバラバラになってしまいます。
解像度が２倍のモニターで表示したらpx指定した文字が2倍の大きさになってしまう！？←ちなみになりません。
そこで、webおよびすべてのブラウザーは、CSSピクセルと呼ばれる単位として1pxを定義します。 これは 参照ピクセル として指定されます。
基準ピクセルは、ピクセル密度が96dpiで読み取り装置からの距離が腕の長さであるデバイス上の1つのピクセルの視角です。したがって、公称腕の長さが28インチの場合、視角は約0.0213度です。したがって、腕の長さで読み取る場合、1pxは約0.26 mm（1/96インチ）に相当します。
参照ピクセルの定義
要するにちょうどいい大きさに見えるようにCSSピクセルとして定義されているってことです。
- 実際の物理的なピクセル＝デバイスピクセル（物理ピクセル）
- 擬似的なピクセル＝CSSピクセル（論理ピクセル）
なんじゃそりゃって感じですが、従来の解像度より数倍大きなディスプレイが出てきたことが原因ですね！
※CSSのWeb標準より明確に定義されています。
Retinaディスプレイ（高解像度ディスプレイ）
Apple製品に搭載されているRetinaディスプレイは、従来モニターの1pxを（およそ）２倍の解像度で表現しています。
じゃあ書き出しはやっぱり144ppi??
とグラフィック出身の私はなりました。。。しかし、ここで思い出して頂きたいのは冒頭で解説した「気にするのは幅と高さのみ。画像解像度の設定は1ppiでも72ppiでもweb上での表示は変わらない」ということです。
ですので、もし適正な画像が300× 300pxだった場合、Retina（高解像度モニター）用は600× 600pxで書き出して表示しましょう。２倍で書き出すことを2x、４倍で書き出すことを4xと呼びます。1倍で書き出すとRetinaなどの高解像度ディスプレイではぼやけてしまいます。（倍で書き出してwidthを指定する）
※「拡大」すると画質が荒れるので、元々2倍サイズで作成するといいです。
今回はRetinaを例に解説しましたが、Retina以外にも高解像度ディスプレイは色々あります！
web解像度まとめ
- webデザインでの画像解像度はとりあえず72ppiに設定する
- ディスプレイの解像度とフォトショなどで設定する画像解像度は分けて考える
- 1pxの大きさは相対的
- デバイスピクセルとCSSピクセルで1pxの定義が違う
- 画像は高解像度ディスプレイでも綺麗に表示されるように2xや4xで書き出す(通常用とretina用で分岐も可)
印刷寄りの記事ですが画像解像度についても、より理解が深まると思いますのでぜひご覧ください！
