こんにちは！ASUE通信編集部です。

インターネットを使ってWebサイトを見るために、パソコンやスマートフォン、タブレットなどで使用するソフト「ブラウザ」。インターネットが欠かせない現代人にとっては、もう切っても切れない関係になっています。

多くの人がパソコンやスマートフォンで使用しているGoogle Chrome（わたしもChromeがメインブラウザです、親の顔より見たGoogle Chrome）や、iPhoneやMac・iPadなどのApple製品を利用中であれば標準搭載されているSafari、その他FireFox, Opera, Microsoft Edge（以下Edge）, 果てはInternet Explorer（以下IE）……それぞれの方がそれぞれの状況や好みなどに応じて、様々なブラウザを活用しています。

さて、実は同じWebサイトを閲覧していても、使っているブラウザによって見え方が違う場合があります。Webサイトは主にhtmlやcssなどの言語を使ったコードで構築されていますが、ブラウザごとに対応していないコードがあったり、ブラウザごとに各コードに微妙な動きの差異があったり、古いブラウザで新しいコードへの対応のためのアップデートがされていなかったり……。さらに、PCやモバイル、タブレットなどのデバイスのサイズの違いなどによっても変わってきます。

ブラウザやデバイスなどの閲覧環境の違いからユーザー個々の持っている特性の違いなどによる「見え方」の違いにどのように対応していくか？など、自社のWebサイトでチェックしておきたい点をご紹介します！

どんな環境でWebサイトを閲覧されてる？閲覧環境の確認方法

ところで、今何を使ってこのブログをご覧になっているでしょうか？仕事用のパソコンでGoogle Chromeから？それとも電車の中でスマートフォンから？ 人によって様々だと思います。では、実際にどんなデバイスやブラウザでWebサイトが見られているのでしょうか？

これは「Google Analytics」を使用すれば大体の割合を確認することが可能です。

最新の国内でのブラウザシェアが以下の通り。

世界のシェアと同様にGoogle Chromeのシェアが最も高く、次いでApple系のSafari、Edge、FireFox、IEとなっています。また、デバイスの比率はWebサイトの業種などによって変わってきますが、ざっくりtoCのビジネスならモバイル（通販サイトなど）、toBのビジネスならデスクトップの比率が高くなることが多いです。

たくさんあるデバイスとブラウザ、どこまで対応する？

さて、デバイスの画面サイズはスマートフォン・タブレット・パソコンなど種類や機種によって様々ですし、ブラウザの種類も様々あることがわかったかと思います。

では、どの程度まで表示がきちんとできるように対応しておくべきでしょうか。

主要ブラウザは要チェック！PCはChrome・Safari・Edge・FireFox

まず、シェアの高いブラウザは基本的に正しく表示できるように対応しておくのが基本です。PCだと圧倒的なシェアを誇るGoogle ChromeはMac・Windowsそれぞれで確認しておくのがベストです。また、そのほかにシェア率の高いSafari・Edge・FireFoxも確認しておくのが望ましいと思います。スマートフォンはiPhoneのSafariとChrome、AndroidのChromeまで確認しておくのが望ましいかと思います。

デバイスサイズへの対応：PC・スマートフォンのサイズでの表示は最低限確認

ブラウザの違いだけじゃなく、デバイスサイズによる見え方の差にも要注意です。

表示自体が崩れていないから……といっても、PCでの表示をそのまま縮小させてスマートフォンで表示させた場合は文字が小さく読みにくいなどの問題が発生します。そのためスマートフォンへの表示は、PCとはレイアウトなどを変更して見せる必要があります。

画面幅に応じてコンテンツを縮めたりレイアウトが変化するどの画面サイズでも正常に見られるレスポンシブデザインや、PC用・タブレット用・スマートフォン用などいくつか特定の画面幅を区切ってその画面幅ごとに変化するアダプティブデザインなどを利用しましょう。レイアウトごとにデザインを用意して構築する場合はその分コストが高くなるため、1個のデザインを元に各デバイスサイズで問題なく見られるように調整することが多いです。

