Smartphone スマホ

 
スマホデザイン・UI

WEBサイトやアプリの【Retina対応方法おさらい】

Retinaディスプレイ

昨年からiPhone、iPad、iPad miniなどApple系デバイスの広がりによって急速に浸透して行った【Retinaディスプレイ】のモバイル端末。

一番はじめに打ち出された【Retina】という単語がユーザーにも浸透していますが、Windows8.1などでも高解像度(高DIP=Retina)対応が打ち出され、デバイス対決の舞台は”解像度”の戦いへと切り替わってきているのではないでしょうか。

我々WEBサイト制作者、WEBアプリ制作者が逃げられないのが、この高解像度ディスプレイへの対応になります。

今回は、WEBサイト、アプリ両方に影響があるRetinaへの対応方法をおさらいしてみましょう。

 

【関連ページ】スマホサイトを高速化、モバイルファーストインデックス対策

画像をRetina対応させる3つの基本

サイト内で必ず使われている画像をどうやってRetinaを含めたマルチスクリーン対応させるかが、制作者としてはじめにぶつかる問題かと思います。

基本的には、3つの手法で対応しているはずです。

 

1、画像の解像度を2倍にする

いつも見ていたサイトが、スマートフォンを新しくして見た場合に、画像がにじんでみえる経験をした方は多いのではないでしょうか。

これは、Retinaディスプレイなど高解像度ディスプレイで、サイト上の画像解像度と端末のディスプレイ解像度があっていないために起きる現象です。

例えば、元の画像が150× 150pxで作成されていたとします。

通常の書き方であれば、

<img src=”sample.jpg”>

となりますが、この状態だと画像自体がぼやけて見える現象が起きます。この状態を解消するためには、もともとの画像の一辺を倍にしてあげる必要があります。例えば、幅と高さが150pxの画像であれば、300pxにするということです。

倍にしたらサイズが変わってレイアウト崩れをおこしてしまう!と思う方もいらっしゃるかもしれませんが、HTMLを少し勉強した事がある方であれば幅(width)と高さ(height)を指定してあげることで解決します。

<img src=”sample300.jpg” width=”150″ height=”150″>

高解像度画像との比較

左が元画像150×150pxで、右が元画像300×300px

 

通常のディスプレイでも高解像度の画像の方が色味が良いので分かるかと思いますが、Retinaディスプレイで見るとさらに画像の荒れなどが目立つようになります。

基本の基本ですが、このような対応でRetina対応ができるようになります。

現在運用中のサイトの画像全てをこの方法で対応するとなるとかなりの時間とお金を使う事になりますが、ユーザーにあたえるUX(ユーザーエクスペリエンス)は向上していくはずです。

 

2、CSSを使っての対応

この手法が一番広く使われている対応方法なのかと思いますが、いろいろな対応方法からいくつか代表的なやりかたをご紹介します。

◎メディアクエリを使う方法

あるコンテンツブロックの背景として、300×300pxのsample.jpgという画像を設定する場合、

one_cont{background-image: url(“/sample.jpg”);}
のように指定しますが、Retina対応をする場合は、

1、background-sizeで通常の画面サイズを指定

2、メディアクエリの【min-resolution】or【min-device-pixel-ratio】を使い判別

を設定する必要があります。具体的な記述はいろいろなサイトに載っているので割愛しますが、min-device-pixel-ratioの記述は、W3Cの仕様にないwebkitの独自拡張のようです。

ちなみに、標準化が進んでいるのはmin-resolutionの方で、webkitだけmin-device-pixel-ratioを使用しています。

 

◎CSS Spriteを使ってRetina対応

昨年の夏の終わりくらいから見かけるようになったのが、CSS Spriteを使ったRetina対応方法です。

この手法を使えば、かなり複雑なやりかたでも可能にしてくれるので、こだわりを持った画像類をきれいに表示させる事ができるようになります。

ただし、設定にはきちんとルールをまもって記述する必要があるので、正直手間がかかってめんどうかなと私は思っています。

◆CSS Spriteの設定条件

1、解像度が2倍(Androidも考えると1.5〜3倍まで必要)の画像を用意

2、metaタグにviewport設定を書き、device-widthを指定

3、メディアクエリを使い倍の解像度を指定しつつ、非Retinaディスプレイ用の半分の解像度の指定をする

などいくつかの設定をしなければなりません。

この方法は、きれいに見せる事をメインにしているサイトであれば素晴らしい対応方法に見えますが、

・画像を複数枚要しなければならない

・同じ画像の高解像度版が複数必要なので、ファイルサイズが大きくなる

・ファイルサイズが大きいと読み込みにも時間がかかる

など、運用の負荷とユーザーのUXを悪くするといったデメリットもあります。

 

◎その他の対応方法

この他、srcset属性を使う方法や、SCSS、Compassを使って制作負荷を下げて対応するなどがありますが、どの方法も画像を複数枚用意する手間などは変わらず、あまり効率的とはいえません。

 

3、JavaScriptを使っての対応

最近では、JavaScriptを使った方法もはやってきており、これが最近よく見かける手法でもあります。

Retina.js

という、jQueryライブラリで、用意してある2枚の画像をページの読み込み時に出し分けるという方法で対応させていきます。

これはすごく便利ですが、画像が数千数万とある場合は動作が遅くなってしまうという問題も残っています。

【関連ページ】スマホサイトを高速化、モバイルファーストインデックス対策

 

まとめ・Retina(高解像度)ディスプレイ対応ポイントは画像

iPhone5s発売から約10カ月たち、Android携帯でも高DPI(高解像度)の端末が多く発売され、ますます求められる高解像度への対応。

ユーザーからは見えない部分で試行錯誤の毎日ですが、いろいろな手法が試され、最近ではJavaScript(というよりjQuery)での切り替えか、CSS Spriteを使ったサイト構築が主流になっています。

今回はそんな手法のおさらいをしてみましたが、製作者側から見ると工数的デメリットが残っているな・・という印象を受けました。

今後は、単純なUX向上だけでなく、サイト運営側、制作者側のUXを上げる手法を考えることが、マルチデバイス対応サイト運営のコストと時間の効率化において必要になってくるのではないでしょうか。

<文/高嶋智也(ドーモ)>

 

【参考】

KoToRi Blog【コトリブログ】/Retinaディスプレイで画像がぼやける時の対処法

Cappee Design/[決定版]Retina対応したスプライト画像のmixin

KRAY Inc/Webサイト&WebアプリのRetina対応方法まとめ

Retina.js/Retina graphics for your website

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事