Webデザイナーの私がよく使用するWebサイト制作に便利なChrome拡張機能7選
Google Chromeの拡張機能は試しにインストールしては削除もしくは放置することが多いのですが、その中でも使用頻度が高い拡張機能を紹介します。
特にコーディング中に使用することが多い拡張機能たちです。
目次
- CSSViewer
- Clear Cache
- Window Resizer
- ColorZilla
- WhatFont
- Awesome Screenshot
- Evernote Web Clipper
Advertising
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