こんにちは！
Webをメインにグラフィックもちょっとやってるデザイナーのいわんです。
突然ですが、Webデザイン制作するときに少しでも楽したいな〜と思うこと、ありませんか？
今回は、普段少しでも楽をする効率を図るために使用しているChrome拡張機能をご紹介させていただきます。
「chrome ウェブストア」には、Google Chrome用の拡張機能が大量に公開されていますが、手始めにどれから使っていいかわからない…という方向けに、Chrome用拡張機能の初級編として、基本的なものに絞ってみましたので、ぜひ最後までご覧くださいね。
デザイナーさんにおすすめ！Chrome拡張機能
スクリーンショット「FireShot」
Webサイトを閲覧しているとき、気になったサイトを「スクショ取りたいけど、ページ全体を1回で済ませたい！」ということがありませんか？
そんなときは、この「FireShot」がオススメです！！
このツールは、
- ページ全体をキャプチャ
- 表示部分をキャプチャ
- 選択範囲をキャプチャ
の3通りの中からスクショの撮り方を選ぶことができます。
また、拡張子もjpg、png、pdfの中から選ぶことができるので、PCの機能やブラウザのデベロッパーツールを起動してスクショを撮るより楽に作業ができます。
検索ソート機能「あと1年」（最新1年以内検索）
Webサイトを検索しているとき、古い更新日のサイトばかりが結果として表示されるときはありませんか？
検索結果画面に表示された【ツール】の中にある「期間指定なし」というところから、改めて更新期間を指定することで時間を細かく設定することができますが、この機能はタブやウィンドウを新しくするとリセットされてしまい、また設定し直さなければなりません。
そんなときは、この「あと1年」がオススメ。
この機能をアクティブにしている限り、ずっと自動で最新1年以内に公開・更新されたWebサイトを検索してくれます。
ウィンドウリサイズ「Window Resizer」
ウィンドウサイズによって表示される状態を確認したいけど、手動でサイズをピッタリ合わせるのって難しくありませんか？
そんなときは、この「Window Resizer」がオススメです！！
このツールは、指定したウィンドウサイズに変更してくれるのはもちろん、プリセットからサイズを指定したり、Viewportの調整など、機能がたっぷり！
特にデザインをチェックするときは大活躍しています。
閲覧サイトURLのQR化「QRCode」
表示しているWebサイトのURLをQR化してくれる拡張機能は様々ありますが、色々試して落ち着いたのがこの「QRCode」です！
QR化するのが早く、シンプルにQRのみ表示してくれるので、とにかくわかりやすい。
テキスト情報など一切必要なく、ただQRのみ表示してくれるのであれば、このツールがオススメです！！
使用フォントを表示「Fontface Ninja」
Webサイトを見ているとき、気になったフォントがあったりしませんか？
最近はWebフォントを適用しているサイトも多く、気になったこのフォントを使ってデザインしてみたい！ということもあるかと思います。
そんなときは、この「Fontface Ninja」がオススメです！
このツールは、表示しているWebサイトで使用されているフォントの種類を表示し、使用されている太さはもちろん、さらにその入手先まで教えてくれる。
わざわざデベロッパーツールを開いて調べなくても良い、優しい設計のツールです。
デザインカスタムツール「VisBug」
こちらはデザイナーだけではなく、ディレクターやエンジニアにもおすすめのツールです。
「VisBug」はブラウザに表示されたページのデザインやコンテンツを検証・編集することが可能です。
デベロッパーツールでもある程度のことは可能ですが、このツールはもっと直感的にふれることができます。
動画で動きが見たい場合は、ストアページのスライド2つ目にある動画の23:00あたりにあるので、そちらをご覧ください。
英語なのでよくわからない、日本語の解説求む！って場合は、私も普段からお世話になっている「coliss」さんに詳しく載っているので、そちらをご覧ください。
デザイナーにもChrome拡張機能を！
以上6つのツールをご紹介させていただきました。
次回は、デザインをするときに使用しているツール系サイトか、PhotoshopやIllustrator、XDの文字設定のCSS変換のお話をできればと思います。
それではまた！