チェック方法

チェック方法は実機を用意して必要なブラウザを準備して行うのがベストですが、一人では難しいことも多いです。無理な場合は社内など周囲に協力をあおいだり、ブラウザの開発モードなどを使用して確認しましょう。

Google Chromeでスマートフォンでの見え方を確認する方法は以下の通り。

実機とは微妙にズレが出る場合もあるため、あくまでも疑似的な確認方法ではありますが、最低限スマートフォンのデバイスサイズでどのように見えているかは確認しておきましょう。

IEはそろそろ対応しなくてもOK

さて、先ほどご紹介した対応が必要な主要ブラウザの中から、IEは除いています。

というのも、IEは今年6月にほぼサポート終了が発表されているためです！！（※2025年の予定から前倒しに）
初めてインターネットに触れたのはIEという方も多いですし、周囲に使ってる人がいる方もひょっとしたらいるかもしれませんが、実を言うと、IEはもうダメです。いきなりこんなこと言ってごめんね。

Microsoftの標準ブラウザがIEからEdgeに変わってから数年。IEのシェア率が高い国は少なく、上位のブラウザとして並ぶの日本はかなり少数派ですが、日本では長くIEを使っている方が多かったり、少し前まで某有名システムもIEしか使えなかったなど一部のシステムがIEしか使えない状況が続いていてIEをメインで利用せざるを得ない状況があったり、とIEを利用しているユーザーが一定数いる状態が続いていました。

ですが、IEだと、Webサイトを構築するためのhtmlやcssのコードが対応していないことも多く、同じように見せるためには追加作業が発生し、コストが多くかかるため、少し前から新しく制作するWebサイトだとIEでの閲覧を推奨しないWebサイトも増えています。

そしてこの度、日本でもIEのシェア率も減ってきて（現在1%台）某有名システムも推奨環境にEdgeを追加し、さらにサポート終了も前倒しになったことで、ほぼ確実にIEの対応が必要なくなりました……！！！

ちなみに、わたしがこれまで裏切りを感じた瞬間の一つは、「親のPCのデフォルトブラウザがIEだったとき」です。

IEのこと、親の仇のように恨んできたのに……！親と通じていたなんて……！

そんなに……？

その他：サイトによっては要注意！

ブラウザ・デバイス以外にも、サイトによっては注意する必要がある表示があります。

例えば、ダークモードへの対応をお願いしている場合は、ダークモードでの実際の見え方も確認して見えにくい文字や画像、押しにくいボタンなどがないかを確認する必要があります。また、レシピページなどの印刷して利用される可能性が高いページがある場合は、Webサイトの要件を決定する時点で要望を伝えておく必要があります。

Google Chromeでは、以下の方法で対応状況を確認できます。

ブラウザやデバイス、ダークモード・印刷などでの見え方への対応は制作会社によってデフォルトでの対応が決まっているため、デフォルトの対応範囲をあらかじめ確認して必要あれば最初に要望を出しておくとスムーズです。

ブラウザ・デバイスだけじゃない、人によって違う見え方

デバイス・ブラウザなどの閲覧環境以外に、閲覧しているユーザーによる見え方の違いを考慮することも大切です。このように、どんな人であってもWebサイト上で必要な情報まできちんと辿り着けること・アクセスしやすさのことを「 Webアクセシビリティ」といい、現在は対応義務等があるわけではありませんが、今後はWebサイトを運営する事業者に対して対応義務が生じる可能性もあるため、できるところから対応を進めておけると◎です。

まとめ

ユーザー個々の閲覧環境や実際に見ているユーザーによって、Webサイトの見え方は大きく変わってくる場合があります。

主なデバイスやブラウザでの表示にしっかり対応しつつ、アクセシビリティへの対応などもできるところから進めていけるといいですね！

ASUE株式会社では、このようなWebマーケティングに関わる情報をメールマガジンでご紹介しています！
興味がある方はぜひご登録ください！