編集者・小平淳一の共有ノート編集者、ライター、クリエイティブディレクター。伝えたいことを実名で書き連ねます。

Webディレクターにはブラウザのリサイズが必要

Pocket

Webブラウザのウインドウサイズの話。Google ChromeとSafari、両方のツールについて話したいと思います。個人的に、ウインドウを特定のサイズ(1280×800ピクセルとか)に変える機能拡張は必要不可欠です。

Webブラウザのリサイズはこんなときに必要

その理由の1つは、企画書や提案書の作成。企画書や提案書に貼り付けるWebスクリーンショットは、特別な理由がないときは必ず幅1024ピクセルで撮るという習慣をつけているのです。企画書や提案書のたぐいは、あとで内容を修正したり、同じ体裁を別の提案書に流用することがしばしばあります。そんなとき、前に貼り付けたものと同じサイズのスクリーンショットを差し替えできたら、レイアウトが崩れないので楽ですよね? それが理由の1つです。

resize_image

また、僕は仕事でMovable TypeやWordPressの操作マニュアルを作ってクライアントに渡すのですが、このときもスクリーンショットを幅1024ピクセルで撮るようにしています。こうすることで、やっぱり画像を差し替えが楽になります。

もう1つの理由は、やっぱりWebサイト公開前の確認です。会社ではiMacを使って作業しているのですが、新しく作ったWebサイトは、「ノートPCならファーストビューでどこまで見えるのかな?」「MacBook Airならどうかな?」ということが気になります。まあ、Google Chromeの開発者ツールで表示サイズを変更することもできるのですが、機能拡張ですぐにリサイズできれば、開発者ツールを開くよりも手っ取り早いと思います。

こうした理由があって、僕にはウインドウリサイズの機能拡張が必要だったのです。

どの機能拡張を使うのか?

僕はメインのWebブラウザがGoogle Chromeだったので、こっちは「Resolution Test」という機能拡張を使ってきました。ツールバーのボタンを押すと候補リストが並ぶので、その中から選ぶだけ。操作は簡単で不満はまったくありません。

resize01

Resolution Test(Chrome ウェブストア)

で、最近はSafariの環境も整えておきたいと思うようになって、Chromeで使っているのと同等の機能拡張(Extension)を探したのですが、そこで見つけたのが「Resize Window」。こちらは、ボタンを長押しすることで候補リストが表示されます(クリックだと、環境設定で指定したサイズに一発変形)。これもシンプルで、今のところ不満はなし。

resize02

Resize Window(開発者サイト)

どちらも定番といえば定番なので知っている人は多いかと思いますが、まだ入れていない方はぜひお試しください。