レスポンシブデザインの確認に便利なツールが登場!複数のデバイスサイズで同時確認できる優れもの -Responsivize

Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました!

iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。
Windows, macOS, Linux対応のアプリで、しかもオープンソースです!

レスポンシブの確認が簡単にできる無料ツール -Responsivize

Responsivize
Responsivize -GitHub

Responsivizeの特徴

Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです!
当方の日本語環境(M1 Mac, Windows10)で問題なく動作しました。

サイトのキャプチャ

Responsivize

  • レスポンシブWebサイトの確認が簡単にできるクロスプラットフォームのデスクトップアプリ。
  • iPhone, Androidなどのスマホをはじめ、タブレット、ノートブック、ラップトップの各スクリーンサイズでWebページを表示できます。
  • スクリーンサイズは、任意のサイズにすることもできます。
  • Windows, macOS, Linuxで動作します。
  • MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

Responsivizeのダウンロード

Responsivizeのダウンロードは、下記ページから。
ダウンロードしたファイルを解凍し、インストーラーをダブルクリックするとインストールできます。

サイトのキャプチャ

Responsivize

各OS用のファイルが用意されています。

  • macOS
  • Windows
  • Linux

※M1 Macでも問題なく動作しました。

Responsivizeの使い方

Responsivizeの使い方は、簡単です。
まずは、Responsivizeを起動します。

Responsivizeのキャプチャ

Responsivize: 起動画面

最初に、どのデバイスで確認するかを選択します。

  • Phones
  • Tablets
  • Laptops
  • Custom Size

まずは、スマホ用の「Phones」をクリックしてみました。
iPhone, Android, Pixelがデフォルトで用意されています。

Responsivizeのキャプチャ

Responsivize: 当ブログをスマホサイズで確認

続いて、タブレットでの確認。
iPad Pro, iPad miniがデフォルトで用意されています。

Responsivizeのキャプチャ

Responsivize: 当ブログをタブレットサイズで確認

続いて、ラップトップでの確認。
MacBook Pro, MacBook Airがデフォルトで用意されています。

Responsivizeのキャプチャ

Responsivize: 当ブログをラップトップサイズで確認

最後は、カスタムサイズでの確認。
ワイドスクリーンから冷蔵庫の極小サイズまで、数値で指定できます。

Responsivizeのキャプチャ

Responsivize: 当ブログをカスタムサイズで確認

デベロッパーツールを起動することも可能で、上部のメニューから起動します。

Responsivizeのキャプチャ

Responsivize: デベロッパーツールの起動

sponsors

top of page

©2024 coliss