このページの本文へ

ブラウザーテストに欠かせない基本ツール3選

2010年12月24日 11時00分更新

文●杉本 淳子/フライング・ハイ・ワークス

  • この記事をはてなブックマークに追加
本文印刷
web-keyword

 Webサイトの制作では、なるべくどのようなユーザー環境であっても同じように見えることが要求されます。PCサイトであればOSやブラウザー、モバイルサイトであればキャリアや端末が違っていても、制作者の意図どおりに表示され、JavaScriptやFlashなどのプログラムが正常に実行されるかをチェックするのが「ブラウザーテスト」です。

ブラウザーの種類とブラウザーテストの方法

 Webページを表示するブラウザーは、Internet Explorer(IE)、Firefox(ff)、Opera、Google Chromeなど、Windowsだけでも数多く存在します。さらに、リリースされた歴史が古ければ古いほど、特有のバグがあったり、最新のHTMLやCSSの仕様に対応していなかったり、といったバージョンによる違いもあります。Web標準の仕様に則って制作したページであっても、ブラウザーが抱えるバグや表示能力の違いによって表示崩れを起こすことは少なくありません。

 しかし、現実にすべてのブラウザーで同一の表示を実現するのは難しく、調整には時間もコストもかかります。そこで、制作するWebサイトのターゲットユーザーから利用の多いOSやブラウザー環境を整理して、サポートするブラウザーの方針を決めましょう。方針が決まったらブラウザーテストツールを使って、テストと修正を繰り返します。

主なブラウザーテストツール

 代表的なブラウザーテストツールとしては、「ITTester」「Html Validator」「Adobe Device Central」があります。

 IETesterは、IE5.5~9Betaまでの表示を同時に確認にできるWindows向けのソフトです。国内でのIEのシェアは大変高く、Firefox、Opera、Google Chromeとは大きな差が開いています。IE6などの古いIEを使用しているユーザーも多く存在しますが、通常は1つのWindows OS 上に複数のIEを共存させることはできないので、検証環境を用意するのは困難です。IETesterを使うと複数のIEのバージョンをチェックできるので大変便利です。

 Html Validatorは、正しいコーディングが実装されているか、表示されているページを検証するFirefoxのアドオンツールです。ページのソースを表示するとエラーと警告をリストアップし、ミスのあるソースコードをマーカーしてくれます。

 Adobe Device Centralは、携帯電話での表示を確認するためのWindows/Mac向けソフトです。キャリアや機種を絞って表示を確認できるので、モバイルサイトを作成するときに重宝します。新しい端末の情報はアドビのWebサイトからダウンロードできます。

著者:フライング・ハイ・ワークス

東京都近郊(首都圏)を中心とし、企業サイトやキャンペーンサイトの制作、CMSの設置などを行なっているWeb制作会社。掲載実績数は300点以上。クライアントのその先にいるお客様の事を考えた「意味を持つデザイン」と「訴求するコンテンツ」を提供する事を使命とし、ディレクターを中心にフットワークの軽さときめ細かい対応で制作を行なっている。

書影

書籍版は、企画・設計・制作・運用など、Webディレクション業務の大まかな流れに沿って構成。最新情報を盛り込み、書き下ろしのコラムや用語集も収録しました。ずっしり重い1030g、厚さ19.5mmで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊です。

Webディレクション標準スキル152

本体 4,280円+税、AB判392ページ(オール4色刷)
ISBN:978-4-04-868746-1

Amazon.co.jpで買う 楽天ブックスで買う

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています