iPhone 6でのスマートフォンデザイン

iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ＆A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します)

Q.1

iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫？

A.1

横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。

リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。

Q.2

iPhone 6の登場でスマホの横幅は360px以上が主流になるのに320pxでデザインするの？

A.2

iPhone 5sがターゲットデバイスから外れるまで320pxでデザインするのが続くと思う。結果としてAppleが横幅320pxを長い間死守していたことが320pxの呪縛として付きまとう形になった。

Q.3

iPhone 6 Plusのdevice-pixel-ratioは『3』。3倍画像でRetina対応したほうがよいの？

A.3

個人的にはコレまでどおり2倍画像のままでOK。すでに発売されているdevice-pixel-ratioが3のAndorid端末で検証したことがあるが3倍画像のほうが綺麗と認識できるものの、ファイルサイズなどのトレードオフを考えるとそこまで必死に対応することはない。(Web Clipアイコンはsizes="171x171"を追加してもいいかも)

結論

これまで通りでOK。

スポンサードリンク

«Google Chrome 37でスマホのエミュレーションを行う | メイン | 【イベント情報】スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!»