Web制作者必見!作業効率が格段に上がるChrome拡張機能17選

最終更新日:2021年5月24日

Chromeは拡張機能を活用すれば、さまざまな作業の効率が格段に上がります。
便利さゆえに一度使うとそれなしでは作業する気が起こらなくなるほどです。
Web制作者にぜひ使って欲しい、Web制作の作業効率を上げるChrome拡張機能を17個厳選してお届けします。
ジャンル別に紹介していますので、使ってみたい拡張機能があれば一度試してみてください。

今もらっている年収は高い?低い?

支援実績10年の登録者データを基にした エンジニア・クリエイター専門 年収診断 無料診断START

カラーピッカー(2個)

閲覧しているページで気になる配色があったとき、カラーピッカーを入れているとすぐに色を調べられます。

ColorZilla

Chrome拡張機能「ColorZilla」の画像

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

元々はFirefox向けのアドオンでしたが、Chrome版も用意されています。
調べたい箇所をクリックするだけで、カラーコードをクリップボードにコピーしてくれます。
機能のひとつである「Webpage Color Analyser」は、そのページのCSSで使われている色を一覧表示してくれるので、ページの色分析に役立ちます。

ColorPick Eyedropper

Chrome拡張機能「ColorPick Eyedropper」の画像

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

マウスカーソルを合わせた部分を拡大表示してくれるのが特徴で、細かい部分の配色を調べたいときに便利です。

サイズ計測(3個)

ページ内の幅、高さを計測したいとき、サイズ計測ができる拡張機能を入れておくと作業が捗ります。
Web制作で起こりやすいレイアウトの微調整に必須の拡張機能です。

Page Ruler

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

幅と高さだけでなく、上下左右の位置も計測してくれます。
「Element EMode」をオンにするとdivなどの要素を対象にして計測ができます。

MeasureIt

https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm

幅と高さを計測するだけのシンプルな拡張機能です。

Image Size Info

Chrome拡張機能「Image Size Info」の画像

https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf

右クリックから画像サイズ、ファイルサイズを調べることができる拡張機能です。

サイト解析(7個)

Chromeにはサイトのアクセス解析や分析を助けてくれる拡張機能があります。
アクセス解析やサイトで使用しているサービス・ツールを調べられる拡張機能を入れておくと、自サイトの解析や競合サイトの解析に役立ちます。

Page Analytics (by Google)

Chrome拡張機能「Page Analytics (by Google)」の画像

https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh

アクセス解析ツール「Google Analytics」と連動し、ページ上部にアクセス解析結果を表示してくれます。
ページ内のリンクのクリック率を表示してくれるので、どのリンクがよくクリックされているのか解析するのに役立ちます。

Ghostery

https://chrome.google.com/webstore/detail/ghostery/mlomiejdfkolichcflejclcbmpeaniij?hl=ja

閲覧しているサイトがどんなサービスやツールを使っているのかをチェックできる拡張機能です。
「Google Analytics」や「Pt engine」などのアクセス解析ツール、FacebookやTwitterなどのSNS、「Google AdSense」などのアフィリエイト広告といったそのサイトが使っているサービスやツールを一覧表示してくれます。
タグの埋め込み忘れや、競合サイトの調査に役立つ拡張機能です。

BuiltWith Technology Profiler

Chrome拡張機能「BuiltWith Technology Profiler」の画像

https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn

Apache、WordPress、jQueryなど、閲覧しているサイトがどんな技術を使っているのかを調べることができる拡張機能です。
Webサービス、アクセス解析ツール、ウィジェット、JavaScriptライブラリ、広告など、各項目ごとに解析してくれます。
表示された技術をクリックすると、どれぐらい人気があるのかを教えてくれる機能もあります。

SimilarWeb - Site Traffic Sources and Ranking

Chrome拡張機能「SimilarWeb - Site Traffic Sources and RankingChrome」の画像

https://chrome.google.com/webstore/detail/similarweb-site-traffic-s/hoklmmgfnpapgjgcpechhaamimifchmp

競合サイトのアクセス数などを解析できるツール「SimilarWeb」のChrome拡張機能版です。
Chromeのツールバーから競合サイトの解析がさくっとできるので、Web版を開く手間がかかりません。
数値は100%正確ではないものの、競合サイトを解析したいときに役立ちます。

Social Analytics

https://chrome.google.com/webstore/detail/social-analytics/pgckigmaefoaemjpijdepakcghjkggmg?hl=ja

閲覧しているページがFacebook、Twitter、Google+、PinterestなどのSNSでどれぐらいシェアされているかをツールバーに表示してくれる拡張機能です。

