WebデザイナーのためのChrome無料拡張機能まとめ BEST25

Pocket

ブラウザ上でWeb制作作業を行うことも多くなってきましたが、拡張機能は揃ってますか?DevToolsしか使っていないという方にはこの記事はまさにおすすめ。便利な拡張機能を使って、効率良くWeb制作をしましょう!

FireFoxを使っているかたは、FireFoxの無料アドオンまとめも合わせてチェック!

Chromeおすすめ拡張機能まとめ 25本

Web Developer
定番のWeb開発ツール。javascriptのオンオフや画像の非表示など多くのことができます。
Web_Developer

Web Developer Checklist
Web開発にやるべきことのチェックリストを作れる拡張機能。タスク一覧が表示されるシンプルなチェックリストです。
Web_Developer_Checklist

Page Ruler
コンテンツのサイズをドラッグ&ドロップで測定できるChrome拡張機能。Webサイトのサムネイルの大きさや、コンテンツの間隔などを測定するときに使ってます。
Page_Ruler

PerfectPixel
こちらはPhotoshopなどでデザインした画像を上から被せて、ブラウザ上のボタンサイズなどを最適化するためのアドオン。デザイン通りの見た目にしたいときに便利。
PerfectPixel_by_WellDoneCode

Validity
現在開いているページをバリデーションできる拡張機能。
Validity

JSONView
JSONデータを見るためのツール。FireFoxでも同じアドオンが提供されています。
JSONView

SourceKit
ブラウザ上で使えるHTMLエディター。TextMate風のデザインで、Dropboxにファイルを保存できるようになっています。
SourceKit

ColorZilla
ページ上のカラーを取得できる拡張機能。参考サイトなどで、どんな色を使ってるのか調べたいときなどに使えます。
ColorZilla

WhatFont
Webページで使用されているフォント情報を取得できる拡張機能。
WhatFont

Google Font Previewer
こちらはGoogleFontのプレビューを見ることができるChrome拡張機能。
Google_Font_Previewer

Palette for Chrome
画像のカラーパレットを自動的に作成してくれる拡張機能。
Palette_for_Chrome

User-Agent Switcher
こちらはユーザーエージェントを変更してくれる拡張機能。数多くの項目の中から選べます。モバイルアプリなどの開発なんかで使えそうです。
User-Agent_Switcher

SEOquake
WebページのSEO解析ができるGoogleChrome拡張機能。Google PageRankやGoogle Indexなど様々な項目について解析できます。
SEOquake

MozBar
こちらもSEO系の拡張機能。検索結果や現在のページにSEO関連の情報を表示してくれます。Web解析をする際は入れておきたいツールですね。
MozBar

CSS Shapes Editor
CSSシェイプを簡単に作れる拡張機能。スクリーンショットでは画像にテキストを回り込ませていますが、このような複雑なシェイプを簡単につくれるようです。
CSS_Shapes_Editor

Awesome Screenshot
こちらはスクリーンショットを撮るときになくてはならない拡張機能。ページの一部や全部のスクリーンショットを撮影できます。
Awesome_Screenshot

Screen Capture
こちらもスクリーンショットを撮影できる拡張機能。
Screen_Capture__by_Google

Image Downloader
この拡張機能は先ほどのスクリーンショットとは違い、ページ上にある画像をダウンロードできるツール。ドラッグ&ドロップでも画像を引っ張ってくることはできますが、こちらは複数の画像を一度にダウンロードできるので便利。
Image_Downloader

IE Tab
Chrome内でIEの表示ができる拡張機能。FireFoxにあるもののChrome版です。
IE_Tab

YSlow
ページテストを行うためのツール。
YSlow

PageSpeed Insights
こちらもページのパフォーマンステストを行うツール。ページの読み込み速度はWeb制作でも重要です。
PageSpeed_Insights

Window Resizer
ブラウザのウィンドウサイズを特定の大きさ(iPhoneサイズなど)に変更してくれるツール。レスポンシブレイアウトのテストにも使えます。
Window_Resizer

Adobe Edge Inspect CC
こちらもレスポンシブデザインやモバイルデバイスでのテストに使える拡張機能。現在表示しているページを手持ちのiPhoneと同期してくれるすごいやつです。
Adobe_Edge_Inspect_CC

Clear Cache
さくっとキャッシュのクリアをしたいときに便利な拡張機能。
Clear_Cache

DevTools Autosave
Chromeでよく使うDevToolsですが、CSSやjavascriptを編集してもファイルに保存することができませんでした。この拡張機能を使うと、ブラウザで編集したものをファイルに保存できます。
DevTools_Autosave