スマホのシェア率から考えるWeb制作で留意しておきたいポイント
現在のWeb制作では「モバイルファースト」が大原則であり、Webサイトはスマートフォンで閲覧されることを念頭に置いて設計されます。
総務省発表の「平成29年通信利用動向調査」によれば、個人のインターネット利用機器に関してはスマートフォンがトップの割合を占めており、パソコンを使ってネット利用する人の比率を上回っています。
サイトのジャンルにもよりますが、アクセス解析で確かめてみると、サイトを訪れるスマートフォンユーザーの割合は60%を超えるのが一般的です。
モバイルファーストの重要性は周知の通りですが、ここではさらに深掘りをしてみましょう。Web制作で気をつけたいポイントについて、国内のスマートフォンシェア率から考えていきたいと思います。
Retinaディスプレイにどこまで対応すべきか
スマホ対応サイトを作るときにWebデザイナーを悩ませる問題のひとつが、Retinaディスプレイの存在です。
サイトを軽快に読み込ませるためには画像ファイルを小さくして軽量化するのが一番ですが、一方で大きいサイズの画像を用意しておかなければ高精細ディスプレイのiPhoneでは画像がぼやけて見えてしまいます。
なので解像度が2倍のRetinaディスプレイに対応させるとき、例えば350px幅の画像コンテンツを表示させたければ、倍のサイズである700pxの画像を用意する必要があります。
しかしスマートフォンの高解像度化が進んだ今では、2倍の解像度対応だけでは全機種をカバーできません。iPhone Xは3倍解像度ですし、Galaxy S7ではなんと4倍の画面解像度を持っています。
参考までに、StatCounterで日本国内におけるスマートフォンのOSシェアを調査したところ、iOS（iPhone）端末のシェア率が67.99%、Android端末のシェア率が31.67％と前者が大幅に上回る結果となりました。（2018年7月時点）
今後、iPhone X相当の高精細ディスプレイ端末のシェアが広がっていくことを考えれば、（画像コンテンツを重視するサイトでは）3倍、ないし4倍解像度のRetina対応を迫られることになりそうです。
HTML5のsrcset属性指定で解像度によって画像を切り替える
Retinaディスプレイに対応するとき、従来の方法では表示サイズ（350px）の2倍の大きさの画像（700px）を用意して、次のようなコーディングを行いました。
（例）<img src=”photo.jpg” width=”350”>
しかし上記の方法では、ディスプレイ解像度の如何にかかわらず一律2倍サイズの画像が読み込まれてしまいます。さまざまな機種に対応するためには、やはりディスプレイ解像度によって読み込む画像自体を切り替えたいものです。
そこで使えるのがHTML5のsrcset属性指定です。使い方は簡単です。具体的に次のように記述します。
（例）<img src=”photo_small.jpg” srcset=”photo_small.jpg 1x, photo_middle.jpg 2x”, photo_ large.jpg 3x”>
上記で例えば200 px × 200pxのバナー画像を表示させたい場合、
・photo_small.jpg（200 px × 200px）1倍対応
・photo_middle.jpg（400 px × 400px）2倍対応
・photo_ large.jpg（600 px × 600px）3倍対応
それぞれこのようなサイズの画像を用意しておけば、通常のPCディスプレイでは” photo_small.jpg”が、iPhone6などでは”photo_middle.jpg”が、iPhone X等では” photo_ large.jpg”が自動で読み込まれるようになります。
srcset属性はレスポンシブデザインのサイトを構築する上で非常に便利であるため、是非とも覚えておきましょう。
ちなみにWordPressでは自動でsrcset属性を入れてくれるため、WordPressサイトの場合はとくに設定は必要ありません。
また、サイトロゴやアイコンの場合は、複数サイズの画像を用意するよりも、SVGフォーマットで画像を用意するのがおすすめです。
SVGフォーマットであれば、どのような解像度の端末で閲覧をしても、あるいはどれだけ拡大・縮小表示をしても、画質に影響を与えません。
スマートフォンのディスプレイサイズを想定しておく
スマートフォン端末によって、ディスプレイの大きさはさまざまです。デザインでこだわる場合は、ディスプレイサイズによって見え方がどのように変わるのかはチェックしておきたいところです。
参考までに、StatCounterで日本国内におけるスマートフォンのディスプレイサイズ別シェア率を調べたところ、次のような結果となりました。
・375×667（39.45%）
・360×640（21.76%）
・414×736（11.19%）
・320×568（9.04%）
したがって基本的には375の横幅をベースとして考え、（iPhone 6～8 Plusなどの）414横幅にも対応できるように設計しておけば万全です。
Google Chromeでサイト閲覧時にF12キーを押下すると、Chrome Developer Toolsが起動します。その状態で「Ctrlキー」+「Shiftキー」+「M」を同時押しすると、スマートフォンの主要機種での見え方をシュミレーションすることができます。
実機確認するのが一番ですが、パソコンで見え方を確認したいときはChrome Developer Toolsを活用するのが良いでしょう。
StatCounterでスマートフォン端末のOS・ブラウザ・ディスプレイのシェア率をチェックする
さて、この記事では国内でのスマートフォンOS・ディスプレイサイズのシェア率を参考として載せましたが、これらのシェア率は毎年変動しますし、国によっても大きく変わります。
なので最新のネット動向を確かめたいときにはStatCounterを使うのがおすすめです。
StatCounterでは、モバイルOSやブラウザ等のシェア率、それからソーシャルメディアのシェア率など役立つデータをグラフで閲覧することができます。（デフォルト設定では全世界のシェア率を表示するため、Japanの項目にチェックを入れておきましょう。）
サイトのレスポンシブ化を進める際に、クライアントを説得する材料としても使えます。ひとつの判断指標としてStatCounterをぜひ有効活用ください。
▼キャパの公式Twitter・FacebookではITに関する情報を随時更新しています！
建設・土木業界向け 5分でわかるCAD・BIM・CIMの ホワイトペーパー配布中！
CAD・BIM・CIMの
❶データ活用方法
❷主要ソフトウェア
❸カスタマイズ
❹プログラミング
についてまとめたホワイトペーパーを配布中
DOWNLOADデジタルツインと i-Constructionについての ホワイトペーパー配布中！
❶デジタルツインの定義
❷デジタルツインが建設業界にもたらすもの
❸i-Constructionの概要
❹i-Constructionのトップランナー施策
お問い合わせ
