京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

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

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

2016年2月11日

retina

WEBサイトのデザインをRetinaディスプレイでデザインするのは、どうなのか?高解像度の画面でデザインする時、一般的な環境にあわせてデザインすることができるのか?といった疑問を持っていた私が、長年WEBデザイナーとして仕事きて、ついにiMac 27インチRetina 5Kディスプレイモデル(Late 2015)をWEBデザインのマシンとして購入しました。

Retinaディスプレイはご存知の通り、通常のディスプレイよりも高解像度であり、さらに補足しますと5Kとは、ディスプレイの水平方向のピクセル数が 5000px 前後のディスプレイのことを指すそうです。iMac Retina 5Kの画面解像度は「5120px ✕ 2880px」従来のiMac27インチの解像度「2560px ✕ 1440px」2倍のサイズです。

そこで実際数ヶ月、RetinaディスプレイでWEBデザインをしてみた感じた事を書きたいと思います。

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

photoshop

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

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

200%拡大して作業する

これがもっとも単純な方法ですが、常に200%拡大して作業をするという方法ですが、いくつか小さな問題があります。

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

→これを解決する方法としては、200%拡大のショートカットを作るのが一番でしょう。

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

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

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

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

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

低解像度モードで開く

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

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

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

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

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

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

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

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

144

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

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

写真や文字がめちゃくちゃ綺麗

これは当然ですが、Retinaディスプレイはとにかく美しい!写真や文字の美しさには驚きます。写真の補正や原稿を書いたりする人にとっては美しい画面で作業できるという意味でとても気持ちがいいと思います。

高解像度ならではの作業領域の広さ

初期状態では、擬似解像度「2560px ✕ 1440px」(以前のiMac27インチのものと同じ解像度)に設定されています。コーディングやプログラムをするだけなら、この解像度を高解像度に変更して作業をすると、作業領域は広がり、作業効率もアップします!

まとめ

現在数ヶ月RetinaディスプレイでWEBデザインを行っていますが、すぐにこのRetinaディスプレイの環境には慣れ、全く不便は感じてません!

Appleに限らず、今後このような高解像度ディスプレイがどんどん登場していく事を考えると、WEBデザイナーとしてはいつか通る道だと思います。であれば、周りのだれよりも早くRetinaディスプレイでWEBデザインを始めるのがベストの選択ではないかと思います。

 

 


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー