iPhone 6とiPhone 6 Plusが出ましたね。
今までの画面は幅が320px、
Retina Displayでは2倍の画素密度となる幅640pxでしたが、
ここにきて変則的な画面が採用されたようです。
なぜ画像が不鮮明になるか
Apple – iPhone – モデルを比較するによると
iPhone 6が幅750px、iPhone 6 Plusが幅1080pxです。
技術的には整数倍とか、2の冪乗倍には意味があって、この制約は
限られた性能の中で美しくて高速なグラフィックス処理の実現に役立っていました。
スマートフォンの性能や無線通信事情を鑑みて、
幅640pxの画面を基準に画像が作られているケースがあります。
このようなRetina Display搭載のiPhone向けの画像であれば
どのiPhoneでも鮮明な画像が表示されていましたが、
iPhone 6、iPhone 6 Plusでは拡大処理が必要になるため
画像を差し替えないとちょっと荒れて汚く見えてしまいます。
Retina Display向けではないWebサイトの画像を
Retina Displayで見るとかなり荒く見えることがありますが、
iPhone 5Sやそれ以前に最適化された画像をiPhone 6 Plusで見ると
同様にかなり荒れて(あるいは不鮮明にぼやけて)見えるでしょう。
しかし、iPhone 6 Plusに向けて画像を差し替えると、
今度はiPhone 6やiPhone 5Sでは画像がちょっとぼやけます。
フォントの都合で、メニューやタイトルなど
一部の文字を画像で表現している場合には、
画像化していない文字部分は常に鮮明なので
多少の違和感はでてしまうかもしれません。
この辺りはJPGやPNGなどのラスタ画像を使っていると避けられない問題です。
iPhoneの画面と表示について図入りで噛み砕いた説明を見つけたので追記しておきます。
PaintCode
不鮮明な画像への対策
対策にはJPG、GIF、PNGにかわって、SVGを検討すると良いと思います。
SVGはベクタ画像なので拡大縮小しても鮮明に見えますし、
大抵のブラウザで表示できます。
デザイン上、画像にせざるを得ないテキスト…
例えばメニューやタイトルなどからSVGに変更していくのは1つの手です。
SVG画像の容量が大きすぎると思ったときは、
別の画像編集ソフト、SVG軽量化、サーバのgzip転送をチェックしてみて下さい。
状況によりますが、元の転送量を10とすると、5〜2くらいになります。
なぜデザインがくずれるか
iPhone向けのサイトではデザインが崩れることがあります。
iPhoneの画面幅はながらく320pxのみと決まっていたため、
これを前提にサイトデザインがなされているとデザイン崩れを起こすことがあります。
物理的な幅が320pxと640pxのでちらであっても、
iPhoneでは基本的な表示用の幅を320pxとみなして表示する仕組みでした。
ところが、iPhone 6とiPhone 6 Plusの基本的な表示用の幅は
320pxでないだけでなく、それぞれが異なるようです。
以下はiOS Simulatorで確認した
viewportで幅をdevice-widthとした場合のブラウザのクライアントサイズです。
iPhone 5Sまでは320px、
iPhone 6は375px、
iPhone 6 Plusは414pxです。
デザインくずれの応急処置
以下のように幅を320pxで表示するように指定すれば概ね体裁を保てます。
<meta name=”viewport” content=”width=320
物理的な画面サイズが異なるので、
等比変形は最良のデザインとは言えないかもしれませんが、
応急処置としては簡単で効果的だと思います。
なお、ユーザによる拡大縮小を無効化して
スケールを固定されている場合には以下の記事をご参考ください。
iPhone 5S 以前だけでなく、iPhone 6 や iPhone 6 Plus でも幅320pxでスケールを固定する方法
お問い合わせについて
業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
