WAB_EARTH

自由を手に入れたい人へ。一緒に世界を見て歩こう。

*

【WEBデザイナー必見!】便利なChromeの拡張機能 Eye Dropper

      2013/10/06

今回はGoogle Chromeの拡張機能で入れることができる「Eye Dropper」を紹介したいと思います!

もうデザイナーの方なら知ってる方も多いかもですが、知らないのなら必見情報です!!
このEye Dropperはどんな拡張機能かというとWEBサイト上の色情報を取得できる機能があります。
アプリケーションでいうスポイトツールですね!スポイトツールをWEB上でつかえるわけです!

私はWEBサイトを作るとき、色の参考になるので色々なサイトの色情報をとったりしてたのですが
今までこの拡張機能の存在を知らなくて、WEB上の色情報を知りたいときには

スクリーンショット → スポイトツールが使えるソフト起動 → スポイトツール → 色のコードGET!!というとてもめんどくさい作業をしてました。。。。

でもこの「Eye Dropper」を入れてからは知りたい色情報を瞬時に知ることができるようになりました!!

ではインストールから説明に入ります!

Chromeのウェブストアを開いてください
https://chrome.google.com/webstore/category/home

ここで検索ボックスに「Eye Dropper」と入力して検索!!
目的の拡張機能を見つけてインストールしてください

インストールが終わると右上にスポイトのようなアイコンがでてきましたね?

スポイト

このアイコンをクリックすると

次のような画面が表示されます
スポイト2

そして色情報を知りたいWEBページを開いて、「Pick color from webpage」というボタンをクリック!

するとスポイトモードになり、カーソル近くに色を表示する□が表示されると思います。
その状態で知りたい色情報のところにカーソルを持っていくと

右下の色情報を表示しているウィンドウで
カラーコードやRGBの値を見ることができます!

色情報をとっておきたい場合は知りたい色情報の上でクリックします。
すると色情報が拡張機能に保管されます。取った色情報を見たいときは右上のスポイトのアイコンをクリックします

スポイト3

取った色が四角の枠内に表示されているので、知りたい色の上にカーソルを持ってくると画像のように下にカラーコードが表示されます!

この便利な拡張機能をうまく使いこなせば、あなたの作業はよりスピーディーになるでしょう!!

WEB上で色情報を知りたいと思った方は是非入れてみてください!

 - 仕事効率化 ,