【制作Tips】Web制作時に便利なウェブサイト比較ツールのご紹介

Webサイト制作において、制作物を確認用のテストサーバーに反映し確認後、本番サーバーに同じものを反映してリリース、ということは頻繁に行われます。しかし、このサーバーへの反映作業は、しばしば人の手で行われることがあるため、反映忘れ等のミスが発生しやすいところでもあります。
そこで重要なのが、反映後の確認作業なのですが、この確認作業は目視で行うことが多く、見落としが発生することもあります。この見落としをなるべく少なくするため、今回は「ウェブサイト比較ツール」というChrome拡張機能を使用したサイト確認作業についてご紹介します。

株式会社デパートがWebディレクター向けに開発した、Webサイトを比較するChrome拡張機能です。

この拡張機能は、比較したいサイトのスクリーンショットを撮影して比較することで、差分を抽出することができます。

インストールはこちらから

この拡張機能は、2枚のスクリーンショットを撮影して比較するというシンプルなツールなので、テスト環境と本番環境の比較以外に、以下のような用途にも使用することができます。

• 特定のサイトを定期巡回して比較することで、Webサイトの更新内容を確認することができます。
• 比較結果が視覚的にわかりやすく表示されるため、サイト更新時のエビデンスとして使用することができます。

使い方は次の通りです。

① 比較元のウェブページ（eg. 案件のテスト環境のページ）を開いてください。

② 撮影するスクリーンショットの横幅を選択してください。選択できる横幅は、全部で5種類です。未選択の場合は、現在表示されている横幅で撮影します。

③ 左の撮影するボタンをクリックして、そのサイトのスクリーンショットを撮影します。

④ 撮影するボタンに撮影されたスクリーンショットが表示されることを確認します。

⑤ ①〜④を、比較先（eg. 案件の本番環境のページ）のページで、右の撮影するボタンを使用して同じことを行います。

⑥ 比較するボタンをクリックして、撮影した2つのスクリーンショットの比較を行います。

⑦ 比較が完了すると、比較結果の画像をダウンロードするダイアログが表示されるので、ダウンロードして比較結果を確認します。

画像の比較結果は、上のように表示されます。

赤色の部分が、左のスクリーンショットにあって、右のスクリーンショットにない部分です。

緑色の部分が、左のスクリーンショットにはなくて、右のスクリーンショットにある部分です。

このように、差分があった箇所は色で表示されます。

以上のように、このツールを使用すれば、サイトの確認作業も簡単に済ませることができます。

効率の良いWeb制作のため、ぜひご活用ください。