スキルアップ記事

レバテックキャリアではIT・Web業界のエンジニア、デザイナーのスキルアップに役立つコンテンツをお届けいたします。
転職に役立つノウハウから、日々のスキルアップや業務で使える記事等幅広く掲載していきます。

転職支援サービスをご希望の方はこちら

拡張機能を使いこなして作業時間を短縮!Web制作者必見!作業効率が格段に上がるChrome拡張機能17選

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

  • このエントリーをはてなブックマークに追加

カラーピッカー(2個)

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

ColorZilla

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

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

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

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

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

サイト解析(7個)

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

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

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

SimilarWeb - Site Traffic Sources and Ranking

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)

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

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

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

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

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

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

Force Background Tab

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

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

まとめ

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

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

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

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

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

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

技術の話ができる転職エージェント。30秒で無料登録!

  • このエントリーをはてなブックマークに追加

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

無料"個別相談会"実施中-平日の夜、土曜も実施しています!-

転職・求人・採用情報を探す

プライバシーマーク

レバテック株式会社は、
「プライバシーマーク」
使用許諾事業者として
認定されています。