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の選択 | 不可 |
| タイプ | ブラウザ型 |
| 並べて比較 | 不可 |
| 価格 | 無料～ |
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～（無料はトライアルだけ) |
Browsera
いろいろなブラウザのバージョンでの表示を一覧で見れるので容易に比較することが可能です。 無料版では使用できるブラウザが限られています。IEは８まで、Safariも4までなので開発は止まっているのかもしれません。
| 対応ブラウザ | IE,Safari,Firefox |
| モバイル | 不可 |
| OSの選択 | 不可 |
| タイプ | ブラウザ型 |
| 並べて比較 | 可 |
| 価格 | 無料～ |
IEだけをチェックできるツール
IETester
IE5.5～最新までのバージョンをテストできるクロスブラウザテスト用のツールです。 無料で特に登録などもいらないので手軽に使えます。 IEの古いバージョンだけチェックしたい場合に有効です。
| 対応ブラウザ | IE5.5～ |
| モバイル | 不可 |
| OSの選択 | 不可 |
| タイプ | ソフトインストール型 |
| 並べて比較 | 不可 |
| 価格 | 無料 |
IEの開発者ツール
なにかと問題の多いIEの古いバージョンだけを確認できればいいという場合には、今インストールされているIEの開発者ツールで 古いバージョンのIEの確認が可能です。 使用方法は、IEを起動してF12キーを押すだけです。 エミュレータの使い方は、以下のリンク先のサイドの方で解説されています。
| 対応ブラウザ | IE |
| モバイル | 不可 |
| OSの選択 | 不可 |
| タイプ | ブラウザ型 |
| 並べて比較 | 不可 |
| 価格 | 無料 |
スクリーンショットでサイトを確認するツール
BrowserShots
チェックしたいブラウザでのサイトの見え方をスクリーンショットで表示してくれるクロスブラウザサービスです。 指定した１ページだけの見た目をチェックするだけでいい場合に使えます。 Linux系のブラウザに多く対応しています。
| 対応ブラウザ | Chrome,Safari,Opera,Firefox,Seamonkey,Iceape |
| モバイル | 可 |
| OSの選択 | 可 |
| タイプ | ブラウザ型 |
| 並べて比較 | 不可 |
| 価格 | $12～（無料はトライアルだけ) |
http://browsershots.org
netrenderer
URLを入力して「Render」ボタンを押すことで、指定したブラウザのスクリーンショットが表示されるクロスブラウザテストサービスです。 IEしかできませんが、インストールなどの面倒な手続きが不要のため、とりあえずページの見た目を確認したい場合に気軽にチェックできます。
| 対応ブラウザ | IE5.5～ |
| モバイル | 不可 |
| OSの選択 | 不可 |
| タイプ | ブラウザ型 |
| 並べて比較 | 不可 |
| 価格 | 無料 |