IT情報局

Webサイトのブラウザチェック方法まとめ 【クロスブラウザテスト】


Webサイトを作成したときに、別のブラウザで確認すること(クロスブラウザテスト)はとても重要です。今は違いが少なくなってきましたが、特にIEとFireFoxやchrome、Operaなどの別のブラウザでは見た目がくずれてしまうことは多いです。

自分のもっているパソコンにブラウザをインストールしてチェックするまではできますが、過去のブラウザは一度アンインストールして古いブラウザのインストールプログラムを探して…とかなり大変な作業になってしまいます。

ここでは、自分のパソコンで他のOSやバージョンの異なるブラウザまでチェックできてしまう無料のソフトやクロスブラウザチェックができるサイトを紹介します。一部有料なものや、特定のブラウザだけしか使えないなどいろいろ制限がありますので予算や手間をかけられる時間、目的にあったツールを探してみてください。




 

主要なブラウザがチェックできるサイト一覧

以下のチェックツールには、ソフトをインストールするものやブラウザだけで完結できるもの、有料のものなど さまざまなものがあります。各サイトの最後に表でチェック項目をまとめましたので、目的や労力、コストに合わせて最適なものを選んでください。

SPOON.NET

独自のソフトをインストールすることで、いろいろなブラウザを起動することができるようになります。 サイトの動きなどがリンク先へ移動しても自由に見れるので、概観だけでなく細かくサイトの動きをチェックしたい場合にいいでしょう。無料で使用できるのは、各ブラウザの最新版だけです。 有料のオプションで古いバージョンのブラウザも使えるようになります。

対応ブラウザ IE,Chrome.FireFox,Opera,safari
モバイル
OSの選択 不可
タイプ ソフトインストール型
並べて比較 不可
価格 無料~

http://spoon.net

browserling

ブラウザ上でURLと対象のブラウザ、バージョンを選ぶとバーチャルで起動します。 単純な分使いやすいですが、日本語フォントが十分にないため代替フォントで表示されてしまいます。 有料のプランにすると、選択できるブラウザのバージョンが増えます。Windows10やMicrosoft Edgeのブラウザも使うこともできるようです。

対応ブラウザ IE,Chrome,Safari,Firefox,Opera
モバイル 不可
OSの選択 不可
タイプ ブラウザ型
並べて比較 不可
価格 無料~

http://browserling.com

CrossBrowserTesting

有料のサービスだけあって機能はすごく充実しています。 OSをMaxやLinuxにして選べるブラウザもほぼすべてのブラウザをカバーしています。 ただ、残念なことにエミュレートしたブラウザの日本語が文字化けしていましたので日本語対応ができていないようです。Windows10やMiacrosoft Edgeにも対応しています。

対応ブラウザ IE,Chrome,Safari,Opera,Firefox
モバイル 不可
OSの選択
タイプ ブラウザ型
並べて比較 不可
価格 無料

http://crossbrowsertesting.com

Multi-Browser VIEWER

有料のサービスで、専用のソフトをインストールして使用します。 MaxやLinuxのOS切り替えができるので、Mac上のSafariでチェックするなどの細かい環境の違いを確認することも可能です。 ブラウザもほぼすべての主要ブラウザをカバーしています。

対応ブラウザ IE,Safari,Chrome,Firefox,Opera,Seamonkey
モバイル
OSの選択
タイプ ソフトインストール型
並べて比較
価格 $139.95~(トライアルは無料)

http://www.multibrowserviewer.com

sauce LABS

有料のテストツールですが、クロスブラウザテストやモバイルテストを自動化することができます。 もちろん手動でテストすることも可能です。 レイアウトの確認というよりは、Webアプリの挙動を別のブラウザでテストするなどの用途に向いています。

対応ブラウザ IE,Chrome,Safari,Opera,Firefox
モバイル
OSの選択
タイプ ブラウザ型
並べて比較 不可
価格 $12~(無料はトライアルだけ)

http://saucelabs.com

Browsera

いろいろなブラウザのバージョンでの表示を一覧で見れるので容易に比較することが可能です。 無料版では使用できるブラウザが限られています。IEは8まで、Safariも4までなので開発は止まっているのかもしれません。

対応ブラウザ IE,Safari,Firefox
モバイル 不可
OSの選択 不可
タイプ ブラウザ型
並べて比較
価格 無料~

http://www.browsera.com

 

IEだけをチェックできるツール

IETester

IE5.5~最新までのバージョンをテストできるクロスブラウザテスト用のツールです。 無料で特に登録などもいらないので手軽に使えます。 IEの古いバージョンだけチェックしたい場合に有効です。

対応ブラウザ IE5.5~
モバイル 不可
OSの選択 不可
タイプ ソフトインストール型
並べて比較 不可
価格 無料

http://www.my-debugbar.com

IEの開発者ツール

なにかと問題の多いIEの古いバージョンだけを確認できればいいという場合には、今インストールされているIEの開発者ツールで 古いバージョンのIEの確認が可能です。 使用方法は、IEを起動してF12キーを押すだけです。 エミュレータの使い方は、以下のリンク先のサイドの方で解説されています。

対応ブラウザ IE
モバイル 不可
OSの選択 不可
タイプ ブラウザ型
並べて比較 不可
価格 無料

http://msdn.microsoft.com

 

スクリーンショットでサイトを確認するツール

BrowserShots

チェックしたいブラウザでのサイトの見え方をスクリーンショットで表示してくれるクロスブラウザサービスです。 指定した1ページだけの見た目をチェックするだけでいい場合に使えます。 Linux系のブラウザに多く対応しています。

対応ブラウザ Chrome,Safari,Opera,Firefox,Seamonkey,Iceape
モバイル
OSの選択
タイプ ブラウザ型
並べて比較 不可
価格 $12~(無料はトライアルだけ)

http://browsershots.org

netrenderer

URLを入力して「Render」ボタンを押すことで、指定したブラウザのスクリーンショットが表示されるクロスブラウザテストサービスです。 IEしかできませんが、インストールなどの面倒な手続きが不要のため、とりあえずページの見た目を確認したい場合に気軽にチェックできます。

対応ブラウザ IE5.5~
モバイル 不可
OSの選択 不可
タイプ ブラウザ型
並べて比較 不可
価格 無料

http://netrenderer.com



キーワード