スマホサイトはRetinaディスプレイには対応すべき？

 

スマホサイトを作る時の最近の悩みです。

 

 

iPhone4から採用されているRetinaディスプレイですが、

従来の画面解像度に比べ、4倍以上の解像度となり、文字や画面の見易さが格段に向上しました。

 

 

しかし、スマホアプリやホームページの開発者にとっては一つの問題が・・・

従来型の320px×480px用に作った画像をiPhone4以上のRetinaディスプレイ（640x×960px）で表示すると、滲んで見えてしまうらしい

（iPhone3GSを使っているので、どれくらい滲むのか良く分からないですが・・・）

 

 

そこで、Retinaディスプレイに対応するために、640x×960px用の画像（通常の等倍のサイズ）を用意して、

Retinaディスプレイでも綺麗に画像を表示させる方法があります。方法は主に二つ

①640x×960px用と320px×480px用の画像を2種類用意する

②すべての画像を640x×960pxの画質で書き出して、320px×480pxのディスプレイには、表示サイズ50%で表示する

 

 

上記の方法で、Retinaディスプレイでも画像を綺麗に表示する事が出来ます。

 

 

ただ、このRetinaディスプレイへの対応へはいくつかの疑問が。

 

 

「画像のサイズを倍にすれば、当然画像ファイルのサイズも倍になるため、サイトが重くなるんじゃない？」

「2種類の画像を用意するのは、制作効率が悪いんじゃない？」

「もし、Retinaディスプレイよりも解像度が高いディスプレイが出た場合はどうなる？」

などなど。

 

 

メリットとしては、

iPhone4以上の機種で画像が綺麗に表示される

ことですが、

 

 

デメリットとしては、

・サイトが重くなる

・開発効率が悪い

・将来的にどうなる？

などがあると思います。

 

 

そもそも、スマートフォンサイトに関しては

「アイコンや写真」以外の「グラデーションやシャドウ」などはCSS3で表現出来るため、

極力CSS3で表現し、『どうしてもCSSでは表現できない部分を画像にする』というくらい、

“軽さ””表示速度の速さ”には気を使うべきだと思っています。

 

 

『サイトを重くする要素は極力排除して、軽快なスマホサイトを作る』事が、

スマートフォン対応において一番重要だと思っているので、

今のところはRetinaディスプレイへの画質の対応はしなくて良いのでは、と思います。

アプリと違い、スマホサイトの場合はページを遷移する度に画像をダウンロードしてくるので、

電車や外出先などの通信環境からアクセスが多いスマホサイトでは画像の使用には十分に気を使うべきだと考えています。

 

 

 

というわけで、

今のところ、対応はしない方針です。（メインイメージやロゴくらいは対応するかも）

今のところはね・・・