読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

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

Webデザイン

f:id:northgeek:20160414085310j:plain

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

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

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

ColorPick Eyedropper

f:id:northgeek:20160411213956j:plain

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

Eye Dropper - Chrome Web Store

Awesome Screenshot

f:id:northgeek:20160413230415j:plain

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

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

Image Size Info

f:id:northgeek:20160413230424j:plain

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

Image Size Info - Chrome ウェブストア

WhatFont

f:id:northgeek:20160412215604j:plain

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

WhatFont - Chrome ウェブストア

BuiltWith Technology Profiler

f:id:northgeek:20160412212221j:plain

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

The QR Code Extension

f:id:northgeek:20160412212914j:plain

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

Clear Cache

f:id:northgeek:20160412221816j:plain

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

Clear Cache - Chrome Web Store

momentum

f:id:northgeek:20160413223909j:plain

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

Momentum - Chrome Web Store

Pocket

f:id:northgeek:20160413224421j:plain

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

Save to Pocket - Chrome Web Store

はてなブックマーク GoogleChrome 拡張

f:id:northgeek:20160412222447j:plain

現在開いているWebページのブックマーク数や、コメントを表示しれくれるChrome拡張機能機能です。はてブがたくさんついているページは基本的に良い記事が多いので、入れておくこと検索したいページの質を知ることができます。

はてなブックマーク GoogleChrome 拡張 - Chrome ウェブストア

さいごに

いかがでしたでしょうか。Webデザイナーの作業効率がアップするChrome拡張機能を10個紹介しました。Webデザイナーの仕事量はとても多いので、こういった機能で少しでも作業をアップするように心がけることをおすすめします。

Copyright© North-Geek All Rights Reserved.