Web制作者におすすめなChromeエクステンション7つ

Web制作

2017年04月14日

Web制作者におすすめなChromeエクステンション7つ

Web制作に使えるおすすめのChromeエクステンションを7つまとめてご紹介します。デザイナーやエンジニアの方など、Web制作業務に携わっている方の参考になればと思います。

なお、本稿のテーマであるChrome以外にも、Web制作者に人気のWebブラウザはいくつかあります。有名なところだと、Web制作専門のブラウザであるBliskがあります。Bliskについては本ブログでもご紹介していますので、そちらの記事も参考にしていただければと思います。

» Web制作者専用のブラウザ「Blisk」の特徴と基本的な使い方

Chromeの基礎知識

さて、本題に入る前にChromeについて簡単に復習しておきましょう。

Chromeとは?

Chrome(クローム)とは、ご存じGoogleが提供しているWebブラウザのことです。

Chrome

» パソコン版 Chrome

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)

» Tag Assistant (by Google) – Chrome Web Store

Webページを運営する際に頻繁に使われるのが、タグです。GoogleアナリティクスやGoogleアドワーズ、Googleタグマネージャなど、さまざまなサービスでタグが使われています。そのため、タグの管理は煩雑になりがち。

Tag Assistantはこういった悩みを解決してくれる拡張機能です。Webページに導入されているタグを確認したり、動作していないタグがあればエラーとしてしらせてくれます。

Page Analytics (by Google)

Page Analytics (by Google)

» Page Analytics (by Google) – Chrome Web Store

Googleアナリティクスのアクセス解析データを、Webページ上で確認するための拡張機能です。わざわざGoogleアナリティクスを開かなくてもいいので手間が省けますし、気軽にアクセス状況を確認できるようになるでしょう。

YSlow

YSlow

» YSlow – Chrome Web Store

YSlowはWebページのパフォーマンスを測ることができる拡張機能です。対象のWebページを、さまざまな視点から評価することができます。

YSlowではさらに、Webページのリソース(CSSやJavaScriptなど)のサイズや容量などをチェックすることもできます。Webページの改善点を洗い出す際にも、役立ってくれることでしょう。

EditThisCookie

EditThisCookie

» EditThisCookie – Chrome Web Store

WebサイトのCookie(クッキー)が管理できる拡張機能です。Webページで利用されているCookieを閲覧したり、追加、削除、編集、検索などの操作ができるようになります。

WebページのCookie情報は、JSONなどの形式でエクスポートすることも可能です。JSON形式でのインポートも可能で、軽量ながらCookieまわりの開発に役立つ機能が多数備わっています。

ColorZilla

ColorZilla

» ColorZilla – Chrome Web Store

Chrome拡張機能として使える、カラーピッカーです。色を調べたい箇所をクリックすることで、その部分のカラーコードをコピーしてくれます。

その他にも、カラーまわりの便利な機能がいくつも使えます。例えば、Webページで使われている色が調べられる解析機能や、CSSのgradientを生成する機能も備わっています。

MeasureIt

MeasureIt

» MeasureIt – Chrome Web Store

その名の通り、Webページに表示されているコンテンツのサイズが計測できる拡張機能です。Chrome標準のデベロッパーツールを使う手もありますが、デザイナーや非エンジニアにとっては少しハードルが高いでしょう。MeasureItはページをドラッグするだけで簡単にサイズの計測ができるのでおすすめです。

Awesome Screenshot

Awesome Screenshot

» Awesome Screenshot: キャプチャーと注釈 – Chrome Web Store

Webページのスクリーンショットを撮るための拡張機能です。

もちろん、ただ単にスクリーンショットが撮れるだけではありません。例えば、スクリーンに表示されていない部分も含む、ページ全体のキャプチャを撮ることができます。

キャプチャに注釈を付けるなど簡単な編集をすることもできますし、保存先を選ぶこともできます。ローカルに保存をしたり、Googleドライブにエクスポートすることも可能です。

あとがき

Web制作者におすすめのChrome拡張機能についてまとめました。多くの拡張機能は無料で使えますので、開発に使えそうなものがあれば積極的に導入を検討していただければと思います。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。