岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

2017年版|スマホ画面解像度シェア&HP制作に最適なサイズとは?

公開日:2017年4月5日 : Webマーケティング,ホームページ制作関連

2017年版|スマホ画面解像度シェア&HP制作に最適なサイズとは?

以前「2017年版|パソコン画面解像度シェア&HP制作に最適なサイズとは?」という記事を作成しました。

今回はそのスマホ版です。業種やサービスによりますが、ホームページへのアクセスがPCよりスマホからの方が多いという場合も多いと思います。

Web制作者としては、スマホ対応がホームページ制作の必須項目と言っても過言ではありません。

一度自分の目で確かめて見ようと思い調べてみました。

無料のオンライン訪問者統計ツール「StatCounter」を使用したデータサンプルと、MWORKSのアクセス解析の結果を比べながら、スマホ解像度のシェアや「どのあたりの数値がPCデザインサイズの最適解なのか?」などを考察していきたいと思います。

スマホ画面_StatCounterでの結果_日本

スマホ画面_StatCounterでの結果_日本_画像

今回は日本のみでの結果を表示しています。

375×667 34.93%
320×568 18.85%
360×640 13.07%
414×736 6.87%
1080×1920 2.97%
720×1280 2.88%
360×592 2.27%
320×480 1.01%
412×732 0.43%
640×360 0.4%
960×544 0.36%
480×800 0.29%
540×960 0.27%
1080×1776 0.21%
Other 15.19%

スマホ画面解像度から見る_上位5位端末_StatCounter日本データ調べ

上位5位で、シェア77%を占めました。

375×667 iPhone 6系 34.93%
320×568 iPhone 5系 18.85%
360×640 GALAXYなど 13.07%
414×736 iPhone 6 Plus/ iPhone 7 Plus 6.87%
1080×1920 GALAXY、Xperiaなど 2.97%

スマホ画面_MWORKSの結果_Googleアナリティクス調べ

スマホ画面_MWORKSの結果_Googleアナリティクス調べ

MWORKSのHPで、Googleアナリティクスを使用して、過去30日間のデータを調べた結果です。

375×667 33.02%
360×640 25.12%
320×568 12.68%
768×1024 8.24%
414×736 6.06%
360×592 1.25%
1366×768 1.16%
1080×1920 1.11%
600×960 0.96%
720×1280 0.91%
Other 9.46%

スマホ画面解像度_上位5位端末_MWORKS調べ

上位5位で、シェア85%を占めました。

375×667 iPhone 6系 33.02%
360×640 GALAXYなど 25.12%
320×568 iPhone 5系 12.68%
768×1024 ipad系 8.24%
414×736 iPhone 6 Plus/ iPhone 7 Plus 6.06%

端末メーカー_MWORKS調べ

端末メーカー_MWORKS調べ

Appleがダントツのシェア6割で1位でした。2位がSonyの1割と考えると、日本ではすごい人気ですね。

Apple 61.66%
Sony 11.92%
(not set) 6.19%
Sharp 3.35%
Samsung 3.06%
Microsoft 2.31%
Google 1.97%
Fujitsu 1.73%
Asus 1.56%
Huawei 1.53%

OS_MWORKS調べ

OS_MWORKS調べ

端末の結果を見れば、なんとなく想像できましたが、AppleのiOSが6割のシェアで1位です。

Google開発のAndroidはiphone以外の各社端末のほとんどで使用されているのでシェア3割で2位。

PCOSでは圧倒的なシェアのWindowsですが、スマホのOSとなると存在感がなく、3%のシェアしかありませんでした。

iOS 61.66%
Android 34.86%
windows 3.39%

横幅は何pxで制作するといい感じ?

スマホ端末用のWebデザインをする場合は、解像度に気をつけなくてはいけません。

例えば、現在最新のiPhone7は、375px、iPhone 7 Plusは、414pxです。

スマホ画面は、CSSで指定する解像度と端末の解像度が異なります。

iPhoneのRatina(高解像度ディスプレイ)ディスプレイが登場したことで、スマホ用の画像サイズはデバイスピクセル比(device pixcel ratio)が2倍となり、作成する画像も2倍する必要がありました。
(2倍以上の解像度がないと、表示する画像がボケて表示されてしまいます)

しかしその対応も変化が必要そうです。下記サイトの「iPhone/iPad解像度(画面サイズ)早見表」参照してもらうとわかりやすいですが、

http://qiita.com/tomohisaota/items/f8857d01f328e34fb551

「iPhone 6 Plus、iPhone 6s Plus、iPhone 7 Plus」では、Ratinaディスプレイのデバイスピクセル比(device pixcel ratio)が3倍です。

ということは、最新の端末で画像をボケずに綺麗に表示するには、iPhone 7 Plusの414px場合、1242pxで作成する必要があるということに…。

ここで個人的に思うのが、「画像を大きくすることは良いけど表示スピードが遅くなるんじゃない?」ということ。

また2倍のままでもそれなりに綺麗に表示されていれば、表示スピートを犠牲にして3倍にする必要はないでは?とも。その辺りの検証は今後行っていきたいですね。

現状はiPhone 7 Plus基準になるか

現状の対応を考えると、とりあえずは、iPhone7 375pxの2倍で750pxで対応しておけば、8割程度の方にとって問題なく表示されると思います。

iPhone 7 Plus、iPhone 6s Plus、iPhone 6 Plusまで画像をクッキリ表示したいとなると、414pxの3倍で1242px。

その他の留意点としては、解像度を2、3倍して表示する際は、srcset属性やjqueryを使用するなどして、Retinaディスプレイ用に画像を切り替えて表示できるとベストです。
(解像度が低いディスプレイに大きな画像を表示させても画質は良くなりませんし、表示スピードが遅くなるだけですから)

■iPhone Retinaディスプレイ対応_参考ページ
iPhone/iPad解像度(画面サイズ)早見表

http://qiita.com/tomohisaota/items/f8857d01f328e34fb551

■スマホ画面比率_参考ページ
・2016年最新版 iPhone・Androidスマホ 機種別画面サイズ、解像度、縦横比のまとめ

http://sounansa.net/archives/1465

まとめ

【2017年版|スマホ画面解像度シェア&HP制作に最適なサイズとは?】 今回の画像問題もWeb制作者にとっては、悩ましい部分です。また新しい環境に変わっていくことで、表示方法が変わってきますし、それだけではなく、古い端末に対しても配慮が必要となります。

今回シェアを調べたことで、「2倍画像で対応すると、今のところ8割程度カバーできている」ということが分かったことが収穫でした。(数値はあくまで参考値ですが)

また日々環境は変わっていくので、対応方法など含めてまた記事にまとめて行きたいと思います。

それではまた!


スポンサーリンク

contact

お問い合わせ

- contact -

お仕事の依頼やご相談はお気軽にどうぞ!お客様の商売発展の力になります

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています