レスポンシブの確認がこれで快適に!複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App

レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です!

Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。
無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです!

レスポンシブの確認に便利なツール「Responsively App」

Responsively App
Responsively App -GitHub

Responsively Appの特徴

Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。

  • ユーザーインタラクションは、すべてのデバイス間でミラーリングされます。
  • すべてのニーズに合わせてカスタマイズ可能なプレビューのレイアウト。
  • プレビュー中のすべてのデバイス用の要素インスペクタ。
  • 30種類以上のデバイスに加えて、カスタムサイズも可能。
  • すべてのデバイスは、1クリックでスクリーンショット可能。
  • ホットリロードのサポート。
  • GNU Affero General Public License v3.0で、商用プロジェクトでも無料で利用できます。

Responsively Appの実際の動作をご覧ください。
すべてのデバイスでインタラクションがミラーリングされます。

ミラーリング

すべてのデバイスで、インスペクタを使用できます。

インスペクタ

スクリーンショットもすべてのデバイスで可能です。

スクリーンショット

Responsively Appのダウンロード

ダウンロードは、下記ページから。

サイトのキャプチャ

Releases -Responsively App

Windows用の.exe、macOS用の.dmgが揃っています。.zipファイルをダウンロードすると、解凍してすぐに使用できます。

Responsively Appの使い方

Responsively Appの使い方は、簡単です。
アドレスバーに表示したいページを入力します。

Responsively Appのキャプチャ

当ブログをResponsively Appで表示

レイアウトは自由に変更できます。

Responsively Appのキャプチャ

プレビューのカスタマイズ

レイアウト方法やデバイスのフィルター機能も備えています。

Responsively Appのキャプチャ

プレビューのカスタマイズ

デバイスの追加も簡単、「Active Devices」にドロップするだけです。

Responsively Appのキャプチャ

デバイスの追加

iPad Proを追加してみました。

Responsively Appのキャプチャ

デバイスの追加

右上にあるツールは左から、ライト・ダークモードの切り替え、スクロールダウン、スクロールアップ、スクリーンショット、デバイスの向き変更、インスペクタ、ズームです。

Responsively Appのキャプチャ

右上のツールが便利

CSSのprefers-color-schemeで実装されたライトモード・ダークモードの表示にも対応しています。
参考: CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点

Responsively Appのキャプチャ

ライト・ダークモードの切り替え
表示サイト: Tom Brow

sponsors

top of page

©2020 coliss