以前「2017年版|パソコン画面解像度シェア&HP制作に最適なサイズとは?」という記事を作成しました。今回はそのスマホ版です。業種やサービスによりますが、ホームページへのアクセスがPCよりスマホからの方が多いという場合も多いと思います。Web制作者としては、スマホ対応がホームページ制作の必須項目と言っても過言ではありません。一度自分の目で確かめて見ようと思い調べてみました。無料のオンライン訪問者統計ツール「StatCounter」を使用したデータサンプルと、MWORKSのアクセス解析の結果を比べながら、スマホ解像度のシェアや「どのあたりの数値がPCデザインサイズの最適解なのか?」などを考察していきたいと思います。今回は日本のみでの結果を表示しています。375×66734.93%320×56818.85%360×64013.07%414×7366.87%1080×19202.97%720×12802.88%360×5922.27%320×4801.01%412×7320.43%640×3600.4%960×5440.36%480×8000.29%540×9600.27%1080×17760.21%Other15.19%スマホ画面解像度から見る_上位5位端末_StatCounter日本データ調べ上位5位で、シェア77%を占めました。2.97%スマホ画面_MWORKSの結果_Googleアナリティクス調べMWORKSのHPで、Googleアナリティクスを使用して、過去30日間のデータを調べた結果です。375×66733.02%360×64025.12%320×56812.68%768×10248.24%414×7366.06%360×5921.25%1366×7681.16%1080×19201.11%600×9600.96%720×12800.91%Other9.46%スマホ画面解像度_上位5位端末_MWORKS調べ上位5位で、シェア85%を占めました。6.06%端末メーカー_MWORKS調べAppleがダントツのシェア6割で1位でした。2位がSonyの1割と考えると、日本ではすごい人気ですね。set)6.19%Sharp3.35%Samsung3.06%Microsoft2.31%Google1.97%Fujitsu1.73%Asus1.56%Huawei1.53%OS_MWORKS調べ端末の結果を見れば、なんとなく想像できましたが、AppleのiOSが6割のシェアで1位です。Google開発のAndroidはiphone以外の各社端末のほとんどで使用されているのでシェア3割で2位。PCOSでは圧倒的なシェアのWindowsですが、スマホのOSとなると存在感がなく、3%のシェアしかありませんでした。iOS61.66%Android34.86%windows3.39%横幅は何pxで制作するといい感じ?スマホ端末用のWebデザインをする場合は、解像度に気をつけなくてはいけません。Plusは、414pxです。スマホ画面は、CSSで指定する解像度と端末の解像度が異なります。ratio)が2倍となり、作成する画像も2倍する必要がありました。(2倍以上の解像度がないと、表示する画像がボケて表示されてしまいます)しかしその対応も変化が必要そうです。ratio)が3倍です。Plusの414px場合、1242pxで作成する必要があるということに...。ここで個人的に思うのが、「画像を大きくすることは良いけど表示スピードが遅くなるんじゃない?」ということ。2倍のままでもそれなりに綺麗に表示されていれば、表示スピートを犠牲にして3倍にする必要はないでは?とも。その辺りの検証は今後行っていきたいですね。375pxの2倍で750pxで対応しておけば、8割程度の方にとって問題なく表示されると思います。Plusまで画像をクッキリ表示したいとなると、414pxの3倍で1242px。その他の留意点としては、解像度を2、3倍して表示する際は、srcset属性やjqueryを使用するなどして、Retinaディスプレイ用に画像を切り替えて表示できるとベストです。今回の画像問題もWeb制作者にとっては、悩ましい部分です。新しい環境に変わっていくことで、表示方法が変わってきますし、それだけではなく、古い端末に対しても配慮が必要となります。今回シェアを調べたことで、「2倍画像で対応すると、今のところ8割程度カバーできている」ということが分かったことが収穫でした。(数値はあくまで参考値ですが)また日々環境は変わっていくので、対応方法など含めてまた記事にまとめて行きたいと思います。-お仕事の依頼やご相談はお気軽にどうぞ!お客様の商売発展の力になりますWEBからのご相談はこちらからメールフォームメールフォームは24時間受付中!ご相談内容を記入ください。-ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています2019年-2020年冬季休暇のお知らせ平素はMWORKSをご利用いただき誠にありがとうございます。>2019年夏季休暇のお知らせ平素はMWORKSをご利用いただき誠にありがとうございます。>WordPressでホームページ制作、メリット・デメリット。シェアが高いのか?Wordpress(ワードプレス)とは、ホームページ、ブログを利用するためのソフトです。新しいサービスを2つ始めました。Webを活用して商売を発展させるサービスです。詳しくは、リンク先のページでご確認ください。-MWORKSで開設しているSNSです。