Advertisement

featured_rwd

 

最近のウェブデザインでは、あらゆる画面サイズに対応するレスポンシブレイアウトが必須となっています。デスクトップでは問題ないように見えても、モバイル端末から閲覧するとユーザビリティの問題点が見つかることもしばしば。

 

今回は、無料なのはもちろん操作に迷わず手軽にレスポンシブデザインを検証できるオンラインツールをまとめてご紹介します。多くのツールで、画面サイズごとにまとめてレイアウトを確認できるなど、ウェブ制作が捗るものばかりです。

 

 

詳細は以下から。

 

 

レスポンシブレイアウトを手軽に検証できる無料デザインツールまとめ

 

XRespond

お好みの画面サイズを設定し、ウェブサイトのURLを入力するだけで、まとめてレイアウトを確認できるオンラインツール。ドロップダウンから特定の端末サイズを指定することもでき、幅広いセレクションが揃います。

01-xrespond-responsive-testing-tools

 

 

 

Responsinator

上記ツールに似たものとして、Responsinatorもオススメです。こちらでは各デバイスごとにスクロールしながらレイアウトを確認でき、対応している端末もiPhoneやAndroidなどはもちろん、縦横置きによるチェックも可能。

02-responsinator-tool

 

 

 

Responsive Design Checker

特定の画面サイズで手早くレスポンシブレイアウトを確認したい時は、Responsive Design Checkerを使ってみましょう。URLを入力するだけでサイトの高さや幅や高さをお好みで調整しながらチェックできます。小さなMacBookの画面スクリーンで、1920pxなど広いサイズの確認に困っている人にオススメです。

03-responsive-design-checker

 

 

 

Google Mobile Test

Googleはウェブ開発者の役に立つツールをたくさん公開していますが、Mobile-Friendly Testもその一つと言えるでしょう。このツールはプレビューができたり、UIのバグ修正を行うことはできませんが、モバイル端末における問題をピンポイントに指摘してくれます。

 

URLを入力すると、そのサイトがモバイルフレンドリーかどうか教えてくれ、修正が必要な部分を一発で確認できます。

04-webdesignerdepot-mobile-google-test

 

 

 

Matt Kersley’s Responsive Tool

デザイナーでデベロッパーのMatt Kersleyがリリースしたレスポンシブレイアウト検証無料ツール。他のツールに比べると遥かにシンプルで、モバイルやタブレット、デスクトップなどをプレビューできます。

 

ただし、プレビュー内のリンクなどは一切クリックできないので、ページ単体によるレイアウト検証が必要なときに役立つツールです。

05-matt-kersley-responsive-tool

 

 

 

Am I Responsive?

ピクセル単位の正確さが求められる案件では、あまり役立たたないかもしれないツールです。その代わりに、URLを入力するだけで、複数の画面スクリーンサイズを確認でき、スクリーンショットもまとめて保存できます。

06-ami-responsive-webapp

 

 

 

Designmodo Resoponsive Test

人気デザインブログDesignModoが作成したレイアウト検証ツール Responsive Web Design Tester。こちらもブラウザのサイズに応じたサイトプレビューを確認できます。

 

このツールの優れている点は、グリッドベースでページ検証ができる点です。ナビメニューに表示されているアイコンをクリックすると、豊富に揃った端末の画面サイズでプレビュー確認もできます。

07-designmodo-responsive-testing-tool

 

 

 

Responsive Screenshot

URLを入力するだけで、スマートフォンやタブレット、ノートパソコン、デスクトップで閲覧した状態のスクリーンショットをまとめて撮影、保存できるウェブサービス。レイアウト検証の最終確認にも便利で、URL入力だけのお手軽さも◎。

responsive-screenshot

 

 

参照元リンク : 7 Free Tools For Testing Responsive Layouts – Webdesigner Depot