Webデザイナーの私がよく使用するWebサイト制作に便利なChrome拡張機能7選

Google Chromeの拡張機能は試しにインストールしては削除もしくは放置することが多いのですが、その中でも使用頻度が高い拡張機能を紹介します。
特にコーディング中に使用することが多い拡張機能たちです。

CSSViewer

閲覧しているページのCSS確認できる拡張機能

マウスオーバーした要素のCSSを表示してくれます。
デベロッパーツールでもCSSを確認することは可能ですが、ちょっとした確認にはこちらの方が簡単でよく使っています。

サイト制作時にも、マージンルールをド忘れしてしまった時などに重宝しています。
ただ、ローカルでは使用できないので、サイト制作時にも使いたい場合はMAMPやVS Codeの拡張機能などでローカルにサーバー環境を用意する必要があります。

CSSViewer
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

Clear Cache

ツールバーのアイコンをクリックするだけでブラウザのキャッシュをクリアできる拡張機能

私は設定していませんが、Chromeのショートカットに設定しても便利そうですね。
コーディング作業中は、⌘+Sと同じくらいの感覚でこのアイコンをクリックしているような気がします。

Clear Cache
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn

Window Resizer

ブラウザのウィンドウサイズを任意のサイズに変更してくれる拡張機能

大きなモニターで作業していると、ブラウザのサイズも大きくなりがちだけど、コーディング中は標準的なモニターサイズで確認したいので使用しています。
デフォルトでモニターの解像度が用意されていますが、自分で指定したサイズにリサイズすることも可能です。

私は、PC用のサイズはこの拡張機能、スマホサイズはデベロッパーツールと使い分けています。

過去にはマルウェアらしきものが仕込まれているということがありましたが、現在 “パブリッシャーは、お客様のデータを収集または使用しないことを表明しています” とのことです。

Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

ColorZilla

Webページからカラーコードを取得できる拡張機能

気になる色を確認したい時に使用するカラーピッカー。
「スクショしてPhotoshopのスポイトツールで確認」の作業をもっと簡単にできる便利な拡張機能です。
多くの場合はCSSViewerを使うけど、画像から色を吸いたい場合や、背景色などでうまく確認できない時にこのColorZillaを使います。

ColorZilla
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

WhatFont

Webページのフォントを確認できる拡張機能

これもCSSViewerでカバーできることが多いのですがフォントの情報を確認できる便利な拡張機能です。

font-familyは複数指定されていることが多いですが、その中で何が適応されているかも教えてくれるので非常に助かります。

WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

Awesome Screenshot

Webページのスクショと録画ができる拡張機能

ページのブラウザに表示されている部分だけでなく、スクロールした先も全部画像に書き出せる便利拡張機能です。
サイトにコンテンツを追加するのに、既存のトップページをスクショしてそこに追加していくのに役立ちます。
また、この拡張機能上で書き出し時に図形やテキスト、ブラシで描くなどの編集が可能です。

私は使用したことがないのですが、画面録画機能もついています。
無料版でも5分録画が可能。Proアカウントだと4K、時間無制限で録画ができるようです。

Awesome Screenshot
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj

Evernote Web Clipper

WebページをEvernoteに保存する拡張機能

Web制作とは少し離れますがこちらも便利な拡張機能です。
保存先のノートを指定したり、タグ付も可能です。

Evernote Web Clipper
https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc