超便利！WEBデザイナーにオススメのGoogleChrome拡張機能10選

こんにちは！デザイナーの波塚です。

GoogleChromeブラウザを使っている人なら必ず何かしらの拡張機能を入れていると思います。
今回はWEBのデザインに関わる人が入れておくと役立つGoogleChrome拡張機能をご紹介します。
デザイナーだけでなくWEBに関わる人全般にオススメできる拡張機能です。

WEBデザイナーにオススメのGoogleChrome拡張機能8選

Fontface Ninja

ダウンロード

WEBサイトのテキストのフォント・サイズ・間隔・カラーなどをカーソルを合せるだけで確認することができます。
また、フォントを簡単にダウンロードまたは購入することもできる便利ツールです。
フォントを調べるツールは他にもありますが、サイズや間隔まで見れるところが魅力です。

Sizzy

ダウンロード

WEBサイトをパソコン・スマホ・タブレットなど様々な端末の幅で表示できる拡張機能です。
一覧で端末ごとの見た目を確認できるので、レスポンシブを意識したサイトチェックや、レイアウトの参考にしたりなど活躍してくれます。

CSS Peeper

ダウンロード

WEBサイトの選択した部分のCSSの情報を確認できる拡張機能。UIも見やすいのでサイトがどう設計されているのか参考にしたい場合に重宝します。
画像のサイズも一発で確認できます。すごい。

Dimensions

ダウンロード

要素の間のpx数を見ることができます。このサイトの余白が見やすい、どれくらい余白があるんだろう？と参考にしたいときにすぐ確認できるので使っています。
要素間の余白を調べることに特化しています。

The QR Code Extension

ダウンロード

パソコンで開いているサイトのQRコードを即発行して、スマホで読み取れる拡張機能です。
実際にデバイスで表示の確認をしたいときに便利です。ちょっとしたことですがシンプルで使いやすいので使う場面が多いです。

bookma!

ダウンロード

クオリティの高いWEBサイトを集めたギャラリーサイト「bookma!」に新しくサイト登録があったときに通知してくれる拡張機能。
通知されるだけでなく、サイトの推薦もできます。
新しいサイトをサクッと見ることができるので気分転換にもいいです。

Pinterest 保存ボタン

ダウンロード

デザイナーの必須アプリとも言える「Pinterest」の保存ボタン。
保存するのは画像なので、美しい写真・参考になるバナーやヘッダー・広告などをストックするのに便利です。

ColorZilla

ダウンロード

WEBサイトのカラーを抽出する拡張機能。参考にしたい色があったときにサクッと色をコピー。

Tab Resize

ダウンロード

タブを画面に応じて分割表示してくれる拡張機能。デスクトップなどの大きな画面で使うと便利です。
調べ物やいろんなタブでスクリーンがカオスになっている人にオススメです。

Wappalyzer

ダウンロード

WEBサイトがどんなCMSやサービスを使っているか調べることができるツールです。
WEBサーバー、スクリプト、メールシステム、WEBフォントなどなど…1クリックで確認できます。

まとめ

WEBデザインに活用できるGoogleChromeの拡張機能。昔なら開発者ツールでやっていたことも今ではボタン一つでできてしまったりします。
コーダー向けデミある拡張機能も含まれていましたが、WEBサイト全般を知る上でとても便利なのでぜひデザイナー・コーダー問わず活用してみてください。