ブラウザ,デバイス等の対応
こちらでは利用者が様々な環境でWebサイトを利用するようになったことで非常に重要になってきた表示環境への対応として、ブラウザやデバイス、ディスプレイに対応したデザイン、レイアウトについて解説します。
Webサイトのデザイン、レイアウト時には『見た目』と共に『導線のデザイン』と『表示環境への対応』を考慮する必要があります。
こちらではスマートフォンやタブレットPCの登場し、FirefoxやGoogle Chromeなどが普及するなど利用者が様々な環境でWebサイトを利用するようになったことで非常に重要になってきた表示環境への対応について解説します。
ブラウザやデバイス、ディスプレイ対応の必要性
2000年代のWeb利用環境はデバイスはパソコン、ブラウザはインターネット・エクスプローラ［IE］、ディスプレイは大きくても1024×768px程度の解像度でした。しかしこのWebの利用環境は、2010年に近づくにつれ激変していきます。
デスクトップPCかノートPCかの選択肢しかなかった利用デバイスも、スマートフォンやタブレットPCが出現し、利用ブラウザシェア9割を超え不動と思われたIEの地位も、米Google社の提供するGoogle Chromeに追われまたFirefoxやOpera、Safariなど様々なブラウザによるシェア争いが激化しています。一方表示ディスプレイに目を向けると、高解像度化が進み1600×900pxを超えるディスプレイも多く、その進化は留まるところを知りません。
そのためデバイスはPC、ブラウザはIE、そして横幅は780pxで制作すればよかったWebサイトも様々な対応が求められています。
スマートフォンやタブレットPCなどのマルチデバイスへの具体的な対応方法等については『Webサイトのスマートフォン対応』で紹介しているのでそちらをご確認いただきたいのですが、やはりデバイスやブラウザ、そしてディスプレイなどのWeb利用環境によって利用しやすいWebサイトのレイアウトやデザインは変わってきます。
以前のように殆どのユーザーがデバイスはPC、ブラウザはIE…と同じ環境でWebサービスを利用していたときは、ほんの一部のユーザーに対応しても労力や費用ばかりかかり効果は期待できませんでした。しかし、多くのWebサイトでPCからよりスマートフォンやタブレットPCからのアクセスの方が多くなり、ブラウザも様々なブラウザをカスタマイズして使う人が多くなり、絶対的な多数派のいなくなった現在、様々なWeb利用環境に対応できたWebサイトをデザインすることは必須と言ってよいでしょう。
ブラウザやデバイス、ディスプレイへの対応について
1つ例をあげましょう。右の図は当Web制作会社.comの『Webサイト制作の基本』のページを上からIE、Firefox、Operaのデフォルト設定で表示したものです。画像が小さいのでフォントの表示のされ方の違いなどは判らないと思いますが、オレンジの枠内で囲まれた各パネルの下部の線が、IEとFirefoxでは横一直線になっているのに対して、Operaでは右のパネル程下がって階段状になっているのがわかるでしょう。
パネルの高さは内部のテキスト量に合わせて変化するようにしてあり、内部のテキストやHTML、CSS等の指示は全て一緒なのですが、ブラウザによりフォントや文字間隔の表示のされ方が微妙に異なるため、右のような表示の違いが生じているのです。このようなブラウザ間の小さな差により、レイアウトが壊れたり、コンテンツが表示されなくなってしまったりすることが頻繁に起きるのです。
今の例は非常に小さな例ですが、ブラウザやデバイス、製造しているメーカーの違い等によっても利用できない技術があり、全くWebサイトが利用できない環境が生じてしまっているWebサイトをよく見かけます。
現在のWebサイトに必須のブラウザやデバイス、ディスプレイへの対応ですが、このように多様化の進んだWeb環境の中ではそれぞれの要素に対応するには幅広い知識と技術が必要になっています。ですから、もしあなたが個人の趣味のWebサイトを制作するのではなく、商品を販売したり、会社の公式なWebサイトを制作するのでしたら、基本となるシステムや表示の枠組みなどは専門の業者に作ってもらったほうが良いでしょう。
>> 当Web制作会社.comは、全国展開しているポータルサイトや多くのコーポレートサイトを制作してきたスタッフが、幅広い知見と技術を元にWebサイトのシステムとそしてデザインを制作しております。ご興味のある方は、『お見積もり お問い合わせ』よりお気軽にお問い合わせ下さい。