レスポンスレイアウトをテストするための7つのフリーツール

1. XRESPOND

XRespondアプリは、「仮想デバイスラボ」自体を呼び出して、さまざまなデバイスでウェブサイトがどのように見えるかをプレビューできます。このサイトは水平のスタイルで動作し、すべてのスクリーンフォーマットを見るために横にスクロールする必要があります。

各画面の上のラベルには、正確なサイズと一致するデバイスが表示されます。さらに、ドロップダウンメニューからは、特定のデバイスをテストするためのスマートフォン、タブレット、ラップトップの幅広い選択肢があります。

サイトが特定のモニターにどのように表示されるかを確認したい場合は、カスタムの幅/高さのドロップダウンで設定します。

同様のアプリは Responsinatorです。

水平スクロールバーの代わりに、このサイトでは各デバイスのプレビューが縦の列で表示されます。スクロールダウンし、それぞれのデバイスでサイトをプレビューできます。

デバイスには、最も一般的なiPhoneとAndroid Nexusデバイスが含まれ、どちらもポートレイトプレビューとランドスケーププレビューがあります。また、iPadデバイスのプレビューもポートレートとランドスケープで表示されます。

もう一つの素晴らしい機能は、HTTPとHTTPSの切り替えです。Responsinatorは、入力したURLに応じてサイトをプレビューします。SSLエラーを避けるため、プレビューしているサイトに自動的に一致します。

カスタムスクリーンサイズ用に作られたこのレスポンシブデザインチェッカーを試してみてください。

URLを入力すると、応答可能なテストスペースを完全に制御できます。アスペクト比ツールで幅と高さを変更することもできますし、特定の画面比率に合わせることもできます。

サイドバーには、Nexus タブレット、Kindlesなどの一般的な端末、Google Pixelなどの新しい端末も、あらかじめ定義された画面サイズがあります。

このサイトでは、最大24インチのデスクトップモニタを備えた大画面サイズもサポートしています。驚いたことに、これらの大きなサイズは、プレビューウィンドウが合計ピクセル幅ではなく、比率に基づいてサイズ変更されるため、小さなモニタでもうまく機能します。

したがって、あなたの小さなMacBook画面で1920ピクセルのモニターをテストするのに苦労しているなら、このツールはブックマークに値する価値があります。

Googleはウェブマスター向けに優れたツールを提供しており、モバイルフレンドリーテストはその一例です。

このテストツールはプレビューアではなく、UIのバグを発見するのに役立ちません。代わりに、モバイル上のサイト内の問題を特定するための専用のモバイルツールです。

テストが実行されると、モバイルフレンドリーなサイトとして合格か失敗かが判定されます。Googleは改善について問題領域とページ要素に基づいたヒントを提供します。

レスポンシブルなテストのための完全なリソースではありませんが、情報を収集するのに最適です。

デザイナー＆開発者の Matt Kersley氏は、レスポンシブなレイアウトのための独自の無料テストツールをリリースしました。これは他のものよりもずっと簡単です。

5つの固定幅：240px、320px、480px、768px、1024pxを持つプレーンなインラインサイトプレビューアです。

プレビューペインにはスクロールバーがあり、コンテンツを楽に移動することができます。しかし、リンクをクリックしたりペイン内の他のページをブラウズすることはできません。したがって、これは本当に特異なページをテストするものです。

デフォルトで240pxの幅を提供する数少ないテストツールの1つです。

ピクセル完全精度を求めているなら、おそらくこのツールは必要ありません。

私は敏感ですか？ウェブサイトは、いくつかの一般的なデバイスタイプの迅速な確認とプレビューに最適です。

WebサイトのURLを入力するだけで、スマートフォン、タブレット、ラップトップ、デスクトップの4つのデバイスプレビューペインに読み込まれます。これらは、サイトを見ているように拡張します。

サイトのスクリーンショットをつかんで、さまざまなデバイスでどのように見えるかを紹介するのに良いです。レンダリングは正確な縮尺で行われ、適切なレンダリングはブラウザに依存します。

さらに、このツールを使用するとローカルホストのアドレスを実行できるため、コンピュータ上にローカルで構築しているプロジェクトをチェックすることができます。

Designmodoが作成した Responsive Web Design Tester。このフリーツールを使用すると、特定の幅に基づいてブラウザ内のサイトをプレビューすることができます。

ページでピクセルポイントを確認したり、このWebアプリケーションを使ってページのグリッドを調べたりすることもできます。

あらかじめ定義されたデバイスの幅の他に、プレビューウィンドウをドラッグして、テストしている画面幅に合わせることもできます。手動でサイズを入力する場合は、幅/高さの入力します。

右上隅の各デバイスアイコンを使用すると、数十の一般的な画面サイズの中から選択して、デバイスをチェックできます。