最近はレスポンシブWebデザインを使うケースも増えてきましたが、面倒なのはデザインの確認ですよね。幅を変更してちゃんと適切に表示されているか確認したり、複数のデバイスを使って表示を適宜確認しなければなりません。 そこで使ってみて欲しいのがChameleonというGoogle Chrome機能拡張です。多数の画面幅でのデザイン確認を一気にできます。

Chameleonの使い方

ChameleonはGoogle Chromeのツールバーにインストールされます。そしてデザインを確認したいWebサイトでボタンを押します。

Chameleonはボタンを押すだけで一気に4デバイスの確認ができます。iPhone 4/iPhone 5/HTC One/iPad miniの4つになります。後は普段のデスクトップで確認すれば、レスポンシブWebデザインでの大半のデバイスでは問題ないと言えるのではないでしょうか。

ChameleonはGoogle Chrome用のオープンソース・ソフトウェア（MIT License）です。

Chameleon - Simple responsive website testing. Chameleon - Chrome ウェブストア stefanRitter/chameleon