RWDで重要な「デバイス・ピクセル比」とは

今回は上級者向けのお話で、RWD（レスポンシブWebデザイン）の肝とも言える「デバイス・ピクセル比」についてご紹介します。

デバイス・ピクセル比とは、
1ピクセルの画像データをディスプレイが何ピクセルで表現するかを表す数値のことです。

今までは、1ピクセルの画像を1ピクセル分のディスプレイで表現するのが当たり前でしたね。

どういうことか順を追ってご紹介します。

まず背景としては、昨今のモバイル・スクリーンの高解像度化競争により、
かつて72 ppi（1インチあたり72個のピクセルで表現すること）が最適と呼ばれた時代が、
いまや400 ppi以上のスクリーンも市場に見られるようになってきました。

そうなると、これまで72 ppiを基準として作っていたWebサイトやコーディング・ルールも、
すべて変えなくてはなりません。それは大変ですね。

そんな事態を防ぐために、
ソフトウェア業界が新たに導入したのが、
この「デバイス・ピクセル比」です。

たとえば私の使っているスマホは、「デバイス・ピクセル比」は「3」という設定になっています。
この場合、画像の1ピクセルをディスプレイ上では3ピクセルを使って表現することになります。

つまり、私のスマートフォンのディスプレイの解像度が「1080px x 1920px（横1080ピクセル×縦1920ピクセル）」ではあるものの、
ブラウザ上でWebサイトを表示するときには3分の1の「360px x 640px」として表示することになっています。

このようにして、高解像度なスクリーンでも、
一般的なスクリーンとおおよそ同じ大きさの画面結果を得られるようにしています。

デバイス・ピクセル比は仕様書などには書かれていないので、
もしみなさんのスマホのデバイス・ピクセル比を調べたいときは、
「スマホの機種名 デバイス・ピクセル比」などでGoogle検索するか、
下記のようなJavaScriptコードを使って、Webブラウザの横幅 x 縦幅を調べましょう。

<script>
alert(innerWidth + ' x ' + innerHeight);
</script>

では、最後に「デバイス・ピクセル比」を意識したWebサイト制作の方法についてご紹介します。

それには、写真の解像度をスクリーンのピクセルに合わせて用意することが必要です。

私のスマホでいえば、
ブラウザ上に360px x 100pxの写真を置きたい場合、
3倍のサイズの1080px x 300pxの写真を配置して、
HTMLのwidth属性で360pxを指定します。

<img src="1080x300.jpg" alt="" width="360">

こうすることで、
ブラウザ上では幅360pxで表示されていますが、
スクリーンのピクセル1080pxを余すことなく使い、
きれいな写真を見せることができます。

逆に360pxどおりの写真をアップしてしまうと、
そのスクリーンの最大限の美しさを出せないということです。
現在、市場に出回っているスマホでは、
デバイス・ピクセル比が2のスマホが多いため、
必要な写真の大きさの2倍の画像解像度でオリジナルデータを用意するのが定石になってきています。

Webデザインの意思決定に関わる重要な要素である「デバイス・ピクセル比」を正しく理解して、
最先端のWebデザイナーを目指しましょう。