レスポンシブデザインの確認に便利なツールが登場!複数のデバイスサイズで同時確認できる優れもの -Responsivize
Post on:2021年9月1日
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました!
iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。
Windows, macOS, Linux対応のアプリで、しかもオープンソースです!
![レスポンシブの確認が簡単にできる無料ツール -Responsivize](http://coliss.com/wp-content/uploads-202103/2021082810@2x.png)
Responsivize
Responsivize -GitHub
Responsivizeの特徴
Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです!
当方の日本語環境(M1 Mac, Windows10)で問題なく動作しました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-00.png)
- レスポンシブWebサイトの確認が簡単にできるクロスプラットフォームのデスクトップアプリ。
- iPhone, Androidなどのスマホをはじめ、タブレット、ノートブック、ラップトップの各スクリーンサイズでWebページを表示できます。
- スクリーンサイズは、任意のサイズにすることもできます。
- Windows, macOS, Linuxで動作します。
- MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
Responsivizeのダウンロード
Responsivizeのダウンロードは、下記ページから。
ダウンロードしたファイルを解凍し、インストーラーをダブルクリックするとインストールできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-00.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-00.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-00.png)
各OS用のファイルが用意されています。
- macOS
- Windows
- Linux
※M1 Macでも問題なく動作しました。
Responsivizeの使い方
Responsivizeの使い方は、簡単です。
まずは、Responsivizeを起動します。
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-01.png)
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-01.png)
Responsivize: 起動画面
最初に、どのデバイスで確認するかを選択します。
- Phones
- Tablets
- Laptops
- Custom Size
まずは、スマホ用の「Phones」をクリックしてみました。
iPhone, Android, Pixelがデフォルトで用意されています。
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-02.png)
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-02.png)
Responsivize: 当ブログをスマホサイズで確認
続いて、タブレットでの確認。
iPad Pro, iPad miniがデフォルトで用意されています。
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-03.png)
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-03.png)
Responsivize: 当ブログをタブレットサイズで確認
続いて、ラップトップでの確認。
MacBook Pro, MacBook Airがデフォルトで用意されています。
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-04.png)
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-04.png)
Responsivize: 当ブログをラップトップサイズで確認
最後は、カスタムサイズでの確認。
ワイドスクリーンから冷蔵庫の極小サイズまで、数値で指定できます。
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-05.png)
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-05.png)
Responsivize: 当ブログをカスタムサイズで確認
デベロッパーツールを起動することも可能で、上部のメニューから起動します。
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-06.png)
![Responsivizeのキャプチャ](http://coliss.com/wp-content/uploads-202103/2021082811-06.png)
Responsivize: デベロッパーツールの起動
sponsors