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

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

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

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

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

Window Resizer とは

Window Resizer の拡張機能イメージ画像

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

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

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

拡張機能の概要

拡張機能名 Window Resizer
機能の説明 ブラウザの画面サイズをクリック操作だけで各デバイスサイズに変更できる。
利用料金 無料
対応言語 英語のみ
WEBサイト http://coolx10.com/window-resizer/

※ 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個のデバイスが登録されていて、各画面サイズをクリックすれば自動でサイズが変更されます。

Window Resizer メニュー展開

プリセットの登録

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

Window Resizer メニュー > Edit presets

幅と高さの設定

Window Resizer > プリセットの登録 > 幅と高さの設定

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

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

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

Window Resizer > プリセットの登録 > リサイズターゲットの設定

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

アイコンの設定

Window Resizer > プリセットの登録 > アイコンの設定

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

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

Window Resizer > プリセットの登録 > リサイズ時のウィンドウ位置の設定

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

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

説明文の設定

Window Resizer > プリセットの登録 > 説明文の設定

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

登録の完了

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

Window Resizerでプリセットを登録した際の表示例

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

プリセットの編集

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

Window Resizerのプリセットの編集ボタンと保存ボタン

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

プリセットの削除

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

Window Resizerのプリセットの削除ボタンの位置

プリセットの初期化

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

Window Resizerのプリセットの初期化ボタンの位置

拡張機能のレビュー

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です