みったに

Web制作でブラウザ対応はどこまでチェックすべきか【揉めない対策】

PROGRAMMING

Web制作のブラウザ対応で悩む人の画像

Web制作のブラウザ対応で悩む人「Web制作でブラウザ対応はどこまでカバーすれば良いんだろう。最近は、スマホ対応は必須だろうし、数が多くて大変そう。ブラウザ対応でクライアントと揉めずに対応したい。」

こういった悩みを解決します。

この記事のまとめ

  • Web制作でブラウザ対応はどこまで対応すべきか
  • ブラウザ対応を含めたWeb制作の考え方
  • ブラウザ対応でクライアントと揉めないための準備

現在の僕は、ホームページ作成などのWeb制作のお仕事をしています。今回は、その経験をもとに「対応すべきブラウザと、クライアントと揉めないための注意すべきポイント」について解説していきます。

Web制作でブラウザ対応はどこまで対応すべきか

Web制作でブラウザ対応はどこまで対応すべきかの画像
結論として、全てのブラウザに対応するのは難しいです。

もちろん、全てのユーザーに最適化されたWebページを表示するのが理想です。しかし、現実問題として、各ブラウザやOSによって、実装されている機能が異なったり、ブラウザやOSに特有のバグが含まれていることもあるため、個別の対応をしていく必要があります。

したがって、対応すべきブラウザが多ければ、個別対応のためのコストが増加します。そのため、ブラウザシェアを元に対応範囲を決めていくのが、現実的だったりします。

例えば、下記のようにYahoo!JAPANとかもIEのバージョンは10以前は利用不可にしたり、他の企業とかもIEは11以降で良いという考え方が一般的になっていたりします。
Yahoo!JAPANセキュリティセンターの「セキュリティ強化のお知らせ」

対応すべきブラウザ

結論として、下記を基準とするのがおすすめです。

PC版

  • Internet Explorer:11以降
  • Firefox:最新版
  • Safari:最新版
  • Google Chrome:最新版
  • Microsoft Edge:最新版

スマートフォン

  • iPhone:最新と一つ前のiOSでSafari、Google Chrome最新版
  • Android:2つ前以降のOSでGoogle Chrome最新版

上記の感じで、基本的には最新バージョンのみを対応するようにするのが一般的だったりします。

なぜなら、ブラウザは自動アップデートに対応しているため、古いブラウザを利用しているユーザーは、ほとんどいないと考えられるからです。

また、既に運営中のサイトであれば、Googleアナリティクスから確認することができます。ちなみに当サイト(みったにブログ)では、こんな感じです。やはりChromeがダントツです。
みったにブログのブラウザシェアの画像

なお、決め方がわからない場合は、他のサイトを参考にしてみるとわかりやすいです。例えば、下記はとてもわかりやすく定義されています。
≫デザインスタジオ・トムズワン

上記もそうだと思いますが、決め方の1つの方法として、ブラウザシェアを基準にして考えたりします。

ブラウザシェアを基準にするとは

日本のブラウザシェア(2020年4月)

日本のブラウザシェアの画像
webrageの「WebブラウザシェアランキングTOP10(日本国内・世界)」からの引用

上記はブラウザシェアのグラフですが、シェア率がよくわかると思います。こういった感じで、シェアの大きいブラウザを主にサポートする感じです。

古いブラウザは利用ユーザーが減っていくので、サポートによる開発コストが増加することを考慮すると、コストパフォーマンスの面では悪くなってしまいます。

ブラウザ対応を含めたWeb制作の考え方

ブラウザ対応を含めたWeb制作の考え方の画像
主に、ブラウザ対応で苦労するのは、IE11への対応になると思います。

とはいえ、先ほどのグラフを見てもわかるとおり、IE11ユーザーはまだ依然として多いため、現在の段階で対応しないとするのは、まだ少し早いかもしれません。

そこで、おすすめの方法は下記です。

  • 自動化できることは自動化する
  • むやみにCSSハックしない
  • Chromeの使用を促す

自動化できることは自動化する

IE11への対応はコーダーの大きな課題です。そこで、自動化できることは、なるべく自動化してしまうのがコツです。

例えば、ベンダープレフィックスをつける作業などは、ツールに任せてしまうのが楽ですね。例えば、下記のようなVSCodeの拡張機能を使うのもありです。
Autoprefixer

むやみにCSSハックはしない

CSSハックとは、要するに、ブラウザの表示を同一にするために、ブラウザによって実装するCSSを変えるテクニックですね。下記のように記述されたものです。

_:-ms-lang(x)::-ms-backdrop, body {
  background-color: #aaa;
}

これを使用するとコードが煩雑になり、可読性が落ちます。

結果的に、IE11対応を難解にさせるので、おすすめはJavaScriptやPHPでブラウザやOSの情報を取得し、classをつける方法が良いと思います。

詳しく知りたい方は、下記の説明がわかりやすいと思います。
JavaScriptでuseragentを取得しviewportの設定やブラウザ判別

Chromeの使用を促す

最後は、ちょっと裏技的な方法ですが、IEユーザーに対して、Chromeに移行してもらうようにポップアップを出すツールです。

最近見つけたツールでして、僕は実際に使ったことはないのですが、発想としては天才的だなと思いました。下記のリンク先にあるCDNのリンクを貼り付けるだけで使用できるみたいです。
IE Buster

ブラウザ対応でクライアントと揉めないための準備

ブラウザ対応でクライアントと揉めないための準備の画像
ここが一番重要だったりしますが、クライアントと揉めないように、予め取り決めをしておくことが大切です。

なぜなら、制作の工程が後になるほど、修正が大変になるからです。実際に、作り終わったあとに、揉めたりしたら萎えまくりです。できるなら、モックアップやデザインの段階までに話をしておくとスムーズかなと思います。

理想はヒアリングの段階

サイト制作するときに、「どういったユーザーをターゲットに運営していくか」についてヒアリングすると思いますが、そのタイミングが良いですね。

例えば、ITリテラシーが低めの方が対象の場合、PCに最初から入っているIEを使う可能性は高くなります。逆に、技術者系の人が対象の場合、拡張機能が豊富なChromeを使う比率は高くなります。

こういった背景をもとに、話を事前にまとめておくと、後になって揉めることが少なくなると思います。

というわけで、今回は以上です。
最後に余談ですが、僕は現在Web制作のお仕事をしており、ホームページ制作のご依頼を承っております。また、営業していただけるパートナーさんの募集もしております。もし、ご興味ありましたら、まずは下記からお問い合わせくださいませ。
お問い合わせ