お久しぶりです。

あと1週間で新元号令和が始まります。これを機会にWEBサイトをリニューアルしたい!と言う人も多いかと思います。新しくWEBサイトを作る上で重要な事は色々ありますが中でもスマホ等で見るのに適したレイアウトにする事をレスポンシブ対応と言います。

旧来のWEBサイトではパソコンでの利用のみを想定して作られている為スマホやタブレットで開くとスマホの小さい画面でパソコンで表示するレイアウトのまま表示される為非常に扱い辛いサイトになってしまいます。なのでスマホやタブレットで表示した時に見やすいようにレイアウトを変更する事をレスポンシブ対応と言います。このレスポンシブ対応をする上で重要になってくるのがスマホやタブレットの端末毎の解像度になりますがレスポンシブ対応を行う時に使うのはCSSピクセルという単位なのでここでいう解像度は端末の解像度とはまた別になりますのでご注意下さい。

CSSピクセルに関しては後日時間が有る時にでも記事にしたいと思いますがどうしても今知りたいという方は”CSSピクセル”や”dp 解像度”などで検索するとCSSピクセルに関する知識が得られると思うので興味のある方は調べてみるとよいかも知れません。

さて、これからサイトをリニューアルするという方や新規にWEBサイトを立ち上げたいという方向けにレスポンシブ対応をする上で重要な端末毎の解像度のシェア率を調べてみました。今回はPC・タブレット・スマートフォンを含めた解像度のみのデータとなりますのでその解像度から予想される大体の端末の種類とその機種から予想できる客層からどのようなレイアウト調整をすればいいのかを個人的な感想ですが交えていますので良ければ参考にしてください。

今回は
StatCounter さんの画面解像度毎のシェア率のデータを引用いたしました。

まず最初にPC・スマホ・タブレットを合わせたシェア率から

上からデスクトップPC、iPhone、Android、ノートPCと続いて5位に2KのデスクトップPCが来ています。

1位の1920×1080(フルHD)はデスクトップPCの一般的な解像度ですが近年のノートPCもフルHDの物が大分普及してきています。PCは50台後半から利用率が高いので主な利用者が高齢になりやすい病院や介護サービスなどの場合はPCでのアクセスを想定して作るとよさそうです。

2位の375×667はiPhone6と7と8です。ちなみに6位の414×736はiPhonePlus。9位の320×568がiPhoneSE、11位の375×812がiPhoneXとなっております。iPhoneの特徴は何といってもRetinaディスプレイ。他社メーカーのディスプレイと比べてインチ辺りの解像度が高いので写真や映像が綺麗に見えるそうです。iPhoneは10代から20代の女性に好評でスマホシェア率が元々高い若年層、特に10代の女性のシェア率ではandroidに対してiPhoneが6割から7割を占めています。その為美容室やファッション関係のお店など客層が若い女性が想定されるお店はiPhoneを意識するとよさそうです。

3位の360×640はAndroidに多い解像度です。割と格安なエントリーモデルのAndroidが大抵この解像度でこのグラフには出てきませんがフラッグシップモデルになるとちょっと大きめのサイズになると480×854にもなります。androidのレスポンシブ時の注意点は横レイアウト時のAndroid特有のUIによりブラウザの幅が小さくなりCSSで設定する際はUIのフレームも考慮しないといけない時もあるので最悪Androidの横レイアウトは妥協するという事もあります。Androidから予想される客層は様々ですが一般的に男性が多いかと思いますのでメンズ系のお店、または低価格でリーズナブルな端末が多いAndroidなので節約志向の高い子育て世代の主婦層などが客層に多い幼稚園や保育園または学習塾などもAndroidを重点的にやってみるのもよさそうです。

4位の1366×768は低価格帯のノートパソコンに見られるサイズです。低価格のパソコンは一見動作が重く不便に感じますが、動画などを見たりオフィス系のソフトを使って書類を作ったりしなければブラウザで調べごとだけしている分には不自由ではないので定年退職した後の親が子供からプレゼントされていたりと年配者などが利用している割合が高いです。客層のメインターゲットが60台前後のお店などはこのあたりも忘れずに対策しておきましょう。(一応PCの解像度なのでまず大丈夫だとは思いますが一応文字のサイズや色の濃さなどに注意した方がよさそうです。あとは前記の通りパソコン自体の動作が重いのでjavascriptや無駄に高解像度な背景画像や画像の掲載、写真をポップアップ表示するような物は避けた方が良いかも知れません。)

今回は時間の関係上ここまでしか書けませんでしたがまた次回になりますが引き続きレスポンシブ設定のやり方やCSSピクセル周りの解説をしていきたいと思います。それではまた。