レティーナ対応のwebデザイン photoshop

質問

webサイトを作成する際にレティーナ対応させる時の初歩的な質問になります。

photoshopでデザインを作る時の初期設定を伺いたいのですが、
横幅1280pxで見せたい場合
1280pxの144ppiで初期設定するか
2560pxの72ppiで設定しますか？

もしくは他のやり方とかあります？
初歩的な質問で申し訳ないですがみなさんのやり方を教えてください。
よろしくお願いします。

回答No.4

t_ohta · ベストアンサー

＞　こういった場合、皆さんはどのように対処されていますか？

基本的には高解像度向けに画像を作ります。
例えばスマホを縦で使っている場合、横幅は1080pxがディスプレイの解像度になるでしょう。（機種に依りますがFullHDが主流なので）
しかし、スマホのブラウザのViewportは 414px になっているので、ブラウザ上のピクセル等倍は 414px です。（これも機種によって多少の違いはありますが）
この414pxの幅に対して1080pxの画像を表示し、CSSで max-width: 100%; を指定するとブラウザはViewport上の414pxとして表示してくれますが、レンダリングエンジンはディスプレイの1pxに対し画像データの1pxを割り当ててくれるのでジャギーの無いキレイな画像に見えます。

Viewport上の414pxに合わせて414pxの画像を用意すると、実際は1080pxのディスプレイに表示するので拡大表示しているのと同じ事になり、ジャギーが出たり縁がぼやけた表示になってしまいます。

なので、基本的にターゲットとする閲覧環境のディスプレイの実解像度に合わせて画像を用意し、Viewport上の解像度を imgタグ のサイズとして指定することで、レティナディスプレイでもキレイに表示されるようにします。

お礼

回答ありがとうございます。
高解像度向けに画像を作り、閲覧環境のディスプレイの実解像度に合わせて画像を用意するんですね。
2種類作らなくてもcssで調整できますし、そのやり方が効率いいですね。
分かりやすかったです。ありがとうございます。

回答No.3

dezimac

よくある勘違いをなさっていますね。
解像度と表示画素数は全く違います。
大手メディアとかでもごっちゃになっているから仕方かないかもしれないけど。
画素数は点が何個あるか。なぜか画素数を解像度と呼んでいるから勘違いが発生する。
一方の解像度(ppiやdpi)は1インチに何個の点があるか。
極論をいうと商業印刷以外で解像度を意識することはないです。

1280pxの144ppiは1280個の点
2560pxの72ppiは2560個の点

高解像度のディスプレイでもきれいに見せたいなら、解像度の設定にに関係なく画素数を増やせばいいです。
ただし弊害もあります。画素数が増える＝ファイル容量も増える ので読み込みに時間がかかり表示が遅くなります。
光回線だとわからないでしょうが、制限が掛かった環境では致命的です。

余談ながら、ISDNとか遅い回線を経験している人は、1280pxなんて巨大なサイズの画像はあまり使いませんね。

お礼

回答していただきありがとうございました。

補足

なんども回答いただきありがとうございます。
おっしゃること理解できます。

その上でレティーナ対応のサイトを作るために効率のいいphotoshopの作り方が知りたいのです。
画像サイズを2種類のものを用意するのであればあらかじめ大きなサイズのものを作成しておけば、photoshopの解像度の変更で半分にすればすみますよね。

1280pxの72ppiで作成し、画像の箇所だけ1枚ずつ倍の大きさで作り直すなんてしませんよね。

どのやり方が正しいのか、効率いいのかが分からないため教えていただきたいのです。
他の方々はもっと効率のいいやり方を知っているのではないかとphotoshopでの初期設定の仕方が知りたいんです。

なんどもすみませんが、これを踏まえて教えていただけたら幸いです。

なお、今回の件に関しては光回線やISDNなどの回線スピードは抜きで考えてもらえたら嬉しいです。

回答No.2

dezimac

Webデザインで解像度（ppiやdpi）は気にする必要は全くありません。
ハッキリ言って印刷以外では解像度は意識することは稀です。

1280pxなら1280pxで作ればいいです。1ppiだろうが300ppiがろうが全く関係ないです。
cssやイメージタグでサイズ指定しない限りは、そのままの大きさで表示されます。
インチとかcm等の特殊なサイズ指定しないなら、画像の解像度（ppi）は無視していいです。

cssでインチ指定しているのは下記のような実験的に説明しているサイトくらいでしょうね。
↓古いサイトですが、分かりやすい実例があります。
http://rinrin.saiin.net/~aor/hms/reso

参考URL：

http://rinrin.saiin.net/~aor/hms/reso

お礼

回答ありがとうございます。下記追記に補足いたしました。
なんども申し訳ありませんが、よろしくお願いいたしまう。

補足

回答いただきありがとうございます。
回答に質問で返して申し訳ないのですが、下記のサイトのようにレティーナように画像を2枚用意するとよくありますが、
200px × 200pxと400px × 400pxの両方を用意する場合初めに400pxのものを作らなければ200pxのオブジェクトなどを引き伸ばすとボケるはずです。
http://dairexia.com/image-retina/
こういった場合、皆さんはどのように対処されていますか？
もともと400pxの画像を用意するのであれば1280pxでwebサイトを作るのではなく2560pxでwebサイトを作る方が正しいのかと思い質問しました。

もしかして、僕の考えが的外れなのでしょうか。

回答No.1

t_ohta

Web用の画像を作成する場合、ppi (dpi) は気にしなくて構いません。
横幅1280pxで見せたい場合は1280px幅の画像を作成します。
その際144ppiだろうが72ppiだろうが関係無く、1280pxで作ればOKです。

お礼

下記も含めてご回答いただきありがとうございました。

補足

回答いただきありがとうございます。
回答に質問で返して申し訳ないのですが、下記のサイトのようにレティーナように画像を2枚用意するとよくありますが、
200px × 200pxと400px × 400pxの両方を用意する場合初めに400pxのものを作らなければ200pxのオブジェクトなどを引き伸ばすとボケるはずです。
http://dairexia.com/image-retina/
こういった場合、皆さんはどのように対処されていますか？
もともと400pxの画像を用意するのであれば1280pxでwebサイトを作るのではなく2560pxでwebサイトを作る方が正しいのかと思い質問しました。

もしかして、僕の考えが的外れなのでしょうか。