コマンドで実行できるから自動化も楽々ですね! レスポンシブWebデザインはブラウザ幅によって表示が変わるので確認が大変です。一つのURLごとに複数の表示を確認しなければなりません。 そんな手間を軽減してくれるツールがpageresです。コマンド一つで複数のブラウザ幅におけるスクリーンショットを取得してくれます。

pageresのインストール

インストールはnpmコマンドでできます。

$ npm install -g pageres

pageresの使い方

完了したらヘルプを出してみましょう。

$ pageres --help

Get screenshots of websites in different resolutions.

Usage
  pageres <url> [</url><url> ...] --sizes <resolution>,[</resolution><resolution>,...]
  pageres <url> [</url><url> ...] --file <filepath>

Example
  pageres todomvc.com yeoman.io --sizes 1366x768,1600x900

If --sizes is not specified it will fall back to the ten most popular screen resolutions according to w3counter.

The </filepath><filepath> file should be formatted to have one <resolution> on each line.

–sizezでサイズの指定をするくらいです。後は取得したいURLを指定します(複数指定ができます)。例えば次のようにコマンドを打ちます。

$ pageres todomvc.com yeoman.io --sizes 1366x768,1600x900

✓ Successfully generated 4 screenshots from 2 urls and 2 resolutions

取得したスクリーンショット。縦は全て入る形で撮ってくれます。

別な幅。一気に確認できるのが便利です。

画像で出てくれればその後拡大したり全体のバランスを掴むのも容易です。レスポンシブWebデザインはもちろん、通常のデザイン確認にも使えるでしょう。

pageresはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

sindresorhus/pageres