高解像度ディスプレイ（モバイルデバイス）での画像幅について｜WDSG策定チーム［#10］

みなさんは普段、iPhoneなどモバイルデバイスの高解像度ディスプレイ対策で、画像幅は何pxで書き出していますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［高解像度ディスプレイ（モバイルデバイス）での画像幅について］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．高解像度ディスプレイ（モバイルデバイス）での画像幅について

１）基本的に、モバイルデバイスの高解像度ディスプレイへ対応する画像は、幅750px（375px × 2倍 = 750px）で書き出します。

意図：
2019年10月時点で、最新機種iPhone11の解像度は幅1125px（375px × 3倍 = 1125px）です。
iPhone11で等倍（375px）、2倍（750px）、3倍（1125px）を比較したところ、2倍のサイズでもぼやけずに表示できました。
モバイルデバイスのスペックや通信環境を考慮して、2倍（750px）での画像利用を推奨します。

２．比較画像

以下、iPhone11でのキャプチャによる比較画像です。

以下［sample.zip］に、実際の画像ファイルを保存しております。

sample.zip

9.52 MB

ファイルダウンロードについて

ダウンロード

３．Twitterアンケートの結果

Twitterにてアンケートも行いましたので、参考に貼っておきます。

［Webサイト制作者の方へご質問］

スマホサイト用画像の横幅は、どのサイズで書き出していますか？

iPhone5 → 320px × 2 = 640px
iPhone6〜8 → 375px × 2 = 750px
iPhoneX〜11 Pro → 375 × 3 = 1125px

ご回答よろしくお願いします🙌

— カトウヒカル@1on1レッスンチャンネル (@design_hikaru) October 21, 2019

４．策定までの流れ

［高解像度ディスプレイ（モバイルデバイス）での画像幅について］行ったSlackでの流れを、公開議事録として掲載します。

ホナミさん：
【画像の書き出しについて】
Retina対応、どこまでの画像を対応させていますか？
ロゴなどsvgも併用していますか？

ヒカル：
基本的に750px以下の画像（あまり厳密では無いですが…）は、すべて2倍のサイズで書き出しています。
SVGはクライアントワークでは使っていません…

桑島さん：
Retina対応、私あまり明確にルール決めてないんですよね…。
なので、サイトデザインによってその都度対応が違うというか。
ヒカルさんと同じように、小さいサイズの画像は2倍程度で作ったりしてますが、サイトのデザインや予算の都合で、そこら辺は徹底していません。
実機で確認してみて画像が粗かったら調整してみたり…。
ロゴは最近svgも使うようになりました。

ホナミさん：
ヒカルさんの回答みたいに、750px以下は2倍で書き出す！ルールあるといいですね。
Retina対応はロゴとか、メインになる画像、目立つバナーとか2倍で作成しています。

ヒカル：
こちら、意見出しの段階ではiPhone8の「375px×2=750px」に落ち着きそうですが、現在はX〜11の「375px×3=1125px」が出ちゃいました（汗
多くの方が迷ってそうなので策定を進めたいのですが、最新のスマホデバイスに合わせるだけでは考慮が足りないかと感じています。
ですので、一度Twitterでアンケートを取ってみますね！

SMICHRさん：
僕はコーディングメインでデザインはあまり業務経験がないので、アンケート結果参考にさせていただきますかね…

ヒカル：
アンケートの結果が出ました！
投票数：128票
640px：16%
750px：45%
1125px：4%
結果を見る：35%
やはり3倍の対応はまだ少ないようですね。僕が実機を持っていないので未確認なのですが、iPhoneXや11で750px画像を表示すると、やはりぼやけるんでしょうか…

ユリリンマンソンさん：
うわ〜〜ほんとですね。3倍対応・・・主流になってくるんでしょうか。実機で確認したいですね。

ヒカル：
まだ4%ですが、実機検証含めて調べないとですね…
友人と妹が新機種持ってるので、どの程度ボヤけるのかキャプチャしてもらいますね。

ヒカル：
妹のiPhone11で、等倍（375px）・2倍（750px）・3倍（1125px）の画像を画面キャプチャしてもらいました！
見た限りでは、2倍と3倍に大きな差は無く、Webサイト閲覧時もぼやけて見えることは無さそうです！

いくどんさん：
ヒカルさんありがとうございます！コンテンツが多いサイトだとサイトを読み込むスピードにも影響しそうですし、とりあえずは2倍が妥当そうですね！（海鮮丼美味しそうです・・！）

ヒカル：
高解像度にしすぎると、読み込みの方に問題が出て来ますよね（汗
この方向でガイドラインの素案を作ろうと思います！
（手持ちの高解像度な写真が海鮮丼しか無くてw）

桑島さん：
Twitterのアンケートもありがとうございます！1125pxまでくると、かなり大きくなっちゃいますね（汗
現状だと750あたりが良さそうですね！

４．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！