Window Resizer｜ブラウザの画面サイズを変更できるGoogle Chrome拡張機能

Window Resizer は、ブラウザの画面サイズを PC ・タブレット・スマホなど、各デバイスごとのサイズに変更したいときに便利な Google Chrome の拡張機能です。
WEB制作の現場でレスポンシブサイトの表示確認を行うときなどにとても便利です。

各デバイスサイズのプリセットは最初から代表的なものが登録されているので、インストールするだけで使い始めることができます。

今回は Window Resizer の使い方を紹介していきます。

Window Resizer とは

Window Resizer は、ブラウザの画面サイズを PC ・タブレット・スマホなどの各デバイスのサイズにあわせて変更できる Google Chrome の拡張機能です。
最初から主要なデバイスサイズが登録されていて、自由にサイズの追加もできるので、さまざまな画面サイズの表示確認やキャプチャをおこなえます。

操作方法もとてもかんたんで、クリック操作のみでサクサク画面サイズを変更できます。

利用料金は無料。残念ながら日本語には非対応ですが、本記事で主要な操作は解説するので覚えきってしまいましょう。

拡張機能の概要

※ Google Chrome 専用の拡張機能です。 ie ・ Firefox ・ Safari ・ Opera などのブラウザでは利用できないのでご注意ください。

最初から登録されている画面サイズ

• 320 × 480
  HVGA (old iPhones, small Androids)
• 480 × 800
  WVGA – Low-end Windows Phone
• 640 × 960
  DVGA – iPhone
• 768 × 1280
  WXGA – High-end Windows Phone
• 1024 × 768
  XGA – iPad
• 1366 × 768
  WXGA – Tablet
• 1280 × 800
  WXGA – Netbook
• 1366 × 768
  WXGA – Ultrabook
• 1280 × 1024
  SXGA – Small desktop
• 1680 × 1050
  WSXGA+ – Large desktop

拡張機能を利用するメリット

• 最初から主要な10種類の画面サイズが登録されている
• レスポンシブでつくられたサイトの表示チェックができる
• キャプチャソフトとあわせて使うと、毎回決まったサイズの画像をキャプチャできる

Window Resizer の使い方

インストールの方法

Chrome ウェブストア の Window Resizer のダウンロードページからインストールします。

画面サイズの変更方法

すべての操作は、インストール後追加される右上のアイコンよりおこないます。
最初から下記の10個のデバイスが登録されていて、各画面サイズをクリックすれば自動でサイズが変更されます。

プリセットの登録

プリセットの登録はメニュー内の Edit presets からおこなえます。

幅と高さの設定

登録する画面の幅と高さのサイズを入力します。

• Use custom size （デフォルト）は、自由にサイズを設定する
• Use current window size は、現在のウィンドウサイズに設定する
• Use current viewport size は、現在のビューポートサイズに設定する

リサイズターゲットの設定

リサイズする時の対象をWindow（ブラウザ全体）、Viewport（Webサイトが表示されている範囲）から選択します。

アイコンの設定

プリセットのアイコンを選択します。デスクトップPC、モバイルPC、タブレット、スマートフォン、ガラケー（フューチャーフォン）の5種類から一番近いアイコンを選びましょう。

リサイズ時のウィンドウ位置の設定

リサイズ時のウィンドウ位置（表示位置）を設定します。

• Leave unchanged は、ウィンドウ位置を変更しない
• Use custom position は、自由に位置を設定する
• Use current window position は、現在のウィンドウ位置に設定する
• Center on screen は、中央寄せに設定する

説明文の設定

プリセットの説明文を設定します。機種名や用途などあとから見ても分かりやすいものを設定しましょう。

登録の完了

SAVE をクリックして作業を保存しましょう。
登録したプリセットがメニューに表示されるようになります。

プリセットの編集・削除・初期化

プリセットの編集

登録済みのプリセット（最初から登録されているものを含む）は、あとから設定を変更することもできます。
プリセット編集画面で、登録済みのプリセット名の右上のえんぴつボタンをクリックして、編集をおこないましょう。

最後に画面右下の SAVE ボタンをクリックして作業を保存します。

プリセットの削除

不要なプリセットは削除してしまいましょう。
プリセット編集画面で、登録済みのプリセット名の右下の×ボタンをクリックして、プリセットを削除します。

プリセットの初期化

編集したプリセットをすべて削除し、初期状態に戻すことも可能です。
プリセット編集画面の最下部、 Restore Defaults をクリックすると、すべての設定が初期化されます。

拡張機能のレビュー

筆者は、ブログ記事編集時の画面キャプチャ用で、このプラグインを利用しています。
自由に画面サイズを登録でき、毎回決まったサイズでキャプチャをおこなえるので、記事内の画像サイズを均一にしたいときなど非常に便利です。

まとめ

今回は、 PC ・タブレット・スマホなどの各画面サイズにあわせて、ブラウザの画面サイズを変更できる Google Chrome 拡張機能、 Window Resizer を紹介してきました。
サイトの表示チェックや、ブログ用の画面キャプチャなどさまざまな用途で使用できる優秀な拡張機能です。
最新機種のスマホなど、日々追加される多様なデバイスの画面サイズにも、本記事で紹介しているプリセットの登録で、簡単に対応することができます。

主要デバイスの画面サイズは最初から登録されているので、特別な設定なしでも十分な機能が用意されており、拡張機能初心者にもおすすめできるプラグインです。