Webサイトをレスポンシブデザインにして作成するときに必ずと言っていいほど確認が必要になるレスポンシブ確認。
Chromeの検証ツールでレスポンシブデザインにしたページを確認してばっかりだったので、Chromeの検証ツール以外で、レスポンシブデザインを確認できるいい感じのツールがないかを探して、いくつか使用してみました。
レスポンシブデザインを確認するツール
レスポンシブデザインを確認するツールをさがして使用してみたのは以下の3つです。
- Viewport Resizer
- Responsive Viewer
- responsively-app
Viewport ResizerとResponsive Viewerの2つは、GoogleのChromeで拡張機能に追加してレスポンシブデザインを確認することができるツールです。
responsively-appはPCのアプリとして使用することができるレスポンシブデザインの確認ツールです。
ローカルで作成したWebサイトのHTMLファイルをレスポンシブ確認することが多いので、使用してみたレスポンシブデザインの確認ツールを使うにあたっては、VS CodeのLiveServerを使用することでローカルファイルのレスポンシブ確認をしました。
Chromeに拡張するレスポンシブ確認ツール
Chromeに拡張して使用することができるViewport ResizerとResponsive Viewerの2つのレスポンシブ確認ツールは、Webサイトのレスポンシブデザインを確認するときに、確認したいデバイスサイズを1つずつ切り替えて確認するか、複数のデバイスサイズをまとめて確認するかの違いがあります。
Viewport Resizer
Chromeに拡張して使用するレスポンシブ確認ツール「Viewport Resizer」を使用する場合は、Chromeブラウザを開いて、以下のリンクからページを開き、お使いのChromeに拡張機能として追加できます。
Viewport Resizer – Responsive Testing Tool
Viewport ResizerをChromeの拡張機能に追加して使用してみたときの画像が以下の画像です。未完成すぎるWebサイトのレイアウトでレスポンシブ確認してみました。
Chromeの拡張機能にViewport Resizerを追加するとChrome画面右上の拡張メニューに長方形の白いアイコンが表示されます。このアイコンをクリックすると上の画像のようにレスポンシブデザインを確認するパネルが開きます。
Viewport Resizerを開いてサイトのレスポンシブデザインを確認したい場合は、パネルから各画面サイズのアイコンをクリックすることでWebページの画面サイズが選択したサイズに切り替わります。上の画像ではiPhone Xを選択しています。
任意の画面サイズにしてレスポンシブ確認したい場合は「customize」で縦横の画面サイズを入力します。
Chromeに拡張するレスポンシブ確認ツール「Viewport Resizer」を使用してみた感想は、Viewport Resizerのツールパネルが邪魔になることがないのが良いですし、レスポンシブ確認してるデバイスサイズのままChromeの検証ツールを開いてCSSでレイアウトを検証できるのも良い点でした。
Responsive Viewer
次のChromeに拡張するレスポンシブ確認ツールは「Responsive Viewer」です。
「Responsive Viewer」を使用する場合は、Chromeブラウザを開いて、以下のリンクでページを開いて、お使いのChromeに拡張機能として追加できます。
Chromeの拡張機能にResponsive Viewerを追加するとChrome画面右上の拡張メニューに黄色いアイコンが表示されます。この黄色いアイコンをクリックすると上の画像のようにレスポンシブデザインを確認するツール画面に切り替わります。
Responsive Viewerの画面左のメニューでレスポンシブの確認をしたい端末サイズから目玉みたいなアイコンをクリックすることで、選択した端末サイズのレスポンシブレイアウトが確認できます。複数選択可。
複数のデバイスサイズを選択できるため、一つの画面に異なるデバイスサイズを表示させてレスポンシブ確認ができます。
任意の画面サイズにしてレスポンシブ確認する場合は、Responsive Viewerの画面右上の＋アイコンで縦横の画面サイズを入力して追加できます。
Chromeに拡張するレスポンシブ確認ツールResponsive Viewerを使用してみたことで良いと思えたことは、レスポンシブにしたWebサイトのレイアウトを複数のデバイスサイズをまとめて確認ができることです。
PC画面ではレイアウト崩れなしだけど、スマホサイズの画面ではレイアウト崩れしてしまっている。などよくあることなので、複数のデバイスサイズを同時に確認できるレスポンシブデザイン確認ツールは、とても使いやすさを感じました。
ブラウザ対応が多めなレスポンシブ確認ツール
レスポンシブデザインを確認するツールとして、Chromeの拡張機能に追加して使用できる「Responsive Viewer」ですが、ブックマークして使うとChrome以外のブラウザでもレスポンシブ確認ができるので、ブラウザ対応が多めなレスポンシブ確認ツールを使いたい場合はおすすめです。
- Chrome
- Firefox
- Opera
- Safari
上記のブラウザにResponsive Viewerのブックマーク版は対応しているようです。
https://lab.maltewassermann.com/viewport-resizer/
上記のURLからResponsive Viewerのブックマーク版のページが開きます。
Responsive Viewerのブックマーク版を使う場合には、黒い背景で表示している「CLICK OR BOOKMARK」を、使用しているブラウザのブックマークにドラッグアンドドロップすることで、Responsive Viewerが使用可能になります。
例えばブラウザがSafariの場合
ブックマークを表示させてResponsive Viewerのページの「CLICK OR BOOKMARK」をブックマークへドラッグアンドドロップして追加します。
各ブラウザに追加したブックマーク版のResponsive ViewerでWebサイトのレスポンシブデザインを確認するときは、ブックマークの「↔ Resizer」をクリックすると、Chromeの拡張機能に追加したResponsive Viewerと同じようにパネルがブラウザ上部に表示します。
レスポンシブ確認したいデバイスサイズのアイコンをクリックすることでWebページの画面サイズが選択したデバイスサイズに切り替わります。上の画像ではiPhone Xを選択して、思いっきりレイアウトが崩れているのを確認しています。
ブックマークして使用することができるブラウザ対応が多めなレスポンシブ確認ツール「Responsive Viewer」を使用して良いと思えたのは、Webサイトのレスポンシブデザインを確認するだけではなく、ブラウザごとにレイアウトやデザインを確認できることです。
ちなみにPCのChromeでブックマークしたものをiPhoneでPCのブックマークから「↔ Resizer」を選択するとスマホで違うスマホ画面サイズのレスポンシブ確認ができる。という意味のなさそうなレスポンシブ確認もできました。
レスポンシブ確認にアプリを使用する
Webサイトのレスポンシブデザインを確認する場合にアプリとして使用できるものもPCにインストールして使用してみました。「responsively app」というアプリです。
responsively-org/responsively-app
responsively appはGithubの「responsively-org/responsively-app」のページからダウンロードします。
Macは「ResponsivelyApp-0.15.0.dmg」をダウンロード
Windowsは「ResponsivelyApp-Setup-0.15.0.exe」をダウンロード
それぞれのPCでResponsivelyAppをダウンロードしてインストール後に、ResponsivelyAppを起動すると以下の画像のようにアプリが開きます。
レスポンシブ確認を実際にする操作はWebサイトのURLを入力してEnterを押すと、そのページのレスポンシブデザインを確認することができます。
responsively appでレスポンシブデザインを確認するデバイスを選択するときは、アプリの画面左上の「DEVICE」下に表示しているCUSTOMIZEをクリックすることで、確認したい端末のサイズを選択できます。
responsively appはChromeに拡張してレスポンシブ確認ができるツール「Responsive Viewer」に似ていて、複数のデバイスを同時にレスポンシブ確認できます。
しかしresponsively appの場合、機能が豊富で少し操作慣れが必要になるなとResponsive Viewerの使用後にresponsively appのアプリを使用して思ったのが率直な感想です。
レスポンシブ確認ツールを使用してみたまとめ
まだ使用してみたレスポンシブデザインを確認するツールを順番に使い回している段階ですが、すぐにつかうことができる「Responsive Viewer」のブックマーク版の使用頻度が多いです。
すぐに使用できることに加えて「ブラウザ対応が多めなレスポンシブ確認ツール」というのが使用頻度が多くなるポイントになっています。
どのようにレスポンシブデザインを確認するツールを導入して使用してみるかは、人それぞれですので、試しに記事で紹介したツールをいくつか使用してみて決定してみてはいががでしょうか。
