RetinaディスプレイでWEBデザイン

2016年2月11日

新しいMacBook Proがリリースされて、RetinaディスプレイでWEBデザインをする人も増えたのではないでしょうか？ちなみに13インチのMacBook Proは「2,560 x 1,600ピクセル標準解像度、227ppi」15インチMacBook Proは「2,880 x 1,800ピクセル標準解像度、220ppi」です。タッチバーの仕様も気になりますが、RetinaディスプレイでWEBデザインをするのが初めてな人にのために、WEBサイトのデザインをRetinaディスプレイでデザインするのは、どうなのか？高解像度の画面でデザインする時、一般的な環境にあわせてデザインすることができるのか？といった疑問を解決したいと思います。

ちなみに私は、iMac 27インチRetina 5Kディスプレイモデル（Late 2015）をWEBデザインのマシンとして使っており、MacBook Pro（タッチバー無し）はサブマシンとして使っています。Retinaディスプレイはご存知の通り、通常のディスプレイよりも高解像度であり、さらに補足しますと5Kとは、ディスプレイの水平方向のピクセル数が 5000px 前後のディスプレイのことを指すそうです。iMac Retina 5Kの画面解像度は「5120px ✕ 2880px」従来のiMac27インチの解像度「2560px ✕ 1440px」2倍のサイズです。

そこで実際、RetinaディスプレイでWEBデザインする方法と注意点をご紹介します！

Photoshopでのデザイン作業はどうなのか？

photoshop

Retinaディスプレイでは初期状態でPhotoshopを開くと、ドキュメントが1/2のサイズで表示されてしまいます。デザインする際に、大きさの感覚が一般的なディスプレイの1/2だと非常にデザインするのが難しくなります。

その解決法として、現時点で３つの方法が考えられます。

200%拡大して作業する

これがもっとも簡単でシンプルな方法で、私はこの方法でデザインしています。つまり常に200%拡大して作業をするという方法で、私の場合ドキュメントを開いた時に虫眼鏡ツールを１回クリックするというのが習慣化しています。しかしいくつか小さな問題があります。

「200%拡大するのが面倒。」

→これを解決する方法としては、200%拡大のショートカットを作るというのもいいかもしれません。しかし虫眼鏡ツールを使うというのも慣れてしまえば問題なしです。

「200%拡大すると全体的にほんの少しぼやけて見える」

→これを解決する方法としては、環境設定　＞　一般　＞　画像補間方式で
「バイキュービック法- 滑らか（拡大に最適）」に変更すると、完全ではありませんが少しマシになります。

カンバスサイズを2倍にして作成

デザインを2倍のサイズで作成する方法です。こうすると拡大する必要もなく、一番美しい状況でデザイン作業ができます。しかも、Retina対応した画像を書き出す事ができるので、一石二鳥と言えます。

しかし、PSDファイルが重くなるという点と、すべて2倍の数字で計算して作成する必要がありますので、そのあたりを面倒と思う人もいるかもしれません。

低解像度モードで開く

ソフトを「低解像度モードで開く」という方法です。Appleのサイトにも載っていますが設定方法は以下のとおりです。

現在開いているアプリケーションを終了します。
Finder の「移動」メニューから「アプリケーション」を選択します。
表示される「アプリケーション」フォルダで、問題のアプリケーションのアイコンをクリックしてハイライトします。
「ファイル」メニューから「情報を見る」を選択します。
「低解像度で開く」の横にあるチェックボックスにチェックマークを入れて、低解像度モードを有効にします。
ウインドウを閉じ、アプリケーションをダブルクリックして再度開きます。

こうする事で次回以降は、「低解像度モード」つまり通常ディスプレイで開いたようなサイズでPhotoshopを開く事ができます。

しかし現時点では擬似的に再現している為なのか、文字などが若干ぼやけて見えます。せっかくのRetinaディスプレイが台無しどころか、通常のディスプレイよりも若干汚く見えてしまいます。これは今後改善される事を期待しております。

Retina対応していないWEBサイトは当然…

iPhoneやiPadなどですでに体感済みだとは思いますが、Retina対応していないWEBサイトの画像はぼやけて見えて、正直カッコいいデザインのサイトであろうが、台無しです。
逆の見方をすれば、Retinaディスプレイでデザイン作業をすれば、嫌でも気になってRetina対応をしたくなります。

つまり今後はRetina対応がマストになってくる日は近いと思います。

スクリーンショットがデカイ

144

これは、盲点でした。使ってみて初めて気づきましたが、Retinaディスプレイでは当然ながらスクリーンショットの解像度も2倍の144dpiになります。72dpiのデザインをしている画面で、スクリーンショットを貼り付けると、倍のサイズで貼り付けられて、若干めんどくさい感じになります。
私の場合今のところ、貼り付けてから「画像を50%の縮小」して使っています。

ただ、私はまだ設定していませんが、Automator（オートメーター）を使えば、自動でスクリーンショットをリサイズしてくれるようにできます。