IPHONE6プラスに対応した、レスポンシブのサイトを作る場合横幅100％の画像の横幅はいくつに、製作現場ではしていますか？

IPHONE6プラスに対応した、レスポンシブのサイトを作る場合横幅100％の画像の横幅
はいくつに、製作現場ではしていますか？

レティナ対応で、2倍ですがプラスは3倍の画像を用意しないといけないと、言う情報を見つけました。

横幅100％の画像の横幅は2208pxにしますか？
それとも1000pxくらいのPCと同じと考え、それ以上の幅のIPHONE6は、画質が落ちても無視しているのが現状でしょうか？

またnavのアイコンのサイズなどはどうしていますか？
2208pxのカンプをつくって、小さくなりすぎないサイズにし、
それに対応した大きい画像を用意しているのでしょうか？
それとも1000pxくらいのPCと同じと考え、それ以上の幅のIPHONE6は、画質が落ちても無視しているのが現状でしょうか？

http://design.kayac.com/topics/2014/09/iphone6.php
端末画面サイズ制作サイズ
iPhone 4 640 x 960 640 x 960
iPhone 5 640 x 1136 640 x 1136
iPhone 6 750 x 1334 750 x 1334
iPhone 6Plus 1080 x 1920 1242 x 2208

行動規範の内容に同意します

回答2件

ベストアンサー

iPhone6 Plusのデバイスピクセル比は３ですが、
私の周りでは３倍画像で対応しているという話はあまりききませんね。
デバイスピクセル比＝２を前提として、２倍サイズの素材を用意しておき、
iPhone6 Plusの場合は多少モヤッとしたとしても許容するケースが多いです。
レスポンシブイメージの実装が進めばどうしても必要な画像については３倍対応も
するかもしれませんが、そうでない限りはデータ容量の肥大化による弊害のほうが
大きくなりそうなので、あえて対応しないようにしている方が多いです。

どうしても必要な写真素材等以外は
Webフォント・アイコンフォント・CSSによる描画などで対応するようにしておけば、
そのような対応でも極端に画質が落ちることはないので、現実的な落とし所としてそのようにしているのだと思われます。（JPEGはもともと多少拡大した程度では劣化はあまり気になりませんからね。）

もしどうしても厳密にピクセルデバイス比３のデバイスに対応したいのであれば、
使用する画像素材は全て表示サイズの３倍で作成する必要があります。
ただしその場合、読み込むデータ量を極力抑えるための対策を何かしら取る必要がありますので
その方法が見つからないなら私はお勧めしないですね。

投稿2015/07/20 18:00

aKusano

総合スコア3763

退会済みユーザー

2015/07/21 16:57

現場の方からのご回答たいへんありがとうございます。やはり、6だけは３倍にしないと画質が落ちるのですね。レティナは2倍ですが、それ以上の物が出てきたのですね。恐らく下記は実際のサイズではなく、レティナを考えて3倍にしたサイズなのでしょうね。 iPhone 6Plus 1080 x 1920 1242 x 2208 レスポンシブの場合、横幅が最大2208pxになると考えて画像を制作すれば、ボケないのですね。つまり、1000pxのカンプで100pxの画像なら、その約2.2倍のサイズの220pxより少し大きめ位に作ればピッタリボケないということですね。ただ重過ぎるので実際は、二倍にするということですが、「iPhone 6 Plus」は1920×1080ピクセル（401ppi）と言われていますが、二倍とはこちらを二倍にするわけではないですよね。計算が合わないので。「iPhone 6 Plus」は1920×1080ピクセル（401ppi）こちらがすでに二倍されたサイズということでしょうか？

退会済みユーザー

2015/07/21 16:59

話が少しずれて恐縮ですが、レスポンシブで背景画像を横幅100%にした時も重すぎる問題があると思いますが、現場では横1500px縦1000px以上は使わない。ここまでにするのが一般的などありましたら教えていただければ幸いです。

行動規範の内容に同意します