結果を並べて/重ねて比較
レンダリングの結果は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デザイナ・デベロッパを悩ませるあの面倒な作業も、同サービスを活用すればかなり楽になるかもしれない。興味がある方はぜひチェックしてみよう。