ファストコーディングこんにちは、FASTCODINGです。2017年1月版https://fastcoding.jp/blog/all/webdesign/designswidth/どうも、FASTCODINGディレクターのせりなです。Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか?パソコンは何pxで作るの...人気なのはとても嬉しいことなのですが、WEBを閲覧するデバイスの進化は日進月歩。去年の常識が今年の常識であるとは限りません!ということで2018年4月現在、パソコン用のWEBサイトは何pxで作るの?スマートフォン用は何pxがいいの?最新のウェブデザイン横幅事情を改めてまとめてました。Counter」でパソコンのモニター解像度のシェア率を調べます。1年ちょっとで世間のみなさんのパソコン画面サイズに変化はあったのでしょうか。Counter(スタットカウンター)とはパソコン・タブレット・携帯などの端末や国、期間別に、世界各国で使用されているモニターの解像度や検索エンジンのシェア率をグラフ化してくれるという、Web上の様々なシェア分析に特化したサービスです。こちらが日本における2018年3月の月間のモニター解像度のシェア率。2017年版での結果と比べてみるとやや「2560px×1440px」が伸びてきていますがまだまだ「1920px×1080px」と「1366px×768px」が大多数を占めていますね。どちらにしても大多数のみなさんはワイド型のディスプレイを使用しているんですねー。いえば最近真四角のディスプレイ見かけないかも。~PC編~前回掲載した、2017年現在の個人イケてるサイトの横幅調査が1年経って変化があったのかどうか再調査して一覧を作ってみました。IMJ結果、リキッドレイアウトのサイトでは横幅を目いっぱい使用するサイズが増えてきましたが、固定幅レイアウトの場合は、前回の結果とほぼ同様になりました。引き続き1000px前後のデザインをオススメします。スマートフォンのWebサイトの横幅は何pxで作ればいいの?続いてスマートフォンのデザインをするときの横幅についてみてみましょう。最高画質の3倍Retinaである、iPhone8Plusを基準に考えてみようと思います。Qiitaさんの「iPhone/iPad解像度(画面サイズ)早見表」(1年前の情報からアップデートされてる!素敵!!)を参考にiPhoneX8Plus見てみるとディスプレイの大きさは「414×736」ですね。前回と同じく注意しないといけないのが「Retina対応」!れてぃーなって何?簡単に言うと、より鮮明できめ細かく表示できるディスプレイのことです。usersRetina対応のWebデザインをするときの注意点https://fastcoding.jp/blog/all/webdesign/retina-weddesign/こんにちは、ディレクターのせりなです。1242px(iPhone8Plusでブラウザに表示される大きさ)なんと!PCサイトのサイズよりも大きい!!今後はこの横幅サイズでスマホWEBサイトをデザインすればいいのね!その判断、ちょっと待った気をつけよう!デバイスピクセル比3倍対応の落とし穴じつはこの記事、当初は前述のスマホ横幅サイズ=1242pxで公開しようと思っていたのですがFASTCODING社内コーディングチームから待ったがかかりました。画像がうっすらぼやけたりレイアウト崩れを起こす可能性があります。20px×20pxの例では、20÷3=6.666....となるため、縦幅が6pxで横幅が7pxと正方形ではなくなってしまっていますね。デザイン段階でしっかり考慮したり、画像切り出し時に各倍率ごとの画像を作成してsrcsetを活用したコーディングをしたり等、回避することは可能です。これらは必須のものではなく、「表現したいデザインに合わせて考える」という範囲の対応で問題ないんじゃないかと思います。対応することによるコーディングやデザイン段階での負担との天秤だと思います。スマホサイトの横幅は750pxで問題なし!そんなわけで、FASTCODING的結論。750px(iPhone7でブラウザに表示される大きさ)スマホサイトの横幅は750pxでもOK!つまり、去年と同じ。今後スマホディスプレイのサイズ拡張(・・・は片手で持ちにくくなるから可能性少ないかな?)や画質向上があるたびに都度見直しが必要ですね。3倍の罠にまんまとはめられるところでしたが、いかがでしたでしょうか。今回の結果が少しでもお役に立てばうれしいです。