スマホサイトの画像は@3xで用意すべきなのか

先日、iPhone 6 Plusの一部純正アプリが@3xの高解像度アイコンに対応していないということが発覚し、ネット上で少し話題となりました。

今回はこれに関連して「スマホサイトの画像解像度」について気になったことをまとめておきたいと思います。

スポンサードリンク

スマホサイト用の画像に@3x画像は必要か?

2010年6月に登場したiPhone 4以降「Retinaディスプレイ」と呼ばれる高精細のディスプレイが普及しました。

それに合わせて画像のサイズをデバイスの解像度に合わせ、PCサイト向けの画像の2倍で画像を書き出して、画像をぼけることなくはっきりと表示させておりました。

IMG_20141007_235605

近年では画面の解像度が更に向上し、フルHDやWQHDの解像度のディスプレイを搭載したスマートフォンなどが主流になってきております。パソコンのディスプレイ並の解像度をスマートフォンのサイズに凝縮しているので、その他のデバイスを圧倒するほど高精細に表示することが出来ます。

しかし、いくらハードの解像度が上がっても、提供されているコンテンツの解像度がそれに伴って向上してくれなければ意味がありません。

画像をデバイスに合わせて引き伸ばすことでどの機種でも同じレイアウトで表示できますが、これだと解像度が低いデバイスで閲覧したほうが綺麗に表示されるので、折角の高解像度のディスプレイが勿体無いです。

高精細な画像と通信量の妥協点

スマホサイトの場合、PCに比べて通信速度が遅いことが多いので出来るだけページを軽くしようとしますよね。

仮に@3xの画像を用意したとして、高精細な画像の恩恵を受けられる機種がどの程度居るのかも分かりません。

比較的新しい機種だとLTEでページ読み込みが早い機種も存在しますが、中には速度規制中だったりMVNOの低速回線を使用していたり、3G回線を使用している方も沢山います。

正直なところ、一部の端末のためだけにこれ以上ページを重くしたくないと思います。

まだまだiPhone5s以前のユーザーも沢山居るのと、実際にフルHDディスプレイで@2xの画像を表示しても「そこまで荒くないんじゃね?」と感じたからです。

アイコンフォントやSVGなどのベクターデータを使用する

これからもiPhone6 Plusが普及していくにつれて、@3xが主流になっていくだろうなと感じてきています。

自分は高解像度ディスプレイの対応として「アイコンフォント」や「SVG」をオススメしています。

この2つは画面解像度に依存しないので、どれだけ拡大しても画像が劣化することがなく、どのデバイスでも綺麗に表示させます。

このサイトもヘッダーのメニューや、SNSのシェアボタンに付いているアイコンなどにアイコンフォントを使用しています。

wpid-img_20141007_234224.jpg
ナビゲーションのアイコン
wpid-img_20141007_234413.jpg
SNSシェアボタン
少し前にウェブサイトをリニューアルさせた「Webクリエイターボックス」さんもアイコン部分にSVGを使用しています。

このように解像度に依存しないデータを使用したり、解像度に合わせてスクリプトなどで画像を振り分けていくことで、どのデバイスでも快適に閲覧できるウェブサイトが設計できます。

まとめ

ウェブサイトの@3x対応はちょっとまだ早いかなと思います。通信が重くて離脱するユーザーを考えるとなかなか踏み切れないです。

アプリのUIは対応していないと、らくらくホンのように画面を引き伸ばして情報量が同じなんてことになってしまうので積極的に早急に対応しておくべきだと思います。

みなさんはどのように対応しているのでしょうか。

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する