見出し画像

Retina対応がイマイチ分からない人向けの簡単ガイド【初心者Webデザイナー向け】

「Retina対応?MacとかiPhoneで綺麗に見えるようにすることだよね。何となく知ってる。」くらいの知識がある前提で書いていきます。

Retina対応のしくみ(srcsetを使う場合)

画像1

まず、①通常サイズ ②2倍サイズ の合計2枚の画像が必要だということを覚えておきましょう。
1枚高解像度の写真を使えばいいじゃんと思うかもしれませんが、Windowsユーザーがまだまだ多い世の中、Windowsで見ても違いが分からないのに、わざわざ2倍の重い画像を読み込ませるのは不親切です。

画像2

コードは上記のように「srcset」を使って指定します。これだけで指定できます。


Retina対応にどのくらいの工数がかかるのか?

▼弊社エンジニアの場合

画像3

先ほどの「srcset」のコードを従来のコードに書き足すだけなので、意外とすぐ終わります。
ただし、画像数が多くなれば多くなるほど、コードの量はもちろん増えていきますのでその分時間はかかります。


▼弊社デザイナーの場合(※ただし、作成環境はPhotoshop CC(画像アセット生成機能がある)とします。)

画像4

意外と簡単なのがお分かりいただけると思います!
(なぜ5分でできるかと言うのは後で説明します。)

Webデザイナーがやること

▼SPデザイン
優先する機種が会社によって違いますが、最優先機種の横幅×2倍でデザインすれば問題ないと思います。
例えばiPhoneXが基準の場合、375px×2の750pxでデザインすることになります。

▼PCデザイン
まずは通常通りデザインします。
そして、いつものように画像アセット機能で書き出す前に、以下の名称の空レイヤーを1枚作ります

default lo-res/, 200% hi-res/@2x

画像5

そして画像アセット生成ボタンを押せばOK!
「lo-res」には通常サイズ、「hi-res」には2倍のサイズの画像が書き出せます!
画像アセットが分からない方はこちら

ただし注意すべき点が。
写真の解像度がそもそも少ない場合、2倍のアセットが出来ても写真がぼやけます。

あらかじめ大きめのサイズをベクトルスマートオブジェクト化してデザインしとく
のが良いです。


Retina対応において気をつけるべきこと

絶対にWindowsとMac、両方で確認してください。
なぜかというと↓こうなるからです。(伝われ)

画像6

また、WindowsもMacも確認は1920px以上の画面を推奨します。
仮にメディアクエリで「大きいディスプレイの時はより大きい別の画像を表示する」などの指定がある場合、小さい画面で見るとリンクが切れてても気づかないからです。


簡単だからRetina対応するに越したことはないけど、工数が発生するのは事実…
どういう場合にRetina対応する?

弊社制作チームでは以下のように考えました。

①予算が多い・または今後も受注見込みのあるクライアントの時
②スケジュールに余裕がある時
③写真勝負・またはMacを使っている人がターゲットに含まれる場合
④気合いが入ったデザインの時(デザイナーのエゴ)
⑤Webデザインまとめサイトに載りたいとか、賞を取ることも目標に含まれているもの(レア)

こちらは会社によるし、案件で都度相談だと思いますが一つの参考になれば幸いです。

まとめ

①意外と簡単に実装できる
②WindowsとMac両方で確認しよう(大きい画面推奨)
③やるならスマートオブジェクト化してからデザインを作ろう
④Retina対応する時はプロジェクトチームと一旦相談しよう


補足:自分は実際にはやっていないのですが、Macに非Retinaディスプレイをつなげて確認すると等倍画像のエラーも確認できるそうです。

この記事が気に入ったらサポートをしてみませんか?