はじめに
レスポンシブデザインの確認、どうやっていますか。ブラウザのDevToolsでビューポート幅を切り替えながら、スマホサイズ、タブレットサイズ、デスクトップサイズ……と何度もリサイズを繰り返す。1箇所直しては確認し、また別のブレークポイントで崩れていないか見直す。この作業、地味に時間を食います。
Responsivelyは、この「何度もリサイズする」作業そのものをなくしてくれるツールです。複数のデバイスサイズを1つのウィンドウに並べて同時表示し、しかもスクロールやクリックといった操作をすべてのデバイスに同期させてくれます。今回はそんなResponsivelyの特徴と使い方を紹介します。
Responsivelyとは
Responsivelyは、レスポンシブWeb開発に特化した改造版ブラウザです。Electronベースで作られており、Chromiumの表示エンジンをそのまま使いながら、複数デバイスのプレビューに最適化されたUIを備えています。オープンソース（AGPLライセンス）で、Windows・macOS・Linuxのいずれでも無料で利用できます。
主な特徴
- 全デバイス間でのユーザー操作の同期 - あるデバイスでスクロールやクリック、フォーム入力をすると、他のすべてのデバイスプレビューにも同じ操作が反映されます
- 30以上の組み込みデバイスプロファイル - iPhoneやiPad、Androidの主要機種、デスクトップの代表的な解像度が最初から用意されており、カスタムデバイスの追加も可能です
- Unified Inspector（統合インスペクタ） - 1つの要素にカーソルを合わせるだけで、全デバイスの該当箇所を同時にハイライト・検証できます
- ワンクリックスクリーンショット - 表示中のすべてのデバイスのスクリーンショットを一括で撮影できます
- カラーブラインドネスシミュレーション - 色覚特性（1型・2型・3型色覚など）をシミュレートし、アクセシビリティの検証にも使えます
- デザインオーバーレイ - Figmaなどで作成したモックアップ画像を透過レイヤーとして重ね、実装とデザインのズレをドラッグ操作で比較できます
インストール
Responsivelyはデスクトップアプリケーションなので、npmではなく各OSのパッケージマネージャーやインストーラーから導入します。
macOS（Homebrew）
brew install --cask responsively
Windows（winget）
winget install ResponsivelyApp
Windows（Chocolatey）
choco install responsively
Linux（RPM）
sudo rpm -i https://github.com/responsively-org/responsively-app/releases/download/v1.18.0/Responsively-App-1.18.0.x86_64.rpm
Linuxの場合はAppImage形式も公式リリースページから取得できます。パッケージマネージャーを使わない場合は、responsively.appから各OS向けのインストーラーを直接ダウンロードすることも可能です。
基本的な使い方
インストールが終わったら、起動して確認したいURLをアドレスバーに入力するだけです。
1. Responsivelyを起動する
2. アドレスバーに確認したいURL（例: http://localhost:3000）を入力
3. 画面下部または右側のデバイスリストから、確認したいデバイスにチェックを入れる
4. 選択したデバイスのプレビューが横並びで表示される
ローカル開発中のNext.jsやViteのプロジェクトであれば、開発サーバーを立ち上げた状態でそのURLを開くだけで、ホットリロードにもそのまま対応します。
# 例: Viteプロジェクトの開発サーバーを起動
npm run dev
# 開発サーバー起動後、Responsivelyのアドレスバーに以下を入力
http://localhost:5173
コードを保存すると、Responsively上のすべてのデバイスプレビューが自動的にリロードされ、レイアウト崩れをその場で確認できます。
要素を検証したいときは Cmd/Ctrl + I でUnified Inspectorを有効にし、任意の要素にカーソルを合わせます。すべてのデバイスの対応箇所が同時にハイライトされるので、「スマホでは崩れているのにデスクトップでは問題ない」といった差分に気づきやすくなります。
実践的なユースケース
レビュー用スクリーンショットの一括生成
PRのレビュー依頼やデザイナーへの確認依頼では、「スマホ・タブレット・デスクトップでの見た目」を一枚一枚キャプチャして貼り付ける作業が発生しがちです。Responsivelyならツールバーのスクリーンショットボタン1つで、表示中の全デバイス分の画像をまとめて書き出せるため、この作業がワンアクションで完了します。
Preview Suit（デバイスの組み合わせ保存）でのチーム標準化
プロジェクトごとに「確認すべきデバイスの組み合わせ」をPreview Suitとして保存しておけば、チームメンバー間で確認基準を統一できます。例えばECサイトなら「iPhone SE・iPad・1440px幅のデスクトップ」の組み合わせを保存しておき、毎回同じ観点でチェックできるようにする、といった使い方です。
デザインカンプとの差分チェック
デザインオーバーレイ機能を使えば、Figmaで書き出したモックアップ画像をブラウザ上の実装に重ね、クリップディバイダーをドラッグしながらピクセル単位でズレを確認できます。「コーディング後にデザイナーからNGが出て手戻りが発生する」というよくある問題を、実装段階で先回りして防げます。
まとめ
Responsivelyは、DevToolsでのリサイズ確認を繰り返す代わりに、複数デバイスを同時に並べて操作まで同期できる開発者向けブラウザです。Unified Inspectorによる横断的な要素検証、ワンクリックスクリーンショット、カラーブラインドネスシミュレーションなど、レスポンシブ開発の細かな手間を減らす機能が詰まっています。
まずは自分の開発中のプロジェクトをResponsivelyで開いてみて、いつも確認しているブレークポイントをPreview Suitとして保存するところから試してみてください。