この記事は「サムザップ #1 Advent Calendar 2020」の12月16日の記事です。
昨日の記事は@kanasaki_kenjiさんの「Unity Shortcut Managerで便利なショートカットをつくろう！」でした。
はじめに
サムザップでフロントエンドエンジニアを担当しております。
最近はアプリ開発だけではなく各種Webサイトの進捗管理や外部会社との窓口といったディレクション業務も多くなってきました。
業務の中で企画やQAの方から圧倒的に増えた質問が「動作保証するブラウザや端末ってどの辺までカバーすればOKか」といった検証周りに関するものです。
「デスクトップPCと自分の手持ちのスマホで見られれば大丈夫」くらいの感覚で指示を出してしまいがちですが、あいまいな感覚で制作側に投げてしまうと後で思わぬ表示崩れやバグが見つかり修正コストが肥大化してしまいます。
よくあるパターンは一部ブラウザでの未チェックやタブレット端末に対する画面比率の考慮漏れ。依頼側からすれば「適当にお任せでやってくれると思っていた」、制作側からすれば「その環境まで見ることを考慮していない」といった認識齟齬が生じてしまいます。
予めWebブラウザのシェア率や解像度の特徴を把握した上で制作指示を依頼できると無駄なコミュニケーションコストも少なくなるなと思い、それであれば抑えておきたい情報をまとめてみようかと思い立った次第です。
現役Webエンジニアの方々にとっては釈迦に説法かもしれませんが、Webサイトの制作を依頼する側の方に対して何かの参考になれば幸いです。
なお、調査には「statcounter」を利用しております。1999年に開始されたWebトラフィック分析Webサイトとかなり老舗のサービスで、検索エンジンやSNSの利用率も調べられておすすめです。
御品書き
ブラウザのシェア率
https://www.youtube.com/watch?v=W4wWdmfOibY
Webブラウザが誕生してからの世界的シェア率の変化が上記動画にてまとまっています。
大きなターニングポイントは2回、Windows98が登場した1998年（WindowsにInternet ExplorerがOSの機能として組み込まれた時期）とスマートフォンが本格的に普及した2012年（iPhone5・Xperia acro HD・GalaxyS IIIが発売された時期）辺りです。厳密にはブラウザ戦争という名目で3回あるというのが定説ではありますが、細分化してみるとブラウザのCSSの解釈の仕方とモバイル端末の普及が大きな流れを作ったと考えています。
ここから本題に入りますが日本に特化したブラウザのシェア率です。
(※2020/09～2020/12の3ヵ月集計)
デスクトップPC
| 順位 | ブラウザ | シェア率 |
|---|---|---|
| 1 | Google Chrome | 60.11% |
| 2 | Microsoft Edge | 12.05% |
| 3 | Safari | 8.97% |
| 4 | Internet Explorer | 8.21% |
| 5 | Mozilla Firefox | 7.11% |
| 6 | Other(※他全体) | 3.54% |
スマートフォン
| 順位 | ブラウザ | シェア率 |
|---|---|---|
| 1 | Safari | 59.61% |
| 2 | Google Chrome | 34.49% |
| 3 | Samsung Internet | 3.01% |
| 4 | UC Browser | 0.75% |
| 5 | Android | 0.64% |
| 6 | Mozilla Firefox | 0.5% |
タブレット
| 順位 | ブラウザ | シェア率 |
|---|---|---|
| 1 | Safari | 58.67% |
| 2 | Google Chrome | 27.21% |
| 3 | Android | 12.8% |
| 4 | Puffin | 0.27% |
| 5 | Opera | 0.25% |
| 6 | Other(※他全体) | 0.8% |
スマートフォンやタブレットはこと日本国内においては圧倒的にiOSのシェアが高く、必然的にSafariの利用率が多くなっています。
対してデスクトップPCではGoogle Chromeの次にシェアが高いのはMicrosoft Edgeという結果です。最近のEdgeはGoogle Chromeと同じエンジンChromiumを採用したことやOneNote Web Clipper・ダークモードビューなどの便利な機能もあり、ここ1年で徐々にシェアを伸ばしつつあります。
まずはこのシェア率を把握し「デスクトップPCはGoogle ChromeとSafariさえ大丈夫ならOK」という先入観を捨てる必要があります。Mozilla Firefoxも決して無視できない数字です。
(※Firefoxでレイアウトが崩れるサイトは少なくありません)
デバイスの解像度とアスペクト比
サイト制作をする上で当然デバイス毎の解像度も考慮する必要があります。
但しスマートフォン普及後はあまりに多くの解像度が乱立した関係上、どちらかというと画面アスペクト比を把握しておくのがよろしいかと思います。
日本に特化したシェア率は以下となっています。
(※2020/09～2020/12の3ヵ月集計)
デスクトップPC
| 順位 | 解像度 | アスペクト比 | シェア率 |
|---|---|---|---|
| 1 | 1920x1080 | 16:9 | 26.27% |
| 2 | 1366x768 | 16:9 | 13.35% |
| 3 | 1536x864 | 16:9 | 8.39% |
| 4 | 1440x900 | 16:10 | 4.92% |
| 5 | 1280x720 | 16:9 | 4.15% |
| 6 | 2560x1440 | 16:9 | 3.35% |
スマートフォン
| 順位 | 解像度 | アスペクト比 | シェア率 |
|---|---|---|---|
| 1 | 375x667 | 9:16 | 23.04% |
| 2 | 414x896 | 1:2.165 | 14.95% |
| 3 | 375x812 | 9:19.5 | 13.85% |
| 4 | 360x640 | 9:16 | 10.53% |
| 5 | 414x736 | 9:16 | 5.37% |
| 6 | 320x568 | 9:16 | 3.21% |
タブレット
| 順位 | 解像度 | アスペクト比 | シェア率 |
|---|---|---|---|
| 1 | 768x1024 | 3:4 | 57.35% |
| 2 | 800x1280 | 10:16 | 3.98% |
| 3 | 1280x800 | 16:10 | 3.82% |
| 4 | 834x1112 | 3:4 | 3.38% |
| 5 | 601x962 | 10:16 | 3.17% |
| 6 | 600x960 | 10:16 | 3.13% |
たくさん解像度が出てきて覚えるのも大変かと思いますが、ことアスペクト比でまとめてみるとそこまで膨大な種類ではありません。おおまかに下記を抑えておくことでデザイナーさんも理解しやすくなるのではないでしょうか。
| デバイス | アスペクト比 |
|---|---|
| デスクトップPC | 16:9 |
| スマートフォン | 9:16 or 9:19.5 |
| タブレット | 3:4 or 10:16 |
ちなみにアスペクト比1:2.165という一見馴染みがなさそうな値はiPhone XRを指しています。
またここには記載されていない独自解像度で評判のiPhone 12 miniは360 x 610。アスペクト比をそのまま計算すると9:15.25となりややこしいため、9:16をベースに多少余裕のあるレイアウトを考えておきたいものです。今後もアスペクト比が特殊なデバイスが増えていくかもしれませんね。
レンダリングエンジンの特性
ここだけ少し技術寄りになりますが簡単に。
HTML レンダリングエンジンは画面に表示する文字や画像などの配置を計算するプログラムのことです。文字通りHTMLやCSSを解釈するものとして捉えてもらって大丈夫かと。
有名どころでWebKitのSafari・GeckoのFirefoxなどが挙げられますが、Google Chromeは今はWebKitではなくBlinkであることを知らない方も以外と多かったりします。
ベンダープレフィックスはCSSプロパティの拡張機能をブラウザに実装するために付け加えられるものです。
ざっくりと表にしてみました。
| ブラウザ名 | HTML レンダリングエンジン (※最新ver.での記載) |
ベンダープレフィックス |
|---|---|---|
| Google Chrome | Blink | -webkit- |
| Safari | WebKit | -webkit- |
| Microsoft Edge | Blink | -webkit- |
| Opera | Blink | -webkit- |
| Mozilla Firefox | Gecko | -moz- |
| Internet Explorer | Trident | -ms- |
ここで把握しておきたいポイントとしては各エンジンの元ネタ。
WebKitからの派生でChromiumやBlinkが誕生しているので、コーディングの際-webkit-に対応させておけば概ね大丈夫…と思いきや、CSSのflexboxやtransformプロパティは一部の古いブラウザで上手く表示されない問題があったりと一筋縄ではいきません。
とはいえ一つ一つ丁寧に対応してたらあっという間にコードの肥大化まっしぐらです。現在のWeb現場ではGulpやWebpackといったタスクランナーでAutoprefixerを(※注1)使うことが多くなっているかと思います。
制作側で使ってそうな形跡がなければ軽くヒアリングする程度で大丈夫かと。
※注1：Autoprefixer：サポート対象にしたいブラウザを設定することで自動的にベンダープレフィックスを付けてくれます。構文の変更もしてくれる便利なもの。
目安となる検証端末
上記の項目を踏まえ、2020年12月現在では以下の端末を目安にデバッグを行うのがよろしいかと思います。
■PCブラウザ（※原則最新版が望ましいです）
・Google Chrome
・Microsoft Edge
・Safari（Mac）
・Mozilla Firefox
■iOS
・iPhone SE（初代）
・iPhone 7 or 8
・iPhone X or 11
・iPhone 12
・iPad Pro 12.9inc or 10.5inc
■Android(※2016年以降のモデルであると安心です)
・Xperia XZ or 1 系
・Garaxy S7 以上
・Pixel 4 or 5
・AQUOS
・HUAWEI
半年～1年単位で最新機種と各ブラウザのシェア率を見直し、およそ4～5年をカバーできる範囲にしておけば概ね安心です。Internet Explorerの対応に関しては掲載する内容のユーザー層に合わせて判断するのが良きかと。
明日のアドベントカレンダーの担当は@tatsuki satoさんです。