Firefoxのレスポンシブデザインビューが便利すぎる

すでにご存知の方もいらっしゃると思いますが、Firefoxのレスポンシブデザインビューが便利なことに気づきました。ざっくり言うとスマートフォンサイト向けのエミュレータですね。

普段の作業でスマートフォンのサイトチェックする時はFirefoxアドオン「Web Developer」をよく利用していました。英語が分からないので日本語版のほうです。それほど不便は感じていませんでしたが、このレスポンシブデザインビューの起動ショートカットを覚えておくとさらに時間短縮でチェックできそうな気がしましたので、その概要メモです。

レスポンシブデザインビューを起動する

起動手段は2種類です。

1. キーボードの「Ctrl」＋「Shift」＋「M」を押す

覚えてしまえばこちらが圧倒的に早いですね。

2.「ツール」⇒「Web開発」⇒「レスポンシブデザインビュー」を選択する

ショートカットを忘れた場合はこちらから起動できます。

通常時のブラウザは下記の状態です。

この状態で、上記1もしくは2の手順で「レスポンシブデザインビュー」を起動します。

すると、画面左側にスマートフォンの画面サイズに変更された画面が表示されます。

デフォルトでいくつかのサイズがプリセットされていますので、その中にチェックしたいサイズがある場合はプルダウンから選択するだけでOKです。

任意の画面サイズに変更するには

プリセットのサイズ以外に変更する場合は、画面の右下（または右、下）をつかみながらドラッグします。画面上部のピクセル数がサイズに連動して増減します。（下記キャプチャでは417×429です）

変更後のサイズを保存するには

自分で変更した画面サイズを保存するには、サイズのプルダウンメニューから「プリセットを追加」を選択し、任意の名称を付けて「OK」をクリックします。

エミュレータを終了するには

終了するにはエミュレータ上部にある「×」ボタンをクリックします。

最後に

これまで「Web Developer」を利用してサイトチェックの際にブラウザサイズを変更していました。このレスポンシブデザインビューを利用したいと思ったのは起動までの操作が少ないことと、エミュレータ内でサイズ変更するため元のブラウザサイズは影響を受けないということです。「Web Developer」では元のブラウザごとサイズが変わるため、チェック完了後に毎回ブラウザの大きさを戻していました。

この2点を考慮するとスマートフォンのサイトチェックに利用するメリットは十分あると思います。

よろしければお試しになってください。