レスポンシブの表示確認ツール「ResponsivelyApp」

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. レスポンシブの表示確認ツール「ResponsivelyApp」

レスポンシブの表示確認ツール「ResponsivelyApp」

レスポンシブの表示確認ツール「ResponsivelyApp」

サイトのレスポンシブ表示の確認は何を使っているでしょうか?

ChromeやSafariなどのブラウザ開発ツールや実機を使って確認すると思いますが、様々のモニターサイズやデバイスをまとめてチェックできる便利なツール「ResponsivelyApp」を紹介したいと思います。

ResponsivelyAppをダウンロード

ResponsivelyAppはレスポンシブ表示をチェックするためのアプリケーションでMac/Windows/Linuxで利用できます。

ダウンロードはこちら

ResponsivelyAppの特徴

ResponsivelyAppはサイト表示を確認するためのWeb開発者向けのアプリケーションです。

さまざまなデバイスやモニターサイズの表示を一度に確認できる

上記キャプチャのようにさまざなサイズのモバイルやモニターの表示確認が同時に行えます。モバイルやタブレットはiPhone6/7/8やiPhone Xなどのサイズがデフォルトで登録されいます。また縦向き横向きも変更できます。
モニターも縦横のサイズを自由に設定し追加することも可能なので、確認したいデバイスやモニターを自由に組み合わせて確認できます。

個別/全デバイスのスクリーンショットが可能

デバイスサイズごと、または全デバイス一括でスクリーンショットを撮ることができます。修正指示を出すときに簡単にキャプチャを取って指示を出せます。

スクリーンショットは画面に表示している範囲とページ全範囲とキャプチャが可能です。

開発用のインスペクタでCSSやJSを確認できる

Chromeと同じようにインスペクタでCSSやJSのコンソールを確認できます。表示が崩れているデバイスがあれば個別にインスペクタを表示できるので調整がしやすくなります。


その他、

  • ページのブックマーク
  • キャッシュ・クッキーの削除
  • 音声のミュート/アンミュート
  • ダークモードの切替
  • Chrome拡張機能の追加(制限あり)
  • 通信速度の設定

など、細かい部分もフォローしてくれる機能もついています。

ResponsivelyAppの使い方

アドレスバーにURLを入力してページを表示

まずアプリを起動したらデフォルトでデバイスが登録されているので、アドレスバーにURLを入力するだけにすぐにページの表示確認ができます。
また、ページ遷移やスクロールなど、1つのデバイスを操作するとすべてのデバイスが同期して動きます。

デバイスの追加/削除

デフォルトで登録されている以外のデバイスの追加や削除は、左メニューの「DEVICES」の「Customize」ボタンからドラッグ&ドロップで行えます。

やっぱり最後は実機確認は必要

これだけ多機能で便利なアプリですが、ブラウザのレンダリングエンジンやシステムフォントは実機とは違うため、最終チェックには使えません。
あくまで開発時の効率化のために使うようにしましょう。

Chromeなどのインスペクタで確認するより素早く多くのデバイスで表示確認がおこなえるので、インスペクタで表示確認している開発者の方は一度試してみてはいかがでしょうか。

前後の記事

リモートワークで需要が高まったタブレット端末。Apple製品マニアの私のおすすめiPadはどれだ?

こんにちは。横山です。 最近また新型コロナウイルスが広がっていますね。 もうリモートワークも珍しくなくなってきた感じがします。 アウラでも先月中旬から、再び一部リモートワークを取り入れております。 そ…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら