Webデザイナーの作業効率が数倍アップするChrome拡張機能10選

f:id:northgeek:20160414085310j:plain

Web制作においてChromeは欠かせないツールの一つです。

Chromeには拡張機能というものがあり、拡張機能を使うことによってChromeを数段パワーアップさせることができます。

そこで今回は僕がWeb制作を行うときに、重宝しているChrome拡張機能を10個紹介しようと思いますので、ぜひ参考にしてみてください。

ColorPick Eyedropper
Awesome Screenshot
Image Size Info
WhatFont
BuiltWith Technology Profiler
The QR Code Extension
Clear Cache
momentum
Pocket
はてなブックマーク GoogleChrome 拡張
さいごに

ColorPick Eyedropper

Webページの気になった色をワンクリックで抽出出来る大変便利なChrome拡張機能です。ピックアップした色はパレットに保存されるため再度流出する必要がないため、「Eyedropper」は使い勝手がとても良いです。

Eye Dropper - Chrome Web Store

Awesome Screenshot

Weページのキャプチャを撮るのに便利なChrome拡張機能です。選択したエリアのキャプチャだけでなく、自動スクロールしてページの全体をキャプチャすることが出来ます。また、撮ったキャプチャを保存する前に枠線を入れたり、テキストを挿入することができます。

Awesome Screenshot: キャプチャーと注釈 - Chrome ウェブストア

Image Size Info

Webページの画像の情報を取得することができるChrome拡張機能です。画像の大きさ、サイズ、URLなどを取得することができ大変便利です。表示されているサイズと、実際の元画像のサイズを取得できる機能が使い勝手が良いですね。

Image Size Info - Chrome ウェブストア

WhatFont

開いているWebサイトのフォントを教えてくれるChrome拡張機能です。調べたい文字の上にカーソルをのせるだけでOKなのでとても簡単に使うことができます。また、CSSでどのように指定しれいるかも教えてくれて大変重宝しています。

WhatFont - Chrome ウェブストア

BuiltWith Technology Profiler

開いているWebサイトがどんな技術やサービスを使われているのか知ることができるChrome拡張機能です。たとえばプログラミング言語はPHP、CMSはWordPress、サーバーはApacheと言った情報を知ることが出来るプラグインです。また、バックエンドの技術だけではなくてjQueryのプラグイン名などフロントエンド側の技術も知ることができます。

The QR Code Extension

WebサイトのURLをQRコードに変換してくれるChrome拡張機能です。PCで開いているページをスマホで見たいときや、Web制作時にスマホで表示確認したいときなどに活用することができます。スマホでちまちまとURLを入力することがなくなるので意外と便利な拡張機能です。

Clear Cache

1クリックでキャッシュをクリアしてくれるChrome拡張機能です。 ChromeではF5キーで更新されるが、ブラウザキャッシュが強烈に効き過ぎて、再読み込みでも更新されない場合があります。そんなときに1クリックでOKなので便利でよく使います。

Clear Cache - Chrome Web Store

momentum

Chromeのトップ画面をおしゃれな写真にカスタマイズしてくれるChrome拡張機能です。写真は時間帯によって変わるため飽きがこないように工夫されています。また、Google検索にTodoリストを作ることができ、かっこいいだけでなく機能としても大変便利です。

Momentum - Chrome Web Store

Pocket

お気に入りのURLを保存することができる「Pocket」。よくWebページの上下にPocketボタンを設置してあると思いますが、拡張機能を使うことによって設置していないページでもワンクリックで保存することが可能となります。Web制作をしていると気に入ったWebページを保存することがよくあるので、そういうときにPocketがおすすめです。

Save to Pocket - Chrome Web Store