ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はレスポンシブ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

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch