質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • レスポンシブWebデザイン

    217questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,274
退会済みユーザー

退会済みユーザー

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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/22 01:57

    現場の方からのご回答たいへんありがとうございます。
    やはり、6だけは3倍にしないと画質が落ちるのですね。レティナは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/22 01:59

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

    キャンセル

0

まず最初に、機種の解像度とブラウザの解像度はイコールではありません。
iPhone 6 plusでもブラウザの解像度は414pxです(たしか…)。
横向きにした時が700pxを超える程度なので、大体横800pxあたりで作れば大抵のスマホブラウザで綺麗に見えます。

ただし画像が大きいとそれだけ読み込み時間とパケットを食います。
そのためレスポンシブにするなら画像を極力控えてCSSでデザインするのが妥当かと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/20 21:37

    レティナは、実際のサイズの二倍で作ると聞きますが、サイト制作の現場でもきっちり使えるやり方で作りたいと思っています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • レスポンシブWebデザイン

    217questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。