Compariumなら複数ブラウザでのWebサイト表示テストがかんたんにできる

レスポンシブ対応のWebサイトとは、どのような状態を指すのでしょうか?少なくとも、あらゆるブラウザ、デバイス、オペレーティングシステム上で正しく表示されることが最低条件といえます。つまり、プラットフォーム、ブラウザ、画面解像度の組み合わせが異なる、エンドユーザー一人ひとりの多様な閲覧環境に対応しなければなりません。不具合を確実につぶし込むには、何千台もの実機・仮想デバイスでWebサイトをテストするのが理想ですが、そこまでの予算を用意できない場合に頼りになるのが、いわゆる「クロスブラウザテストソリューション」です。

Compariumは自動ビジュアルテストサービスとして、「サイトの各バージョンにおける、ほとんど気づかないレベルの違いまで可視化する」ことをうたっています。同サービスは、米国バージニア州アレクサンドリアに拠点を置くElectronic Team, Inc.が提供するプロダクトの一つです。本レビューでは、Compariumの主要機能と利用できるカスタマイズ項目について詳しく見ていきます。

注記:本記事はスポンサード記事であり、Electronic Team, Inc.のCompariumの協力により制作されました。ただし、記事の内容および意見は、編集の独立性を維持する著者自身の見解によるものです。

アカウント登録とWebアプリの基本情報

公式サイトからアカウントを作成して直接ログインできるほか、Googleアカウントを使ってサインインすることも可能です。

ログインすると、シンプルなインターフェースが表示されます。URLを検索ボックスに入力し、テストしたいブラウザ・OS・画面解像度の組み合わせを選択するだけでOKです。ユーザーアカウントには「Guest(ゲスト)」と「Pro」の2種類があり、どちらも確認用スクリーンショットは無制限に取得できます。

Compariumを使ったWebサイトのクロステスト手順

検索バーにWebサイトのURLを入力すると、まず選択したすべての環境に対するプレビュー一覧が表示されます。画面幅は500pxから1920px(フルHD)まで選択でき、Linux、Windows 7、macOS、macOSダークモードに対応しています。現在サポートされているブラウザは、Chrome、Firefox、Internet Explorer、Safari、Operaです。

詳細に比較したい場合は、2つ以上のスクリーンを選択して右側の「Compare」ボタンをクリックします。ここでは、Windows版Chrome 80.0とWindows版Firefox 68.0を比較してみました。

比較画面はデフォルトで全画面表示されます。同期スクロール機能を使えば、複数のブラウザや異なるOS間でのWebサイトの描画結果を並べて確認できます。高さ・幅・サイズに応じたスケーリング調整にも対応しています。

Compariumは同一インターフェース内で並列スクリーンを生成できるため、Webサイト全体を俯瞰的に把握できます。比較モードは「サイドバイサイド」「オーバーレイ」「スライダー」「差分検出」の4種類を搭載しています。特に最後の差分検出モードは強力で、目視では発見しにくいエラーを自動的に特定できます。

「差分検出」モードでは、両プラットフォーム間でのメニューアイコンの配置やフォント選択の違いを確認できます。ずれが大きすぎる場合は、デザインコードを修正して差異を解消する必要があります。

同様に「オーバーレイ」モードでは、2つの設定画面を重ねて表示することで、顕著なズレを視覚的に確認できます。

このように、Compariumの高度なスクリーンショット比較機能を活用すれば、異なるOSや解像度間の比較も簡単に行えます。分析が完了したら、メインウィンドウからすべてのスクリーンを削除しましょう。

その他の機能とメリット

Web開発者にとってのCompariumの主なメリットは、ビジュアル検証の精度向上とモバイル版対応です。デバイスサイズを500pxまで縮小して確認できる点も魅力です。さらに、自動的な非互換性を検出するオフラインレポート機能や、Linux上の各種ブラウザで使える重要な「ライブテスト」機能も備えています。Windows 7とmacOS Catalinaへのライブテスト対応も近いうちにロールアウト予定とのことです。

ライブテストモードを使えば、Webサイトのレスポンシブ対応状況をリアルタイムで分析できます。前述の比較ツールによるビジュアルチェックで明確なエラーの傾向をつかんだあと、ライブテストで実際の環境下での動作を検証することで、公開準備の整ったサイトへと仕上げられます。

Compariumのロードマップには、一括URLテスト、内部テスト、さまざまなアスペクト比への対応、低速回線のエミュレーションなど、多くの新機能が予定されています。他社のクロスブラウザテストツールと機能面を比較しても、Webサイトのエラー検出を自動化できる点でCompariumはかなり高い評価を得られるでしょう。

一方で、いくつかの小さな欠点もあります。現時点ではWindows 10でのスクリーンショット撮影に対応していませんが、開発チームによるとこれはロードマップにしっかり含まれているとのことです。また、SlimjetやYandexなどのブラウザには未対応です。ただし、現行の対応ブラウザだけでも、さまざまなデバイスやOSでの表示を十分シミュレートできます。

料金プランの詳細

先に触れたとおり、Compariumには無料の「ゲスト」モードと、月額15ドルの有料「Pro」モードがあります。ゲストプランとProプランの詳細な比較は公式ページで確認できます。

無料のゲストアカウントでは、Windows 7向けFirefox 75やChrome 81など一部のブラウザのみ使用でき、画面解像度も1024pxに制限されます。ただし、ライブテストの時間やスクリーンショットの枚数に制限がないのは嬉しいポイントです。制限範囲内であれば何度でもテストできるため、安心してProプランへの移行を検討できます。今後も魅力的な機能が追加されるロードマップを考えると、Webサイトの成長に合わせてこのソリューションも一緒にスケールしていけるでしょう。

総評

今日において、エンドユーザーの多様な好み、画面サイズ、ブラウザ環境に配慮せずにWebサイトを公開することはもはや考えられません。Compariumは、現実の環境を模擬したうえでWebサイトのレスポンシブ対応度を測定するうえで期待を裏切らない有望なツールです。今後追加予定の多彩な機能も踏まえると、Web開発者にとって心強いクロステストツールとなることでしょう。