対象ブラウザと対象デバイス

対象ブラウザと対象デバイス

前回は、タッチデバイス向けデザインにつきまして、当たり判定範囲を踏まえ記載いたしました。

やはり大事になってくる事柄は、「タップ可能なUI要素の快適な最小サイズは44×44ポイント」これにつきることと思います。また、参考リンクとして、Appleが提供しているユーザインターフェイスのデザインのヒントを記載しましたので、そちらがとても参考になる事と思います。

サイトを作成する際は、事前にそのサイトが対応しなければならない対象ブラウザと対象デバイスを決定しておく必要があることと思います。レスポンシブウェブデザインは、スマートフォンやタブレットで正しく閲覧できることが前提条件になることが多いのですが、これはすべてのブラウザ、すべてのデバイスを対象とするという意味ではございません。

現時点で、スマートフォンだけでも100機種以上あり、さまざまなOS、さまざまなブラウザが搭載されていて、新機種も続々と登場しています。レスポンシブウェブデザインといえども、そのすべてに対応することは、コスト的にも工数的にも現実的ではありません。特に、現時点ではウェブサイトを制作する際にTVやゲーム機などを対応デバイスに含めることは稀です。

対象ブラウザと対象デバイスとは、製作者側がクライアントに対して動作を保証する対象という事になります。制作者は対象ブラウザ、対象デバイスでサイトが正しく表示されることをテストし、確認することとなります。こう考えてみますと、すべてのデバイスに対応できない事が分かることと共に、マルチデバイス対応を検討する際は、事前にしっかりと調べ、また制作環境やテスト環境の事も考慮したうえで、対応すべきデバイスを選定することが重要になります。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

対応程度のレベル分け

対象ブラウザや対象デバイスを選ぶ際に「対応するか否か」の二択で考える必要はありません。完全に正しく表示するか、まったく閲覧できない状態のまま放置するか、という極論は、多数のブラウザやさまざまなデバイスが存在している現在では、あまり適した考え方とはいえません。

ブラウザによって、HTMLやCSSの解釈が異なる部分もあるため、そのすべてに対して完全に対応することは難しいのですが、一方で、モダンブラウザであればある程度ページを閲覧できる場合が多いのも事実です。

これらを踏まえて、対象ブラウザや対象デバイスを決める際は、以下のように対応程度をレベル分けして、各ブラウザやデバイスをどのレベルまで対応するか検討が必要になります。

対応するOS

初めに決定すべきなのはOSになります。PC、タブレット、スマートフォンのそれぞれに複数種類のOSがあります。対象に含めるべきOSの種類やヴァージョンは、サイトの要件や制作コスト・期間などによって変わりますが、以下のOSは対象に含めることが多くなります。

PCのOSにはUNIX系のOSなど多数の種類があります。実際に対象OSを決定する際は、各OSの利用シェアや機能、搭載ブラウザの種類なども考慮することが必要になります。対応範囲を増やせば増やすほど制作コストは増加しますので、十分に検討して決める必要があることと思います。

対応するブラウザ

ブラウザの種類はOS以上に多くあります。同じHTMLやCSSであっても、ブラウザによって表示内容が大きく異なるため、慎重に選定する必要があることと思います。

デフォルトのブラウザは対象に含める

各OSにはデフォルトでインストールされているブラウザがあります。これらのブラウザは利用者も多いので通常は対象に含めます。

利用者の多いブラウザは対象に含める

当然のことですが利用者の多いブラウザは対象に含めることをおすすめします。例えば、ChromeやFirefoxはデフォルトのブラウザではありませんが、非常に人気が高く、広く利用されています。googleアナリティクスなどでアクセス解析を行い、対象のサイトに来訪するユーザーが利用しているブラウザ情報を取得するなどして、対象に含めるブラウザを決定するのが良いでしょう。

ブラウザのヴァージョンにも注意が必要

対象のブラウザを決定する際は、ブラウザのヴァージョンにも注意する必要があります。特にIE（Internet Explorer）はヴァージョンによって動作内容が大きく異なるため、サイトで利用する機能なども加味して検討する必要があります。

対応するデバイス

PCやiPhoneに関しては、OSが同一であれば動作内容がデバイスに依存することはあまりないのですが、Android端末は各メーカーがOSに手を加えているため、同一ヴァージョンであっても動作が異なる場合があります。

数多くあるデバイスをすべて揃えることは不可能だと思いますので、ここでは2020年現在、実際にgoogleアナリティクスの解析データをもとに、いくつかのデバイスを用意することをおすすめします。動作確認を推奨するデバイスは以下の通りになります。

やはり、2020年現在ですとスマートフォンの機種はデバイスごとで見るとキリがないことと思います。
また、対応するデバイスを決定したら、サイトが対応する解像度も把握する必要があります。レスポンシブウェブデザインでは画面サイズによってページのレイアウトを切り替えるため、どこからどこまでをスマートフォンとし、どこからどこまでをタブレットとするか決める必要があることと思います。

その際に、対象に含めたデバイスの解像度が1つの判断基準になります。

という事で今回は、レスポンシブウェブデザインでのサイト作成における、対象ブラウザと対象デバイスにつきまして、記載いたしました。

説明では、スマートフォンの機種名をあえて多めに記載していますが、最後のポイントでも記載いたしました通り、そこまで細かく注意する必要はないことと思います。実際にはWindowsPC、Mac、iPhone、iPadで実際のアクセスの90～95パーセントを占めています。iPhone以外のスマートフォンであれば、デバイスとしては機種が多いため、代表的な機種でAndroid OSのブラウザチェックができれば、何ら問題ないことと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。