最近のウェブデザインでは、あらゆる画面サイズに対応するレスポンシブレイアウトが必須となっています。デスクトップでは問題ないように見えても、モバイル端末から閲覧するとユーザビリティの問題点が見つかることもしばしば。
今回は、無料なのはもちろん操作に迷わず手軽にレスポンシブデザインを検証できるオンラインツールをまとめてご紹介します。多くのツールで、画面サイズごとにまとめてレイアウトを確認できるなど、ウェブ制作が捗るものばかりです。
詳細は以下から。
レスポンシブレイアウトを手軽に検証できる無料デザインツールまとめ
お好みの画面サイズを設定し、ウェブサイトのURLを入力するだけで、まとめてレイアウトを確認できるオンラインツール。ドロップダウンから特定の端末サイズを指定することもでき、幅広いセレクションが揃います。
上記ツールに似たものとして、Responsinatorもオススメです。こちらでは各デバイスごとにスクロールしながらレイアウトを確認でき、対応している端末もiPhoneやAndroidなどはもちろん、縦横置きによるチェックも可能。
特定の画面サイズで手早くレスポンシブレイアウトを確認したい時は、Responsive Design Checkerを使ってみましょう。URLを入力するだけでサイトの高さや幅や高さをお好みで調整しながらチェックできます。小さなMacBookの画面スクリーンで、1920pxなど広いサイズの確認に困っている人にオススメです。
Googleはウェブ開発者の役に立つツールをたくさん公開していますが、Mobile-Friendly Testもその一つと言えるでしょう。このツールはプレビューができたり、UIのバグ修正を行うことはできませんが、モバイル端末における問題をピンポイントに指摘してくれます。
URLを入力すると、そのサイトがモバイルフレンドリーかどうか教えてくれ、修正が必要な部分を一発で確認できます。
Matt Kersley’s Responsive Tool
デザイナーでデベロッパーのMatt Kersleyがリリースしたレスポンシブレイアウト検証無料ツール。他のツールに比べると遥かにシンプルで、モバイルやタブレット、デスクトップなどをプレビューできます。
ただし、プレビュー内のリンクなどは一切クリックできないので、ページ単体によるレイアウト検証が必要なときに役立つツールです。
ピクセル単位の正確さが求められる案件では、あまり役立たたないかもしれないツールです。その代わりに、URLを入力するだけで、複数の画面スクリーンサイズを確認でき、スクリーンショットもまとめて保存できます。
人気デザインブログDesignModoが作成したレイアウト検証ツール Responsive Web Design Tester。こちらもブラウザのサイズに応じたサイトプレビューを確認できます。
このツールの優れている点は、グリッドベースでページ検証ができる点です。ナビメニューに表示されているアイコンをクリックすると、豊富に揃った端末の画面サイズでプレビュー確認もできます。
URLを入力するだけで、スマートフォンやタブレット、ノートパソコン、デスクトップで閲覧した状態のスクリーンショットをまとめて撮影、保存できるウェブサービス。レイアウト検証の最終確認にも便利で、URL入力だけのお手軽さも◎。
参照元リンク : 7 Free Tools For Testing Responsive Layouts – Webdesigner Depot
