時が経つごとに、ディスプレイの解像度はますます高くなり、より高画質の画像や映像を美しい画面で楽しむことができるようになりました。
スマートフォンはもちろんのこと、デスクトップパソコンやノートパソコンでもきめ細やかな画面になっており、インターネットの回線速度が追いつけば、自宅で美しい画面で映画を気軽に観ることだってできます。

しかし、Webの世界に関しては、こうした技術的な進歩があるにもかかわらず、対応しきれていないのが現状です。
というのも、表示速度を速くしたいのか、画像処理にあまり関心がないのか、画素の粗い画像が今でも多くのWebサイトで使われているからです。

今回は、Retinaディスプレイに対応したデザインをするために知っておきたい5つのことをご紹介します。
Retinaディスプレイは、高解像度のディスプレイの中でもよく知られているもので、まずRetinaディスプレイに対応した画像処理を行うのがよいでしょう。
PhotoshopやSketch、Adobe UXやIllustratorなど、どのようなツールを使っていても、きっと役に立つ内容です。

Retinaディスプレイに対応したデザインをするために知っておきたい5つのこと

1. そもそもRetinaディスプレイって何？

retina.jpeg

まずは、そもそもRetinaディスプレイとは何なのかについて、理解を深めていきましょう。

RetinaディスプレイとはApple製品のディスプレイに使われる言葉で、100〜200dpi程度であった従来の倍の解像度の高画素密度のディスプレイを指します。
もともと「Retinaレティナ」とは「網膜」の意味で、画素が細かいので人間の目で識別できる限界を超えた、美しいディスプレイであることからこの名前が登場しました。

もっとも早くRetinaディスプレイを採用したのは、2010年6月に発売されたiPhone 4です。
それ以降に発売されたモデルはすべてRetinaディスプレイで、iPhone 6 Plus以降のPlusシリーズは401dpi、それ以外は326dpiです。
Macでは、2012年6月発売のMacbook Pro以降で続々と対応モデルが登場しました。

iphone.png
Credit: Dan Rodney

iPhone 3とiPhone 4はほとんど同じ大きさですが、ピクセル数を比較してみると明らかになります。
iPhone 3は幅が320px、iPhone 4は幅が640pxとiPhone 3に比べても2倍も多くピクセル数を持ったため、「2x ディスプレイ」と呼ぶことがあります。

display.png
Credit: Dan Rodney

従来のデスクトップブラウザでは、800 x 600 px、1024 x 768 px、1280 x 800 px のディスプレイが使われていましたが、表示ピクセル数を多くするには、端末の大きさを大きくする必要がありました。
しかし、Retinaディスプレイでは、端末の横幅を変えることなく、2倍の画素数を表示することに成功したのです。

こういうわけで、Retinaディスプレイでは、従来の解像度に比べてもより美しく見えるのです。

2. Retinaディスプレイでもコーディングは同じでOK？

code.jpeg

先ほどのiPhone 3(1x ディスプレイ)とiPhone 4(2x ディスプレイ)の比較から、次の問題を考えてみましょう。

まず、HTMLやCSSに関しては、どうでしょうか。
スマートフォンサイトの横幅は、320pxのままで大丈夫なのでしょうか？

実は、この点に関してはブラウザは賢いので、ディスプレイの解像度を取得し、HTMLやCSSのピクセルをハードウェアのピクセルに変換してくれています。

例えば、1x ディスプレイでは「HTML/CSSの1px ＝ スクリーンの1px」ですが、2x ディスプレイでは「HTML/CSSの1px ＝ スクリーンの2px」という形になります。

今度は、画像の場合はどうでしょうか。
例えば、幅300pxのスペースに画像を配置したいときに、綺麗に画像を見せるには1x ディスプレイ用の「300px幅」の画像と、2x ディスプレイ用の「600px幅」の画像を2通り用意する必要があります。

ホームページの場合は、どちらの画像もコードの中に埋め込んでおけば実際に同じサイズのように見えますが、しかし2x ディスプレイ用の画像はぎゅっと詰まっているように見えて、Retinaディスプレイではよりシャープで鮮明に見えるのです。

ただし、いくつかの注意点もあります。
Photoshopで作業をして解像度を指定している場合(例えば72ppiなど)でも、Webブラウザはその解像度を無視してしまいます。
Photoshopでの解像度は全く関係ありませんので、72ppiのままで設定を変更しなくても大丈夫です。
関係してくるのは、画像の実際の幅や高さということになります。

3. 一気に複数画像を作成することはできる？

multimonitor.jpeg

最新版のPhotoshopの場合は、書き出し形式ダイアログを使用して、選択したレイヤー、アートボード、またはドキュメントを複数のサイズのアセットとして書き出すことができます。

  1. 左側のパネルで、相対的なアセットサイズ（1.25x など）を選択します。
  2. 指定した相対的なアセットサイズで書き出したアセットの接尾辞を選択します。
    たとえば、「@1,25x」など、接尾辞を使用することで、書き出したアセットを管理しやすくなります。
  3. 必要に応じ、プラス（+）アイコンをクリックして、書き出すアセットにさらにサイズと接尾辞を指定します。

これで、手間をかけずに画像を書き出すことができます。

4. どういう風にコーディングすればいいの？

monitor.jpeg

Retina用の画像に対応させるには、一般的にHTML5のsrcset属性を使います。
こちらの属性を使うことで、Retinaディスプレイ用に画像を切り替えられるだけでなく、ウィンドウサイズに応じて画像を切り替えることができるので、レスポンシブデザインに対応することもできます。

コーディングの仕方はいたってシンプルです。
以下のように、imgタグに使用していきます。

<img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt="Example image">

srcを指定しているのは、srcsetに対応していないブラウザへのフォールバックです。
未対応のブラウザでは、srcを読み込みます。

srcsetでは、カンマ区切りで画像とその画像が読み込まれる条件を指定していきます。
こちらで画像が読み込まれた場合には、srcでの画像は読み込まれません。

ほかにも、設定次第でウィンドウサイズに応じて画像を切り替えることもできます。

srcsetを使う一番のメリットは、対応しているブラウザであれば、必要のない画像は読み込まないという点です。
ほかにJavaScriptであとから高画質の画像に差し替えるような方法などがありますが、その場合は低解像度の画像をダウンロードしたあとに、高解像度の画像をダウンロードするという形になり、余分な通信が発生してしまいます。
しかし、srcsetを使えば、必要な画像だけ読み込むので、無駄な通信は行いません。