PageSpeed Insights (with PNaCl)

Chrome拡張機能「PageSpeed Insights (with PNaCl)」の画像

https://chrome.google.com/webstore/detail/pagespeed-insights-with-p/lanlbpjbalfkflkhegagflkgcfklnbnh?hl=ja

Googleが提供しているウェブパフォーマンスツール「PageSpeed Insights」のChrome拡張機能版です。
Chromeのデベロッパーツールからサイトの速度解析ができるので、Web版を開く手間が省けます。
インストールするとデベロッパーツールのメニューに「PageSpeed」が追加されるので、そこから解析できます。

YSlow

https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh

サイトパフォーマンス計測ツール「YSlow」のChrome拡張機能版です。
こちらもChromeからサイト速度を計測できるので、表示速度の分析&改善に役立ちます。

スクリーンショット(2個)

ページのスクリーンショットをいちいちExcelや画像編集ソフトで加工するのは面倒ですよね。
スクリーンショットを撮影できる拡張機能を入れておくと、Chrome上で画像編集ができるのでひと手間省けます。

Awesome Screenshot

Chrome拡張機能「Awesome Screenshot」の画像

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

ページのキャプチャを撮影し、Chrome上で図形や文字の注釈を加えることができる拡張機能です。
FacebookやTwitterなどのSNSにワンクリックで共有する機能も備わっています。

FireShot

Chrome拡張機能「FireShot」の画像

https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg

「ページ全体」「表示されている部分」「選択範囲」の3種類からキャプチャの方法を選択できます。
注釈を加える機能はありませんが、PDFとして保存する機能があるのが便利です。

タブ関連の拡張機能(3個)

新規タブをクリーンな状態で開いたり、複数URLをまとめて開いたり、別タブで開くリンクをバックグラウンドで開いたり、タブ操作が便利になる拡張機能を3つご紹介します。

CleanNewTab


https://chrome.google.com/webstore/detail/cleannewtab/cpcmeaaaokbbmnflnglhnobjelaljaia

デフォルトでは新規タブにGoogleの検索窓やよく閲覧するサイトが表示されます。
「CleanNewTab」はそれらの表示を一切なくし、真っ白な状態で新規タブを開いてくれます。
新規タブの表示が不要な方、メモリの消費量を少しでも抑えたい方におすすめです。

Pasty

Chrome拡張機能「Pasty」の画像

https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf

複数のURLをまとめて開いてくれる拡張機能です。
複数URLをまとめてコピーしてChromeのアドレスバーに貼り付けて「Pasty」のアイコンを押すと、各URLのページを一気に開くことができます。
「Copy」ボタンを押せば、逆に開いているWebページのURLを一気にコピーできます。

Force Background Tab

Chrome拡張機能「Force Background Tab」の画像

https://chrome.google.com/webstore/detail/force-background-tab/gidlfommnbibbmegmgajdbikelkdcmcl

リンクにtarget="_blank" が設定してあると、新規タブでページが開きますが、まだそのページで開きたいリンクがあるときや後で見たいときに不便です。
この拡張機能はtarget="_blank" を設定してあるリンクも強制的にバックグラウンドで開いてくれるので、そのページに留まりながらリンクを開くことができます。
アイコンからオン・オフをすぐ切り替えられるので、使いたいときだけオンにするという使い方も便利です。

まとめ

今回紹介したように、カラーピッカー、サイズ計測、サイト解析など、Web制作を助けてくれる拡張機能はたくさんあります。
上手に使いこなせば、作業効率を大幅に向上することも可能です。
すでに使っている拡張機能もあるかと思いますが、「あ、これ知らなかった。使ってみよう」と思った拡張機能をひとつでも見つけていただければ幸いです。

ITエンジニア・Webクリエイターの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。

転職支援サービスに申し込む

また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。

「個別相談会」に申し込む

この記事の監修

レバテックキャリア編集部

レバテックキャリアは、IT/Web業界のエンジニア・クリエイター向けに特化した転職エージェントです。当メディアでは、エンジニア・クリエイターの転職に役立つノウハウから、日々のスキルアップや業務に活かせる情報まで、幅広いコンテンツを発信しています。

プロのアドバイザーがあなたのお悩みや疑問にお答えします

- 転職個別相談会開催中 -

相談内容を選択してください

※転職活動や求人への応募を強制することはありません

関連する記事

人気の求人特集

内定率が高い

Webデザイナーの求人・転職一覧

今もらっている年収は高い?低い?

簡単60秒 エンジニア・クリエイター専門 年収診断 無料診断START ×