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