僕はデザインが優れていると思ったWebサイトのスクリーンショットをコレクションしています。
コレクションしたスクリーンショットを見てデザインを勉強したり、Webサイトをデザインする際の参考にしたりしています。
基本的にはChromeの拡張機能でスクリーンショットを撮影しています。
色々な拡張機能を試した結果、オススメの拡張機能を紹介します。
目次
スクリーンショット撮影に必要な3つの機能
僕の目的はWebサイトのデザインをコレクションすることです。
そのために必要だと思っている機能が3つあります。
ページ全体のスクリーンショットを撮影できる
デザインの勉強や参考に使うために、ページ全体のスクリーンショットを保存しています。
Webサイトのデザインは流動的です。
リニューアルや閉鎖などで、そのデザインとは二度と出会えない可能性もあります。
ページ全体をスクリーンショットしておけば、そのような場合でもデザインを見れなくなることはありません。
実際に数年前のスクリーンショットを見返して、いいデザインだなと思うことも多々あります。
またページ全体を俯瞰して見れるので、全体的なレイアウトや配色を確認しやすくなります。
レイアウトや配色のバランスを見ることでデザインの勉強になります。
スクリーンショットをjpeg形式で保存できる
スクリーンショットはpng形式で保存する方が画質の劣化が無いので最もきれいです。
ただし、png形式はファイル容量が大きくなりがちです。
僕の場合はデザインの雰囲気が分かればいいので、画質は劣化しますがjpeg形式で保存して容量を節約しています。
スクリーンショットの編集画面をスキップできる
僕の場合はスクリーンショットに文字を書き込むなどの編集をすることがありません。
様々な編集機能がある拡張機能もありますが、個人的には不要な機能です。
編集機能がない、もしくは編集機能をスキップできる拡張機能を選ぶようにしています。
編集機能をスキップできると時短になるのでありがたいです。
オススメのスクリーンショットを撮影できる拡張機能
先に述べた条件を踏まえた上でオススメの拡張機能を紹介します。
Awesome Screenshot
Awesome Screenshotは昔からあるChromeの拡張機能です。
表示領域、選択領域、ページ全体、PCデスクトップなど数パターンの撮影方法があります。
表示領域のスクリーンショットにはタイマー機能があり、撮影ボタンを押してから3秒後（設定で5秒後に変更可能）に撮影することが出来ます。
ドロップダウンメニューを開いた状態のスクリーンショット撮影などに便利です。
また、ブラウザのウインドウ、もしくはPCのデスクトップの動画を撮影することも出来ます。
僕はあまり使いませんが、UIの操作説明をするときなど役に立つかもしれません。
編集機能も充実しており、画像トリミングやテキスト入力など大体出来る感じです。
Awesome Screenshotは、Retinaディスプレイを使っている方に特にオススメです。
Retinaディスプレイのスクリーンショットが2倍のサイズになって困った経験はないでしょうか？
僕は大き過ぎるスクリーンショットにずっと悩まされていました。
ファイル容量は大きいし、閲覧しにくいのでPhotoshopで50％にリサイズしていました。
Awesome Screenshotには「Resize a screenshot to 50% of its original size for Retina screen」というオプションがあります。
このオプションを有効にすると、スクリーンショットを50%縮小して保存してくれるので、保存後にリサイズする必要がなくなります。
ただ、Awesome Screenshotの編集画面でリサイズ処理を行なっているみたいで、「Skip editing when capturing entire page」のオプションを有効にして編集画面をスキップするとスクリーンショットが縮小されませんでした。
「スクリーンショットの編集画面をスキップできる」という条件をあきらめることになりますが、スクリーンショットをリサイズする手間を無くした方が時短になるので「Resize a screenshot to 50% of its original size for Retina screen」を有効にして使っています。
Nimbus Screenshot & Screen Video Recorder
Nimbus Screenshotも多機能で、Awesome Screenshotで出来ることは大体出来ます。
メニューが日本語化されているので使いやすいです。
Nimbus Screenshotの「キャプチャ フラグメント」という撮影方法は、特定のセクションや画像などに撮影範囲をピッタリ合わせて撮影できます。
手動で撮影範囲を合わせる必要が無いのでとても便利です。
保存する画像の名前をカスタマイズ出来るのも便利です。
ドメイン名や撮影日時をファイル名に指定することが出来るので管理しやすくなります。
アイコンやUIが好みだったので長らく使っていましたが、スクリーンショットをjpegで保存すると白色の部分がうっすらピンクになる不具合があったので使わなくなりました。
久しぶりに使ってみたところ、その様な不具合は発生しなかったので改善されたようです。
またメインで使ってみようかなと思いました。
FireShot
Nimbus Screenshotにjpeg保存の不具合が発生した後、代替としてずっと使用していました。
撮影方法はページ全体、表示部分、選択範囲の3つしかありません。
また、トリミングや文字を書き込むなどの編集機能もありません。
撮影方法や編集機能はシンプルですが、スクリーンショットを撮るだけの僕にはマッチしました。
逆にスクリーンショットをがっつり編集する方には物足りないと思いますので、Awesome ScreenshotやNimbus Screenshotをオススメします。
FireShotも保存するファイル名をカスタマイズできるので、ファイルの管理がやりやすいです。
スクリーンショットを撮影できるだけでいいという方には、シンプルなFireShotをおすすめします。
まとめ
Awesome ScreenshotかNimbus Screenshotを使っておけば機能的に十分だと思います。
Retinaディスプレイを使用されている方はAwesome Screenshotがオススメです。
編集機能は不要なので、出来るだけシンプルがいいという方はFireShotをオススメします。
後は自分に合った拡張機能を試してみてください。