作業効率を上げてくれるGoogle Cromeの拡張機能ですが、みなさんはどんなものを使っていますか？
たくさんあって何を入れていいか分からない人もいるかもしれません。
今回はWebデザイナーにおすすめの拡張機能を、Webデザイン時に使用するものとコーディング時に使用するものとに分けて、８つご紹介したいと思います。
実際に私が使用していて、これは使えると思ったものです。
是非、参考にしてみてください。
- ・Google chromeの拡張機能を使ってみたいけど、どれを使っていいか分からない人
- ・本当に使えるGoogle chromeの拡張機能を知りたい人
chromeの拡張機能とは？
chromeの拡張機能とは、Google Chromeブラウザの機能を拡張・強化するためのプログラムです。
拡張機能を使うことで、より便利になり、作業効率が上がります。
Chromeウェブストアからインストールするだけで、簡単に利用できます。
下記のURLから拡張機能を検索して、インストールしてください。
https://chromewebstore.google.com/?hl=ja&
拡張機能のインストールのやり方、管理の仕方は下記URLをご覧ください。
https://support.google.com/chrome_webstore/answer/2664769?hl=ja
Webデザイン時に使用する拡張機能
色を調べるなら「ColorZilla」
この拡張機能は、webページ上の色の値を取得できます。
色を取得したい場所でクリックをすれば、RGBやカラーコードを確認でき、カラーコードをコピーできます。
また、選択した色の履歴も見ることができるので、後から見返すことができて助かっています。
ダウンロード： ColorZilla
Webページ全体をスクリーンショットしたいなら「GoFullPage」
この拡張機能は、Webページ全体のスクリーンショットを取得するのに特化しています。
スクロールが必要な長いウェブページ、LPをクリックするだけで簡単にページ全体のスクリーンショットを取得できます。
私はデザイン時、参考サイトをこの拡張機能を使ってダウンロードし、XDやFigmaに並べて使っています。
ダウンロード： GoFullPage
フォントを調べたいなら「WhatFont」
この拡張機能は、Webページ上で使用されているフォント情報を調べることができます。
調べたいテキスト部分にカーソルを持っていくだけで、フォントファミリー、サイズ、 行の高さ、 色、フォントウェイトなどフォントに関する情報を取得できます。
検証ツールでも調べられますが、検証ツールを開くより楽に調べられるので、重宝しています。
私は主に参考サイトで使用しているフォントが何かをチェックするために、使用しています。
ダウンロード： WhatFont
コーディング時に使用する拡張機能
HTMLチェックなら「HTMLエラーチェッカー」
この拡張機能はワンクリックで、htmlコードにエラーがないかチェックしてくれます。
私はコーディングが終わった後、この拡張機能で必ずチェックします。
閉じタグ漏れなどエラーがある場合、行数とタグを教えてくれるので、助かっています。
ダウンロード： HTMLエラーチェッカー
CSSを確認したいなら「CSS Pepper」
この拡張機能はクリックした箇所のCSSを表示してくれます。
検証ツールでも調べられますが、検証ツールを開くより手軽に調べられるので気に入っています。
サイト上の画像もダウンロードできます。
ダウンロード： CSS Pepper
複数画面サイズの表示確認に「Responsive Viewer」
この拡張機能は様々なデバイスでの表示を一度に確認できます。
デバイス毎に一つづつ確認するより時短になりますし、スクロールすると全デバイスが連動して動いてくれるところも気に入っています。
ダウンロード： Responsive Viewer
ピクセルパーフェクト時に「PerfectPixel by WellDoneCode」
この拡張機能はデザインカンプとコーディングのズレを確認することができます。
コーディングしたものをWebサイト上に表示し、デザインカンプの画像をPerfectPixelにドロップして重ねて、ズレているか確認します。
実務でピクセルパーフェクト(デザインカンプと1pxもズレないコーディング）を求められることが多いので、この拡張機能は必要不可欠です。
ダウンロード： PerfectPixel by WellDoneCode
サイトで使用されている画像をダウンロードするなら「Image Downloader」
この拡張機能はWebページ上の画像を一括ダウンロードできます。
すべての画像をダウンロードすることもできますし、特定の画像を選択してダウンロードもできます。
案件では使用したことはまだ一度もないですが、模写コーディングをする時にこの拡張機能で画像をダウンロードしていました。
ダウンロード： Image Downloader
まとめ：Webデザイナーにおすすめのchromeの拡張機能8選
今回はWebデザイナーにおすすめのchromeの拡張機能8選をご紹介しました。
いかがだったでしょうか。
デザインやコーディング時のスピードアップや効率化、そして正確に作業を行うためにも拡張機能はとても役に立つので、まだ入れていないものがあったら是非取り入れてみてください！
今回の記事がどなたかのお役に立てていたら嬉しいです。
