Retina(レティナ)対応のWEBデザインの作り方に悩んでいませんか？なぜRetina対応する必要があるのでしょうか？
Retinaってなに？renta(レンタ)？漫画レンタルのあのサイト？
今回は、Retina対応の必要性とWEBデザインの作成方法について解説します。
そもそもRetina対応とは何か
Retina対応とは、Retinaディスプレイを使用した端末に対応することを指します。
Retinaディスプレイを使用した端末というのが、Apple社の端末、つまりiPhoneやMacですね。
難しい解説は避けますが、Retinaディスプレイはちょっと特殊で、画像の細かなところまでキレイに、高解像度の画像を表示させることができます。
しかし、WEB制作にとってRetinaディスプレイはくせ者。Retinaディスプレイのために、より容量の大きい高解像度の画像を用意しなければならないのです。
Windowsやandroidにとっては意味のない対応で、iPhoneやMacのための対応です。
iPhoneユーザーが多いからこそ検討する必要があります。WEB制作では、Retina対応をするかどうか検討する必要があります。
Retina対応をしないとどうなるのか？
Retina対応をしないと、iPhoneユーザー、Macユーザーに影響を及ぼします。
サイトの画像がぼやけてしまうのです。
え、ぼやけるだけ？
と甘くみてしまってはいけません。画像がぼやけているとサイトの信頼性にもつながりかねません。
- 画像内の文字が見づらくなる可能性
- ぼやけると信頼性が低下する可能性
- ぼやけた写真の人物に失礼
日本ではiPhoneユーザーが多いからこそ検討する必要があります。
Retina対応のメリット
Retina対応をすると、IOS端末でぼやけずキレイに表示されます。ぼやけずキレイに表示させることのメリットとはなんでしょうか？
可読性を上げる
画像内に文字があった場合、ぼやけてしまうと見づらくなってしまいます。可読性をあげるために対応を検討する必要があります。
信頼性に繋がる
画像がぼやけて表示されてしまうと信頼性が低下します。
Retina対応のデメリット
Retina対応のメリットはIOS端末でぼやけずキレイに表示される
デザインデータが重くなる
Retina対応は高解像度の画像を画像を用意しなければならないので、対応しない場合に比べて重くなります。
特に大きな画像を使用するケースが多いPC用デザインやLPデザインでは、かなり重くなることが想定されます。
表示速度が遅くなる
上記と同じ理由ですが重い画像を使用すれば、表示速度に影響してきます。いくら圧縮しても画像自体が大きければ、遅くなるのは避けられません。
デザインやコーディング手間がかかる
下で説明するやり方にもよりますがデザイナーやコーダーにも手間がかかることが想定されます。
SPのみRetina対応をする企業も多い
Retina対応を導入することによって、サイトが重くなることは確実です。より高解像度の画像がひつようなのですから。
とくにPCで導入する場合はかなりの画像サイズが必要となります。
だからこそ、PCは見限って、SPのみRetina対応をするいう制作会社も多いんです。
SP用デザインRetina対応のやり方
SP用デザインではRetina対応のやり方が2種類あります。
①375pxでデザインを作成し、画像は倍サイズで用意
375pxは一般的なスマホデザインで用いられる幅です。画像は大きめのサイズを用意してスマートオブジェクト化してから当てはめる方法です。
スマートオブジェクトを使用していない場合や、大きめの画像を用意していない場合などで問題が発生しやすいのがデメリットです。
よって次の②の方法が用いられることが多いです。
②倍の750pxでデザインを作成する
①より手間が減りよく用いられる方法です。750pxというのは375pxの倍サイズ。初めから倍サイズで作成することで確認や作業などの手間が減り、高解像度の画像を書き出しできます。
PC用デザインRetina対応のやり方
PC用デザインでは倍サイズでデザイン作成してしまうとかなりの容量になってしまいます。一般的にはスマホ用②と同様に画像のみ大きめを用意します。
Retina対応はターゲットを想定して検討する
私は、Windows、androidを使用しているのでまったく関係のない対応です。
Retina対応はデメリットもあるので、ターゲットを想定して検討する必要があります。スマホユーザーがほとんどであれば、PCは対応しない、Windowsを使用している法人向けであればそもそもRetina対応はしない、などターゲットを考えて選択してみましょう。
- スマホユーザーがほとんど→PCはRetina対応しない選択も
- Windowsが多い中小企業向け→そもそもRetina対応はしない選択も
