こんにちは、寺崎です。
Web制作の確認作業において、デスクトップやモバイルなど複数の画面サイズを確認するのが面倒だと感じることはありませんか。
これらの面倒な作業を、解決してくれる便利な機能があるんです。

それでは早速ご紹介いたします。

Responsive Viewerとは？

複数の画面サイズが一括で確認ができる、便利なGoogle Chromeの拡張機能です。
確認したい画面サイズをいくつか自分で選んでおくことができ、実際に確認する際はワンクリックで呼び出すことが可能です。
画面を確認するだけでなく、HP全体のキャプチャが撮れる機能もあります。

Responsive Viewerのインストール方法

まずはGoogle Chromeから拡張機能をインストールします。
以下のリンクからChromeへ追加ができます。

Responsive Viewer – Chrome ウェブストア

「拡張機能を追加」を押下

「拡張機能を追加」を押すと、インストールは完了です。

Responsive Viewerの使い方

では、早速使ってみましょう。
見たいHPのURLにアクセスした状態で、①右上のボタンから②「Responsive Viwer」をクリックします。

初期設定されている画面が出てきました。
以上、ワンクリックで簡単に呼び出すことができました。

Responsive Viewerの便利な機能

ここからは、基本の設定方法や便利な機能を一部ご紹介いたします。
まず、基本的には左側のボタンを操作して設定を行います。

①スクロールの同期（Sync Scrolling）

このボタンをクリックすると、スクロールの同期をON・OFF調節ができます。
同期がONの場合、スクロールすると全ての画面で同じスクロールが行われます。

②クリックの同期（Sync Clicks）

スクロールと同様に、このボタンをクリックすると、クリックの同期をON・OFF調節ができます。
同期がONの場合、クリックすると全ての画面で同じクリックが行われます。

③画面の設定（ACTIVE SCREENS）

見たい画面の設定はこちらで行います。
マウスオーバーすると、プラスボタンやマイナスボタンが出てくるのでそこで表示・非表示の調整ができます。
一番手前に持ってきたい際は、ドラッグで調整が可能です。感覚的に調整できるのがわかりやすくて良いですね。

④タブの管理

画面上部にあるタブで、種類分けができます。
様々な種類のデスクトップだけが見たい時、デスクトップとモバイルで比較したい時、など用途によって使い分けが可能です。

⑤横画面に設定（Landscape mode）

モバイルやタブレットの際は、横画面での確認も必要な場合があります。
その際は、こちらのボタンを押すと横画面で表示ができます。

⑥スクリーンショット（Screenshot all screens）

全デバイス分のスクリーンショットが１クリックで可能な機能です。
ファーストビュー（トップの画面）のみか、HP全体かを選ぶことができます。

Capture visible page = ファーストビューのみのキャプチャを全画面分
Capture full page = HP全体のキャプチャを全画面分

キャプチャはpngで一括保存されます。

まとめ

いかがでしたでしょうか。
自社のWebサイトをリニューアルされる際、デザインや動作確認をすることは多いはず。
ぜひこの便利な機能を利用して、お仕事にお役立てください。