Web制作に使えるおすすめのChromeエクステンションを7つまとめてご紹介します。デザイナーやエンジニアの方など、Web制作業務に携わっている方の参考になればと思います。
なお、本稿のテーマであるChrome以外にも、Web制作者に人気のWebブラウザはいくつかあります。有名なところだと、Web制作専門のブラウザであるBliskがあります。Bliskについては本ブログでもご紹介していますので、そちらの記事も参考にしていただければと思います。
» Web制作者専用のブラウザ「Blisk」の特徴と基本的な使い方
Chromeの基礎知識
さて、本題に入る前にChromeについて簡単に復習しておきましょう。
Chromeとは？
Chrome（クローム）とは、ご存じGoogleが提供しているWebブラウザのことです。
Chromeは世界中で最もよく使われているブラウザで、世界シェアも1位となっています。日本ではMicrosoft社のIE（Internet Explorer）が高い人気を誇っていますが、やはり国内でもChromeのシェアの方が上回っています。
» IE 9が大幅減少 – 3月ブラウザシェア | マイナビニュース
Chromeのメリット
Chromeがここまで人気なのは、なぜなのでしょうか？Chromeのメリットをリストアップしておきましょう。
端末を選ばない
ChromeはWindowsからMac、Linuxといったように幅広いOSをサポートしています。モバイルOSについても同様で、AndroidはもちろんのことiPhoneなどのiOSにも対応しています。
さらに、端末間でブックマークや開いているタブ、閲覧履歴などを同期させることも可能です。同期させるのに必要なのは、Googleのアカウントだけ。同期する項目の設定も可能で、とても便利です。
動作が速い
Webブラウザの動作スピードは、Web制作の現場では非常に大切です。なぜならば、WebブラウザのスピードがそのままWeb開発業務の効率化につながるから。
Chromeはその点ではこころ強く、スピードの速いWebブラウザとの評価が高いです。ただその一方で、ややメモリを消費しがちであることは知っておきましょう。
機能拡張ができる
Chromeはそのままでも十分に便利なのですが、拡張機能（エクステンション）を利用することでカスタマイズをすることが可能です。利用できる拡張機能は非常に多く、日々新しい機能が追加されていると言えます。
Web制作に役立つ拡張機能も多く、本稿ではここにフォーカスを絞ってご紹介していきたいと思います。
Web制作者におすすめの拡張機能7選
Chromeの基本が確認できたところで、早速Chromeのおすすめ拡張機能について見ていきましょう。本記事では、Web制作業務が捗る拡張機能に絞ってご紹介していきます。日ごろの開発業務に活かしていただければと思います。
Tag Assistant (by Google)
» Tag Assistant (by Google) – Chrome Web Store
Webページを運営する際に頻繁に使われるのが、タグです。GoogleアナリティクスやGoogleアドワーズ、Googleタグマネージャなど、さまざまなサービスでタグが使われています。そのため、タグの管理は煩雑になりがち。
Tag Assistantはこういった悩みを解決してくれる拡張機能です。Webページに導入されているタグを確認したり、動作していないタグがあればエラーとしてしらせてくれます。
Page Analytics (by Google)
» Page Analytics (by Google) – Chrome Web Store
Googleアナリティクスのアクセス解析データを、Webページ上で確認するための拡張機能です。わざわざGoogleアナリティクスを開かなくてもいいので手間が省けますし、気軽にアクセス状況を確認できるようになるでしょう。
YSlow
YSlowはWebページのパフォーマンスを測ることができる拡張機能です。対象のWebページを、さまざまな視点から評価することができます。
YSlowではさらに、Webページのリソース（CSSやJavaScriptなど）のサイズや容量などをチェックすることもできます。Webページの改善点を洗い出す際にも、役立ってくれることでしょう。
EditThisCookie
» EditThisCookie – Chrome Web Store
WebサイトのCookie（クッキー）が管理できる拡張機能です。Webページで利用されているCookieを閲覧したり、追加、削除、編集、検索などの操作ができるようになります。
WebページのCookie情報は、JSONなどの形式でエクスポートすることも可能です。JSON形式でのインポートも可能で、軽量ながらCookieまわりの開発に役立つ機能が多数備わっています。
ColorZilla
» ColorZilla – Chrome Web Store
Chrome拡張機能として使える、カラーピッカーです。色を調べたい箇所をクリックすることで、その部分のカラーコードをコピーしてくれます。
その他にも、カラーまわりの便利な機能がいくつも使えます。例えば、Webページで使われている色が調べられる解析機能や、CSSのgradientを生成する機能も備わっています。
MeasureIt
» MeasureIt – Chrome Web Store
その名の通り、Webページに表示されているコンテンツのサイズが計測できる拡張機能です。Chrome標準のデベロッパーツールを使う手もありますが、デザイナーや非エンジニアにとっては少しハードルが高いでしょう。MeasureItはページをドラッグするだけで簡単にサイズの計測ができるのでおすすめです。
Awesome Screenshot
» Awesome Screenshot: キャプチャーと注釈 – Chrome Web Store
Webページのスクリーンショットを撮るための拡張機能です。
もちろん、ただ単にスクリーンショットが撮れるだけではありません。例えば、スクリーンに表示されていない部分も含む、ページ全体のキャプチャを撮ることができます。
キャプチャに注釈を付けるなど簡単な編集をすることもできますし、保存先を選ぶこともできます。ローカルに保存をしたり、Googleドライブにエクスポートすることも可能です。
あとがき
Web制作者におすすめのChrome拡張機能についてまとめました。多くの拡張機能は無料で使えますので、開発に使えそうなものがあれば積極的に導入を検討していただければと思います。