WEBデザイナーにおすすめ!Chrome拡張機能7選

今回は、WEBデザイナーにおすすめなChromeの拡張機能7選をご紹介いたします。

Chrome拡張機能とは、Chromeの機能を追加する専用のプログラムのことです。WEBデザイナーの作業効率を上げてくれる機能がたくさんあります。
実際に使用してみて、使うことの多いChrome拡張機能をご紹介いたします。

フォントを知る「WhatFont」

WhatFont

WhatFont

WhatFontは、ページ内で使用されているフォントファミリーやフォントサイズ、カラーを知ることが出来ます。
フォントを知りたい文字の上にカーソルを合わせると、フォントファミリーが表示されます。さらに文字の上でクリックするとサイズやカラーなどより詳細な情報を知ることが出来ます。

カラーを知る「ColorZilla」

ColorZilla

ColorZilla

ColorZillaは、ページ内で使用されているカラーコードを知ることが出来ます。
「Page Color Picker Active」を選択し、カラーコードを知りたい箇所でクリックすると、カラーコードがコピーされます。
また「Color Picker」を選択すると、カラーの調整と過去に取得したカラーの履歴を見ることが出来ます。

ページをスクリーンショットする「FireShot」

FireShot

FireShot

FireShotは、ページ全体・表示部分・選択範囲のキャプチャをすることが出来ます。
キャプチャした画像はpngやPDFで保存することが出来ます。また、メールに添付したり、印刷することも出来ます。
様々な使い方が出来るため、非常に便利な機能です!

キャッシュをクリアする「Clear Cache」

Clear Cache

Clear&Cache

Clear Cacheは、アイコンをクリックするだけでキャッシュクリアをすることが出来ます。
キャッシュクリアに手間を取られてしまう経験をされた方も多いのではないでしょうか?この拡張機能を追加すれば、簡単にキャッシュクリアすることが出来て、時短に繋がります!

HTMLのエラーをチェックする「HTMLエラーチェッカー」

HTMLエラーチェッカー

HTMLエラーチェッカー

HTMLエラーチェッカーは、ページ内のHTMLの記述ミスなどをエラー表示してくれます。
閉じタグの漏れなどを簡単に発見することが出来ます。

ページのCSSを知る「CSS Peeper」

CSS Peeper

CSS&Peeper

CSS Peeperは、ページ内のCSSについて知ることが出来ます。
CSSを知りたい要素をクリックすると、class名やサイズ・余白、フォントファミリー、文字色・背景色などが表示されます。
CSSの情報を一括で知ることが出来て非常に便利です!

文字数をカウントする「かんたん文字数カウント」

かんたん文字数カウント

かんたん文字数カウント

選択したテキストの文字数をカウント出来ます。
文字数を知りたい部分のテキストを選択して、右クリック→「選択したテキストの文字数をカウント」をクリックすると、文字数が表示されます。
SEO対策で文字数を調べる際に使用しています。

まとめ

以上、Chrome拡張機能でおすすめな7選でした!
拡張機能を使うことで業務効率を高めることが出来ますが、拡張機能を入れすぎると重くなってしまうので、必要だと思う機能を選んで使用してみてください!

PAGE TOP