Webサイトを構築する際に最も面倒なタスクの一つがWebデザインの「テスト」だと思います。様々なブラウザとOSの組み合わせがあり，一つのブラウザのために何かを犠牲にして，根本的に設計を見直すことにもなりかねない可能性を探す作業でもあります。今回は，テストを行うときのヒントを取り上げたいと思います。

テストにはプラン・実装・テスト・整理というサイクルがある

　Webサイトのテストに関しては，様々な流儀があります。OSや所有しているツールによって様々な方法が可能です。けれども，どういった方法を採るにせよ，下記の四つのステップは踏んでいると思います。

テスト・サイクル

・プラン
どのようなデザインで行くのか，どのようなレイアウトで行くのか，どのようなページ遷移で行くのか，どのようなCSS（Cascading Style Sheets）の構成で行くのか，あるいは問題のあったブラウザへの対処方法を考えるフェーズ。一部，試作して実現可能かどうかを検証する「実装」を伴う場合もある。
・実装
実際にHTMLやCSSなどを記述するフェーズ。人によっては，プランと同時に行うこともあるが，サイトが大規模になるほど仕様書としての記録も必要になってくるので，注意が必要。
・テスト
実機でのテストを行うフェーズ。対象ブラウザのすべてに対して，プラン通りの表示が実現できているかを検証する。また，対象ブラウザではなくても，問題が起こったときの対処方法を検証する。
・整理
テストで検出できた問題を，原因別，環境別などに整理して，対処方法をプランニングしやすくするフェーズ。問題を掘り下げるために，さらに詳細なテスト計画を立てて，「テスト」フェーズに戻すこともある。

　最初の三つのステップ（プラン，実装，テスト）は，サイト構築者が違ってもそれほど差がありませんが，最後の「整理」のステップに，各社各人独自のノウハウがあるように思います。とはいっても，規模が大きくなれば，それだけ不具合やバグは多くなって当然です。何かしらのチェックリストやToDoListのような形式にまとめられるのが普通でしょう。

[Windows]　ペイントと紙を使う方法

　グラフィックス・ツールが入っていないマシンでのテストも考えて，ここ最近重宝している単純なテストが，Windowsに標準搭載されている「ペイント」ソフトを使う方法です。

Windows標準搭載のペイント

　手順は簡単です。下記の4ステップで済みますし，そもそも高機能なグラフィックス・ツールでもないので，大量テストに集中して，書き込みなどはナグリ書きレベルで良いと割り切って使っています（私は，この方法にたどり着いて初めてペイントを使いました）。

  1. 「Alt＋PrintScreen」で，ブラウザの画面キャプチャを撮ります
  2. 「ペイント」を立ち上げて，「Ctrl＋V」で貼り付けます
  3. 必要であれば，右上に整理番号（上図では#107）や注意してほしい点などを，「ハケ」ツールを使って書き込みます
  4. 紙で整理をするなら，そのまま印刷（データで管理するならファイル保存）

　紙で整理する利点は，問題の分類仕分け作業が物理的に見えやすい点と，その場で書き込みをしたり，完了すれば別の「完了用の箱」に投げ込むことができる点です。ただし，ペイントの印刷には少し変な癖があるので，「ページ設定」で下図のように，余白と中央そろえ，拡大縮小は自分のプリンタ環境に合わせて微調整しておいたほうが無駄紙を減らせます。

ペイントの「ページ設定」例

[Windows]　PHARMACY（フリーソフト）

　もう少し，エンジニアチックにテストを行い，体系的に整理する必要がある場合には，フリーソフトのPHARMACYも重宝します。Internet Explorer（IE）が中に入っているというか，IEの外側に画面キャプチャ機能を付けたような作りで，JPEGやPNG，それにクリップボードにも保存ができます（しかも，ブラウザの「枠」のない，中身だけの状態での画面キャプチャを撮れます）。

　プロジェクトによっては，「エビデンス（証拠）」の記録を求められる場合もあります。構築したサイトのページを目視テストしているかどうかの証拠です。自治体などの公的サイトの納品時に，全ページ分が求められたりするようなケースもあります。

　このツールの良い点は，フォントサイズが選べ，下方向に長く伸びるようなページでも，下まで画面キャプチャしてくれる点です。しかも（意図的かどうかわかりませんが），ブラウザの戻るボタンに相当するものがありません。リンクを正しく設計しておかないと，行きたいページにすぐに行けないことも実感できるので，ページ遷移のチェックもできます（することになります）。

　全ページに対して，「キャプチャー」ボタンを押す作業は，楽ではないですが，ファイル名も「タイトル」から取ってくれたりするので，とりあえず動作テストの最中に画面キャプチャを撮り溜めて置くということは，整理に役立ちます。

　私自身は，キャプチャした画像を，Adobe Illustratorに貼り付けて，コメントなどを書き込んでドキュメントにしたり，Adobe InDesignなどで，製本化したりもしています。

テストしやすい設計(デザイン)を

　自分のマシン以外の環境で行うときには「ペイント」を，それ以外は「PHARMACY」などで，という流れが最近はできています。しかし，肝心なのは，最初のプランニングの時点でテストのやりやすさも考慮できていることでしょう。

　純粋なエンジニアリングのプロセスでは，機能を実装した時点で，テストケースも考えるのが正統派です。見栄えを中心にした「デザイン（設計）」も，実装前後から，どのようなテストが必要でどう実行するかが見えているような開発が，理想的だと毎回思わされています。


三井 英樹（みつい ひでき）
1963年大阪生まれ。日本DEC，日本総合研究所，野村総合研究所，などを経て，現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と，エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や，RIAコンソーシアム，日刊デジタルクリエイターズ等で活動中。Webサイトとして，深く大きくかかわったのは，Visaモール（Phase1）とJAL（Flash版：簡単窓口モード/クイックモード）など。