こんにちは！のざきち（ @nozakichicken ）です。
突然ですが、Google Chromeの拡張機能を活用していますか？
拡張機能いろいろあってどんなのを使えばいいかわからない…
実はChromeの拡張機能（プラグイン）を使うことによって、Webサイト制作をする時にとっても役立つ機能がたくさんあるんです。
今回はWebデザイナー目線で、Web制作の際に日ごろから利用しているChromeの拡張機能を厳選してご紹介いたします！
Chromeの拡張機能（プラグイン）とは？
Googleが提供するChromeの機能を拡張するためのプログラムです。
Chromeの拡張機能を一文で説明するなら、「Chromeの機能を増やしたり強化したりする専用の追加プログラム」と表現できるでしょう。プログラムの実体は、JavaScriptやHTML、CSSといったWebの技術によって記述されています。Chromeにインストールされた拡張機能は、その上で実行され、Chrome提供のAPI（アプリケーションプログラムインタフェース）を使いつつ、本来のChromeにはないさまざまな機能を提供します。
引用元：Google Chromeの「拡張機能」とは？：Google Chrome完全ガイド – ＠IT
下記のウェブストアからダウンロードすることができます。
どんなものかわかったところで、オススメの拡張機能を見ていきましょう！
とにかく便利な拡張機能
まずは、Webデザイナーに限らずChromeを仕事でよく使う人であれば絶対に入れておきたい「とにかく便利な拡張機能」を２つご紹介します！
FireShot
スクリーンショットが撮れる拡張機能。
Webサイト全体のスクリーンショットを撮ることができる拡張機能です。PDFとpng形式で保存ができます。これがあれば右クリック（もしくはショートカット）で長細いサイトも一気にスクショできちゃいます！
OneTab
ブラウザのタブを管理する拡張機能。
ついつい増えてしまいがちなタブを一括管理してくれる拡張機能です。案件ごとにタブを保存すれば一気に開くこともできるので、ブックマークと違った便利さがあります。
デザインに便利な拡張機能
次は、デザイン時に便利な拡張機能を見ていきましょう！
ColorPick Eyedropper
カラーピッカーが使える拡張機能。
Webページの色を抽出できるカラーピッカーが使えるようになる拡張機能です。調べたい箇所をクリックするだけで色の情報がわかるようになります。色の参考によく使っています！
Page Ruler Redux
サイト上のサイズが測れる拡張機能。
Webサイト上の画像や任意の位置のサイズをピクセル単位で測ることができる拡張機能です。余白などのサイズを測るのに便利です！
Window Resizer
ウィンドウサイズを変更ができる拡張機能。
ブラウザウィンドウのサイズ変更ができます。スマホやタブレットなどのデバイスサイズは１クリックで変更できますし、任意に数字を入力して変更することもできます。
コーディングに便利な拡張機能
次は、コーディングをする時にあると便利な拡張機能のご紹介！
HTMLエラーチェッカー
HTMLタグのエラーを確認できる拡張機能。
表示しているページのHTMLタグの記述ミスを知らせてくれます。閉じタグはなくてもデザイン的には問題ない場合がありますが、これは簡単にミスを表示してくれるのでとても便利です。
CSS Peeper
CSS情報を一括で表示してくれる拡張機能。
ページ全体のフォントや色だけでなく、ページ内クリックした箇所のmarginやpadingなどまでも表示してくれます。シンプルで感覚的に操作ができるのでオススメです！
Clear Cache
キャッシュをクリアしてくれる拡張機能。
ブラウザに蓄積されているキャッシュを1クリックでクリアするとこができます。地味でめんどくさいキャッシュクリアですが、これがあれば１クリックでクリアしてくれちゃいます！
まとめ
以上、Webデザインの役に立つChromeの拡張機能のご紹介でした！
Chrome ウェブストアにはこれ以外の拡張機能がたくさんあります。入れすぎるとPCが重くなってしまうので、色々試してみてから、自分のお気に入りでカスタマイズしてみてくださいね！
ちなみにこの記事は、以前インスタに投稿したものを詳しく書いたものです！
コメント