結果を並べて/重ねて比較

レンダリングの結果は1枚1枚確認するほか、横に並べて確認したり、重ねて確認できるようになっている。画面左上のViewプルダウンで「2-up View」を選択すると横並びに表示、「Onion Skin」を選択すると重ねて表示する。

ie6nomore.comのレンダリング結果を「2-up View」で表示。左側がIE6、右側がIE8の結果だ。Shiftキーを押しっぱなしにしながらマウス操作をおこなうと、両方のスクリーンショットにマウスカーソルが表示される

Adobeのレンダリング結果を「Onion Skin」で表示。おなじOS、Webブラウザでもバージョンが違うだけで微妙に表示が違っていることがわかる。中央部のスライダでは、透明度の比率を調節することが可能だ

ローカルにスクリーンショットを保存

取得したスクリーンショットはJPG形式でローカルに保存することができる。「1up View」または「2up View」で表示中に、スクリーンショットの上で右クリックし「Save Locally」を選択する。

The New York Timesのスクリーンショットをローカルに保存。縦横に長いWebサイトでもまるまる保存できて便利だ

ホットキーの利用

より効率よく作業したい場合は、ホットキーを利用するのが便利だ。

用意されているホットキーの一覧
ホットキー 用途
↓ 選択しているBrowser Sets内の、次の環境
↑ 選択しているBrowser Sets内の、前の環境
+ 拡大
- 縮小
1 1-up Viewで表示
2 2-up View(横に並べて)で表示
3 Onion Skin View(重ねて)で表示
← 左側で選択している環境の結果を強調して表示(Onion Skin Viewで表示している場合のみ)
→ 右側で選択している環境の結果を強調して表示(Onion Skin Viewで表示している場合のみ)
R ルーラーガイドの表示・非表示切り替え
Ctrl/Command キーを押しながらマウス操作で、画像をつかんで移動
Shift キーを押しながらマウス操作で、もう一方のスクリーンショット上にマウスカーソルを表示(2-up Viewで表示している場合のみ)

「↓」「↑」「1」「2」「3」キーだけでも覚えておくと、かなり操作が楽になるだろう。

チェックしたいサイトが外部に公開されていれば、手軽にクロスブラウザの表示確認がおこなえる。Webデザイナ・デベロッパを悩ませるあの面倒な作業も、同サービスを活用すればかなり楽になるかもしれない。興味がある方はぜひチェックしてみよう。