【Retina怖くない！】RetinaディスプレイでPhotoshopをWindowsと同じ解像度感覚で使う方法

Web2017年9月13日

先日MacBook Pro 2017（15インチ型）を購入しましたが、当然のことながらRetinaディスプレイのため、通常の解像度モニタとは見え方が全く異なります。いつも通常のモニタで1,000pxで見えていたものが500pxに見え、確かに鮮明にキレイに見えますがピクセル感覚が？？？といった状況に陥ります。

そこで本記事では、Retinaディスプレイでも限りなく一般的な閲覧解像度に近い感覚でWebデザインを行う方法をご紹介させていただきたいと思います。

RetinaディスプレイにおけるPhotoshopでのカンプ作成

前述の通りRetinaディスプレイでPhotoshopを起動し、これまで通常の解像度で見ていたサイズでカンバスを開くと、半分のサイズに見えます。実際には半分のサイズになっているわけではなく、Retinaディスプレイのためそう見えるだけで、500pxの大きさに見える1,000pxの画像を書き出せば、通常の解像度で見ればもちろん1,000pxに見えます。

でも、実際のところ頭の中で2倍サイズに変換してデザインを作るのは難しいでしょう。そこで、Photoshopでカンプ作成を行う際、以下のいずれかの方法により一般的な閲覧解像度に近い感覚でデザインをすることが可能です。

普通の解像度モニタに出力してデザインする
カンバスを200%に拡大
カンバスの2倍のサイズに
Photoshopを低解像度モードで開く

①普通の解像度モニタに出力してデザインする

Retinaディスプレイでのデザインじゃないじゃん！とツッコミを喰らいそうですが、これマジなんですよ。通常の感覚で作業したければ通常の解像度モニタでデザインするのが一番です。実際に私はMacBookをクラムシェル（閉じた状態）で使っており、モニタは至って普通の非Retinaのモニタです。

個人的にはRetinaでどう見えるかは都度実際にRetinaで検証すればよいと思っていて、基本的には一般的な環境でデザインしたほうがユニバーサルなものが作れるんじゃなかろうかと。

...と、これだけだと記事が終わってしまう事になるので、以下は実際にRetinaディプレイでカンプ作成を行う場合において、一般的な感覚に近づける方法をご紹介します。

②カンバスを200%に拡大

1,000pxのカンバスが500pxで見えてしまうのであれば、だったら200%表示にして実質1,000pxに見えるようにすればいい、という方法ですね。200%表示するとどうしてもシェイプの角丸部分などがぼやけて見えることがあります。これについては、[環境設定]-[一般]-[画像補間方式]にて「バイキュービック法- 滑らか（拡大に最適）」に変更しておくといくらかマシになります。

③カンバスの2倍のサイズに

もう全部2倍サイズで作っちゃえばいいじゃん、という考え方ですね。最もキレイにかつ確実にRetina対応した素晴らしいデザインのサイトデザインが出来上がる事でしょう。しかしこれには大きな欠点が2つあり、「ファイルサイズが倍増する」点と「全て2倍で計算してデザインする」点に注意が必要です。

前者はマシンスペックにもよりますが、実際の現場で考えた時にあまりにも重いpsdファイルはコーダーに嫌われます。psdを開くまで待っている間の作業は止まってしまいますし、書き出す際も時間がかかります。画像を多く使ったpsdであれば、この待ち時間はなお顕著になるでしょう。私はデザインもコーディングも両方やるのでよくわかるのですが、psdは絶対に軽くすることを意識して作ったほうが良いです。ましてや全部2倍サイズなんかで作ったら絶対に重くなります。

後者はもう面倒くさい。とにかく面倒くさい。マージンや余白も2倍、画像も2倍、borderも2倍、全て2倍で計算する労力を費やすより、クリエイティブや設計に力を入れたほうが良いのでは？と思います。

また、2倍サイズで作ったデザインをそのままクライアントに提出しても「？」となるでしょう。Retinaディスプレイで確認してもらえればよいですが、そうでなければ「なんかデケェな。。。」となります。2倍サイズで書き出したカンプを半分にリサイズして提出するという方法もありますが、そこまでして2倍サイズで作るんか。。。？と。

④Photoshopを低解像度モードで開く

一旦Photoshopは終了している状態で、Finderで[アプリケーション]-[Photoshop]で[ファイル]メニューから[情報を見る]をクリックします。続けて[低解像度で開く]にチェックを入れて、Photoshopを起動します。これでPhotoshopが「低解像度モード」で起動され、1,000pxのカンバスを作るとあら不思議、1,000pxに見えます。

ですがこの方法、あんまりおすすめしません。疑似的？に低解像度を描画しているためなのかわかりませんが、UI含め至る所がぼやけて見えるため、個人的には非常に気持ち悪いです。デザインする上で気持ち的に萎えるのは致命的だな、と思いました。

やはり通常の解像度で作るのが一番

ということで、Retinaディスプレイでカンプ制作をする場合、②の「カンバスを200%に拡大」が最もオーソドックスかなとは思いますが、結局は一般的な感覚で作りたければ一般的な解像度で制作するのが最も間違いがありません。

結構自己主張の激しい記事となりましたが、実際にMacBookを使って上記いずれの方法を試した感覚を率直に書いてみました。あくまでも私個人の感覚となりますのでご了承くださいませ。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。